第八章 利用CSS制作导航菜单习题

1.利用CSS技术,结合链接和列表,设计并实现"山水之间"页面

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>山水之间</title>
		<style type="text/css">
			.bcd{
				width: 980px;
				
			}
			.b{
				width: 980px;
				background: url(img/top.jpg);
			}
			h3{
				font-size: 30px; 
				font-style: italic;																																																																				
			}
			a{
				text-decoration: none;
				font-size: 20px;
				margin: 2px;
			}
			a:hover{
				background-color: lawngreen;
				color: black;
				
			}
			.c{
				width: 950px;
				background: url(img/banner.jpg);
				height: 200px;
				margin-top: 10px;
				padding-left: 30px;
			}
			.d{
				width: 980px;
			}
			img{
				border: 7px solid #aaafff;
			}
			.jieshu{
				width: 980px;
				height: 30px;
				background-color: burlywood;
				font-size: 20px;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div class="bcd">
			<div class="b">
				<h3>
					山水之间
				</h3>
				<p align="right">
					<a href="#">首页</a>
					<a href="#">诗文</a>
					<a href="#">风景</a>
					<a href="#">留言</a>
					<a href="#">关于</a>
				</p>
			</div>
			<div class="c">
				<p>
					山和水的融合,是静和动的搭配
					<br />
					单调与精彩的结合,也就组成了最美的凤景
					<br />
					在青山间探索,在绿水间泛舟......
				</p>
			</div>
			<div class="d">
				<h1>风光欣赏</h1>
				<table>
								<tr>
									<td><img src="img/img1.jpg"/></td>
									<td><img src="img/img2.jpg"/></td>
									<td><img src="img/img3.jpg"/></td>
									<td><img src="img/img4.jpg"/></td>
								</tr>
								<tr>
									<td><h2>绿松</h2>这几颗松树向阳一边的枝桠,向下斜斜地伸着,像搭起一道绿色的天梯</td>
									<td><h2>瀑布</h2>流云奔涌,群山浮动,滚滚的云流翻山而过,直污深谷,气势磅碍,宏伟壮观。</td>
									<td><h2>青山</h2>湖泊生活在山脚下,绿线的青山环抱着她,清澈的湖水映出身边的生机勃勃。</td>
									<td><h2>泛舟</h2>泛舟一日景,垂钓一片金</td>
								</tr>
							</table>
							<div class="jieshu">
								<p>版权所有&copy;山水之间</p >
							</div>
		</div>
	</body>
</html>

显示效果

2.利用CSS技术,结合链接和列表,设计并实现"茶韵"页面

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>茶韵</title>
		<style type="text/css">
			.bcd{
				width: 800px;
			}
			.bc{
				width: 800px;
				height: 200px;
			}
			.b{
				float: left;
				width: 350px;
				
			}
			.c{
				float: left;
				margin-left: 10px;
			}
			.d{
				float: right;	
			}
			#nav{
				width: 89px;
			}
			ul{
				margin: 0;
				padding: 0;
				list-style-type: none;
			}
			ul li{
				height: 30px;
				line-height: 30px;
				text-align: center;
				
			}
			ul li ol{
				display: none;
				width: 120px;
				
				position: absolute;
				top: 242px;
				left: 600px;
			}
			ul li:hover ol{
				display: block;
			}
			ul,ol{
				margin: 0px;
				padding: 0px;
				list-style-type: none;
			}
			ul li:link{
				font-size: 20px;
			}
			ul li:hover{
				background-color: brown;
				color: aquamarine;
			}
			ul li ol li a:link{
				font-size: 15px;
				text-decoration: none;
			}
			ul li ol li a:hover{
				background-color: brown;
				color: white;
			}
			.jieshu{
				margin-top: 40px;
				text-align: center;
				background: url(img/footer-bg.jpg);
				width: 900px;
			}
		</style>
	</head>
	<body>
		<div class="bcd">
			<div><img src="img/top-bg.jpg"/></div>
			<div class="bc">
				<div class="b">
					<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						闲暇时刻,约上三五志同道合知己,去幽静深林处,寻一最色优美之亭,沏一壶好茶,知已们吟诗作赋,品品茶道。
						又或是下几盘好棋,又或是各抒已见,聊聊彼此的胸怀壮志。无不是人生一大乐事。一只小小的茶杯,蕴含着无穷的奥秘与无尽之美。
						从胎土的选择、杯型的拿捏、釉药的施彩、士窑的烧结,茶杯在制作的每一个环节,都蕴藏着大学问。
						越是小茶杯越有品茶的韵味,轻轻抿一口,在嘴间感受一下茶的沁香,仿佛沁透心间。
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">更多茶文化>></a>
					</span>
				</div>
				<div class="c"><img src="img/main.jpg"/></div>
				<div class="d">
						<nav>
							<div id="nav">
								<ul>
									<li>首页</li>
									<li>
										茶品
										<ol>
											<li><a href="#">乌龙茶</a></li>
											<li><a href="#">普洱茶</a></li>
											<li><a href="#">高山绿茶</a></li>
										</ol>
									</li>
									<li>企业</li>
									<li>联系</li>
									<li>关于</li>
								</ul>
							</div>	
						</nav>
				</div>
			</div>
			
			
			
			
		</div>
		<div class="jieshu">
			<p>版权所有&copy;茶韵</p>
		</div>
	</body>
</html>

显示效果

相关推荐
wumu_Love5 分钟前
npm 和 node 总结
前端·npm·node.js
顾辰呀9 分钟前
css 文字一行没有放满不进行换行
前端·javascript·css·vue.js·css3
nixiaoge35 分钟前
Web前端第二次作业
前端·javascript·css3
浮华似水1 小时前
Docker入门系列——镜像原理
前端
Gavin_9151 小时前
【JavaScript】数组-集合-Map-对象-Class用法一览
开发语言·前端·javascript
张保瑞1 小时前
十一:java web(3)-- Spring框架 -- Spring简介
java·前端·spring
墨柳烟1 小时前
ABAQUS高亮显示网格节点方法:Python为每个节点建立集合
开发语言·前端·python·abaqus
琴~~2 小时前
前端根据后端返回的文本流逐个展示文本内容
前端·javascript·vue
zhaocarbon2 小时前
el-scrollbar 动态更新内容 鼠标滚轮无效
前端·javascript·vue.js
一纸忘忧2 小时前
Nuxt 3.14 发布!全新功能与性能提升
前端·javascript·vue.js