- 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>DJI drone</title> <Linkrel= "stylesheet"type= "Text/css"href=".. /static/css/wh.css "></Head><Body> <Div> <Divclass= "img"> <ahref= "HTTP://WWW.DJI.COM/CN"> <imgsrc= "Https://img14.360buyimg.com/n7/jfs/t5977/17/185587587/108108/247ade15/5925b821N32b8bb9a.jpg"></a> <Divclass= "desc"><ahref= "HTTP://WWW.DJI.COM/CN">DJI "Xiao" Spark</a></Div> </Div> <Divclass= "img"> <ahref= "HTTP://WWW.DJI.COM/CN"> <imgsrc= "Https://img10.360buyimg.com/n7/jfs/t3232/65/6215650755/81612/3a052265/58a27e59N05fb5fc2.jpg" ></a> <Divclass= "desc"><ahref= "HTTP://WWW.DJI.COM/CN">DJI "Elf" Phantom</a></Div> </Div> <Divclass= "img"> <ahref= "HTTP://WWW.DJI.COM/CN"> <imgsrc= "Https://img14.360buyimg.com/n7/jfs/t4012/34/459557656/48075/11cf82d3/584fcc5cN056eb123.jpg" ></a> <Divclass= "desc"><ahref= "HTTP://WWW.DJI.COM/CN">DJI "Imperial" Mavic Pro</a></Div> </Div> <Divclass= "img"> <ahref= "HTTP://WWW.DJI.COM/CN"> <imgsrc= "Https://img10.360buyimg.com/n7/jfs/t2278/130/1443161174/71119/87b96780/565edd23N23d203bc.jpg"></a> <Divclass= "desc"><ahref= "HTTP://WWW.DJI.COM/CN">The Inspire of "enlightenment" of the great Xinjiang</a></Div> </Div></Div><Divclass= "Clearfloat"> <imgsrc= "Https://img14.360buyimg.com/n7/jfs/t5977/17/185587587/108108/247ade15/5925b821N32b8bb9a.jpg"> <imgsrc= "Https://img10.360buyimg.com/n7/jfs/t3232/65/6215650755/81612/3a052265/58a27e59N05fb5fc2.jpg"> <imgsrc= "Https://img14.360buyimg.com/n7/jfs/t4012/34/459557656/48075/11cf82d3/584fcc5cN056eb123.jpg"> <imgsrc= "Https://img10.360buyimg.com/n7/jfs/t2278/130/1443161174/71119/87b96780/565edd23N23d203bc.jpg"></Div></Body>>
img{width:250px;Height:250px;}div.img{Border:1px solid Black;width:300px;Height:300px;float: Left;margin:5px;}div.img img{width:100%;Height:80%;}Div.desc{text-align:Center;padding:5px;}Div.img:hover{Border:2px solid Cornflowerblue;}. Clearfloat{Clear:both;}
CSS instances: Picture navigation blocks