HTML基础——Div
网页源代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h2 align="center">唐诗欣赏</h2>
<div class="demo">
<ul class="tabs">
<li><a href="#tab1">月下独酌</a></li>
<li><a href="#tab2">独坐敬亭山</a></li>
<li><a href="#tab3">望天门山</a></li>
</ul>
</div>
<div id="tab1" class="content">
<p>花间一壶酒，独酌无相亲。</p>
<p>举杯邀明月，对影成三人。</p>
<p>月既不解饮，影徒随我身。 </p>
<p>暂伴月将影，行乐须及春。 </p>
<p>我歌月徘徊，我舞影凌乱。 </p>
<p>醒时同交欢，醉后各分散。 </p>
<p>永结无情游，相期邈云汉。 </p>
</div>
<div id="tab2" class="content">
<p>众鸟高飞尽，</p>
<p>孤云独去闲。</p>
<p>相看两不厌，</p>
<p>唯有敬亭山。</p>
</div>
<div id="tab3" class="content">
<p>天门中断楚江开，</p>
<p>碧水东流至此回。</p>
<p>两岸青山相对出，</p>
<p>孤帆一片日边来。</p>
</div>
</ul>
</body>
</html>
css：
* {
margin: 0px;
padding: 0px;
}
p {
font-family: "微软雅黑";
font-size: 16px;
height: 30px;
line-height: 30px;
text-align: center
}
.demo {
width: 500px;
height: 350px;
background: #0C9;
margin: 10px auto;
}
ul.tabs {
width: 500px;
height: 50px;
line-height: 50px;
background: #063;
}
a {
color: #FFF;
text-decoration: none;
}
.tabs li {
list-style: none;
float: left;
width: 150px;
text-align: center;
margin-right: 10px;
font-weight: bold;
}
.content {
width: 500px;
height: 300px;
}
#tab1, #tab2, #tab3 {
display: none;
}
#tab1:target, #tab2:target, #tab3:target {
display: block;
background: #CCC;
}
为啥不成功呢？
你要把那三个content类放在demo类里面啊
<div class="demo">
<ul class="tabs">
<li><a href="#tab1">月下独酌</a></li>
<li><a href="#tab2">独坐敬亭山</a></li>
<li><a href="#tab3">望天门山</a></li>
</ul>
<div id="tab1" class="content">
<p>花间一壶酒，独酌无相亲。</p>
<p>举杯邀明月，对影成三人。</p>
<p>月既不解饮，影徒随我身。 </p>
<p>暂伴月将影，行乐须及春。 </p>
<p>我歌月徘徊，我舞影凌乱。 </p>
<p>醒时同交欢，醉后各分散。 </p>
<p>永结无情游，相期邈云汉。 </p>
</div>
<div id="tab2" class="content">
<p>众鸟高飞尽，</p>
<p>孤云独去闲。</p>
<p>相看两不厌，</p>
<p>唯有敬亭山。</p>
</div>
<div id="tab3" class="content">
<p>天门中断楚江开，</p>
<p>碧水东流至此回。</p>
<p>两岸青山相对出，</p>
<p>孤帆一片日边来。</p>
</div>
</div>