1. 山水之间
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>居中显示的表格</title><style>.top1 {background-image: url("img/top.jpg");width: 100%;height: 100px;position: fixed;top: 0%;}h1 {width: 250px;height: 50px;margin-left: 0%;margin-top: 15px;font-size: 58px;font-family: "楷体";color: lemonchiffon;font-style: italic;float: left;}ul {list-style-type: none;width: 400px;margin: 0;padding: 0;position: absolute;bottom: 0;right: 0;}li {float: right;}a {display: block;width: 80px;padding: 10px;text-decoration: none;text-align: center;}a:link, a:visited {background-color: #00bb00;color: #000000;}a:hover, a:active {background-color: #ffffff;}.top2 {background-image: url("img/banner.jpg");background-repeat: no-repeat;/* background-size: 100%; */width: 1800px;height: 343px;position: fixed;top: 103px;}p {font-size: 30px;font-family: "楷体";}table {position: fixed;top: 300px;left: 50%;transform: translateX(-50%);border-collapse: collapse;width: 80%; /* 限制表格宽度为视口宽度的80% */}table h1{font: ;}th, td {padding: 20px; /* 增加单元格内部的间距 */text-align: center;font-size: 20px;font-family: "楷体";}#to {font-size: 30px;font-family: "楷体";}table img {border: 10px solid #fff; /* 设置图片边框 */width: 300px; /* 指定图片宽度 */height: 200px; /* 指定图片高度 */box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); /* 添加阴影效果 */}.top2 img{position: fixed;top: 250px;width: 100%;height: 50px;}body {padding-bottom: 50px; /* 为页脚留出空间 */}.footer{font-size: 16px;font-weight: bold;color: brown;text-align: center;clear: both;background-image: url("img/footer-bg0.jpg");position: fixed;bottom: 0%;left: 45%;}</style>
</head>
<body><div class="top1"><h1 class="cent1">山水之间</h1><ul><li><a href="#">首页</a></li><li><a href="#">诗文</a></li><li><a href="#">风景</a></li><li><a href="#">关于</a></li></ul></div><div class="top2"><p>山和水的融合，是静和动的搭配<br />单调与精彩的结合，也就组成了最美的风是<br />在青山间探索，在绿水间泛舟.…</p><img src="img/top.jpg"/></div><table><caption align="left"><h2>风光欣赏</h2></caption><tr><th><img src="img/img1.jpg"/></th><th><img src="img/img2.jpg"/></th><th><img src="img/img3.jpg"/></th><th><img src="img/img4.jpg"/></th></tr><tr id="to"><td>绿松</td><td>瀑布</td><td>青山</td><td>泛舟</td></tr><tr><td>这几棵松树向阳一边的枝<br />桠，向下斜斜地伸着，像<br />搭起一道绿色的天梯。</td><td>流云奔涌，群山浮动，滚滚的<br />云流翻山而过，直泻深谷，气<br />势磅礴，宏伟壮观。</td><td>湖治生活在山脚下，绿绿<br />的青山环抱着她，清澈的<br />湖水映出身边的生机勃<br />勃。</td><td>泛舟一日景，垂钓一片<br />湖。</td></tr></table><div class="footer">版权所有©山水之间</div>
</body>
</html>
2. 茶韵
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>茶韵</title><style>.top2 img {width: 100%;height: 25%;}.left1 {float: left;}.right1 {float: right;width: 400px;height: 400px;position: fixed;right: 35%;}.right1 img {width: 400px;height: 300px;}.right2 {width: 180px;position: fixed;right: 50px;bottom: 200px;font-size: 35px;}/* .right2.1 {width: 200px;position: fixed;right: 0;} */ul, ol {list-style-type: none;margin: 0;padding: 0;}ul li {float: none;position: relative;}ul li ol {display: none;position: absolute;top: 0;left: -160px;background-color: #eeeeee;}ul li:hover ol {display: block;}ul li ol li {float: none;}ul li ol a {display: block;width: 150px;color: #00cc33;text-decoration: none;}a {display: block;width: 150px;padding: 10px;text-align: center;text-decoration: none;}a:link, a:visited {background-color: #ffffff;color: #000000;}a:hover, a:active {background-color: #ffcc00;color: #000000;}ul li ol a:hover, ul li ol a:active {background-color: #ffcccc;color: #0000cc;}p{font-size: 24px;}.bott{position: fixed;left: 30%;bottom: 236px;}.footer{font-size: 16px;font-weight: bold;color: brown;text-align: center;clear: both;background-image: url("img/footer-bg0.jpg");position: fixed;bottom: 0%;left: 45%;}</style>
</head>
<body><div class="top2"><img src="img/top-bg.jpg"/></div><div class="left1"><p> 闲暇时刻，约上三五志同道合知己，去幽静深林<br />寻一景色优美之亭，沏一壶好茶，知已们吟诗作<br />赋，品品茶道。又或是下几盘好棋，又或是各抒己<br />见，聊聊彼此的胸怀壮志。无不是人生一<br />大乐事。只小小的茶杯，蕴含着无穷的奥秘与无尽之美。从胎<br />士的选择、杯型的拿捏、釉药的施彩、士窑的烧结，<br />茶杯在制作的每一个环节，都蕴藏着大学问。越是小<br />茶杯越有品茶的韵味，轻轻抿一口，在嘴间感受一下<br />茶的沁香，仿佛沁透心间</p></div><div class="right1"><img src="img/main.jpg"/></div><nav><div class="right2"><ul><li><a href="#">首页</a></li><li><a href="#">茶品</a><ol><li><a href="#">乌龙茶</a></li><li><a href="#">普洱茶</a></li><li><a href="#">高山绿茶</a></li></ol></li><li><a href="#">企业</a></li><li><a href="#">联系</a></li><li><a href="#">关于</a></li></ul></div></nav><div class="bott"><a href="#">更多茶文化> ></a></div><div class="footer">版权所有©山水之间</div>
</body>
</html>
