html5图片列表纵向,div css图片列表实例布局案例ul li布局
DIV CSS布局图文列表布局案例 ul li图文列表
使用div css ul li布局图文列表小局部案例,学习图文列表布局实际案例。
div+css图文布局案例图
本案例在DIVCSS5模板基础上进行(让开发项目或案例兼容更好),采用ul li列表标签+css布局,简单易学易懂。
一、css实例布局思维分析 - TOP
1、ul li列表布局选择。因为此CSS DIV布局实例是典型列表型布局,可以将每个li里放入一组图片和标题。
2、对ul设置好总css宽度;对ul里li设置好宽度并且浮动靠左(float:left)这样让li并列显示,一排显示不完自动换行继续显示图文li内容。
3、获得高度宽度。PS软件获取li内容宽度(间距错外)宽度为160px,图片宽度为160px,css高度为90px。
4、每个li上下左右有相同间距,所以要获取一组图文与相邻图文的间距距离。我们采用对li使用padding设置间距(使用PS软件测的padding:6px 8px的值)
以上分析我们采用ul li布局,li里放上图片下文字(图片使用img标签,文字使用span盒子包裹,同时设置span背景色)。
二、准备素材 - TOP
1、DIVCSS5初始化模板
为了兼容各大浏览器,开发案例或项目建议下载使用。使用前先修改预先设置的样式(DIVCSS5初始化模板)。
2、图片素材
主要是使用PS切出所需内容图片素材。(已经放入images文件夹)
三、案例详细代码与效果截图 - TOP
ul.imglist{ margin:0 auto; width:536px; overflow:hidden}
ul.imglist li{ float:left; padding:4px 8px; width:160px}
ul.imglist li img{ display:block; width:160px; height:90px}
ul.imglist li span{ display:block; width:100%; height:30px; line-height:30px; background:#F6F6F6}
2、主要HTML代码
自制快手糟黄瓜 吃完整个
标题内容 吃完整个
自制快手糟黄瓜 吃完整个
自制快手糟黄瓜 吃完整个
自制快手糟黄瓜 吃完整个
自制快手糟黄瓜 吃完整个
3、效果截图
实际CSS图文列表实例在浏览器中效果截图
四、关键代码解释 - TOP
1、CSS关键样式单词解释
1)、ul.imglist{ margin:0 auto; width:536px; overflow:hidden}
使用margin:0 auto,让ul结构布局居中;
使用overflow:hidden,因为ul的子级使用float属性会产生浮动,所以使用清除子级使用float对父级产生不能撑开问题;
使用宽度width:536px;固定宽度让子级li准确一排只排3个效果
2)、ul.imglist li{ float:left; padding:4px 8px; width:160px}
float:left,让li靠左开始并列;
padding:4px 8px设置li与li盒子之间间距;
width:160px 必须设置固定好li宽度(宽度值通过ps软件的切片工具测得)
3)、ul.imglist li img{ display:block; width:160px; height:90px}
display:block对图片设置独占一行;
width:160px; height:90px必须固定设置好图片高度宽度
4)、ul.imglist li span{ display:block; width:100%; height:30px; line-height:30px; background:#F6F6F6}
display:block让span设置宽度高度生效同时独占一行效果;
width:100%; height:30px; 设置宽度和高度,宽度100%会继承父级li宽度相等于设置(160px宽度,设置100%宽度好处是随父级宽度而自动计算出100%宽度与父级宽度保持一致);
line-height:30px; 设置文字在30px中垂直居中;
background:#F6F6F6设置span背景颜色
2、HTML关键点
使用ul li组合列表标签布局,每个li盒子放图片+文字标题内容,li盒子直接使用a超链接标签将图片和文字内容包裹着,使用img标签引入图片,使用span标签与img形成两个盒子而CSS分别设置独占一行功能效果的样式(display:block),避免文字和图片排成一排而非上下结构。
五、在线演示与打包下载 - TOP
1、在线浏览
2、打包下载
通过本CSS DIV实例学会对图文布局思路到技巧掌握,灵活运用到你的项目中。
html5图片列表纵向,div css图片列表实例布局案例ul li布局相关推荐
- html 如何把文字和图片放到一行,DIV+CSS图片和文字如何显示同一行
如果把文字和图片放在同一个图层的,文字可以做到居中,但是图片就不能,因为图片默认是左上对齐的!如果你令到图片居中了,文字就会相对于图片右下对齐了!如果你想2个都居中的话,就不能把他们放在同一个div, ...
- css 图片大小自适应div,CSS 图片自适应显示宽度
这个使用尤其中手机屏幕上最有用. 有喜欢方法: function ReImgSize(){ for (j=0;j { document.images[j].width=(document.images ...
- css图片跟文字居中,css 图片文字垂直居中
先来看张图片 相信很多css新手遇到过这种问题,就是当图片和文本显示在一行的时候,效果很奇葩,文字和图片没法对齐, 这时我们需要做的是: 1,先给块级元素设置 display: inline-bloc ...
- html图片怎么中心对齐,css图片居中(css怎么让图片水平居中对齐)
css图片居中 css图片居平分css图片水平居中和笔直居中两种状况,有时候还需要图片同时水平笔直居中,下面分几种居中状况别离介绍. css图片水平居中 运用margin:0auto完成图片水平居中 ...
- 转载 Div+css浏览器兼容实例分析(一)
为什么80%的码农都做不了架构师?>>> 今天又在OECP社区发现了一篇好文章,<Div+css浏览器兼容实例分析>,因为文章太长所以分为两篇上传给大家分享. 用d ...
- div css图片列表实例
1.DIVCSS5初始化模板 为了兼容各大浏览器,开发案例或项目建议下载使用.使用前先修改预先设置的样式(DIVCSS5初始化模板). 2.图片素材 主要是使用PS切出所需内容图片素材.(已经放入im ...
- html怎么把图片做成抖动效果,CSS图片抖动和JS点击特效
正文 CSS图片抖动效果代码,放在网站主要CSS文件中即可 如:style.css,之前emlog博客中常添加这个效果 img:hover { -webkit-animation:sucaijiayu ...
- html如何把图片填充颜色渐变,css图片怎么设置透明度渐变?
css可以在设置图片颜色时使用linear-gradient()函数设置渐变,其中渐变颜色使用rgba()设置即可设置图片透明度渐变. linear-gradient() 函数用于创建一个线性渐变的 ...
- w3c的html5与css3校验,DIV+CSS验证_W3C验证
DIV CSS验证_W3C验证解释与说明 在div+css开发的时候,特别是新手特别喜欢追求完美,所以开发中或开发完后立即去验证开发的css是否符合w3c标准.虽然说验证w3c是好事但是,这个不是最重 ...
最新文章
- elasticsearch-.yml(中文配置详解)
- WindowsServer2012史记3-SMB管理
- Hibernate中两种获取Session的方式
- 最小代价生成树Prim/Kruskal(c/c++)
- 中石油训练赛 - Trading Cards(最大权闭合子图)
- Android下检测网络连接 3G WIFI
- kali linux关闭进程,技术|如何使用 Kali Linux 黑掉 Windows
- div里面放ul,使ul横向和纵向滚动
- oracle 查询数据 实验笔记三
- 为什么使用linux内核,为什么Linux内核使用它所做的数据结构?
- html自动加好友,WeTool微信自动加好友软件
- X-Scan-v3.3 漏洞扫描工具使用
- 数据库服务器,sql
- 【数据挖掘实验】利用朴素贝叶斯方法对百万搜狐新闻文本数据进行分类
- PHP 接入SSL后的一个极端个例
- 中国儿童乐园行业市场建设现状分析与营销策略研究报告2022版
- python输出变量的值使用_如何使用python语言中的输入和输出打印对应的值
- Redis底层数据结构(图文详解)
- 机械臂速成小指南(九):正运动学分析
- 苹果G5机箱改造 (螺帽法)
热门文章
- 2021年即墨萃英中学高考成绩查询,2017即墨萃英中学青岛十九中录取分数线发布...
- php mysql 录入_MYSQL+PHP表单录入数据的问题
- mysql中的字符是多长_mysql中的varchar到底能存多长的字符
- Fragment懒加载预加载
- 今天遇到了一个很坑爹的问题....
- 程序员,你的粮草何在?
- asp.net 小记
- 由.Net类库提供的农历计算(C#农历)
- C++对象数组与对象指针的用法【C++初学面向对象编程】
- Java算法之移除元素