总结：

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. unreal network

    frame move buffer: save move position recive server sync:All moves earlier than the ClientAdjustPosi ...

  2. poj2228Naptime——环形DP

    题目:http://poj.org/problem?id=2228 dp[i][j][0/1]表示前i小时中第j小时睡(1)或不睡(0)的最优值: 注意第一个小时,若睡则对最终取结果有要求,即第n个小 ...

  3. .NETFramework：ConfigurationManager

    ylbtech-.NETFramework:ConfigurationManager 1.程序集 System.Configuration, Version=4.0.0.0, Culture=neut ...

  4. Hibernate延迟加载与opensessioninviewFilter

    转自:https://blog.csdn.net/skk_7/article/details/17917339 hibernate延迟加载: 一个person对应多个school,使用hibernat ...

  5. 阿里云服务器，无法通过公网ip访问实例

    昨天得知阿里云esc又打折了,赶紧入手了一波,因为以前有部署过的经验,所以很快就部署上了项目,就在欣喜的访问时,却无访问. 我按照下面步骤一步一步的检测, 1.服务器上是否成功部署jdk和tomcat ...

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

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

  7. htons和htonl函数具体应用

    htons和htonl函数具体应用 htons和htonl函数,是用来将主机字节顺序转换为网络字节顺序在进行网络抓包时,抓到的包的数据是网络字节顺序,在进行编程时,要进行主机字节顺序和网络字节顺序间的 ...

  8. echarts学习的一些笔记

    工具栏组件 Show 是否显示 Feature 具体显示的功能 saveAslmage  保存图片 Restore 还原 dataZoom  缩放视图 magicType 动态类型切换 toltip组 ...

  9. Ajax.BeginForm 的使用

    @using (Ajax.BeginForm("AddHomeRule", "MyHome", new AjaxOptions { HttpMethod = & ...

  10. ASP.NET Core MVC 视图

    ASP.NET Core MVC中视图的知识和ASP.NET MVC有很多相似之处,学习难度较低.以下内容主要体现了编程中模块化的思想,模块化才应是我们关注的重点. Layout 布局用于提供各个页面 ...