纯CSS选项卡

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 {
     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 {
     300px;
    height: 800px;
    float: left;
    margion: 20px;
    background: red;
}
#MainContent {
     700px;
    height: 800px;
    float: left;
    margion: 20px;
    background: #0C78DD;
    
}
.clear {
    clear: both;
}
#Footer {
    height: 100px;
    background: #0AF333;
}
dl {
    position: absolute;/*绝对的*/
     200px;
    height: 200px;
    border: 10px solid #E9F5E9;
}
dd {
     200px;
    height: 200px;
    overflow: hidden;
}
dt {
    position: absolute;
    right: 1px;
}
ul {
    margion: 0;
    padding: 0;
     220px;
    height: 200px;
    list-style: none;
    border: 1px solid black
}
li {
     207px;
    height: 27px;
    overflow: hidden;
}
dt a {
    display:block;
    /*margin: 1px;*/
     30px;
    height: 56px;
    text-align: center;
    font: 700 12px/55px "宋体",sans-serif;
    color: #fff;
    text-decoration: none;
    background: #666;
    /*display:block;
margin:1px;
30px;
height:56px;
text-align:center;
font:700 12px/55px "宋体",sans-serif;
color:#fff;
text-decoration:none;
background:#666;*/
}

dt a:hover{
    background:green;}

相关阅读:
作业练习
作业练习
作业
作业
作业
作业
作业
作业
作业
作业

原文地址：https://www.cnblogs.com/tangchun/p/4505805.html