纯CSS选项卡

浏览数：19 / 时间：2015年06月09日

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">55555555555555555</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: 0 auto;
    height: 1000px
}
#Header {
    height: 100Px;
    background: green;
}
#Logo {
    padding-left: 50px;
    padding-bottom: 20px;
    padding-top: 10px;
}
#Content {
    margin: 5, 5, 5, 5;
    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: 0;
    padding: 0;
    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: 700 12px/55px "宋体",sans-serif;
    color: #fff;
    text-decoration: none;
    background: #666;
    /*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;}