CSS实例：图片导航块

时间：2021-08-27 05:29:14
  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

 

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>

CSS实例：图片导航块

 
标签：

相关文章