总结：

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. linux 进程学习笔记-暂停进程

    <!--[if !supportLists]-->Ÿ <!--[endif]-->暂停进程 int pause() 其会挂起当前进程直到有信号来唤醒或者进程被结束. 随便提一下 ...

  2. java面试题04

    1.就你所熟悉的银行业务面说一下,越详细越好 银行经验:手机银行  网上银行经验  怎么支付  转账  了解基本业务 2.了解工作流的控制,审批流程以及帐务处理么? java中怎么实现工作流.审批流程 ...

  3. Jquery通过ajax请求NodeJS返回json数据

    最近看了NodeJS相关的,在网上查了下结合AJAX的应用,感觉应用前景还是不错的.为什么用这个组合呢? 1.NodeJS不需要安装,拷贝过去就可以使用,而环境变量可以只配置在当前cmd窗口,运行方便 ...

  4. 《c# 实现p2p文件分享与传输系统》 二、 设计

    c#实现P2P文件分享与传输系统 二.设计 在上一篇文章中,介绍了P2P网络的常用模型,并确定了EasyP2P系统的框架,本文将就此设计完成它的主要结构和运作流程. 1. 首先是Tracker Ser ...

  5. 几个重要的 ASM Disk Groups 参数

    几个重要的Disk group 属性: 1. ACCESS_CONTROL.ENABLED该属性用来控制某个disk group 上ASM FILE Access Control. 该参数有2个值:t ...

  6. Linq 支持动态字查询集合， 也就是说根据传入的值进行查询。

    Linq 支持动态字查询集合, 也就是说根据传入的值进行查询. 比如我们有个类Patient, 其中有个字段PatientName, 现在有Patient集合, 想要查询PatientName为&qu ...

  7. Advanced R之数据结构

    看了几本R语言语法相关的书籍,感觉都不怎么好,在实际使用过程中仍然遇到很多难以理解的问题,后来看了Hadley Wickham的Advanced R,好多问题迎刃而解,今天重温了该书的第一章即数据结构 ...

  8. JavaScript高级程序设计学习笔记第十章--DOM

    1.DOM:文档对象模型,是针对 HTML 和 XML 文档的一个 API(应用程序编程接口). 2.DOM 可以将任何 HTML 或 XML 文档描绘成一个由多层节点构成的结构. 3.文档节点是每个 ...

  9. BootStrap 概念

    网格系统中的缩写; xs   extra  small sm  smal md  middle/medium lg    large

  10. JAVA学习笔记——（二）

    今日内容介绍 1.变量 2.运算符 01变量概述 * A: 什么是变量? * a: 变量是一个内存中的小盒子(小容器),容器是什么?生活中也有很多容器,例如水杯是容器,用来装载水:你家里的大衣柜是容器 ...