第八章 利用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>

显示效果

相关推荐
学不会•1 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
活宝小娜4 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点4 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow4 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o4 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
开心工作室_kaic5 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端
刚刚好ā5 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
沉默璇年6 小时前
react中useMemo的使用场景
前端·react.js·前端框架
yqcoder6 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript
2401_882727576 小时前
BY组态-低代码web可视化组件
前端·后端·物联网·低代码·数学建模·前端框架