CSS实例：图片导航块

认识CSS的盒子模型。
CSS选择器的灵活使用。
实例:
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

lin.css

img {
    width: 400px; /*设置图片的大小*/
}

div.sa {
    border-style: solid; /*设置边距线条格式*/
    border-width: 5px; /*设置边距线条大小*/
    border-color: gold; /*设置边距线条颜色*/
    width: 400px; /*盒子大小*/
    float: left; /*向左浮动*/
    margin: 5px; /*设置外边距*/
}

div.sa img {
    width: 100%; /*设置盒子内容的缩放*/
    heigh: aute; /*aute是自动对齐格式*/
}

div.st {
    text-align: center;
    padding: 2px; /*设置内边距*/
}

div.sa:hover {
    border-style: solid;
    border-width: 5px;
    border-color: green;
}  /*设置鼠标经过时产生的变化*/

lin.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="../static/css/lin.css">
</head>
<body>
<div>
    <div class="sa">
        <a href="http://desk.zol.com.cn/"><img
                src="http://desk.fd.zol-img.com.cn/t_s1920x1080c5/g5/M00/0F/06/ChMkJlfI162IeK07AAY_egKaTWoAAU6qQHhDUcABj-S342.jpg"></a>
        <div class="st"><a href="http://desk.zol.com.cn/">爱宠大机密1</a></div>
    </div>
    <div class="sa">
        <a href="http://desk.zol.com.cn/"><img
                src="http://desk.fd.zol-img.com.cn/t_s1920x1080c5/g5/M00/0F/06/ChMkJlfI17KIHB_fAAMRJQRdoxQAAU6qQIhsoEAAxE9307.jpg"></a>
        <div class="st"><a href="http://desk.zol.com.cn/">爱宠大机密2</a></div>
    </div>
    <div class="sa">
        <a href="http://desk.zol.com.cn/"><img
                src="http://desk.fd.zol-img.com.cn/t_s1920x1080c5/g5/M00/0F/06/ChMkJlfI15yIFHF8AANwCMns-CoAAU6qQFNDZMAA3Ag386.jpg"></a>
        <div class="st"><a href="http://desk.zol.com.cn/">爱宠大机密3</a></div>
    </div>
    <div class="sa">
        <a href="http://desk.zol.com.cn/"><img
                src="http://desk.fd.zol-img.com.cn/t_s1920x1080c5/g5/M00/0F/06/ChMkJ1fI18uIPl4SAAH7nIUWw9wAAU6qQKoXZ4AAfu0026.jpg"></a>
        <div class="st"><a href="http://desk.zol.com.cn/">爱宠大机密4</a></div>
    </div>
</div>
</body>
</html>

posted on 2017-10-20 15:30 L文斌阅读(210) 评论(0) 编辑收藏举报