CSS实例：图片导航块

时间：2022-04-12 06:17:00
  1. 认识CSS的 盒子模型。
  2. CSS选择器的灵活使用。
  3. 实例:
    1. 图片文字用div等元素布局形成HTML文件。
    2. 新建相应CSS文件，并link到html文件中。
    3. CSS文件中定义样式
      1. div.img：border,margin,width,float
      2. div.img img：width，height
      3. div.desc：text-align,padding
      4. div.img:hover：border
      5. div.clearfloat：clear
        <!DOCTYPE html>
        <html lang="en">
        <head>
        <meta charset="UTF-8">
        <title>Victoria</title>
        <link rel="stylesheet" type="text/css" href="../static/vic.css">
        </head>
        <body>
        <div>
        <div class="img">
        <a href="http://image.so.com/i?src=360pic_strong&z=1&i=2&cmg=5fa9918b43bdd880a720ad048811374f&q=%E5%AE%8B%E8%8C%9C%E7%9A%84%E5%9B%BE%E7%89%87">
        <img src="http://scimg.jb51.net/allimg/160810/103-160Q0193325609.jpg">
        </a>
        <div class="pic"><a href="http://image.so.com/i?src=360pic_strong&z=1&i=2&cmg=5fa9918b43bdd880a720ad048811374f&q=%E5%AE%8B%E8%8C%9C%E7%9A%84%E5%9B%BE%E7%89%87">街拍</a></div>
        </div>
        <div class="img">
        <a href="http://image.so.com/i?src=360pic_strong&z=1&i=2&cmg=5fa9918b43bdd880a720ad048811374f&q=%E5%AE%8B%E8%8C%9C%E7%9A%84%E5%9B%BE%E7%89%87">
        <img src="http://npic7.fangtoo.com/cn/zixun/zh-chs/2017-07/05/263851-201707051347016875.jpg">
        </a>
        <div  class="pic"><a href="http://image.so.com/i?src=360pic_strong&z=1&i=2&cmg=5fa9918b43bdd880a720ad048811374f&q=%E5%AE%8B%E8%8C%9C%E7%9A%84%E5%9B%BE%E7%89%87">杂志</a> </div>
        </div>
        <div class="img">
        <a href="http://image.so.com/i?src=360pic_strong&z=1&i=2&cmg=5fa9918b43bdd880a720ad048811374f&q=%E5%AE%8B%E8%8C%9C%E7%9A%84%E5%9B%BE%E7%89%87">
        <img src="http://p2.so.qhimgs1.com/bdr/_240_/t018d7e85116d27c882.jpg">
        </a>
        <div  class="pic"><a href="http://image.so.com/i?src=360pic_strong&z=1&i=2&cmg=5fa9918b43bdd880a720ad048811374f&q=%E5%AE%8B%E8%8C%9C%E7%9A%84%E5%9B%BE%E7%89%87">活动</a> </div>
        </div>
        <div class="img">
        <a href="http://image.so.com/i?src=360pic_strong&z=1&i=2&cmg=5fa9918b43bdd880a720ad048811374f&q=%E5%AE%8B%E8%8C%9C%E7%9A%84%E5%9B%BE%E7%89%87">
        <img src="http://p2.so.qhimgs1.com/bdr/_240_/t015ebccf8aa6ab3eee.jpg">
        </a>
        <div  class="pic"><a href="http://image.so.com/i?src=360pic_strong&z=1&i=2&cmg=5fa9918b43bdd880a720ad048811374f&q=%E5%AE%8B%E8%8C%9C%E7%9A%84%E5%9B%BE%E7%89%87">舞台</a> </div>
        </div>


        </div>
        <div class="clearfloat">
        <img src="http://scimg.jb51.net/allimg/160810/103-160Q0193325609.jpg">
        <img src="http://npic7.fangtoo.com/cn/zixun/zh-chs/2017-07/05/263851-201707051347016875.jpg">
        <img src="http://p2.so.qhimgs1.com/bdr/_240_/t018d7e85116d27c882.jpg">
        <img src="http://p2.so.qhimgs1.com/bdr/_240_/t015ebccf8aa6ab3eee.jpg">
        </div>

        </body>
        </html>
        img{
            width        : 300px;
        }
        div.img        {
            border        : 1px solid plum;
            width        : 200px;
            float        : left;
            margin        : 5px;
        }
        div.img img        {
            width        : 100%;
            height        : auto;
        }
        .pic        {
            text-align        : center;
            padding        : 5px;
        }
        div.img:hover        {
            border        : 1px solid deeppink;
        }
        .clearfloat        {
            clear        : both;
        }

        CSS实例：图片导航块

         

标签：

相关文章