|
这是第四个了，没有别的，高兴了就练练手，积累积累技巧。
界面：
CSS+DIV源码：
<!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=utf-8" />
<title>css练手</title>
<style type="text/css">
body{
margin:0px;
padding:0px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
background-color:#FFD8D9;
}
#container{
position:relative;
margin:0px auto 0px auto;
width:700px;
text-align:left;
}
#navigation{
width:700px;
height:33px;
margin:0px;
padding:0px;
}
#navigation ul{
list-style:none;
margin:0px;
padding:0px;
}
#navigation ul li{
text-align:center;
float:left;
margin:0px;
padding:0px;
width:100px;
}
#navigation ul li a{
display:block;
background:url(button1.jpg) no-repeat;
padding:9px 6px 11px 6px;
}
#navigation ul li a:link,#navigation ul li a:visited{
color:black;
text-decoration:none;
}
#navigation ul li a:hover{
background:url(button1_bg.jpg) no-repeat;
color:white;
}
#left{
width:180px;
float:left;
background:#FFFFFF url(leftbottom.jpg) no-repeat bottom; /* 下端圆角 */
margin:1px 0px 0px 0px;
}
#login{
background:#FFFFFF url(login.jpg) no-repeat;
padding:55px 0px 10px 0px;
}
#login form{
padding:0px; margin:0px;
}
#login p {
margin: 0px;
text-align: left;
padding: 5px 0px 0px 25px;
}
#login p input{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
#login .text{
border:none;
border-bottom:1px solid black;
padding: 0px;
width: 90px;
}
#login .btn{
border: 1px solid black;
background-color: #FFEFF0;
height: 17px;
padding: 0px;
}
#login p a:link, #login p a:visited{
color:#333333;
text-decoration:none;
}
#login p a:hover{
color:#000088;
text-decoration:underline;
}
#category{
background:#FFFFFF url(category.jpg) no-repeat;
padding: 55px 0px 40px 0px;
}
#category h4{
margin: 0px 18px 0px 18px;
padding: 3px 0px 1px 5px;
background-color: #FFD1D1;
font-size:12px;
}
#category ul{
margin: 0px;
padding: 5px 22px 15px 22px;
list-style:none;
}
#category ul li{
padding: 2px 0px 2px 16px;
border-bottom: 1px dashed #999;
background: url(icon1.gif) no-repeat 5px 7px;
}
#category ul li a:link, #category ul li a:visited{
color:#000000;
text-decoration:none;
}
#category ul li a:hover{
color:#666666;
text-decoration:underline;
}
#main{
float:left;
width:518px;
margin:1px 0px 0px 2px;
}
#news{
background:url(latest.jpg) no-repeat;
padding:35px 0px 0px 0px;
}
#news img{
border:none;
padding-left:1px;
}
#recommend{
background:url(recommend.jpg) no-repeat;
margin:3px 0px 0px 0px;
padding:35px 0px 0px 0px;
background-color:#FFFFFF;
}
#recommend br,#new br, #guid br{
display:block;
clear:both;
margin:0px;
padding:0px;
}
#recommend ul, #new ul{
list-style:none;
margin:0px;
padding:5px 5px 5px 8px;
}
#recommend ul li, #new ul li{
text-align:center;
float:left;
width:125px;
}
#recommend ul li img, #new ul li img{
border:none;
margin:5px 0px 3px 0px;
padding:0px;
}
#new{
background:url(new.jpg) no-repeat;
margin:3px 0px 0px 0px;
padding:35px 0px 0px 0px;
background-color:#FFFFFF;
}
#guid{
background:url(tips.jpg) no-repeat;
margin:3px 0px 0px 0px;
padding:35px 0px 0px 0px;
background-color:#FFFFFF;
}
#guid ul{
list-style:none;
margin:0px;
padding:5px 5px 5px 30px;
}
#guid ul li{
background:url(icon2.gif) no-repeat 5px 6px;
padding:1px 0px 1px 12px;
float:left;
width:220px;
}
</style>
</head>
<body>
<div id="container">
<div id="banner">
<img src="banner.jpg"/>
</div>
<div id="navigation">
<ul>
<li><a href="#">鲜花礼品</a></li>
<li><a href="#">自助订花</a></li>
<li><a href="#">绿色植物</a></li>
<li><a href="#">花之物语</a></li>
<li><a href="#">会员中心</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">支付方式</a></li>
</ul>
<br>
</div>
<div id="left">
<div id="login">
<form>
<p>用户: <input type="text" class="text"></p>
<p>密码: <input type="text" class="text"></p>
<p><input type="button" class="btn" value="登录"> <input type="button" class="btn" value="注册"> <a href="#">忘记密码</a></p>
</form>
</div>
<div id="category">
<h4><span>用途</span></h4>
<ul>
<li><a href="#">生日送花</a></li>
<li><a href="#">生日送花</a></li>
<li><a href="#">生日送花</a></li>
<li><a href="#">生日送花</a></li>
<li><a href="#">生日送花</a></li>
<li><a href="#">生日送花</a></li>
<li><a href="#">生日送花</a></li>
<li><a href="#">生日送花</a></li>
</ul>
<h4><span>花材</span></h4>
<ul>
<li><a href="#">百合花</a></li>
<li><a href="#">百合花</a></li>
<li><a href="#">百合花</a></li>
<li><a href="#">百合花</a></li>
<li><a href="#">百合花</a></li>
<li><a href="#">百合花</a></li>
<li><a href="#">百合花</a></li>
<li><a href="#">百合花</a></li>
</ul>
<h4><span>价格</span></h4>
<ul>
<li><a href="#">100～200元</a></li>
<li><a href="#">200～300元</a></li>
<li><a href="#">300～400元</a></li>
<li><a href="#">400～500元</a></li>
<li><a href="#">500～600元</a></li>
<li><a href="#">600～800元</a></li>
<li><a href="#">800元以上</a></li>
</ul>
</div>
<div id="leftbottom"><img src="leftbottom.jpg"/></div>
</div>
<div id="main">
<div id ="news">
<img src="new1.jpg"><img src="new2.jpg"><img src="new3.jpg">
</div>
<div id="recommend">
<ul>
<li><img src="flower1.jpg"/></br>幸福的味道</br>$288元</li>
<li><img src="flower2.jpg"/></br>幸福的味道</br>$288元</li>
<li><img src="flower3.jpg"/></br>幸福的味道</br>$288元</li>
<li><img src="flower4.jpg"/></br>幸福的味道</br>$288元</li>
<li><img src="flower5.jpg"/></br>幸福的味道</br>$288元</li>
<li><img src="flower6.jpg"/></br>幸福的味道</br>$288元</li>
<li><img src="flower7.jpg"/></br>幸福的味道</br>$288元</li>
<li><img src="flower8.jpg"/></br>幸福的味道</br>$288元</li>
</ul>
<br>
</div>
<div id="new">
<ul>
<li><img src="flower9.jpg"/><br>粉色迷情</li>
<li><img src="flower10.jpg"/><br>粉色迷情</li>
<li><img src="flower11.jpg"/><br>粉色迷情</li>
<li><img src="flower12.jpg"/><br>粉色迷情</li>
</ul>
<br>
</div>
<div id="guid">
<ul>
<li>花的喜怒哀乐与人的各种感觉</li>
<li>花的喜怒哀乐与人的各种感觉</li>
<li>花的喜怒哀乐与人的各种感觉</li>
<li>花的喜怒哀乐与人的各种感觉</li>
<li>花的喜怒哀乐与人的各种感觉</li>
<li>花的喜怒哀乐与人的各种感觉</li>
<li>花的喜怒哀乐与人的各种感觉</li>
<li>花的喜怒哀乐与人的各种感觉</li>
<li>花的喜怒哀乐与人的各种感觉</li>
<li>花的喜怒哀乐与人的各种感觉</li>
<li>花的喜怒哀乐与人的各种感觉</li>
<li>花的喜怒哀乐与人的各种感觉</li>
</ul>
<br>
</div>
</div>
</div>
</body>
</html>
CSS+DIV做出的网页很精简嘛。
| 
转播
