标签：
1、菜单
<body>
<ul>
<li class="litem"><a href="javascript:;">体育明星</a>
<ul class="uitem">
<li><a href="javascript:;">乔丹</a></li>
<li><a href="javascript:;">纳什</a></li>
<li><a href="javascript:;">奥尼尔</a></li>
</ul>
</li>
<li class="litem"><a href="javascript:;">政治明星</a>
<ul class="uitem">
<li><a href="javascript:;">普京</a></li>
<li><a href="javascript:;">习大大</a></li>
<li><a href="javascript:;">奥巴马</a></li>
</ul>
</li>
<li class="litem"><a href="javascript:;">娱乐明星</a>
<ul class="uitem">
<li><a href="javascript:;">黄家驹</a></li>
<li><a href="javascript:;">刘德华</a></li>
<li><a href="javascript:;">周润发</a></li>
</ul>
</li>
<li class="litem"><a href="javascript:;">古代人物</a>
<ul class="uitem">
<li><a href="javascript:;">康熙</a></li>
<li><a href="javascript:;">纳什</a></li>
<li><a href="javascript:;">秦始皇</a></li>
</ul>
</li>
</ul>
</body>
css
body
{
background-color:#cfc;
}
ul
{
list-style-type:none;
}
*
{
padding:0px;
margin:0px;
font-family:"微软雅黑";
}
a
{
text-decoration:none;
color:#fff;
}
a:hover
{
color:#FF0
}
.litem
{
width:200px;
}
.litem>a
{
background-color:#c11136;
display:block;
height:30px;
line-height:30px;
border-left:solid 12px #711515;
padding-left:5px;
}
.uitem a
{
background-color:#e85070;
display:block;
height:30px;
line-height:30px;
border-left:solid 29px #a71f1f;
padding-left:5px;
}
.uitem li
{
border:solid 1px #ed9f9f;
}
.litem>a:hover
{
background-color:#990020;
}
.uitem a:hover
{
backgroud-color:#c2425d;
}
2、图、文字、标题
<div id="dnews">
<div id="title"><a href="#">汽车/在线购车</a></div>
<div id="con">
<div id="con1"><img src="image/111.jpg" /></div>
<div id="con2"><a href="#">探秘比尔·盖茨将宴请习大大吃饭之地</a></div>
</div>
<div id="newlist">
<ul>
<li><a href="#">武汉市悄现首套房贷85折 利率创新低</a></li>
<li><a href="#">武汉市悄现首套房贷85折 利率创新低</a></li>
<li><a href="#">武汉市悄现首套房贷85折 利率创新低</a></li>
<li><a href="#">武汉市悄现首套房贷85折 利率创新低</a></li>
<li><a href="#">武汉市悄现首套房贷85折 利率创新低</a></li>
<li><a href="#">武汉市悄现首套房贷85折 利率创新低</a></li>
<li><a href="#">武汉市悄现首套房贷85折 利率创新低</a></li>
</ul>
</div>
</div>
<div id="d1">
<div id="d2"></div>
</div>
css
* {
padding: 0px;
margin: 0px;
font-family: "微软雅黑";
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
#dnews {
width: 320px;
height: 300px;
border: solid 1px #D2E1F1;
border-top: solid 3px #6DAAEA;
}
#title {
height: 32px;
background-color: #F7FAFD;
line-height: 32px;
padding-left: 10px;
}
#title a {
color: #0873C0;
font-weight: 900;
}
#con {
height: 84px;
width: 320px;
margin-top: 10px;
}
#con1, #con2 {
float: left;
}
#con2 {
width: 173px;
}
#con1 {
margin-left: 10px;
margin-right: 10px;
}
#con2 {
margin-top: 15px;
}
#con2 a {
line-height: 26px;
color: #3B639F;
font-weight: 900;
}
#newlist {
margin-top: 10px;
margin-left: 10px;
}
#newlist a {
color: #172C45;
}
#newlist li {
line-height: 23px;
background-image: url("../image/22.jpg");
background-repeat: no-repeat;
padding-left: 17px;
background-position: 0px 4px;
}
#newlist a:hover {
color: red;
}
#d1 {
height: 200px;
width: 200px;
border: solid 1px red;
}
#d2 {
width: 100px;
height: 50px;
border: solid 1px red;
margin: auto 10px;
标签：
原文地址：http://www.cnblogs.com/cd115703/p/4899638.html
