第八章习题 - 技术栈

习题1

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>山水之间</title>
		<style type="text/css">
			.a{
				background-image: url("img/top.jpg");
				height: 100px;
			}
			.a p{
				position: absolute;`
				left:0;
				top: -3%;
				font-size: 54px;
				font-family: "楷体";
			}
			.a ul {
			    list-style-type: none;
			    margin: 0;
			    padding: 0;
			    display: flex;
				position: absolute;
				top: 9%;
				right: 0%;
			}
			
			.a ul li {
			    margin: 0 10px;
			}
			
			.a ul li a {
			    color: black;
			    text-decoration: none;
			    padding: 5px 10px;
			}
			
			.a ul li a:hover {
			    background-color: #000000;
				color: white;
			}
			.b{
				background-image: url("img/banner.jpg");
				height: 150px;
				background-size: cover;
			}
			.b p{
				margin: 40px;
			}
			.c{
				background-image: url("img/top.jpg");
				height: 50px;
			}
			.d img{
				width: 380px;
				height: 225px;
				margin: 20px;
			}
			.x{
				font-size: 48px;
				font-family: "楷体";
			}
			.y{
				color: #A9A9A9;
				text-align: center;
			}
			h1{
				font-size: 48px;
				font-family: "楷体";
			}
			td{
				text-align: left;
				font-size: 25PX;
			}
		</style>
	</head>
	<body>
		<div class="a">
			<p>山水之间</p>
			<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>
		</div>
		<div class="b">
			<p>山和水的融合，是静和动的搭配<br/></p>
			<p>单调与精彩的结合，也就组成了最美的风景<br/></p>
			<p>在青山间探索,在绿水间泛舟......<br/></p>
		</div>
		<div class="c"></div>
		<div class="d">
			<h1>风光欣赏</h1>
			<table>
			<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>
				<td><span class="x">绿松</span><br/>
				这几棵松树向阳一边的枝<br/>
				桠，向下斜斜地伸着，像<br/>
				搭起一道绿色的天梯。<br/>
				</td>
				<td><span class="x">瀑布</span><br/>
				流云奔涌,群山浮动,滚滚的<br/>
				云流翻山而过,直泻深谷,气<br/>
				势磅碣,宏伟壮观。<br/>
				</td>
				<td><span class="x">青山</span><br/>
				湖治生活在山脚下，绿绿<br/>
				的青山环抱着她，清澈的<br/>
				湖水映出身边的生机勃勃。<br/>
				</td>
				<td><span class="x">泛舟</span><br/>
				泛舟一日景,垂钓一片湖<br/>
				</td>
			</tr>
			</table>
		</div>
		<div class="y">版权所有&copy;山水之间</div>
	</body>
</html>

习题2

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>茶韵</title>
    <style type="text/css">
        .a{
            background-image: url("img/top-bg.jpg");
            background-size: cover;
            height:400px;
        }
        .b p{
            float: left;
            font-size: 24px;
        }
        .b img{
            width: 350px;
            height: 280px;
        }
        .b ul{
            list-style-type: none;
            font-size: 36px;
            position: absolute;
            right: 0;
            top: 40%;
        }
        .b ul li {
            position: relative;
			color: #000000;
        }
        .b ul li a:hover{
            background-color: #000000;
            color: #ffffff;
        }
        .b ul li ol{
            display: none;
            position: absolute;
            right: 100%; 
            top: 0;
            background-color: #ffffff;
            color: #000000;
			font-size: 24px;
			width: 100px;
        }
        .b ul li:hover ol{
            display: inline-block;
			
        }
        .b ul li ol li a:hover{
            background-color: #000000;
            color: #ffffff;
        }
		.c{
			background-image: url("img/footer-bg(2).jpg");
			background-size: cover;
			text-align: center;
			height: 30px;
			font-size: 24px;
		}
    </style>
</head>
<body>
    <div class="a"></div>
    <div class="b">
        <p>
            闲暇时刻，约上三五志同道合知已，去幽静深林处，<br/>
            寻一景色优美之亭，沏一壶好茶，知已们吟诗作赋，品品茶道。<br/>
            又或是下几微好棋，又或是各抒已见，即聊彼此的胸怀壮志。<br/>
            无不是人生一大乐事。只小小的茶杯，蕴含着无穷的奥秘与无层之美。<br/>
            从胎土的选择、杯型的拿捏、釉药的施彩、士窑的烧结，<br/>
            茶杯在制作的每一个环节，都蕴着大学问。越是小茶杯越有品茶的韵味，<br/>
            轻轻抿一口，在嘴间感受一下茶的沁香，仿佛沁透心间。更多茶文化>><br/>
        </p>
        <img src="img/main(2).jpg" align="center"/>
        <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>
	<div class="c">
		<p>版权所有&copy;茶韵</p>
	</div>
</body>
</html>