box.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>s</title>
<link href="box.css" _fcksavedurl=""box.css"" _fcksavedurl=""box.css"" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="style1"><h5>今日要闻</h5></div>
<div id="style2"><h5>今日要闻</h5></div>
<div id="style3"><img src="20070523090545936.jpg" /></div>
<div id="style4"><img src="20070523090545936.jpg" /></div>
<div id="style5"><img src="20070523090545936.jpg" /></div>
</body>
</html>
box.css
* {
margin: 0px;
padding: 0px;
}
body {
font-family: "宋体";
font-size: 12px;
text-decoration: none;
text-align: center;
margin-top: 10px;
}
#style1 {
height: 100px;
width: 200px;
border: 1px solid #96C2F1;
background-color: #EFF7FF;
margin-bottom: 20px;
}
#style1 h5 {
margin: 1px; /*--实现立体效果关键部分--*/
background-color: #B2D3F5;
line-height: 24px;
}
#style2 {
height: 100px;
width: 200px;
border: 1px solid #9BDF70;
background-color: #F0FBEB;
}
#style2 h5 {
margin: 1px;
background-color:#C2ECA7;
line-height: 24px;
margin-bottom: 20px;
}
#style3{
height: 10%;
width: 10%;
border: 1px solid #CCCCCC;
background-color: #FFFFFF;
margin-top: 20px;
margin-bottom: 20px;
position: absolute;
left: 30px;
top: 300px;
}
#style4{
height: 15%;
width: 15%;
border: 1px solid #CCCCCC;
background-color: #FFFFFF;
margin-top: 20px;
margin-bottom: 20px;
position: absolute;
left: 169px;
top: 267px;
}
#style5{
height: 20%;
width: 20%;
border: 1px solid #CCCCCC;
background-color: #FFFFFF;
margin-top: 20px;
margin-bottom: 20px;
position: absolute;
left: 375px;
top: 247px;
}
img{
margin: 3px;
width:100%;
}
效果演示如下:
134
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
