2013-5-16 css复习之案例作品

、

纯手工+css编写

html代码入下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> 实训1 </title>
<link rel="stylesheet" type="text/css" href="shixun1.css"/>
</head>

<body>
<div class = "div1">

<div class = "div2">
<span>优酷牛人&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp <a href="#"/>更多牛人</a></span>
<ul class = "faceul">
<li><img src = "wumengshi.png"><br/><a href="#">She's WMS</a></li>
<li><img src = "wumengshi.png"><br/><a href="#">She's WMS</a></li>
<li><img src = "wumengshi.png"><br/><a href="#">She's WMS</a></li>
</ul>
</div>

<div class = "div2">
<span>明星空间&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp <a href="#"/>更多空间</a></span>
<ul class = "faceul">
<li><img src = "wumengshi.png"><br/><a href="#">She's WMS</a></li>
<li><img src = "wumengshi.png"><br/><a href="#">She's WMS</a></li>
<li><img src = "wumengshi.png"><br/><a href="#">She's WMS</a></li>
</ul>
</div>

<div class = "div2">
<span>优库公益&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp<a href="#"/>更多公益空间</a></span>
<ul class = "faceul">
<li><img src = "wumengshi.png"><br/><a href="#">She's WMS</a></li>
<li><img src = "wumengshi.png"><br/><a href="#">She's WMS</a></li>
<li><img src = "wumengshi.png"><br/><a href="#">She's WMS</a></li>
</ul>
</div>

</div>
</body>
</html>

css代码如下：

* {
font-size:12px;

}
.div1{
border:3px double lavender;
height:240px;
width:240px;

}

.div1 span{
font-weight:bolder;
/* border:1px red solid; 搞完后删除*/
height:15px;
width:80px;
margin:5px;

}
.div1 img{
width:37px;
height:27px;
margin-left:15px;
}

.div2{
/* border:1px double lavender; */
height:70px;
width:230px;
margin:1px 0px 5px 5px;
}

a{
text-decoration:none;
color:#0099CC
}

a:hover{
text-decoration:underline;
color:red;
}

.faceul{
/* border:1px red solid; 搞完后删除*/
height:55px;
width:220px;
margin:5px;
padding-left:5px;
}
.faceul li{
list-style-type:none;
/* border:1px red solid; 搞完后删除*/
height:60px;
width:65px;
margin:2px;
float:left;
}

posted on 2013-05-16 20:10 上官缘木阅读(106) 评论(0) 收藏举报