第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/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);}

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

32单片机HAL库的引脚初始化

在使用HAL库时&#xff0c;GPIO初始化函数定义在stm32f4xx_hal_gpio.c文件中&#xff0c;如下&#xff1a; void HAL_GPIO_Init(GPIO_TypeDef *GPIOx, GPIO_InitTypeDef *GPIO_Init); 由这个函数可以看出&#xff0c;在初始化GPIO时&#xff0c;需要向函数传入2个结构体&…

Django安装

在终端创建django项目 1.查看自己的python版本 输入对应自己本机python的版本&#xff0c;列如我的是3.11.8 先再全局安装django依赖包 2.在控制窗口输入安装命令&#xff1a; pip3.11 install django 看到Successflully 说明我们就安装成功了 python的Scripts文件用于存…

网络层5——IPV6

目录 一、IPv6 vs IPv4 1、对IPv6主要变化 2、IPv4 vs IPv6 二、IPv6基本首部 1、版本——4位 2、通信量类——8位 3、流标号——20位 4、有效载荷长度——16位 5、下一个首部——8位 6、跳数限制——8位 7、源 、 目的地址——128位 8、扩展首部 三、IPv6地址 1…

怎么样鉴定疾病相关稀有细胞群?二值化精细模型标签,这个刚发的顶刊单细胞算法值得一学!

生信碱移 HiDDEN&#xff1a;抽丝剥茧 在具有病例和对照单细胞RNA测序研究中&#xff0c;样本级标签通常被直接赋予单个细胞&#xff0c;假设所有病例细胞都受影响。这种传统方法在受影响细胞比例较小或扰动强度较弱时&#xff0c;难以有效识别关键细胞及其标记基因&#xff…

三周精通FastAPI:33 在编辑器中调试

官方文档&#xff1a;https://fastapi.tiangolo.com/zh/tutorial/debugging/ 调试 你可以在编辑器中连接调试器&#xff0c;例如使用 Visual Studio Code 或 PyCharm。 调用 uvicorn 在你的 FastAPI 应用中直接导入 uvicorn 并运行&#xff1a; import uvicorn from fast…

Spring Boot关闭时,如何确保内存里面的mq消息被消费完?

1.背景 之前写一篇文章Spring Boot集成disruptor快速入门demo&#xff0c;有网友留言如下图&#xff1a; 针对网友的留言&#xff0c;那么我们如何解决这个问题呢 Spring-Boot应用停机时&#xff0c;如何保证其内存消息都处理完成&#xff1f; 2.解决方法 方法其实挺简单的&…

vue3+vite搭建脚手架项目使用eletron打包成桌面应用+可以热更新

当前Node版本&#xff1a;18.12.0&#xff0c;npm版本&#xff1a;8.19.2 1.搭建脚手架项目 搭建Vue3ViteTs脚手架-CSDN博客 可删掉index.html文件的title标签 2.配置package.json {"name": "my-vite-project","private": true,"versi…

【Golang】validator库的使用

package mainimport ("fmt""github.com/go-playground/validator" )// MyStruct .. validate:"is-awesome"是一个结构体标签&#xff0c;它告诉验证器使用名为is-awesome的验证规则来验证String字段。 type MyStruct struct {String string vali…

Linux(CentOS)安装 MySQL

CentOS版本&#xff1a;CentOS 7 MySQL版本&#xff1a;MySQL Community Server 8.4.3 LTS 1、下载 MySQL 打开MySQL官网&#xff1a;https://www.mysql.com/ 直接下载网址&#xff1a;https://dev.mysql.com/downloads/mysql/ 其他版本 2、上传 MySQL 文件到 CentOS 使用F…

Pytorch实现transformer语言模型

转载自&#xff1a;| 03_language_model/02_Transformer语言模型.ipynb | 从头训练Transformer语言模型 |Open In Colab | Transformer语言模型 本节训练一个 sequence-to-sequence 模型&#xff0c;使用pytorch的 nn.Transformer <https://pytorch.org/docs/master/nn.ht…

<Project-20 YT-DLP> 给视频网站下载工具 yt-dlp/yt-dlp 加个页面 python web

介绍 yt-dlp Github 项目&#xff1a;https://github.com/yt-dlp/yt-dlp A feature-rich command-line audio/video downloader 一个功能丰富的视频与音频命令行下载器 原因与功能 之前我用的 cobalt 因为它不再提供Client Web功能&#xff0c;只能去它的官网使用。 翻 redd…

Sqli-Labs

目录 解题思路 题目设计原理 总结 解题思路 什么&#xff1f;sqli-labs&#xff1f;让我看看。还真是。想起了当初刚学被支配的恐惧。 悄咪咪点开第一关看看能不能秒了。测试闭合老样子&#xff0c;单引号闭合&#xff0c;双引号等都成功。这里 and 11 和 # 都不能通过检测&…

【基于Zynq FPGA对雷龙SD NAND的测试】

一、SD NAND 特征 1.1 SD 卡简介 雷龙的 SD NAND 有很多型号&#xff0c;在测试中使用的是 CSNP4GCR01-AMW 与 CSNP32GCR01-AOW。芯片是基于 NAND FLASH 和 SD 控制器实现的 SD 卡。具有强大的坏块管理和纠错功能&#xff0c;并且在意外掉电的情况下同样能保证数据的安全。 …

【NOIP提高组】引水入城

【NOIP提高组】引水入城 &#x1f490;The Begin&#x1f490;点点关注&#xff0c;收藏不迷路&#x1f490; 在一个遥远的国度&#xff0c;一侧是风景秀美的湖泊&#xff0c;另一侧则是漫无边际的沙漠。该国的行政 区划十分特殊&#xff0c;刚好构成一个N行M列的矩形&#xff…

鸿蒙开发:arkts 如何读取json数据

为了支持ArkTS语言的开发&#xff0c;华为提供了完善的工具链&#xff0c;包括代码编辑器、编译器、调试器、测试工具等。开发者可以使用这些工具进行ArkTS应用的开发、调试和测试。同时&#xff0c;华为还提供了DevEco Studio这一一站式的开发平台&#xff0c;为运行在Harmony…

OpenCV视觉分析之目标跟踪(11)计算两个图像之间的最佳变换矩阵函数findTransformECC的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 根据 ECC 标准 78找到两幅图像之间的几何变换&#xff08;warp&#xff09;。 该函数根据 ECC 标准 ([78]) 估计最优变换&#xff08;warpMatri…

【2024最新版Kotlin教程】Kotlin第一行代码系列第五课-类继承,抽象类,接口

【2024最新版Kotlin教程】Kotlin第一行代码系列第五课-类继承&#xff0c;抽象类&#xff0c;接口 为什么要有继承呢&#xff0c;现实中也是有继承的&#xff0c;对吧&#xff0c;你继承你爸的遗产&#xff0c;比如你爸建好了一个房子&#xff0c;儿子继承爸&#xff0c;就得了…

iOS用rime且导入自制输入方案

iPhone 16 的 cantonese 只能打传统汉字&#xff0c;没有繁简转换&#xff0c;m d sh d。考虑用「仓」输入法 [1] 使用 Rime 打字&#xff0c;且希望导入自制方案 [2]。 仓输入法有几种导入方案的方法&#xff0c;见 [3]&#xff0c;此处记录 wifi 上传法。准备工作&#xff1…

基于Zynq FPGA的雷龙SD NAND存储芯片性能测试

文章目录 前言一、SD NAND特征1.1 SD卡简介1.2 SD卡Block图 二、SD卡样片三、Zynq测试平台搭建3.1 测试流程3.2 SOC搭建 四、软件搭建五、测试结果六、总结 前言 随着嵌入式系统和物联网设备的快速发展&#xff0c;高效可靠的存储解决方案变得越来越重要。雷龙发展推出的SD NA…

【动态规划 数学】2745. 构造最长的新字符串|1607

本文涉及知识点 C动态规划 数学 LeetCode2745. 构造最长的新字符串 给你三个整数 x &#xff0c;y 和 z 。 这三个整数表示你有 x 个 “AA” 字符串&#xff0c;y 个 “BB” 字符串&#xff0c;和 z 个 “AB” 字符串。你需要选择这些字符串中的部分字符串&#xff08;可以全…