首页 > 其他分享 >第八章 课后练习

第八章 课后练习

时间:2024-11-03 12:17:20浏览次数:4  
标签:text top 第八章 height ul li 课后练习 font

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>山水之间</title>
		<style>
			.all{
				width:900px;
			}
			.top{
				width:900px;
				height: 100px;
				background-image: url(img/top.jpg);
			}
			.aaa{
				line-height: 100px;
				font-size: 60px;
				font-family: "楷体";
				font-style: italic;
				float: left;
			}
			.bbb{
				background-image: url(img/banner.jpg);
				height: 200px;
				margin-top: 10px;
				padding-left: 30px;
			}
			ul{
				list-style-type: none;
				
			}
			li{
				width: 80px;
				float:right;
				margin-top: 60px;
			}
			a{
				display: block;
				font-size: 20px;
				text-align: center;
				line-height: 40px;
				text-decoration: none;
				color: black;
			}
			a:hover{
				background-color: #aaaacc;
				color: white;
			}
			td{
				width: 80px;
				padding-right: 25px;
			}
			img{
				border:7px solid #aaaacc;
			}
			p{
				font-size: 20px;
			}
		</style>
	</head>
	<body>
		<div class="all">
			<div class="top">
				<div class="aaa">山水之间</div>
				<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="bbb">
				<p>山和水的融合,是静和动的搭配</p>
				<p>单调与精彩的结合,也就组成了最美的风景</p>
				<p>在青山间探索,在绿水间泛舟......</p>
			</div>
			<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><p>绿松</p>这几颗松树向阳一边的枝桠,向下斜斜地伸着,像搭起一道绿色的天梯</td>
					<td><p>瀑布</p>流云奔涌,群山浮动,滚滚的云流翻山而过,直污深谷,气势磅碍,宏伟壮观。</td>
					<td><p>青山</p>湖泊生活在山脚下,绿线的青山环抱着她,清澈的湖水映出身边的生机勃勃。</td>
					<td><p>泛舟</p>泛舟一日景,垂钓一片金</td>
				</tr>
			</table>
			<center>
				<br /><br />
				<p>版权所有&copy;山水之间</p>
			</center>
		</div>
	</body>
</html>

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>茶韵</title>
		<style type="text/css">
			.all{
				width: 900px;
				/* height: 900px; */
			}
			.top{
				height: 200px;
				margin: auto;
				background: url(img/top-bg.jpg) no-repeat;
			}
			.aaa{
				text-indent: 2em;
				line-height: 25px;
				width: 380px;
				float: left;
			}
			.aaa a{
				display: block;
				font-size: 20px;
				width:180px;
				line-height: 40px;
				text-align: center;
				text-decoration: none;
				float: right;
			}
			.nav{
				float: right;
				margin-right: 50px;
			}
			a{
				text-decoration: none;
				text-align: center;
				display: block;
				width: 100px;
				line-height: 50px;
				font-size: 20px;
				color: black;
			}
			img{
				margin-top: 20px;
				margin-left: 20px;
				float: left;
			}
			ul,ol{
				list-style-type: none;
				margin: 0;
				padding: 0;
			}
			ul li ol{
				display: none;
				position: absolute;
				top: -1px;
				right:100px;
			}
			ul li:hover ol{
				display: block;
			}
			ul li{
				position: relative;
			}
			ul li:hover,ul li:active{
				color: black;
				font-size: 25px;
				font-weight: bold;
				background-color: darkgray;
			}
			ul li a:hover,ul li a:active{
				color: black;
				font-size: 25px;
				font-weight: bold;
				background-color: darkgray;
			}
			.bbb{
				background-image: url(img/footer-bg.jpg);
				text-align: center;
				margin-top: 300px;
			}
		</style>
	</head>
	<body>
		<div class="all">
			<div class="top"></div>
			<div class="aaa">
				<span>闲暇时刻,约上三五志同道合知己,去幽静深林处,寻一最色优美之亭,沏一壶好茶,知已们吟诗作赋,品品茶道。又或是下几盘好棋,又或是各抒已见,聊聊彼此的胸怀壮志。无不是人生一大乐事。一只小小的茶杯,蕴含着无穷的奥秘与无尽之美。从胎土的选择、杯型的拿捏、釉药的施彩、士窑的烧结,茶杯在制作的每一个环节,都蕴藏着大学问。越是小茶杯越有品茶的韵味,轻轻抿一口,在嘴间感受一下茶的沁香,仿佛沁透心间。</span>
				<a href="#">更多茶文化>></a>
			</div>
			<img src="img/main.jpg"/>
			<br />
			<div class="nav">
				<nav>
					<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>
				</nav>
			</div>
			<div class="bbb">版权所有&copy;茶韵</div>
		</div>
	</body>
</html>

标签:text,top,第八章,height,ul,li,课后练习,font
From: https://blog.csdn.net/xbc811223/article/details/143428305

相关文章

  • 第七章课后练习题二
    用表格布局页面,利用CSS技术,及添加多媒体,制作并美化“心灵之音”页面。代码及运行结果如下:<!DOCTYPEhtml><html> <head> <metacharset="utf-8"> <title>心灵之音</title> <styletype="text/css"> body{ background-image:url(img......
  • 第八章练习题
    <!DOCTYPEhtml><html> <head> <metacharset="utf-8"> <title>山水之间</title> <style> .class1,.class2{ float:left; position:relative; } h1{ position:absolute; top:10px; ......
  • 第八章 利用CSS制作导航菜单课后习题
    1.利用CSS技术,结合链接和列表,设计并实现“山水之间”页面。参考代码:<!DOCTYPEhtml><html> <head> <metacharset="utf-8"> <title>山水之间</title> <style> .all{ width:900px; } .top{ width:900px; height:100px;......
  • 认识网络设备—课后练习
    认识网络设备—课后练习一、单选题1.下列网络设备中具有连接不同网络功能的是()A.交换机B.路由器C.集线器D.中继器2.以下设备中负责将计算机连接到网络的是()A.路由器B.交换机C.网卡D.中继器3.中继器的主要功能是()A.增加网络连接的距离B.确保网络数据的可靠......
  • Java基础第八章(多态)
    多态1.方法体现多态方法重载体现多态对象通过传入不同数量的参数,会调用不同的sun方法,体现出多态方法重写体现多态A类和B类是继承关系,通过不同对象调用对应类中重写的方法体现2.对象体现多态编译是javac,运行是java(1)一个对象的编译类型和运行类型可以不一致将父......
  • 第八章习题13-写一个用矩形法求定积分的通用函数,分别求积分区间为[0,1]sinx,cosx,e的x方
     ......
  • 课后练习-登录-2024/9/29
    该登录界面是用JOptionPane弹窗接收用户名和密码,之后在数据库中搜索是否存在,最后显示登录成功与否实现loginTest.javapackageJDBC_Test;importcom.alibaba.druid.pool.DruidDataSource;importcom.alibaba.druid.pool.DruidDataSourceFactory;importjavax.sql.DataSou......
  • 课后练习
    packageshi;importjava.util.Random;publicclassshi{publicstaticvoidmain(String[]args){Randomrandom=newRandom();intnum1,num2,result=0;intoperation;for(inti=0;i<30;i++){//Generaterandomnumbersbet......
  • 信安软考总结-第八章 防火墙技术原理与应用
    防火墙概述防火墙概念不做特殊说明,认为防火墙只有ACL功能安全区域:公共外部网络:Internet内联网外联网(≠外网):常用作组织和合作伙伴之间进行通信军事缓冲区域(DMZ):常防止公共服务设备,向外提供信息服务防火墙安装在不同的安全区域边界处,用于网络通信安全控制,由专用......
  • 第八章习题4-有个整数,使前面各数顺序向后移个m个位置,最后m个数变成最前面m个数,见图
     ......