CSS实例：图片导航块

最新推荐文章于 2019-05-30 10:38:00 发布

devn1984

最新推荐文章于 2019-05-30 10:38:00 发布

阅读量95

点赞数

原文链接：http://www.cnblogs.com/kebibrany/p/7701019.html

版权

1、认识CSS的盒子模型。

2、CSS选择器的灵活使用。

3、实例:

1.图片文字用div等元素布局形成HTML文件。

2.新建相应CSS文件，并link到html文件中。

CSS文件中定义样式

1.div.img：border,margin,width,float

2.div.img img：width，height

3.div.desc：text-align,padding

div.img:hover：borderdiv.clearfloat：clear

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
 <link rel="stylesheet" type="text/css" href="../aa/css/1.css">
</head>
<body>
<div>
    <div class="img">
        <a href="http://www.baidu.cn/">
         <img src="http://p3.so.qhimgs1.com/bdr/_240_/t015a62ea10ce841183.jpg"></a>
        <div><a href="http://www.baidu.cn/">阿斯顿马丁</a></div>
    </div>
      <div class="img">
        <a href="http://www.baidu.cn/">
         <img src="http://p2.so.qhimgs1.com/bdr/_240_/t014017698c50318c42.jpg"></a>
        <div><a href="http://www.baidu.cn/">雪佛兰</a></div>
    </div>
       <div class="img">
        <a href="http://www.baidu.cn/">
         <img src="http://p5.so.qhimgs1.com/bdr/_240_/t01d01aca9f5db2159b.jpg"></a>
        <div><a href="http://www.baidu.cn/">兰博基尼</a></div>
    </div>
        <div class="img">
        <a href="http://www.baidu.cn/">
         <img src="http://p5.so.qhimgs1.com/bdr/_240_/t01fb87f1928a69d5eb.jpg"></a>
        <div><a href="http://www.baidu.cn/">奔驰</a></div>
    </div>
</div>
<img src="http://p3.so.qhimgs1.com/bdr/_240_/t015a62ea10ce841183.jpg">
<img src="http://p2.so.qhimgs1.com/bdr/_240_/t014017698c50318c42.jpg">
<img src="http://p5.so.qhimgs1.com/bdr/_240_/t01d01aca9f5db2159b.jpg">
<img src="http://p5.so.qhimgs1.com/bdr/_240_/t01fb87f1928a69d5eb.jpg">
</body>
</html>

img{
    width: 300px;
    height: 150px;
}
div.img{
    border: 1px solid black;
    width: 300px;
    height: 300px;
    float: left;
    margin: 5px;
}
div.img img{
    width: 100%;
    height: 90%;
}
div.desc{
    text-align: center;
    padding: 5px;
}
div.img:hover{
    border: 2px solid cornflowerblue;
}
.clearfloat{
    clear:both;
}

转载于:https://www.cnblogs.com/kebibrany/p/7701019.html

devn1984

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS实例：图片导航块

1、认识CSS的盒子模型。2、CSS选择器的灵活使用。3、实例:1.图片文字用div等元素布局形成HTML文件。2.新建相应CSS文件，并link到html文件中。CSS文件中定义样式1.div.img：border,margin,width,float2.div.img img：width，height3.div.desc：text-align,pad...
复制链接

扫一扫