CSS instances: Picture navigation blocks

2. Recognize the CSS box model.
4. The flexible use of CSS selectors.
5. Instance:
   2. The image text is formed by an HTML file with div and other element layouts.
   4. Create a new CSS file and link to the HTML file.
   5. Style defined in CSS file
      2. Div.img:border,margin,width,float
      4. Div.img Img:width,height
      6. Div.desc:text-align,padding
      8. Div.img:hover:border
      9. Div.clearfloat:clear

         F-8"><title>img</title> <link rel="stylesheet"Type="Text/css"href="Hh.css">class="OOP"> <divclass="img"> <a href="http://movie.com">  <divclass="desc"><a href="http://movie.com"> Sci-fi movies </a></div> </div> <divclass="img"> <a href="http://.com">  <divclass="desc"><a href="http://jianshu.com"> TV </a></div> </div> <divclass="img"> <a href="http://school.com"> "Http://www.jmsjs.com/files/1207/gaozhizhaosheng/%B6%E0%B2%CA%D0%A3%D4%B0/%B6%E0%B2%CA%D0%A3%D4%B0/20%B9%FA %c6%ec%bb%a4%ce%c0%b6%d3_%b5%f7%d5%fb%b4%f3%d0%a1.jpg"> <divclass="desc"><a href="http://jianshu.com"> Campus style </a></div> </div> <divclass="img"> <a href="http://cartoon.com"> "http://p2.so.qhimgs1.com/t019a5fd71bd7e4398e.jpg"></a> <divclass="desc"><a href="http://jianshu.com"> Anime Pictures </a></div> </div>

         img{            width:300px;        } div.img{     #CCCCCC;      width:180px;     Float:left;     margin:5px; } div.img img{     100%;     Height:auto; } div.desc{     text-align:center;     padding:5px; } div.img:hover{     #111111; }

CSS instances: Picture navigation blocks