html5+css小案例

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<style>
.d1 {
width: 950px;
height: 402px;
}
.d2 {
width: 950px;
height: 100px;
background-color: darkkhaki;
}

.d3 {
width: 800px;
height: 402px;
}

.d21 {
font-size: 30px;
color: darkred;
padding-left: 80px;
padding-top: 10px;
}

.d22 {
font-size: 18px;
padding-left: 170px;
margin-top: -50px;
}

.d23 {
width: 600px;
height: 30px;
padding-top: 1px;
background-color: #fff;
margin-left: 5px;
color: #fff;
}

.d231 {
width: 75px;
height: 23px;
padding-top: 3px;
padding-left: 10px;
background-color: cornflowerblue;
float: left;
margin-right: 5px;
}

.d232 {
width: 75px;
height: 23px;
padding-top: 3px;
padding-left: 10px;
background-color: cornflowerblue;
float: left;
margin-right: 5px;
}

.d233 {
width: 75px;
height: 23px;
padding-top: 3px;
padding-left: 10px;
background-color: cornflowerblue;
float: left;
margin-right: 5px;
}

.d234 {
width: 105px;
height: 23px;
padding-top: 3px;
padding-left: 10px;
background-color: cornflowerblue;
float: left;
margin-right: 5px;
}

.d235 {
width: 90px;
height: 23px;
padding-top: 3px;
padding-left: 10px;
background-color: cornflowerblue;
float: left;
margin-right: 5px;
}

.d236 {
width: 90px;
height: 23px;
padding-top: 3px;
padding-left: 10px;
background-color: cornflowerblue;
float: left;
margin-right: 5px;
}

.d231:hover {
background-color: red;
font-size: 120%;
color: yellow;
}

.d232:hover {
background-color: red;
font-size: 120%;
color: yellow;
}

.d233:hover {
background-color: red;
font-size: 120%;
color: yellow;
}

.d234:hover {
background-color: red;
font-size: 120%;
color: yellow;
}

.d235:hover {
background-color: red;
font-size: 120%;
color: yellow;
}

.d236:hover {
background-color: red;
font-size: 120%;
color: yellow;
}
.d31{
font-size: 2px;
margin-left: 50px;
margin-right: 150px;
float: left;
}
.d32{
float: right;
width: 280px;
height: 240px;
margin-top: -280px;
margin-right: -120px;
}
.d321{
float: right;
width: 200px;
height: 240px;
background-color: #000;
margin-top: 30px;
margin-left: 680px;
padding: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
.d21:hover{
transform: rotate(360deg);
display: block;
transition: all 1s;
}
</style>
</head>

<body>
<div class="d1">
<div class="d2">
<p class="d21">散文集</p>
<p class="d22">朱自清</p>
<div class="d23">
<div class="d231">作者生平</div>
<div class="d232">故事背景</div>
<div class="d233">词语注释</div>
<div class="d234">作品手法欣赏</div>
<div class="d235">上一篇文章</div>
<div class="d236">下一篇文章</div>
</div>
</div>
<div class="d3">
<div class="d31">
<b>荷塘月色（节选）</b><br />
      这几天心里颇不宁静。今晚在院子里坐着乘凉，忽然想起日日走过的荷塘，在这满月的光里，总该另有一番样子吧。月亮渐渐地升高了，墙外马路上孩子们的欢笑，已经听不见了;妻在屋里拍着闰儿，迷迷糊糊地哼着眠歌。我悄悄地披了大衫，带上门出去。　<br />　<br />
      沿着荷塘，是一条曲折的小煤屑路。这是一条幽僻的路; 白天也少人走，夜晚更加寂寞。荷塘四面，长着许多树，蓊蓊郁郁的。路的一旁，是些杨柳，和一些不知道名字的树。没有月光的晚上，这路上阴森森的，有些怕人。今晚却很好，虽然月光也还是淡淡的。<br />　<br />
&nbsp0 ;     路上只我一个人，背着手踱着。这一片天地好像是我的;我也像超出了平常的自己，到了另一世界里。我爱热闹，也爱冷静;爱群居，也爱独处。像今晚上，一个人在这苍茫的月下，什么都可以想，什么都可以不想，便觉是个自由的人。白天里一定要做的事，一定要说的话，现在都可不理。这是独处的妙处，我且受用这无边的荷香月色好了。<br />　<br />
      
<span style="font-size: 30px; background: #afdfe5;" id="qu">曲</span>
曲折折的荷塘上面，弥望的是田田的叶子。叶子出水很高，像亭亭的舞女的裙。层层的叶子中间，零星地点缀着些白花，有袅娜地开着的，有羞涩地打着朵儿的;正如一粒粒的明珠，又如碧天里的星星，又如刚出浴
</div>
<div class="d32">
<div class="d321">
<img src="img/朱自清.JPG" style="width: 200px;height: 150px;" />
<br /><br />
<span style="color: red; font-size: 5px;">
朱自清（1898年11月22日—1948年8月12日），原名自华，号秋实，后改名自清，字佩弦。中国现代散文家、诗人、学者、民主战士
</span>
</div>
</div>
</div>
</div>
<hr />
</body>

</html>

猜你喜欢