HTML——制作一个图片列表
总结:
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——制作一个图片列表的更多相关文章
- QT制作一个图片播放器
前言:使用qt制作了一个简单的图片播放器,可以播放gif.png等格式图片 先来看看播放器的功能(当然是很简陋的,没有很深入的设计): 1.点击图片列表中图片进行播放. 2.自动播放,播放的图片的间隔 ...
- 制作一个简单的WPF图片浏览器
原文:制作一个简单的WPF图片浏览器 注:本例选自MSDN样例,并略有改动.先看效果: 这里实现了以下几个功能:1. 对指定文件夹下所有JPG文件进行预览2. 对选定图片进行旋转3. 对选定图片 ...
- ios学习-制作一个浏览图片的Demo
一.项目要求:制作一个浏览图片的Demo,要求包含夜间模式,以及改变图片大小,能够显示不同的图片描述 二.开发步骤: 1.在storyboard上添加一个空白的View,然后添加”设置“按钮,添加im ...
- 2016/04/29 ①cms分类 ② dede仿站制作 步骤 十个步骤 循环生成菜单 带子菜单的菜单 标签 栏目 栏目内容列表 内容图片列表
cms 系统还有: phpcms 企业站 Xiaocms 织梦 企业站 wordpress (博客) Ecshop 商城 Ecmall 多用户 Discms 记账 方维 订餐 团购 CMS ...
- 使用CocosSharp制作一个游戏 - CocosSharp中文教程
注:本教程翻译自官方<Walkthrough - Building a game with CocosSharp>,官方教程有很多地方说的不够详细,或者代码不全,导致无法继续,本人在看了G ...
- 用Phaser来制作一个html5游戏——flappy bird (一)
Phaser是一个简单易用且功能强大的html5游戏框架,利用它可以很轻松的开发出一个html5游戏.在这篇文章中我就教大家如何用Phaser来制作一个前段时间很火爆的游戏:Flappy Bird,希 ...
- Android学习笔记(十二)——实战:制作一个聊天界面
//此系列博文是<第一行Android代码>的学习笔记,如有错漏,欢迎指正! 运用简单的布局知识,我们可以来尝试制作一个聊天界面. 一.制作 Nine-Patch 图片 : Nine-Pa ...
- Swift 制作一个新闻通知中心插件1
使用 Swift 制作一个新闻通知中心插件(1) 随着 iOS 8 的发布,苹果为开发者们开放了很多新的 API,而在这些开放的接口中 通知中心插件 无疑是最显眼的一个.通知中心就不用过多介绍了,相信 ...
- Angular2组件与指令的小实践——实现一个图片轮播组件
如果说模块系统是Angular2的灵魂,那其组件体系就是其躯体,在模块的支持下渲染出所有用户直接看得见的东西,一个项目最表层的东西就是组件呈现的视图.而除了直接看的见的躯体之外,一个完整的" ...
随机推荐
- Composer基础应用1
先唠叨唠叨一些琐碎的事.本人最早从事.Net开发,后来处于好奇慢慢转到了php,因为.net从一早就使用了命名空间(反正从我使用就存在这玩意了),所以在转php时很自然的就使用了命名空间,但是在使用过 ...
- FZU 2091 播放器 (栈)
记住:!!!栈用完之后,在下次使用的时候一定要初始化!!花费了我一上午的时间,最后还是某杰想出来的. 题意:实现一个音乐播放器的操作,有3种操作. 注意:一开始播放器会播放播放列表中的第一首歌,也就是 ...
- Java_图片处理_02_图片处理工具类库
二.参考文档 1.Java图片处理工具类库
- 关于JDK安装javac失效的几个问题。
1.按照指南一步一步配置环境变量. 打开cmd,测试. 2.如果还是没有用,注意你的JAVA_HOME配置的是用户变量还是系统变量,改成系统变量. 打开cmd,测试. 3.如果还是没有用,不要你的JA ...
- listen 70
Better Sidewalks Could Bring Improved Public Health Most of our serious illnesses and deaths in the ...
- codeforces 558B B. Amr and The Large Array(水题)
题目链接: B. Amr and The Large Array time limit per test 1 second memory limit per test 256 megabytes in ...
- usg6500
- AIX 7.1上安装Oracle11g
1. 上传oracle 11g介质到AIX 我下载的介质是aix.ppc64_11gR2_database_1of2.zip和aix.ppc64_11gR2_database_2of2.zip, 执行 ...
- SHOI2001化工厂装箱员——记忆化搜索
题目:https://www.luogu.org/problemnew/show/P2530 太弱了不会用DP,于是暴搜: 每次传进一个数组c记录当前状态各种物品有多少个,枚举取哪种物品,返回最小值, ...
- CentOS6.6中安装VNC server(CentOS配置远程桌面)
1.安装服务 yum install tigervnc-server 1 2 名字有点怪哦,CentOS5前叫vnc-server 2.运行并设置密码 vncserver + 回车 1 2 输入密码, ...