html图片排列布局下面字_div+css（ul li）实现图片上文字下列表布局

css样式表代码：

html布局代码：

效果图：

html布局部分，可根据自己需要添加对应的div即可。

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)，避免文字和图片排成一排而非上下结构。

html图片排列布局下面字_div+css（ul li）实现图片上文字下列表布局相关推荐

css ul li 图标图片位置定位背景定位
css ul li 图标图片位置定位背景定位这是网站页面只有一张背景图片的时代众多大型网站都是背景图片只用一整张这种模式背景图片的定位应用广泛 .cases li{ lineheight:2 ...
html图片排列布局下面字_css实现朋友圈照片排列布局代码实例
本篇文章小编给大家分享一下css实现朋友圈照片排列布局代码实例,代码介绍的很详细,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看. 首先可以打开朋友圈观察不同图片数量的几种布局 ...
html图片排列布局下面字_CSS 实现：图片+文字的布局（综合）
☊[实现要求]:图片+文字+居中 √[实现]: ① img + 文字标题1111 普通布局 .demo2-1 { // 文字可用demo1中的方案一布局; line-height: $px; tex ...
vue样式中背景图片路径_解决vue打包css文件中背景图片的路径问题
vue-cli写完的静态页面我们在node环境中引入没有问题,但是打包后放在Apache环境下,路径却有问题了如一个简单css语句 .welcome { width: 420px; height: ...
html li内文字垂直居中,ul li 下图片文字垂直居中
html代码如下: 首页 cqm8@163.com +86 898 234566 对应的css代码如下: .contact ul li { float: left; display: inline; ...
css ul li list-style-type 的使用
ul & li : 前端学习中,经常用到 < ul > < li > 两个标签来做菜单.列表等,而ul标签默认是无序列表: 代码如下: <h4>一个无序列表 ...
html表格实现图片排列布局,纯css实现朋友圈照片排列布局（附单图自适应宽高）...
效果图 image.png image.png image.png image.png image.png 思路设置flex实现正常的三列布局 ul{ padding:0px; width:300p ...
php图片如何让浮动,页面中用css属性怎么控制图片自定义浮动？（示例）
新手在设计web页面时,偶尔就图片浮动的问题会产生一些困扰,不知从何下手.本篇文章主要就给大家介绍css浮动的相关知识,希望对需要的朋友有所帮助.首先这里就需要大家了解一下css中的一个重要属性浮动f ...
html中图片透明度渐变效果,三种用CSS滤镜实现的图片透明度及渐变效果
新的一页 .15pt{font-size:15pt;color:#de3076} .30pt{font-size:30pt;color:#33cc99;font-family:创艺繁琥珀} var e ...

html图片排列布局下面字_div+css（ul li）实现图片上文字下列表布局

html图片排列布局下面字_div+css（ul li）实现图片上文字下列表布局相关推荐

最新文章

热门文章