首页 > 其他分享 >第8章 利用CSS制作导航菜单作业

第8章 利用CSS制作导航菜单作业

时间:2024-11-06 21:15:05浏览次数:3  
标签:菜单 img 导航 top repeat background margin CSS left

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

浏览效果如下:

HTML代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>山水之间</title>
		<link type="text/css" href="css/293-1.css" rel="stylesheet"/>
	</head>
	<body>
		<nav>
		<div class="div1">
			<h1>山水之间</h1>
				<div class="div2">
					<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>
				</div>
				<img src="img/banner.jpg"/>
				<p>山和水的融合,是静和动的搭配<br /><br />
				   单调与精彩的结合,也就组成了最美的风景<br /><br />
				   在青山间探索,在绿水间泛舟….
				</p>
				<h2>风光欣赏</h2>
		</div>
			<div id="d1">
				<div id="d2">
					<div id="pdiv1">
						绿松
						<div id="ppdiv1">这几棵松树向一边的枝桠,向下斜斜地伸着,像搭起一道绿色的天梯。
						</div>
					</div>
				</div>
			</div>
			<div id="d3">
				<div id="d4">
					<div id="pdiv1">
						瀑布
						<div id="ppdiv1">流云奔涌,群山浮动,滚滚的云流翻山而过,直泻深谷,气势磅礴,宏伟壮观。</div>
					</div>
				</div>
			</div>
			<div id="d5">
				<div id="d6">
					<div id="pdiv1">
						青山
						<div id="ppdiv1">湖泊生活在山脚下,绿绿的青山环抱着她,清澈的湖水映出身边的生机勃勃。</div>
					</div>
				</div>
			</div>
			<div id="d7">
				<div id="d8">
					<div id="pdiv1">
						泛舟
						<div id="ppdiv1">泛舟一日景,垂钓一片湖。</div>
					</div>
				</div>	
				
			</div>
		<p class="p">版权所有&copy;山水之间</p>
		</nav>
	</body>
</html>

CSS代码如下:

		.div1{
				width: 1000px;
				height: 200px;
				background: url(../img/top.jpg) no-repeat;
			}
			.div2{
				margin-top: -50px;
			}
			#d1{
				width: 220px;
				height: 180px;
				margin-left: 20px;
				margin-top: 180px;
				background: url(../img/img-bg.png) no-repeat;
			}
			#d2{
				width:200px;
				height: 140px;
				margin-left: 11px;
				position: absolute;
				margin-top: 10px;
				background-repeat: no-repeat;
				background-image: url(../img/img1.jpg);
			}
			#d3{
				width: 220px;
				height: 180px;
				margin-left: 270px;
				margin-top: -180px;
				background: url(../img/img-bg.png) no-repeat;
			}
			#d4{
				width:200px;
				height: 140px;
				margin-left: 11px;
				position: absolute;
				margin-top: 10px;
				background-repeat: no-repeat;
				background-image: url(../img/img2.jpg);
			}
			#d5{
				width: 220px;
				height: 180px;
				margin-left: 520px;
				margin-top: -180px;
				background: url(../img/img-bg.png) no-repeat;
			}
			#d6{
				width:200px;
				height: 140px;
				margin-left: 11px;
				position: absolute;
				margin-top: 10px;
				background-repeat: no-repeat;
				background-image: url(../img/img3.jpg);
			}
			#d7{
				width: 220px;
				height: 180px;
				margin-left: 770px;
				margin-top: -180px;
				background: url(../img/img-bg.png) no-repeat;
			}
			#d8{
				width:200px;
				height: 140px;
				margin-left: 11px;
				position: absolute;
				margin-top: 10px;
				background-repeat: no-repeat;
				background-image: url(../img/img4.jpg);
			}
			#pdiv1{
				font-size: 25px;
				color: #008000;
				margin-top: 160px;
				margin-left: -11px;
			}
			#ppdiv1{
				color: #000000;
				font-size: 19px;
			}
			.p{
				font-family: heiti;
				font-weight: bold;
				color:#00ff00;
				margin-top: 135px;
				margin-left: 400px;
			}
			h1{
				font-size: 50px;
				font-style: italic;
				
				padding-top: 15px;
				padding-left: 15px;
			}
			li {
				list-style-type: none;
				float: right;
			}
			a{
				text-decoration: none;
				display: block;
				margin: 0 8px;
				right: 30px;
			}
			 li a:hover{
				background-image: url(../img/menu-bg.jpg);
			}
			img{
				width: 1000px;
				margin-top: 20px;
			}
			p{
				font-size: 19px;
				margin-top: -200px;
				margin-left: 22px;
			}
			h2{
				margin-top: 90px;
			}

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

浏览效果如下:

HTML代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>茶韵</title>
		<link href="css/293-2.css" rel="stylesheet" type="text/css"/>
	</head>
	<body>
		<div>
			<img src="img/top-bg.jpg" width="800px"/>
			<div class="left">
				<p>
					闲暇时刻,约上三五志同道合知己,去幽静深林处,寻一景色优美之亭,沏一壶好茶
					,知己们吟诗作赋,品品茶道。又或是下几盘好棋,又或是各抒己见,聊聊彼此的胸怀壮志。
					无不是人生一大乐事。一只小小的茶杯,蕴含着无穷的奥秘与无尽之美。
					从胎土的选择、杯型的拿捏、釉药的施彩、士窑的烧结,茶杯在制作的每一个环节,
					都蕴藏着大学问。越是小茶杯越有品茶的韵味,轻轻据一口,在嘴间感受一下茶的沁香,仿佛沁透心间。 
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#" id="a">更多茶文化>></a>
				</p>
			</div>
			<nav>
				
				<div class="right">
				<img src="img/main.jpg" width="200px"/>
				<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 id="div">
				版权所有茶韵&copy;茶韵
			</div>
		</div>
	</body>
</html>

CSS代码如下:

		.left{
				width: 400px;
				text-indent: 2em;
				font-size: 15px;
			}
			#a{
				font-style: italic;
			}
			.right{
				margin-left: 420px;
				margin-top: -175px;
			}
			#div{
				width: 800px;
				margin-top: 15px;
				text-align: center;
				font-weight: bold;
				color: #006400;
				background-image: url(../img/footer-bg.jpg);
				background-repeat: no-repeat;
			}
			a{
				text-decoration: none;
				line-height: 35px;
			}
			ul,ol{
				
				list-style-type: none;
				margin-top: -150px;
				margin-left: 250px;
			}
			ul li a:hover{
				width: 40px;
				display: block;
				margin: 0;
				background-image: url(../img/menu-bg.jpg);
			}
			ul li ol{
				position: absolute;
				display: none;
				left: 350px;
				top: 415px;
			}
			ul li:hover ol{
				display: block;
			}
			ul li a:hover{
				background-image: url(../img/menu-bg.jpg);
			}
			ul li ol li a:hover{
				width: 80px;
				display: block;
				background-image: url(../img/menu-bg.jpg);
			}

标签:菜单,img,导航,top,repeat,background,margin,CSS,left
From: https://blog.csdn.net/2302_80572539/article/details/143464463

相关文章

  • CSS弹性布局:灵活布局的终极指南
    在网页设计中,CSS弹性布局(Flexbox)是一个不可或缺的工具。它能帮助你轻松地排列和对齐元素,尤其是在响应式设计中表现出色。今天,我们就来深入探讨一下Flexbox的各个属性,让你彻底掌握这个强大的布局工具。一、什么是Flexbox?CSS弹性布局(Flexbox)是一个强大的布局模型,旨在......
  • HTML&CSS:爱上班的猫咪
    这段HTML和CSS代码是一个SVG动画的示例,它描述了一个包含猫咪和笔记本电脑的复杂场景HTML<divclass="content"><divclass="container"><svgid="bongo-cat"xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org......
  • 【基于PSINS工具箱】以速度为观测量的SINS/GNSS组合导航,CKF滤波
    基于【PSINS工具箱】,提供一个MATLAB例程,仅以速度为观测量的SINS/GNSS组合导航(滤波方式为CKF),无需下载,订阅专栏后可直接复制文章目录工具箱程序简述运行结果代码程序讲解代码功能概述代码结构与关键步骤结论工具箱本程序需要在安装工具箱后使用,工具箱是开源的,链......
  • 基于【PSINS工具箱】提供一个MATLAB例程,仅以速度为观测量的SINS/GNSS组合导航
    基于【PSINS工具箱】,提供一个MATLAB例程,仅以速度为观测量的SINS/GNSS组合导航(滤波方式可选EKF/UKF/CKF),无需下载,订阅专栏后可直接复制文章目录工具箱程序简述运行结果程序源代码程序讲解代码功能概述代码结构与关键步骤结论工具箱本程序需要在安装工具箱后使用,......
  • web前端期末大作业:云南旅游网页主题网站设计——西双版纳四页HTML+CSS
    一、......
  • 小可爱们!你们要的css网页美化知识ta来了和你们相见啦!
    CSS知识介绍文章目录CSS知识介绍1.基本概念1.1什么是CSS?1.2CSS的作用2.主要特点2.1层叠性2.2继承性2.3选择器3.语法3.1基本语法4.常用属性4.1文本和字体4.2盒模型4.3背景4.4显示和定位5.布局方式5.1浮动布局5.2Flexbox布局5.3Grid布局6.响......
  • css
    如何使用CSSCSS是在HTML4开始使用的,是为了更好的渲染HTML元素而引入的.CSS可以通过以下方式添加到HTML中:内联样式-在HTML元素中使用"style" 属性内部样式表-在HTML文档头部<head>区域使用<style> 元素 来包含CSS外部引用-使用外部CSS 文件最好的方式是......
  • vue3 如何使用router路由表 创建 Menu 导航菜单
    vue3如何使用router路由表创建Menu导航菜单1.vue3如何使用router路由表创建Menu导航菜单1.1.安装VueRouter1.2.设置路由1.3.在主应用中使用路由1.4.创建导航菜单组件1.5.在布局中使用导航菜单 1.vue3如何使用router路由表创建M......
  • 【JavaScript进阶部分——DOM操作 (节点获取,节点属性修改,节点创建与插入,CSS样式的修改)
    ‌DOM操作‌是指对文档对象模型(DocumentObjectModel,简称DOM)进行增删改查等操作的过程。DOM是一种表示和操作HTML、XML等文档的标准编程接口,它将文档解析为一个由节点和对象(包含属性和方法)组成的集合,开发者可以通过DOM提供的接口来访问和操作文档的各个部分,包括元素、属性、文......
  • 相识css
    背景属性背景颜色(默认是无色,transparent)背景图片背景平铺背景位置(1)x,y方式(2)方位名词left   right center等(3)两者混合背景尺寸background-size:contain 与 cover有区别圆角矩形50%为圆形值越大角越圆盒模型每个html元素相当于是一个矩形的盒子......