使用css+HTML+div制作图片浮动并列案例

最新推荐文章于 2024-05-24 18:21:52 发布

原创最新推荐文章于 2024-05-24 18:21:52 发布 · 1.5k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#css #html

本文通过CSS和HTML的div元素，详细讲解如何创建一个图片并列浮动的效果，展示了一种网页布局技巧。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* div1 用于控制显示的位置*/
.div1 {
width:500px;
height:300px;
border:1px solid #b4b4b4;
margin-left:100px;
margin-top:20px;
}
/*faceul 用于控制显示图片区域的宽度和高度  */
.faceul{
width:350;
height:250px;
border:1px solid red;
padding:0;/*div距离左边距为0*/
}
/*这个用于控制单个图片区域的大小*/
.faceul li
{
width:60px;
height:80px;
border:1px solid blue;
list-style-type:none;/*将li前的小圆点去除*/
float:left;/*左浮动*/
margin-left:15px;/*设置图片与div边框的距离*/
margin-top:10px;
}
/*控制图片的位置和大小*/
.faceul img{
width:55px;
margin-left:2px;
margin-top:2.5px；
}
/*控制<a>中字体的大小和位置*/
.faceul a{
font-size:9pt;
margin-left:8px;
margin-bottom:2px;
}
/*控制超链接字体样式*/
a:link{
text-decoration:none;/*将超链接字体下划线去除*/
color:black;
}
/*在鼠标经过时出现下划线和改变字体颜色*/
a:hover{
text-decoration:underline;/*将超链接字体下划线去除*/
color:blue;
}
</style>
</head>
<body>
<div class="div1">
<ul class="faceul">
<li>
<img src="C:\Users\小强\Desktop\练习\image\bb.jpg">
<a href="#">小龙女</a>
</li>
<li>
<img src="C:\Users\小强\Desktop\练习\image\bb.jpg">
<a href="#">小龙女</a>
</li>
<li>
<img src="C:\Users\小强\Desktop\练习\image\bb.jpg">
<a href="#">小龙女</a>
</li>
<li>
<img src="C:\Users\小强\Desktop\练习\image\bb.jpg">
</li>
<li>
<img src="C:\Users\小强\Desktop\练习\image\bb.jpg">
</li>
<li>
<img src="C:\Users\小强\Desktop\练习\image\bb.jpg">
</li>
<li>
<img src="C:\Users\小强\Desktop\练习\image\bb.jpg">
</li>
</ul>
</div>
</body>
</html>