总结：

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. 开机时遇到grub rescue无法进入系统的解决方法

    装双系统(win10和elementary os),elementary os是ubuntu的一个分支.在win10中合并了一块空白磁盘分区,再开机的时候出问题了. 遇到filesystem unkn ...

  2. OP趋势系统

    经过3年多时间的摸索,经历过熊市牛市的历练,终于完成坚持已久的OP趋势系统的实践,接下来,我将在股灾后,每天都分享OP趋势系统的信号,可以很负责任的说,经过10年历史数据的测试,加上3年的实盘,更加坚 ...

  3. JavaScript中的eval()函数详解

    和其他很多解释性语言一样,JavaScript同样可以解释运行由JavaScript源代码组成的字符串,并产生一个值.JavaScript通过全局函数eval()来完成这个工作     eval(“1 ...

  4. javascript私有属性失效及解决方案

    1.js创建私有属性的方法 在 javascript 中所有对象的成员是公有的 构造函数也是如此: function Gadget ( ) { this.name = ' jack '; this.p ...

  5. 【转】Pro Android学习笔记（四）：了解Android资源（下）

    处理任意的XML文件 自定义的xml文件放置在res/xml/下,可以通过R.xml.file_name来获取一个XMLResourceParser对象.下面是xml文件的例子: <rootna ...

  6. 原生及jq方式使用ajax

    1.原生js实现Ajax方法: // 封装ajax()方法 function ajax(url,fnSucc,fnFaild){ //1.创建Ajax 对象 if(window.XMLHttpRequ ...

  7. 反射：newInstance()的使用方式

    通过反射创建新的类示例,有两种方式: Class.newInstance() Constructor.newInstance() 以下对两种调用方式给以比较说明: Class.newInstance( ...

  8. minihttp安装配置ssl和c语言实现cgi

    概述:参考了大牛们的方法,结合自己的环境做了修改,主要是讲:minihttp安装配置ssl和c语言实现cgi接收字符串并且保存系统环境:centos6.5 开发版 依赖软件包: mini_httpd- ...

  9. web API请求与参数获取

    总结webAPI的常用请求方法与后台参数的获取: 一:get请求:(会将所以参数拼接到URL里面) 1:基础类型:string  a=“hello” , 前端无论你是写到ajax里面的data属性还是 ...

  10. 关于 Number() parsint() abs() 的区别

    1. parseInt(‘’)      parseInt() 函数可解析一个字符串,并返回一个整数. 如果第一个字符不是数字或者负号,parseInt() 就会返回NaN 2.Number()    ...