HTML——制作一个图片列表
2024-08-24 12:53:23
总结:
1)html有很多默认样式,然而实际应用中并不需要,因此要在制作样式之前清除掉默认样式。
2)注意清除margin-top塌陷
3)使用float:left后要使用clear:both清除其影响
4)注意要兼容IE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片列表布局</title>
<style type="text/css">
body,ul,h3{
/*清除默认格式中的margin 和 padding*/
margin:0;
padding:0;
}
ul{
/*清除ul默认格式中的.*/
list-style: none;
}
/*清除margin-top塌陷*/
.clearfix:before,.clearfix:after{
content:"";
display:table;
}
/*清除浮动*/
.clearfix:after{
clear:both;
}
/*兼容IE*/
.clearfix{
zoom:1;
} .pic_list_con{
width:958px;
border:1px solid #ddd;
/*多出来的ul要剪掉*/
overflow:hidden;
}
.pic_list_con h3{
width:918px;
height:50px;
border-bottom: 1px solid #ddd;
/*是h3居中,不是h3中的文字居中哦!*/
margin:0 auto;
}
.pic_list_con h3 span{
/*内联元素转为内联块元素,支持全部样式*/
display:inline-block;
height:50px;
border-bottom: 2px solid red;
font: 18px/50px 'Microsoft YaHei UI';
padding:0 15px;
}
.pic_list_con ul{
width: 950px;
margin:20px 0 13px 20px;
}
.pic_list_con ul li{
width:160px;
height:68px;
/*多个div在一个页面上,默认情况是:一行一个div,但是只要在div的css中使用
float:left,可以使一行有多个div,这样可以把网页划分成很多块,
但是使用该属性会影响后面的元素,所有如果后面的div不想再被影响,
可以使用clear:both;
可以理解为清除float:left和float:right的影响,返回到默认状态。*/
float:left;
margin:0 29px 25px 0;
}
</style>
</head>
<body>
<div class="pic_list_con">
<h3><span>图片展示</span></h3>
<ul class="clearfix">
<li><a href=""><img src="data:images/0031.jpg" alt="商品图片"></a></li>
<li><a href=""><img src="data:images/0031.jpg" alt="商品图片"></a></li>
<li><a href=""><img src="data:images/0031.jpg" alt="商品图片"></a></li>
<li><a href=""><img src="data:images/0031.jpg" alt="商品图片"></a></li>
<li><a href=""><img src="data:images/0031.jpg" alt="商品图片"></a></li>
<li><a href=""><img src="data:images/0031.jpg" alt="商品图片"></a></li>
<li><a href=""><img src="data:images/0031.jpg" alt="商品图片"></a></li>
<li><a href=""><img src="data:images/0031.jpg" alt="商品图片"></a></li>
<li><a href=""><img src="data:images/0031.jpg" alt="商品图片"></a></li>
<li><a href=""><img src="data:images/0031.jpg" alt="商品图片"></a></li>
</ul>
</div> </body>
</html>
效果图:
最新文章
- git 行动指南
- web前端
- Shell--用户配置
- 【开源】LLMAnimator 60多种动画让你的应用动起来
- eclipse基础及开发插件
- Direct3D11学习:(三)Direct3D11初始化
- javascript_获取iframe框架中元素节点的属性值
- XCode6之后预编译文件的创建
- Codeforces Round #215 (Div. 1) B. Sereja ans Anagrams 匹配
- 【思路、优化】UVa 11491 - Erasing and Winning
- oracle10 权限角色
- Spring Boot 入门概念介绍
- html5游戏开发--";动静";结合用地图块拼成大地图 &; 初探lufyl
- 统计重1到n的正整数中1的个数
- git 对 Microsoft Word 进行版本控制
- 【前端】Vue2全家桶案例《看漫画》之四、漫画页
- 利用Eclipse中的Maven构建Web项目(一)
- TOP-N类查询
- LeetCode题解:Flatten Binary Tree to Linked List:别人的递归!
- chrome书签(收藏栏)的导入导出