img{margin-right:10px;background:url(http://img1.sycdn.imooc.com//5385ac820001905201440133.jpg);padding:1px 20px 37px 30px;}
2016-04-09
這個(gè)其實(shí)就是對(duì)每一部分用三個(gè)類寫三個(gè)css,然后設(shè)置三個(gè)按鈕,綁定不同的事件,通過增加類,刪除類就可以做到
2016-04-08
img{
background:url(http://img1.sycdn.imooc.com//5385ac820001905201440133.jpg); width:95px;height:95px;
padding:1px 20px 37px 30px;margin-right:10p;
}
background:url(http://img1.sycdn.imooc.com//5385ac820001905201440133.jpg); width:95px;height:95px;
padding:1px 20px 37px 30px;margin-right:10p;
}
2016-04-06
拿到設(shè)計(jì)圖,總的原則是根據(jù)內(nèi)容劃分邏輯塊,
先粗分:上中下,
再細(xì)分:左中右,
然后再根據(jù)具體的內(nèi)容劃分一個(gè)一個(gè)的小塊,
(感覺嵌套三層足矣;)
然后再由HTML的內(nèi)容,根據(jù)語義化選擇合適的標(biāo)簽填充(標(biāo)簽越少越好,極簡(jiǎn)主義),
然后再設(shè)置樣式,通過樣式排版,真正做到結(jié)構(gòu)和表現(xiàn)相分離。
[ 收起全文 ]
先粗分:上中下,
再細(xì)分:左中右,
然后再根據(jù)具體的內(nèi)容劃分一個(gè)一個(gè)的小塊,
(感覺嵌套三層足矣;)
然后再由HTML的內(nèi)容,根據(jù)語義化選擇合適的標(biāo)簽填充(標(biāo)簽越少越好,極簡(jiǎn)主義),
然后再設(shè)置樣式,通過樣式排版,真正做到結(jié)構(gòu)和表現(xiàn)相分離。
[ 收起全文 ]
2016-04-03
padding的作用是把盒子內(nèi)容區(qū)域擴(kuò)大以正常的顯示背景圖片,如果內(nèi)容只有一個(gè)img,那背景圖片就被擋住了看不見。畢竟盒子的大小是根據(jù)內(nèi)容來的,背景又只位于內(nèi)容的下方,是無法撐開盒子的。
2016-04-03
img{
width:95px;
height:95px;
background:url(http://img1.sycdn.imooc.com//5385ac820001905201440133.jpg);
padding:1px 20px 37px 30px;
margin-right:10px;
}
width:95px;
height:95px;
background:url(http://img1.sycdn.imooc.com//5385ac820001905201440133.jpg);
padding:1px 20px 37px 30px;
margin-right:10px;
}
2016-04-03