CSS实例:图片导航块

时间:2022-07-08 05:29:31
  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>漫画</title>
        <link rel="stylesheet" type="text/css" href="../static/css/manhua.css">
        </head>
        <body>

        <div>
        <div class="katong">
        <a href="https://baike.baidu.com/item/%E5%A4%A9%E7%A9%BA%E4%B9%8B%E5%9F%8E/6298?fr=aladdin" >
        <img src="https://gss1.bdstatic.com/-vo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike150%2C5%2C5%2C150%2C50/sign=bd7d3d834734970a537e187df4a3baad/50da81cb39dbb6fd47c8108a0f24ab18962b378e.jpg" width="300" height="200"></a>
        <div class="desc"><a href="https://baike.baidu.com/item/%E5%A4%A9%E7%A9%BA%E4%B9%8B%E5%9F%8E/6298?fr=aladdin">天空之城</a></div>
        </div>
        <div class="katong">
        <a href="https://baike.baidu.com/item/%E4%BD%A0%E7%9A%84%E5%90%8D%E5%AD%97%E3%80%82/19127928?fromtitle=%E4%BD%A0%E7%9A%84%E5%90%8D%E5%AD%97&fromid=19126915&fr=aladdin">
        <img src="https://gss0.bdstatic.com/94o3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike220%2C5%2C5%2C220%2C73/sign=0000a3f3583d26973ade000f3492d99e/242dd42a2834349ba3d7f0bcc0ea15ce36d3be32.jpg" width="300" height="200"></a>
        <div class="desc"><a href="https://baike.baidu.com/item/%E4%BD%A0%E7%9A%84%E5%90%8D%E5%AD%97%E3%80%82/19127928?fromtitle=%E4%BD%A0%E7%9A%84%E5%90%8D%E5%AD%97&fromid=19126915&fr=aladdin">你的名字</a></div>
        </div>
        <div class="katong">
        <a href="https://baike.baidu.com/item/%E5%93%86%E5%95%A6A%E6%A2%A6%EF%BC%9A%E4%BC%B4%E6%88%91%E5%90%8C%E8%A1%8C/13845055?fr=aladdin">
        <img src="https://gss0.bdstatic.com/-4o3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike220%2C5%2C5%2C220%2C73/sign=e1f375ca56da81cb5aeb8b9f330fbb73/aec379310a55b319a7591f4b44a98226cffc176f.jpg" width="300" height="200"></a>
        <div class="desc"><a href="https://baike.baidu.com/item/%E5%93%86%E5%95%A6A%E6%A2%A6%EF%BC%9A%E4%BC%B4%E6%88%91%E5%90%8C%E8%A1%8C/13845055?fr=aladdin">哆啦A梦</a></div>
        </div>
        </div>
        <div class="clearfloat">
        <img src="http://p0.so.qhimgs1.com/t01b0bcf7da772c3e8c.jpg" width="500" height="500">
        <img src="http://img2.duitang.com/uploads/item/201209/13/20120913194546_uVByJ.thumb.600_0.jpeg" width="500" height="500">

        </div>
        </body>
        </html
            div.katong{
        border
        :2px solid #999999;/*设置盒子的边框线条*/
        width
        : 300px;
        float
        :left;/*设置浮动对象,往左边靠拢*/
        margin
        :5px;/*设置边框之间的距离*/
        }
        div.katong.img
        {
        width
        : 100%;
        height
        : auto;
        }
        div.desc
        {
        font-size
        : 150%;
        text-align
        : center;/*设置文字居中*/
        padding
        :5px; /*设置文字距离边框的宽度*/
        }

        /*设置鼠标移动到边框的反应*/
        .img:hover
        {
        border
        :2px solid #ffff33;
        }
        div.clearfloat
        {
        clear
        : left;
        }

        CSS实例:图片导航块