总结：

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. densenet tensorflow 中文汉字手写识别

    densenet 中文汉字手写识别,代码如下: import tensorflow as tf import os import random import math import tensorflo ...

  2. ES搜索排序，文档相关度评分介绍——Vector Space Model

    Vector Space Model The vector space model provides a way of comparing a multiterm query against a do ...

  3. Spring笔记07（Spring AOP的通知advice和顾问advisor）

    1.Spring AOP的通知advice 01.接口代码: package cn.pb.dao; public interface UserDao { //主业务 String add(); //主 ...

  4. COGS 2581 无聊的会议V2

    传送 题目大意 给定一个长为\(n\)的序列,定义\(y\)在三元对\((x,y,z)\)中成为中心轴当且仅当同时满足:\(a_x = a_y = a_z,y-x=z-y,x<y<z\)对 ...

  5. unicode和utf-8互转

    1.1 ASCII码 我们知道, 在计算机内部, 所有的信息最终都表示为一个二进制的字符串. 每一个二进制位(bit)有0和1两种状态, 因此八个二进制位就可以组合出 256种状态, 这被称为一个字节 ...

  6. HAOI2006受欢迎的牛——缩点

    题目:http://poj.org/problem?id=2186 本题是缩点模板题,将强连通分量缩成一个点,从而形成一个有向无环图,当仅有一个出度为0的点时答案即此点的大小,否则无解. 代码如下: ...

  7. 洛谷P3372线段树模板1——线段树

    题目:https://www.luogu.org/problemnew/show/P3372 线段树模板. 代码如下: #include<iostream> #include<cst ...

  8. No overload for 'OnStartup' matches delegate 'System.Windows.StartupEventHandler'

    No overload for &apos;OnStartup&apos; matches delegate &apos;System.Windows.StartupEvent ...

  9. Oracle字段增删改方法总结

    一.修改字段的语法:alter table tablename modify (字段名 类型 [default value][null/not null],….);有一个表名为tb,字段段名为name ...

  10. java——构造方法重载

    class Person { private String name ; private int age ; public Person() { } public Person(String n,in ...