效果图如下：
Html代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>山水之间</title>
<style type="text/css">
@import url("../css/work1.css");
</style>
</head>
<body>
<div class="all">
<div class="top"><ul>
<li><a href="#">首页</a></li>
<li><a href="#">诗文</a></li>
<li><a href="#">风景</a></li>
<li><a href="#">留言</a></li>
<li><a href="#">关于</a></li>
</ul>
<h2>山水之间</h2>
</div>
<br />
<div class="center">
<p> 山和水的融合，是静和动的搭配</p>
<p> 单调和精彩的结合，也就组成了最美的风景</p>
<p> 在青山间探索，在绿水中方舟......</p>
</div>
<div class="final">
<h3>风光欣赏</h3>
<table>
<tr>
<td><img src="../img/山水之间img/img1.jpg"/></td>
<td><img src="../img/山水之间img/img2.jpg"/></td>
<td><img src="../img/山水之间img/img3.jpg"/></td>
<td><img src="../img/山水之间img/img4.jpg"/></td>
</tr>
<tr>
<td><p>绿松</p>
这几棵松树向阳一边的枝芽，下下斜斜的伸着，像搭着一道绿色的天梯。</td>
<td><p>瀑布</p>
流云奔涌，群山浮动，滚滚的水流翻山而过，直泻深谷，气势磅礴，宏伟壮观。</td>
<td><p>青山</p>
湖泊生活在山脚下，绿绿的青山环抱着他青山湖水印在身边，生机勃勃。</td>
<td><p>方舟</p>
泛舟一日能垂钓一片湖。
<br /><br /><br /></td>
</tr>
</table>
<div class="last">版权所有©山水之问</div>
</div>
</div>
</body>
</html>
CSS代码如下：
.all{
width: 700px;
height: 700px;
}
.top{
position: relative;
width: 700px;
height:100px;
background-image: url("../img/山水之间img/top.jpg");
padding: 0px;
font-style: italic;
}
.top ul {
position: absolute;
bottom: 0;
right: 0;
margin: 0;
padding: 0;
list-style-type: none;
}
h2{
padding-left: 10px;
line-height: 80px;
}
a{
text-decoration: none;
color: black;
font-weight: bold;
}
li{
float: left;
list-style-type: none;
width: 50px;
height: 20px;
display: block;
}
li a:hover{
color: white;
background-image: url("../img/山水之间img/menu-bg.jpg");
}
.center{
width: 700px;
height: 200px;
background-image: url("../img/山水之间img/banner.jpg");
}
.final{
width: 700px;
height: 400px;
}
img{
width: 120px;
height: 80px;
background-image: url("../img/山水之间img/img-bg.png");
padding: 10px;
}
.final p{
font-size: 15px;
}
.final td{
font-size: 10px;
}
.final table{
border-collapse: separate;
border-spacing: 20px;
}
.last{
text-align: center;
background-color: #acacac;
}
效果图如下：
Html代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>茶韵</title>
<style type="text/css">
@import url("../css/work2.css");
</style>
</head>
<body>
<div class="all">
<img src="../img/茶韵img/top-bg.jpg"/><br /><br />
<div class="left">
闲暇时刻，约上三五志同道合知己，去幽静深林处，寻一景色优美之亭，沏一壶好茶，知己们吟诗作赋，品品茶道。又或是下几盘好棋，又或是各抒己见，聊聊彼此的胸怀壮志。无不是人生一大乐事。只小小的茶杯，蕴含着无穷的奥秘与无尽之美。从胎土的选择、杯型的拿捏、釉药的施彩、士窑的烧结，茶杯在制作的每一个环节，都蕴藏着大学问。越是小茶杯越有品茶的韵味，轻轻抿一口，在嘴间感受一下茶的沁香，仿佛沁透心间。
<a href="#">更多茶文化>></a>
</div>
<div class="right">
<img src="../img/茶韵img/main.jpg"/>
<ul>
<li><a>首页</a></li>
<li><a>茶品</a>
<ol>
<li><a>乌龙茶</a></li>
<li><a>普洱茶</a></li>
<li><a>山高绿茶</a></li>
</ol>
</li>
<li><a>企业</a></li>
<li><a>联系</a></li>
<li><a>关于</a></li>
</ul>
</div>
<div class="last">版权所有©茶韵</div>
</div>
</body>
</html>
CSS代码如下：
.all{
width: 900px;
}
.left{
width: 420px;
float: left;
}
.left a{
font-style: italic;
text-decoration: none;
}
.right{
width: 420px;
float: right;
display: flex;
align-items: flex-start;
gap: 60px;
}
ul{
margin-top: -1px;
float:right;
margin-left: -1px;
}
ul li{
list-style-type: none;
position: relative;
}
ul li ol {
display: none;
position: absolute;
list-style-type: none;
top: -1px;
left: -100px;
}
ul li a{
text-align: center;
margin-top: 0;
line-height: 40px;
width: 60px;
display: block;
}
ul li ol li a{
font-size: 13px;
font-weight: bold;
}
ul li:hover ol{
display: block;
}
ul li a:hover{
font-weight: bolder;
background-color: #acacac;
}
ul li ol li a:hover{
background-color: #acacac;
}
.last{
width: 900px;
position: absolute;
bottom: 330px;
text-align: center;
background-color: #acacac;
}