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),避免文字和图片排成一排而非上下结构。
div+css(ul li)实现图片上文字下列表布局的更多相关文章
- CSS + ul li 横向排列的两种方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- CSS ul li a 背景图片与文字对齐
<div class="four"> <h2>电子商务</h2> <img src="images/photo2.gif&quo ...
- css ul li 制作导航条
<html> <head> <style> .test ul{list-style:none;} .test li{float:left; width:100px; ...
- 用CSS如何实现单行图片与文字垂直居中
图片样式为 以下为引用的内容:.style img{vertical-align:middle;.....} 如果STYLE中有其它如INPUT或其它内联元素可写成 以下为引用的内容:.style i ...
- CSS实现鼠标放图片上显示白色边框+文字描写叙述
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- css横线中间放图片或者文字
效果图: 先贴代码 HTML: <div class="forshow middle"> <div class="flex"></ ...
- css ul li 水平布局问题
可以有俩种方法,暂时只用float:left: 找到每一个li进行水平浮动 #hd_nav li{ border-right: 1px solid rgba(255,255,255,0.2); f ...
- css ul li 横向排列
因为li是块级元素,默认占一行的,要想实现横向排列,一般通过以下两个方法:float:left这样设置有一个问题,li浮动以后则脱离了文本流,即不占位置,如果它的父级元素有具体的样式且没有固定宽高,建 ...
- CSS 之 控制图片与文字对齐
文字旁边搭配图片时,发现图片比文字靠上,原来默认的情况是图片顶对齐而文字底对齐,通过设置css属性可以使得图片与文字对齐. 设置各对象的vertical-align属性,属性说明: baseline- ...
随机推荐
- HDU 1405 The Last Practice
The Last Practice Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others ...
- [转] Attach、Detach和DeleteObject
原文:Attach.Detach和DeleteObject,想飞的梦想 1.CWnd Attatch和Detach的关系 首先,要明白Windows对象和MFC对象的区别. MFC对象实际上并没有把整 ...
- 自动化测试(三):QTP参数化
1 Datatable参数化 Global表的数据可以被所有的action访问,Action的数据只能被对应的Action访问 本地表循环的次数设置:Action Call Properties Gl ...
- C#给文件重命名
使用的主要方法是: File.Move(oldFileDir,newFileDir);//这个是移动文件的方法 Directory.GetFiles(dir);//获取dir路径下的所有文件的全路径 ...
- javascript设计模式7
链式调用 (function(){ function _$(els){ //... } _$.prototype={ each:function(fn){ for(var i=0,len=this.e ...
- C#调用C++ DLL类方法(转)
http://hi.baidu.com/game_dev/item/ba29ecf67bd5f6cf521c26fc
- 50道经典的JAVA编程题(41-45)
50道经典的JAVA编程题(41-45),苦逼的程序猿,晚上睡不着了编程吧~今天坚持做10道题!发现编程能是我快乐...O(∩_∩)O哈哈~能平静我烦乱的心,剩下5道题留到考试完了再做吧!该睡觉了.. ...
- HW6.21
import java.util.Scanner; public class Solution { public static void main(String[] args) { Scanner i ...
- 【现代程序设计】【homework-03】【11061027】
Q:你现在使用的代码规范是什么, 和上课前有什么改进? A: 代码规范........自定义的代码规范算 代码规范吗..... Q:你的同伴有哪些优点 (列出至少三点), 和那些需要改进的地方 ...
- Java之文件的随机访问和读写RandomAccessFile
package FileDemo; import java.io.IOException; import java.io.RandomAccessFile; public class RandomAc ...