- 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
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Movie</title> <Linkrel= "stylesheet"type= "Text/css"href=".. /static/css/aa.css "></Head><Body> <Divclass= "img"> <ahref= "http://www.360kan.com/m/haTkZBH4QXf1Sh.html"><imgsrc= "Http://p9.qhimg.com/d/dy_7e49149397944084925287b00b6d7720.jpg"alt=""></a> <Divclass= "desc"><ahref= "http://www.360kan.com/m/haTkZBH4QXf1Sh.html">God Steals milk Dad 3</a></Div> </Div> <Divclass= "img"><ahref= "http://www.360kan.com/m/hKPiZRH4QHP7Tx.html"><imgsrc= "Http://n.sinaimg.cn/ent/transform/20170825/N2u_-fykiuex6343198.jpg"alt=""></a> <Divclass= "desc"><ahref= "http://www.360kan.com/m/hKPiZRH4QHP7Tx.html">Battle Wolf 2</a></Div> </Div> <Divclass= "img"> <ahref= "http://www.360kan.com/m/hqPnaRH3S0H2Sx.html"><imgsrc= "Http://ent.chinadaily.com.cn/img/attachement/jpg/site1/20170217/64006a47a4491a109ee53e.jpg"alt=""></a> <Divclass= "desc"><ahref= "http://www.360kan.com/m/hqPnaRH3S0H2Sx.html">Kung Fu Yoga</a></Div> </Div></Div> <Divclass= "AAA"> <ahref= "http://www.360kan.com/m/hqXnaRH4QXf0Sx.html"><imgsrc= "Http://img.67.com/upload/images/2017/05/15/enhuMTQ5NDgwNzM2Ng==_2.jpg"alt=""></a> <ahref= "http://www.360kan.com/m/f6LnYRH4QXr4UR.html"><imgsrc= "Http://n.sinaimg.cn/ent/transform/20170904/XOqx-fykpysa3179399.jpg"alt=""></a> </Div></Body></HTML>
AA.CSS:
img { width:300px; } div.img{ border:1px solid #cccccc; width:180px; Float:left; margin:5px;} Div.img img{ width:100%; Height:auto;} div.desc{ Text-align:center; psdding:5px;} div.img:hover{ border:1px solid #777777;} div.aaa{ Clear:both;}
CSS instance: Picture navigation block