html：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link href="123.css" rel="stylesheet" type="text/css">
</head> <body>
<div id="Container">
<div id="Header">
<div id="Logo"></div>
</div>
<div id="Content">
<div id="LeftContent">
<dl>
<dt><a href="#xw">新闻</a><a href="#YL">娱乐</a><a href="#TY">体育</a></dt>
<dd>
<ul id="xw">
<li>新闻1</li>
<li>新闻2</li>
<li>新闻3</li>
<li>新闻4</li>
<li>新闻5</li>
</ul>
<ul id="YL">
<li>娱乐1</li>
<li>娱乐2</li>
<li>娱乐3</li>
<li>娱乐4</li>
<li>娱乐5</li>
<li>娱乐6</li>
</ul>
<ul id="TY">
<li>体育1</li>
<li>体育2</li>
</ul>
</dd>
</dl>
</div>
<div id="MainContent"> 主内容 </div>
</div>
<div class="clear"></div>
<div id="Footer">页脚</div>
</div>
</body>
</html>
CSS:
@charset "utf-8";
/* CSS Document */ #Container {
width: 1000px;
margion: auto;
height: 1000px
}
#Header {
height: 100Px;
background: green;
}
#Logo {
padding-left: 50px;
padding-bottom: 20px;
padding-top: 10px;
}
#Content {
margin: , , , ;
height: 600px;
}
#LeftContent {
width: 300px;
height: 800px;
float: left;
margion: 20px;
background: red;
}
#MainContent {
width: 700px;
height: 800px;
float: left;
margion: 20px;
background: #0C78DD; }
.clear {
clear: both;
}
#Footer {
height: 100px;
background: #0AF333;
}
dl {
position: absolute;/*绝对的*/
width: 200px;
height: 200px;
border: 10px solid #E9F5E9;
}
dd {
width: 200px;
height: 200px;
overflow: hidden;
}
dt {
position: absolute;
right: 1px;
}
ul {
margion: ;
padding: ;
width: 220px;
height: 200px;
list-style: none;
border: 1px solid black
}
li {
width: 207px;
height: 27px;
overflow: hidden;
}
dt a {
display:block;
/*margin: 1px;*/
width: 30px;
height: 56px;
text-align: center;
font: 12px/55px "宋体",sans-serif;
color: #fff;
text-decoration: none;
background: #;
/*display:block;
margin:1px;
width:30px;
height:56px;
text-align:center;
font:700 12px/55px "宋体",sans-serif;
color:#fff;
text-decoration:none;
background:#666;*/
} dt a:hover{
background:green;}