练习知识点
面板，下拉菜单，选项卡，绝对元素居中，
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<style>
p {
line-height: 30px;
}
#tangshi {
max-width:300px;
background: pink;
}
#songci {
width:300px;
background:palegoldenrod ;
}
#yuanqu {
width:300px;
background: palegreen;
text-align: center;
}
#xiandai {
background: yellow;
}
.panel {
position: absolute;
top:50%;
left:50%;
margin-top:-100px;
margin-left:-100px;
}
</style>
<body>
<div class="panel panel-primary">
<div class="panel-body">
<div class="panel-heading">
<h3 class="panel-title">诗词学习</h3>
</div>
<ul class="nav nav-pills ">
<li><a data-toggle="tab" href="#tangshi">唐诗</a>
<li><a data-toggle="tab" href="#songci">宋词</a>
<li><a data-toggle="tab" href="#yuanqu">元曲</a>
<li class="dropdown">
<a href="#" data-toggle="dropdown">其他
<b class="caret"></b>
</a>
<ul class="dropdown-menu" role="menu" >
<li><a href="#xiandai" tabindex="-1" data-toggle="tab">现代诗</a></li>
<li><a href="#sanwen" tabindex="-1" data-toggle="tab">散文诗</a></li>
</ul>
</li>
</ul>
</ul>
<div class="tab-content">
<div id="tangshi" class="tab-pane active">
<!-- active makes tangshi alwanys show -->
<P>
《感遇·其一》 作者：张九龄 <br>
兰叶春葳蕤，桂华秋皎洁。 <br>
欣欣此生意，自尔为佳节。 <br>
谁知林栖者，闻风坐相悦。 <br>
草木有本心，何求美人折？</P>
</div>
<div id="songci" class="tab-pane">
<p> 蹴罢秋千，起来慵整纤纤手。<br>
露浓花瘦，薄汗轻衣透。<br>
见有人来，袜剗金钗溜。<br>
和羞走，倚门回首，却把青梅嗅。<br>
</p>
<p> 赏析：
最是一回眸间，有无尽娇羞、无尽可人之态。倚门偷觑，眼波流动，心理微妙却要借梅子的清香去掩饰，女儿家的心思比这青青
梅子还要耐人寻味。一个动作，少女情态已是纤毫毕现。</p>
</div>
<div id="yuanqu" class="tab-pane">
水调歌头
<br>
明月几时有，把酒问青天。<br>
不知天上宫阙，今夕是何年？<br>
我欲乘风归去，又恐琼楼玉宇<br>，
高处不胜寒。<br>
起舞弄清影，何似在人间！<br>
转朱阁，低绮户，照无眠。<br>
不应有恨，何事长向别时圆？<br>
人有悲欢离合，月有阴晴圆缺，<br>
此事古难全。<br>
但愿人长久，千里共婵娟 。<br>
</div>
<div id="xiandai" class="tab-pane">
<p>我们<br>
我们并立天河下。<br>
人间已落沉睡里。
天上的双星<br>
映在我们的两心里。<br>
我们握着手，看着天，不语。<br>
一个神秘的微颤。<br>
经过我们两心深处。</p>
</div>
<div id="sanwen" class="tab-pane">
<p>致修篁<br>
篁：我从来不曾这么爱，<br>
所以你才觉得这爱使你活得很累么？<br>
所以你才称狮子的爱情原也很美么？<br>
我亦劳乏，感受严峻，别有隐痛，<br>
但若失去你的爱我将重归粗俗。<br>
</p>
</div>
</div>
</div>
效果如图
image.png
