总结：

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. 在Asterisk CLI里面采用originate发起一个呼叫

    Asterisk cli下面可以执行很多命令,originate的用途是发起一个呼叫然后连接到指定的应用或上下文. 跟.call呼叫文件和AMI管理接口里的外呼功能一样,有两种语法格式: 呼叫成功转应 ...

  2. 「USACO08DEC」「LuoguP2922」秘密消息Secret Message（AC自动机

    题目描述 Bessie is leading the cows in an attempt to escape! To do this, the cows are sending secret bin ...

  3. 洛谷P2983 [USACO10FEB]购买巧克力Chocolate Buying

    题目描述 Bessie and the herd love chocolate so Farmer John is buying them some. The Bovine Chocolate Sto ...

  4. 【LeetCode】064. Minimum Path Sum

    题目: Given a m x n grid filled with non-negative numbers, find a path from top left to bottom right w ...

  5. Chrome检查更新总失败？安装细则讲解

    现在 Google Chrome 的稳定版都已经发布 68.0 版本了,我机上还是 54, 本想在线更新一下,结果点击菜单项中的“关于 Google Chrome”后,进入的界面提示“更新失败(错误: ...

  6. 重学JAVA基础(三):动态代理

    1.接口 public interface Hello { public void sayHello(); } 2.实例类 public class Hello2 { public void sayH ...

  7. Python中日志的格式化输出

    import logging logfile = 'e:\\a.txt' # logging.basicConfig(filename=logfile,level=logging.INFO) # lo ...

  8. sgu 321 The Spy Network (dfs+贪心)

    321. The Spy Network Time limit per test: 0.5 second(s)Memory limit: 65536 kilobytes input: standard ...

  9. vb常用命名空间

    摘自:http://www.2cto.com/kf/201211/170837.html 感谢 (一)如下是系统中分离出来Imports MicrosoftImports Microsoft.CSha ...

  10. hdu 3853 LOOPS (概率dp 逆推求期望)

    题目链接 LOOPS Time Limit: 15000/5000 MS (Java/Others)    Memory Limit: 125536/65536 K (Java/Others)Tota ...