CSS练习

xiaojue  4月 13th, 2009

效果图如下:

HTML关键部分:

<ul class="DaoHang">
<li class="Getnow">文学</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>
<p class="SouSuo">
<form>
<input type="text" id="NeiRong" size="50" maxlength="50"/>
<input type="submit" value="搜 索" id="Sumbit"/>
</form>

CSS关键部分如下:

*{margin:0px; padding:0px;}
body{background-color:#F1F0FB;margin:100px auto 0px auto;
text-align:center;}
p.SouSuo {margin-top:15px;font-size:12px;color:#000;}
ul.DaoHang{margin-top:50px;list-style:none;width:660px;}
ul.DaoHang li{font-size:14px;float:left;color:#333;width:110px;}
ul.DaoHang li a{color: #666;text-decoration:none;font-weight:bold;}
ul.DaoHang li a:hover{color:#FFF;background-color:#006600;}
#Sumbit{border:0px;background-color:#CCC;color:#FFF;
height:25px;width:50px;}
#NeiRong{font-size:16px;height:23px;color:#8A8A8A;
border:1px;border-color:#ccc;borderstyle:solid;}
ul.DaoHang li.Getnow{font-weight:bold;color:#006633;
text-decoration:underline;}


写新回应:


Dtools Top
本页文章快速定位...