标签：练习题 right color text 第八章 li ul margin
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>山水之间</title>
<style>
.class1,.class2{
float: left;
position: relative;
}
h1 {
position: absolute;
top: 10px;
left: 30px;
}
ul {
position: absolute;
bottom: -10px;
right: 5px;
}
ul li {
list-style: none;
float: right;
padding: 10px;
}
a {
text-decoration: none;
color: black;
}
a:hover {
background-color: lightgreen;
color: white;
}
p {
position: absolute;
top: 10px;
left: 10px;
line-height: 2.3em;
}
td{
width: 100px;
padding-right: 50px;
}
td img {
border: 8px solid gray;
}
h2 {
clear: both; /* 清除前面的浮动 */
margin: 20px 0; /* 上下边距 */
}
span {
position: absolute;
bottom: 10px;
left: 400px;
}
</style>
</head>
<body>
<div class="class1">
<img src="img/d3b6d87e431e625c9a5b172013be9be.jpg" alt="" />
<h1>山水之间</h1>
<ul>
<li>关于</li>
<li>留言</li>
<li>风景</li>
<li>诗文</li>
<li>首页</li>
</ul>
</div>
<div class="class2">
<img src="img/9aa7dc2cf6cf02256b73d33ee68933b.jpg" alt="">
<p>山和水的融合，是静和动的搭配<br>
单调与精彩的结合，也就组成了最美的风景<br>
在青山间探索，在绿水间泛舟......</p >
</div>
<h2>风光欣赏</h2>
<table>
<tr>
<td><img src="img/d58983a7874c1936d72bd680bad5f69.jpg" alt=""></td>
<td><img src="img/b3de5ef8fccfa45e5ab42045b6f4e62.jpg" alt=""></td>
<td><img src="img/838dc5bacd1072bb48e3e0aa91ad455.jpg" alt=""></td>
<td><img src="img/ea2abc34f0026e6179dd8bdeb609959.jpg" alt=""></td>
</tr>
<tr>
<td>绿松<br>这几颗松树向阳一边的枝桠，向下斜斜地伸着，像搭起一道绿色的天梯</td>
<td>瀑布<br>流云奔涌,群山浮动,滚滚的云流翻山而过,直污深谷,气势磅碍,宏伟壮观。</td>
<td>青山<br>湖泊生活在山脚下，绿线的青山环抱着她，清澈的湖水映出身边的生机勃勃。</td>
<td>泛舟<br>泛舟一日景，垂钓一片金</td>
</tr>
</table>
<center>
<br><br>
<span>版权所有©山水之间</span>
</center>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>茶韵</title>
<style type="text/css">
.all{
width: 900px;
}
.top{
height: 200px;
margin: auto;
background: url('img/79346b18715d577f89fae2417cf474b.jpg') no-repeat;
}
.wenzi{
text-indent: 2em;
line-height: 25px;
width: 380px;
float: left;
}
.wenzi a{
display: block;
font-size: 20px;
width:180px;
line-height: 40px;
text-align: center;
text-decoration: none;
float: right;
}
.nav{
float: right;
margin-right: 50px;
}
a{
text-decoration: none;
text-align: center;
display: block;
width: 100px;
line-height: 50px;
font-size: 20px;
color: black;
}
img{
margin-top: 20px;
margin-left: 20px;
float: left;
}
ul,ol{
list-style-type: none;
margin: 0;
padding: 0;
}
ul li ol{
display: none;
position: absolute;
top: -1px;
right:100px;
}
ul li:hover ol{
display: block;
}
ul li{
position: relative;
}
ul li:hover,ul li:active{
color: black;
font-size: 25px;
font-weight: bold;
background-color: darkgray;
}
ul li a:hover,ul li a:active{
color: black;
font-size: 25px;
font-weight: bold;
background-color: darkgray;
}
.last{
background-image: url('img/ed20dcc7079530c39def9baf5263e13.jpg');
text-align: center;
margin-top: 300px;
}
</style>
</head>
<body>
<div class="all">
<div class="top"></div>
<div class="wenzi">
<span>闲暇时刻，约上三五志同道合知己，去幽静深林处，寻一最色优美之亭，沏一壶好茶，知已们吟诗作赋，品品茶道。又或是下几盘好棋，又或是各抒已见，聊聊彼此的胸怀壮志。无不是人生一大乐事。一只小小的茶杯，蕴含着无穷的奥秘与无尽之美。从胎土的选择、杯型的拿捏、釉药的施彩、士窑的烧结，茶杯在制作的每一个环节，都蕴藏着大学问。越是小茶杯越有品茶的韵味，轻轻抿一口，在嘴间感受一下茶的沁香，仿佛沁透心间。</span>
更多茶文化>>
</div>
<img src="img/5c6154c4720cdfc47bd69e7e882a677.jpg"/>
<br />
<div class="nav">
<nav>
<ul>
<li>首页</li>
<li>
茶品
<ol>
<li>乌龙茶</li>
<li>普洱茶</li>
<li>高山绿茶</li>
</ol>
</li>
<li>企业</li>
<li>联系</li>
<li>关于</li>
</ul>
</nav>
</div>
<div class="last">版权所有©茶韵</div>
</div>
</body>
</html>
标签：练习题,
right,
color,
text,
第八章,
li,
ul,
margin
From： https://blog.csdn.net/2301_79505693/article/details/143454059