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>漫画</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;
    }

posted on 2017-10-20 21:08 104鲍珊珊阅读(351) 评论(0) 收藏举报

刷新页面返回顶部

0104鲍珊珊

CSS实例：图片导航块

导航

公告