效果图如下:
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;
}