CSS instances: Picture navigation blocks

1. Learn about CSS box models.

Flexible use of the 2.CSS selector.

3. Example:

A. The image text is formed by an HTML file with a div and other elements layout.

B. Create a new CSS file and link to the HTML file.

Defining styles in C.css files

A) div.img:border,margin,width,float

b) Div.img Img:width,height

c) div.desc:text-align,padding

D) Div.img:hover:border

e) div.clearfloat:clear

<! DOCTYPE html>"en">"UTF-8"> <title> pooh Bear </title> <link rel="stylesheet"Type="Text/css"href=".. /static/10/20.css">class="img"> <a href="https://baike.so.com/doc/6087123-6300228.html"> "http://img3.imgtn.bdimg.com/it/u=2952099289,2636148822&fm=27&gp=0.jpg"></a> <div><a href="https://baike.so.com/doc/6087123-6300228.html"> About Winnie </a></div> </div> <div> <divclass="img"> <a href="https://baike.so.com/doc/4326998-4531580.html"> "http://img5.imgtn.bdimg.com/it/u=3265926973,368480266&fm=27&gp=0.jpg"></a> <div><a href="https://baike.so.com/doc/4326998-4531580.html"> Pooh and Honey </a></div></div> <div> <divclass="img"> <a href="http://wenda.so.com/q/1364865961066962?src=150"> "http://img0.imgtn.bdimg.com/it/u=3802820512,3386344086&fm=27&gp=0.jpg";></a> <div><a href="http://wenda.so.com/q/1364865961066962?src=150"> Pooh's friends </a></div></div> <div> <divclass="img"> <a href="http://mp.weixin.qq.com/s?__biz=MzIzMDE5NzAyNg%3D%3D&idx=1&mid=2655984055&sn= 2fc1652e208cd62fe87dc070a137cfea"> "http://img0.imgtn.bdimg.com/it/u=2964627407,3833983721&fm=27&gp=0.jpg"></a> <div><a href="http://mp.weixin.qq.com/s?__biz=MzIzMDE5NzAyNg%3D%3D&idx=1&mid=2655984055&sn= 2fc1652e208cd62fe87dc070a137cfea"> Pooh daily </a></div></div> <divclass="clearfloat"> "http://img3.imgtn.bdimg.com/it/u=2952099289,2636148822&fm=27&gp=0.jpg"> "http://img5.imgtn.bdimg.com/it/u=3265926973,368480266&fm=27&gp=0.jpg"> "http://img0.imgtn.bdimg.com/it/u=3802820512,3386344086&fm=27&gp=0.jpg"> "http://img0.imgtn.bdimg.com/it/u=2964627407,3833983721&fm=27&gp=0.jpg"> </div></body>
img{width:300px; }div.img{Border:1px solid #EEEEEE;width:180px;float: Left;margin:5px; }div.img img{width:100%;Height:Auto; }Div.desc{text-align:Center;padding:5px; }Div.img:hover{Border:2px solid Darkturquoise; }. Clearfloat{Clear:both; }
CSS instances: Picture navigation blocks