总结:

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>

效果图:

HTML——制作一个图片列表的更多相关文章

  1. QT制作一个图片播放器

    前言:使用qt制作了一个简单的图片播放器,可以播放gif.png等格式图片 先来看看播放器的功能(当然是很简陋的,没有很深入的设计): 1.点击图片列表中图片进行播放. 2.自动播放,播放的图片的间隔 ...

  2. 制作一个简单的WPF图片浏览器

    原文:制作一个简单的WPF图片浏览器 注:本例选自MSDN样例,并略有改动.先看效果: 这里实现了以下几个功能:1.  对指定文件夹下所有JPG文件进行预览2.  对选定图片进行旋转3.  对选定图片 ...

  3. ios学习-制作一个浏览图片的Demo

    一.项目要求:制作一个浏览图片的Demo,要求包含夜间模式,以及改变图片大小,能够显示不同的图片描述 二.开发步骤: 1.在storyboard上添加一个空白的View,然后添加”设置“按钮,添加im ...

  4. 2016/04/29 ①cms分类 ② dede仿站制作 步骤 十个步骤 循环生成菜单 带子菜单的菜单 标签 栏目 栏目内容列表 内容图片列表

    cms 系统还有: phpcms     企业站 Xiaocms  织梦  企业站 wordpress (博客) Ecshop 商城 Ecmall 多用户 Discms 记账 方维 订餐 团购 CMS ...

  5. 使用CocosSharp制作一个游戏 - CocosSharp中文教程

    注:本教程翻译自官方<Walkthrough - Building a game with CocosSharp>,官方教程有很多地方说的不够详细,或者代码不全,导致无法继续,本人在看了G ...

  6. 用Phaser来制作一个html5游戏——flappy bird (一)

    Phaser是一个简单易用且功能强大的html5游戏框架,利用它可以很轻松的开发出一个html5游戏.在这篇文章中我就教大家如何用Phaser来制作一个前段时间很火爆的游戏:Flappy Bird,希 ...

  7. Android学习笔记(十二)——实战:制作一个聊天界面

    //此系列博文是<第一行Android代码>的学习笔记,如有错漏,欢迎指正! 运用简单的布局知识,我们可以来尝试制作一个聊天界面. 一.制作 Nine-Patch 图片 : Nine-Pa ...

  8. Swift 制作一个新闻通知中心插件1

    使用 Swift 制作一个新闻通知中心插件(1) 随着 iOS 8 的发布,苹果为开发者们开放了很多新的 API,而在这些开放的接口中 通知中心插件 无疑是最显眼的一个.通知中心就不用过多介绍了,相信 ...

  9. Angular2组件与指令的小实践——实现一个图片轮播组件

    如果说模块系统是Angular2的灵魂,那其组件体系就是其躯体,在模块的支持下渲染出所有用户直接看得见的东西,一个项目最表层的东西就是组件呈现的视图.而除了直接看的见的躯体之外,一个完整的" ...

随机推荐

  1. css中字体大小在不同浏览器兼容性问题

    css中使用font-size设定字体大小,不同浏览器的字体height一样,但是width不同,比如在火狐和谷歌中,font-size:20px,字体的高度变为20px,但是谷歌的字体宽度比火狐长 ...

  2. leetcode 23. Merge k Sorted Lists(堆||分治法)

    Merge k sorted linked lists and return it as one sorted list. 题意:把k个已经排好序的链表整合到一个链表中,并且这个链表是排了序的. 题解 ...

  3. asterisk ss7 ${CALLERID(rdnis)}变量为空问题

    asterisk 1.8.16+chan_ss7 version 2.1.1b ${CALLERID(rdnis)}变量取不到信息问题,解决 编辑 funcs/func_callerid.c chan ...

  4. MySQL记录_20160919

    1.首先先看下什么是MySQL. MySQL是一个关系型数据库管理系统,由瑞典MySQL AB 公司开发,目前属于 Oracle 旗下产品.MySQL 最流行的关系型数据库管理系统,其开放源码这一特点 ...

  5. P2042 [NOI2005]维护数列[splay或非旋treap·毒瘤题]

    P2042 [NOI2005]维护数列 数列区间和,最大子列和(必须不为空),支持翻转.修改值.插入删除. 练码力的题,很毒瘤.个人因为太菜了,对splay极其生疏,犯了大量错误,在此记录,望以后一定 ...

  6. Poj_1088_滑雪(DP)

    一.Description(poj1088) Michael喜欢滑雪百这并不奇怪,  因为滑雪的确很刺激.可是为了获得速度,滑的区域必须向下倾斜,而且当你滑到坡底,你不得不再次走上坡或者等待升降机来载 ...

  7. SpringMVC之七:SpringMVC中使用Interceptor拦截器

    SpringMVC 中的Interceptor 拦截器也是相当重要和相当有用的,它的主要作用是拦截用户的请求并进行相应的处理.比如通过它来进行权限验证,或者是来判断用户是否登陆,或者是像12306 那 ...

  8. JSP编译指令、JSP动作指令

    JSP编译指令:通过指令中的属性配置来向JSP容器发出指令,用来控制JSP页面的某些特征 JSP指令格式:<%@ 指令名   [一个或多个指令属性]%> 1.page:用于对JSP页面中的 ...

  9. HTML页面弹出窗口调整代码总结

    弹出跟你当前的窗口有没有菜单工具栏没有关系,你只要在页面中写一个脚本它就弹出了.比如<a href=# onclick="window.open('xxx.aspx','窗口名称',' ...

  10. lung 分割论文

    <4D Lung Tumor Segmentation via Shape Prior and Motion Cues > Abstract— Lung tumor segmentatio ...