CSS实例：图片导航块

认识CSS的 盒子模型。
CSS选择器的灵活使用。
实例:
图片文字用div等元素布局形成HTML文件。
新建相应CSS文件，并link到html文件中。
CSS文件中定义样式
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>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>img</title>
    <link rel="stylesheet" type="text/css" href="../static/css/10.20.css">

</head>
<body>
          <div class="mu">
              <div class="img">
                  <a href="http://jianshu.com">
                      <img src="//upload-images.jianshu.io/upload_images/6899096-2623e92e30b7985d.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/300/h/240"></a>
                  <div class="desc"><a href="http://jianshu.com">短篇小说</a></div>
              </div>
              <div class="img">
                  <a href="http://jianshu.com">
                      <img src="//upload-images.jianshu.io/upload_images/8517967-bf6261feff96cda3.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/300/h/240"></a>
                  <div class="desc"><a href="http://jianshu.com">简书电影</a></div>
              </div>
              <div class="img">
                  <a href="http://jianshu.com">
                      <img src="//upload-images.jianshu.io/upload_images/3156747-81f32f0328088b57.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/300/h/240"></a>
                  <div class="desc"><a href="http://jianshu.com">城市故事</a></div>
              </div>
              <div class="img">
                  <a href="http://jianshu.com">
                      <img src="//upload-images.jianshu.io/upload_images/6464630-c802c660c7172814.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/300/h/240"></a>
                  <div class="desc"><a href="http://jianshu.com">手绘</a></div>
              </div>

          </div >
          <div class="clearfloat">
          <img src="//upload-images.jianshu.io/upload_images/6899096-2623e92e30b7985d.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/300/h/240"><br>
          <img src="//upload-images.jianshu.io/upload_images/8517967-bf6261feff96cda3.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/300/h/240"><br>
          <img src="//upload-images.jianshu.io/upload_images/3156747-81f32f0328088b57.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/300/h/240"><br>
          <img src="//upload-images.jianshu.io/upload_images/6464630-c802c660c7172814.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/300/h/240"><br>
           </div>
</body>
</html>
 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;
     padding: 5px;
 }
 div.img:hover{
     border: 1px solid #111111;
 }
 div.clearfloat{
     clear: both;
 }

posted on 2017-10-20 09:50  张木清  阅读(180)  评论(0)  编辑  收藏  举报

导航