div-ul-li经典案例

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>