第八章习题

最新推荐文章于 2025-05-18 10:00:41 发布

亚v

最新推荐文章于 2025-05-18 10:00:41 发布

阅读量286

点赞数 1

文章标签： css javascript 前端

本文链接：https://blog.csdn.net/2403_87185636/article/details/143695557

版权

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">版权所有&copy;山水之间</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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;闲暇时刻，约上三五志同道合知己，去幽静深林<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="#">更多茶文化>&nbsp;></a>
  </div>
  <div class="footer">版权所有&copy;山水之间</div>
</body>
</html>