div-ul-li经典案例

html-css014

div-ul-li经典案例,第1张

css部分

*{通配符选择器 设置所有填充0边距0

padding:0px 

margin:0px

}

#div-box1{id选择器  id为div-box1的块元素 宽度500 高度400 边框1像素 实线 银灰色 边距上40 右0 下0 左40像素

width:500px

height:400px

border:1px solid silver

margin:40px 0 0 40px

}

.faceul{类选择器 list-style-type 设置消除列表标记

list-style-type:none

background:#F00背景色

}

.faceul img{后代元素选择器 设置ul中的图片的宽度和边距

width:40px

margin:5px 0px 0px 10px

}

.faceul li{设置浮动

/*为了让li放到一排，使用了左浮动*/

float:left

border:1px solid red

width:60px

height:70px

margin-left:25px

margin-top:25px

}

.faceul span{

font-size:small

margin-left:15px

margin-top:5px

display:block

}

.faceul a:link{ 伪类选择器

color:black 链接颜色

text-decoration:none不添加文本的修饰

}

.faceul a:hover{ 

color:red

text-decoration:underline

}

body部分

<div id = "div-box1">

<ul class = "faceul">

<li><img src=""/><span><a href = "#">明星</a></span>

</li>

</ul>

</div>

晕，楼上的都在胡说八道

ul是定义无序列表的样式

li是列表内行的样式

在HTML代码中列表是这样的

<ul>

<li>列表一</li>

<li>列表二</li>

</ul>

.a2 {height:40pxline-height:30pxwidth:150pxdisplay:blockoverflow: hiddenwhite-space: nowraptext-overflow: ellipsis}