- Recognize the CSS box model.
- The flexible use of CSS selectors.
- Instance:
- The image text is formed by an HTML file with div and other element layouts.
- Create a new CSS file and link to the HTML file.
- Style defined in CSS file
- Div.img:border,margin,width,float
- Div.img Img:width,height
- Div.desc:text-align,padding
- Div.img:hover:border
- Div.clearfloat:clear
20171020.html
<! DOCTYPE html>"en">"UTF-8"> <title> King of Thieves </title> <link rel="stylesheet"Type="Text/css"href=".. /static/css/1020.css">class="recommend"> <divclass="img"> <a href="Http://mp.weixin.qq.com/s/Z9FcpbJ2us6HFVgi_47T2A">"http://mmbiz.qpic.cn/mmbiz_jpg/ Mxjfq4ibkebxxrusyffkocz7oqsczg3dubtos4rkhgehpnywopgeplocwfvtrcr8v2mjccqnyaokhvitbn5wuow/640?wx_fmt=jpeg&tp =webp&wxfrom=5&wx_lazy=1"alt=""> </a> <divclass="desc"><a href="Https://item.btime.com/43t4np34u1c9bmbrgn9q7s1kqeh"> Road Fly </a></div> </div> <divclass="img"> <a href="Http://mp.weixin.qq.com/s/Z9FcpbJ2us6HFVgi_47T2A">"http://mmbiz.qpic.cn/mmbiz_jpg/ mxjfq4ibkebxxrusyffkocz7oqsczg3dum57edfyngnfyqjiclqlt8fsorleapzlcic0rpba5xjzmndexj2oxwma/640?wx_fmt=jpeg& Tp=webp&wxfrom=5&wx_lazy=1"alt=""> </a> <divclass="desc"><a href="Https://item.btime.com/43t4np34u1c9bmbrgn9q7s1kqeh"> Women </a></div> </div> <divclass="img"> <a href="Http://mp.weixin.qq.com/s/Z9FcpbJ2us6HFVgi_47T2A">"http://mmbiz.qpic.cn/mmbiz_jpg/ Mxjfq4ibkebxxrusyffkocz7oqsczg3dulaouy35mvxmjqej5jk2ic5yx7pgickic9cumlwhiggrtl3zsfyteribcrg/640?wx_fmt=jpeg &tp=webp&wxfrom=5&wx_lazy=1"alt=""> </a> <divclass="desc"><a href="Https://item.btime.com/43t4np34u1c9bmbrgn9q7s1kqeh"> Ace </a></div> </div> <divclass="img"> <a href="Http://mp.weixin.qq.com/s/Z9FcpbJ2us6HFVgi_47T2A">"http://mmbiz.qpic.cn/mmbiz_jpg/ Mxjfq4ibkebxxrusyffkocz7oqsczg3du7ekujzexvhepbib30yxpxhiah1mia7kqrnp5smhgo9aobubkdzofzwzfg/640?wx_fmt=jpeg &tp=webp&wxfrom=5&wx_lazy=1"alt=""> </a> <divclass="desc"><a href="Https://item.btime.com/43t4np34u1c9bmbrgn9q7s1kqeh"> Luo </a></div> </div> <divclass="img"> <a href="Http://mp.weixin.qq.com/s/Z9FcpbJ2us6HFVgi_47T2A">"http://mmbiz.qpic.cn/mmbiz_jpg/ mxjfq4ibkebxxrusyffkocz7oqsczg3dur30kibuujpspnskubyjcbgk6rzcfzic5zkgvclbcepdpgbyct21e30iq/640?wx_fmt=jpeg& Tp=webp&wxfrom=5&wx_lazy=1"alt=""> </a> <divclass="desc"><a href="Https://item.btime.com/43t4np34u1c9bmbrgn9q7s1kqeh"> Robin </a></div> </div> <divclass="img"> <a href="Http://mp.weixin.qq.com/s/Z9FcpbJ2us6HFVgi_47T2A">"http://mmbiz.qpic.cn/mmbiz_jpg/ Mxjfq4ibkebxxrusyffkocz7oqsczg3duyxreyy0cficrrlqkcias8ewwtf0ypc4teodqg7ueelytfxhfhhiagmsiw/640?wx_fmt=jpeg &tp=webp&wxfrom=5&wx_lazy=1"alt=""> </a> <divclass="desc"><a href="Https://item.btime.com/43t4np34u1c9bmbrgn9q7s1kqeh"> Cargill </a></div> </div></div><divclass="Clearfolat"> "http://mmbiz.qpic.cn/mmbiz_jpg/ mxjfq4ibkebxxrusyffkocz7oqsczg3dutb5otqr7ureeh4wqnnattaanyzvjkpiaik8e6ozbh57ngecbeb8vbxg/640?wx_fmt=jpeg& Tp=webp&wxfrom=5&wx_lazy=1"alt=""><br> "http://mmbiz.qpic.cn/mmbiz_jpg/ Mxjfq4ibkebxxrusyffkocz7oqsczg3duxts1cjm4ib05eopzqicc9vvbhljjwlzkw5yhghjo3k1asak8qyaxfuiaa/640?wx_fmt=jpeg &tp=webp&wxfrom=5&wx_lazy=1"alt=""><br> "http://mmbiz.qpic.cn/mmbiz_jpg/ mxjfq4ibkebxxrusyffkocz7oqsczg3dubicn9s7gjqfiao4fzldk9ldvzcawrwtnst7kgasrxfg6ussp3cpl8m8w/640?wx_fmt=jpeg& Tp=webp&wxfrom=5&wx_lazy=1"alt=""><br> "http://mmbiz.qpic.cn/mmbiz_jpg/ Mxjfq4ibkebxxrusyffkocz7oqsczg3du6ib8dgw1r3tic0ptcgqws4f80ifgicgipoomjtj7gmu1sciad753sxe6a/640?wx_fmt=jpeg &tp=webp&wxfrom=5&wx_lazy=1"alt=""><br></div></body>1020.css
img{ width:100px; } div.img{ #CCCCCC; width:180px; Float:left; margin:5px; } Div.img img{ width:100%; Height:auto; } div.desc{ Text_align:center; padding:5px; } div.img:hover{ #000000; } div.clearfolat{ clear:both; }
Operation Result:
CSS instances: Picture navigation blocks