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

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/copy2.css" rel="stylesheet" type="text/css"/>
	</head>
	<body>
		<div class="bg">
			<img src="img/top-bg.jpg"/><br /><br />
			<div class="text">
				闲暇时刻，约上三五志同道合知己，去幽静深林处，寻一景色优美之亭，沏一壶好茶，知己们吟诗作赋，品品茶道。又或是下几盘好棋，又或是各抒己见，聊聊彼此的胸怀壮志。无不是人生一大乐事。只小小的茶杯，蕴含着无穷的奥秘与无尽之美。从胎土的选择、杯型的拿捏、釉药的施彩、士窑的烧结，茶杯在制作的每一个环节，都蕴藏着大学问。越是小茶杯越有品茶的韵味，轻轻抿一口，在嘴间感受一下茶的沁香，仿佛沁透心间。
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">更多茶文化>></a>
			</div>
			<div class="bg2">
				<img src="img/main.jpg"/>
				<ul>
					<li><a>首页</a></li>
					<li><a>茶品</a>
					<ol>
						<li><a>乌龙茶</a></li>
						<li><a>普洱茶</a></li>
						<li><a>山高绿茶</a></li>
					</ol>
					</li>
					<li><a>企业</a></li>
					<li><a>联系</a></li>
					<li><a>关于</a></li>
				</ul>
			</div>
			<div class="h">版权所有&copy;茶韵</div>
		</div>
	</body>
</html>

CSS代码如下：

		.bg{
				width: 900px;
			}
			.text{
				text-indent: 2em;
				width: 420px;
				float: left;
			}
			.left a{
				
				font-style: italic;
				text-decoration: none;
			}
			.bg2{
				width: 420px;
				float: right;
				display: flex;
				align-items: flex-start; 
				gap: 60px;
			}
			.h{
				width: 900px;
				position: absolute;
				bottom: 330px;
				text-align: center; 
				background-color: #ffff00;
			}
			ul{
				margin-top: -1px;
				float:right;
				margin-left: -1px;
			}
			ul li{
				list-style-type: none;
				position: relative;
			}
			ul li ol {
				display: none;
				position: absolute;
				list-style-type: none;
				top: -1px;
				left: -100px;
			}
			ul li a{
				text-align: center;
				margin-top: 0;
				line-height: 40px;
				width: 60px;
				display: block;
			}
			ul li ol li a{
				font-size: 13px;
				font-weight: bold;
			}
			ul li:hover ol{
				display: block;
			}
			ul li a:hover{
				font-weight: bolder;
				background-color: #acacac;
			}
			ul li ol li a:hover{
				background-color: #0b6eff;
			}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/907493.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

dhcp池没有空闲ip导致手机无法获得ip

dhcp池没有空闲ip导致手机无法获得ip

得到用户反馈&#xff0c;一个高速项目部的wifi无法接入&#xff0c;让排查原因。 反馈有的手机能接入&#xff0c;有的接入不了。查看ac界面发现有个终端获得的ip是169.254.xxx.xxx。 ip地址是169.254.96.17显然是手机打开wlan开关后&#xff0c;鉴权通过后dhcp过程&#xff0…
阅读更多...
AJAX和JSON

AJAX和JSON

一.AJAX技术 1.1 AJAX介绍 Ajax 即“Asynchronous Javascript And XML”&#xff08;异步 JavaScript 和 XML&#xff09;&#xff0c;是指一种创建 交互式、快速动态应用的网页开发技术&#xff0c;无需重新加载整个网 页的情况下&#xff0c;能够更新页面局部数据的技术。 通…
阅读更多...
c++包装器/适配器 function--通俗易懂

c++包装器/适配器 function--通俗易懂

1.为什么要有function 在下面的场景下 useF类模版要实例化出三份&#xff0c;影响效率 仿函数:c仿函数--通俗易懂-CSDN博客 lambda表达式&#xff1a;c lambda表达式--通俗易懂-CSDN博客 template<class F, class T> T useF(F f, T x) {static int count 0;cout <…
阅读更多...
项目模块十五：HttpResponse模块

项目模块十五：HttpResponse模块

一、模块设计思路 存储HTTP应答要素&#xff0c;提供简单接口 二、成员变量 int _status; // 应答状态码 unordered_map<string, string> _headers; // 报头字段 string _body; // 应答正文 bool _redirect_flag; // 是否重定向信息 stri…
阅读更多...
【sqlmap使用】

【sqlmap使用】

sqlmap简介 sqlmap 目录结构 sqlmap常用参数 sqlmap实现注入 测试注入点&#xff0c;检测到注入点后&#xff0c;直接爆数据库名 python sqlmap.py –u http://172.16.12.2/7/9/strsql.php --data "usernameadmin" --dbs注意sqlmap在使用过程中可能会出现几个需要…
阅读更多...
Java已死，大模型才是未来？

Java已死，大模型才是未来？

作者&#xff1a;不惑_ 引言 在数字技术的浪潮中&#xff0c;编程语言始终扮演着至关重要的角色。Java&#xff0c;自1995年诞生以来&#xff0c;便以其跨平台的特性和丰富的生态系统&#xff0c;成为了全球范围内开发者们最为青睐的编程语言之一 然而&#xff0c;随着技术的…
阅读更多...
Rust 力扣 - 59. 螺旋矩阵 II

Rust 力扣 - 59. 螺旋矩阵 II

文章目录 题目描述题解思路题解代码题目链接 题目描述 题解思路 使用一个全局变量current记录当前遍历到的元素的值 我们只需要一圈一圈的从外向内遍历矩阵&#xff0c;每一圈遍历顺序为上边、右边、下边、左边&#xff0c;每遍历完一个元素后current 我们需要注意的是如果上…
阅读更多...
MFC工控项目实例二十八模拟量信号每秒采集100次

MFC工控项目实例二十八模拟量信号每秒采集100次

用两个多媒体定时器&#xff0c;一个定时0.1秒计时&#xff0c;另一个定时0.01秒用来对模拟量信号采集每秒100次。 1、在SEAL_PRESSUREDlg.h中添加代码 class CSEAL_PRESSUREDlg : public CDialo { public:CSEAL_PRESSUREDlg(CWnd* pParent NULL); // standard constructor&a…
阅读更多...
用插值公式实现滚动进度条动画效果

用插值公式实现滚动进度条动画效果

我们在日常前端开发时在动画的选择上基本都是css&#xff0c;通过css的animation即可满足大部分的开发场景&#xff0c;如果遇到了特殊而比较不容易实现的效果就会考虑到用js来实现&#xff0c;而本次的主题&#xff0c;就是围绕用js来做一个比较不常见的特殊动画效果。 假设我…
阅读更多...
【1个月速成Java】基于Android平台开发个人记账app学习日记——第4天，注册登录逻辑代码

【1个月速成Java】基于Android平台开发个人记账app学习日记——第4天，注册登录逻辑代码

24.11.03 1.输入手机号跳转功能 第一个要设计的功能是&#xff0c;输入手机号以后跳转到另一个页面&#xff0c;输入获取得到的验证码页面。先拿这个功能练练手。 首先看一下此时的完整项目结构&#xff1a; 主要是添加了2个活动类和对应的界面&#xff0c;下面看详细的代码…
阅读更多...
ubuntu【桌面】 配置NAT模式固定IP

ubuntu【桌面】 配置NAT模式固定IP

DHCP分配导致虚拟机IP老变&#xff0c;SSH老要重新配置&#xff0c;设成静态方便些 一、设NAT模式 1、设为NAT模式 2、看模式对应的虚拟网卡 - VMnet8 3、共享主机网卡网络到虚拟网卡 - VMnet8 二、为虚拟网卡设置静态IP 记住这个IP 三、设置ubuntu固定IP 1、关闭DHCP并…
阅读更多...
数智驱动，纷享销客助力万东医疗实现精细化管理

数智驱动，纷享销客助力万东医疗实现精细化管理

数字化浪潮正在席卷整个医疗影像行业&#xff0c;数字化工具对疾病诊疗效率和诊疗质量的提升也有目共睹。北京万东医疗科技股份有限公司&#xff08;以下简称“万东医疗”&#xff0c;股票代码 600055&#xff09;成立于1955年&#xff0c;1997 年在上海证交所上市&#xff0c;…
阅读更多...
项目模块十四：HttpRequest模块

项目模块十四：HttpRequest模块

一、项目设计思路 存储HTTP请求要素&#xff0c;提供简单接口 二、成员变量 全部公有 string _method; // 请求方法 string _path; // 资源路径 string _version; // 协议版本 string _body; // 请求正文 smatch _matches; // 资源路径正则提取 …
阅读更多...
[HNCTF 2022 Week1]calc_jail_beginner_level3(JAIL)

[HNCTF 2022 Week1]calc_jail_beginner_level3(JAIL)

开启靶场&#xff0c;打开链接&#xff0c;下载附件&#xff1a; 嗯&#xff0c;直接显示“Oh hacker!”&#xff0c;有点懵&#xff0c;先看看下载的附件&#xff08;server.py&#xff09;&#xff1a; 得到信息如下&#xff1a; 用户输入的表达式长度被限制在7个字符以内。…
阅读更多...
最短路的求解

最短路的求解

实验类型&#xff1a;◆验证性实验 ◇综合性实验 ◇设计性实验 实验目的&#xff1a;学会使用Matlab求解最短路。 实验内容&#xff1a;1.熟练运用Floyd算法&#xff1b;2. 熟练运用Dijkstra算法&#xff1b;3.利用Matlab编程实现最短路的计算。 例1&#xff1a;已知无向图…
阅读更多...
目前最新最好用 NET 混淆工具 .NET Reactor V6.9.8

目前最新最好用 NET 混淆工具 .NET Reactor V6.9.8

目前最新最好用 NET 混淆工具 .NET Reactor V6.9.8 1、.NET Reactor V6.9.8 功能简介2、官方下载 1、.NET Reactor V6.9.8 功能简介 业界领先的源代码保护 .NET Reactor通过多种方法来防止反编译&#xff0c;这些方法会将 .NET 程序集转换为任何现有工具都无法反编译的进程。…
阅读更多...
为啥学习数据结构和算法

为啥学习数据结构和算法

基础知识就像是一座大楼的地基&#xff0c;它决定了我们的技术高度。而要想快速做出点事情&#xff0c;前提条件一定是基础能力过硬&#xff0c;“内功”要到位。 想要通关大厂面试&#xff0c;千万别让数据结构和算法拖了后腿 我们学任何知识都是为了“用”的&#xff0c;是为…
阅读更多...
Ubuntu 24.04上启用 root 用户通过 SSH 和图形界面进行登录

Ubuntu 24.04上启用 root 用户通过 SSH 和图形界面进行登录

一、启用 root 用户的密码登录 设置 root 用户密码&#xff1a; 在终端中输入以下命令为 root 用户设置一个密码&#xff1a; testtest-virtual-machine:~$ sudo passwd root [sudo] test 的密码&#xff1a; 新的密码&#xff1a; 无效的密码&#xff1a; 密码是一个回文…
阅读更多...
卡尔曼滤波器-Kalmen Filter-1

卡尔曼滤波器-Kalmen Filter-1

卡尔曼滤波器是一种最优递归数据处理算法&#xff0c;它更像是一种观测器&#xff0c;而不是一般意义上的滤波器。卡曼滤波器的应用非常广泛&#xff0c;尤其是在导航当中。它的广泛应用是因为我们生活的世界中存在着大量的不确定性&#xff0c;当我们去描述一个系统的时候&…
阅读更多...
C++ | Leetcode C++题解之第519题随机翻转矩阵

C++ | Leetcode C++题解之第519题随机翻转矩阵

题目&#xff1a; 题解&#xff1a; class Solution { public:Solution(int m, int n) {this->m m;this->n n;this->total m * n;srand(time(nullptr));}vector<int> flip() {int x rand() % total;vector<int> ans;total--; // 查找位置 x 对应的…
阅读更多...
最新文章

Copyright @ 2022~2023