第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">版权所有©山水之间</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>闲暇时刻，约上三五志同道合知己，去幽静深林处，寻一景色优美之亭，沏一壶好茶，知己们吟诗作赋，品品茶道。又或是下几盘好棋，又或是各抒己见，聊聊彼此的胸怀壮志。无不是人生一大乐事。一只小小的茶杯，蕴含着无穷的奥秘与无尽之美。从胎土的选择、杯型的拿捏、釉药的施彩、士窑的烧结，茶杯在制作的每一个环节，都蕴藏着大学问。越是小茶杯越有品茶的韵味，轻轻据一口，在嘴间感受一下茶的沁香，仿佛沁透心间。 <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">版权所有茶韵©茶韵</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);}相关文章：
第8章 利用CSS制作导航菜单作业
1.利用CSS技术，结合链接和列表，设计并实现“山水之间”页面。 浏览效果如下： HTML代码如下： <!DOCTYPE html> <html><head><meta charset"utf-8" /><title>山水之间</title><…...
基于Spring Boot的船舶监造系统的设计与实现，LW+源码+讲解
摘要 近年来，信息化管理行业的不断兴起，使得人们的日常生活越来越离不开计算机和互联网技术。首先，根据收集到的用户需求分析，对设计系统有一个初步的认识与了解，确定船舶监造系统的总体功能模块。然后，详…...
linux强制修改mysql的root账号密码
在Linux环境下，如果您忘记了MySQL的root密码，可以通过以下步骤来强制修改root密码： 在执行这些步骤之前，请确保您有足够的权限来执行这些命令。 停止MySQL服务： systemctl stop mysql 启动MySQL的安全模式，…...
CentOS系统查看CPU、内存、操作系统等信息
Linux系统提供了一系列命令可以用来查看系统硬件信息，如CPU的物理个数、核数、逻辑CPU数量、内存信息和操作系统版本。 查看物理CPU、核数和逻辑CPU 在多核、多线程的系统中，了解物理CPU个数、每个物理CPU的核数和逻辑CPU个数至关重要。超线程技术进一步…...
针对解决前后端BUG的个人笔记
1-IDEA Q：Required Java version 17 is not supported by SDK 1.8. The maximum supported Java version is 8. A: 我们只知道IDEA页面创建Spring项目，其实是访问spring initializr去创建项目。故我们可以通过阿里云国服去间接创建Spring项目。将https…...
5G时代已来：我们该如何迎接超高速网络？
内容概要 随着5G技术的普及，我们的生活似乎变得更加“科幻”了。想象一下，未来的智能家居将不仅仅是能够听你说“开灯”；它们可能会主动询问你今天心情如何，甚至会推荐你一杯“维他命C芒果榨汁”，帮助你抵御夏天的炎热…...
企业级-实现Redis封装层
作者：fyupeng 技术专栏：☞ https://github.com/fyupeng 项目地址：☞ https://github.com/fyupeng/distributed-blog-system-api 留给读者 封装 Redis 客户端Dao层、分布式锁等。 一、介绍 二、代码 DataInitialLoadRunner.java /*** Clas…...
SpringBoot使用ApplicationContext.getBean启动报空指针处理记录
问题：项目启动报空指针 定位：新增filter中init方法使用getbean控制 解决：在新增filter上加注解 DependsOn({"applicationContextUtils"}) Component DependsOn({"applicationContextUtils"})//此处解决空指针问题 pu…...
MongoDB Shell 基本命令(三）聚合管道
管道含义 类似Linux中的管道，前一个命令的输出作为后一个命令的输入。 显示网络连接、路由表和网络接口统计信息 netstat -ano -netstat:network statistics 网络统计 -a:显示所有连接和监听端口，包括所有活动的TCP和UDP连接。 -n:以数字形式显示地址…...
Go语言的内置容器
文章目录 一、数组数组的定义数组声明数组特点数组元素修改 二、切片切片声明基于数组创建切片使用make()函数构造切片使用append()为切片动态添加元素\使用copy()复制新的切片数组与切片相互转换 三、Map映射Map定义使用make()函数创建map用切片作为map的值使用delete()函数删…...
HCIP考试怎样预约？随时可以考试吗？
HCIP（华为认证互联网协议专家）的考试并不是随时都能参加的，考生需要避开法定节假日来预约考试。具体的考试时间会根据所选的认证方向和考试中心有所变化。考生可以通过华为人才在线平台或者直接联系Pearson VUE来安排考试时间。 HCIP认证考试…...
香港航空 阿里滑块 acw_sc__v3 分析
声明: 本文章中所有内容仅供学习交流使用，不用于其他任何目的，抓包内容、敏感网址、数据接口等均已做脱敏处理，严禁用于商业用途和非法用途，否则由此产生的一切后果均与作者无关！ 有相关问题请第一时间头像私信联系我删…...
JS传统函数中常见的 this 绑定问题
在 JavaScript 中，传统函数的 this 绑定规则依赖于函数的调用方式，这常常导致一些意外的行为和常见的 this 绑定问题。以下是一些典型的 this 绑定问题及其解决方案。 1. 作为对象方法调用时的 this 丢失 当一个对象的方法被赋值给一个变量或作为回调函…...
跨域问题以及使用vscode的LiveServer插件跨域访问
目录 现象跨域问题的定义（文心一言）解决办法同源部署后端代理VS Code LiveServer 现象 以下前端代码部署后，在网页访问时报错：No ‘Access-Control-Allow-Origin’ header is present on the requested resource. $.ajax({url:…...
现代Web开发：WebSocket 实时通信详解
💓 博客主页：瑕疵的CSDN主页 📝 Gitee主页：瑕疵的gitee主页 ⏩ 文章专栏：《热点资讯》 现代Web开发：WebSocket 实时通信详解 现代Web开发：WebSocket 实时通信详解 现代Web开发：WebS…...
《深度学习》——深度学习基础知识（全连接神经网络）
文章目录 1.神经网络简介2.什么是神经网络3.神经元是如何工作的3.1激活函数3.2参数的初始化3.2.1随机初始化3.2.2标准初始化3.2.3Xavier初始化（tf.keras中默认使用的）3.2.4He初始化 4.神经网络的搭建4.1通过Sequential构建神经网络4.2通过Functional API…...
nginx 部署2个相同的vue
起因： 最近遇到一个问题，在前端用nginx 部署 vue， 发现如果前端有改动，如果不适用热更新，而是直接复制项目过去，会404 因此想到用nginx 负载两套相同vue项目，然后一个个复制vue项目就可以了。…...
利用Java easyExcel库实现高效Excel数据处理
在Java应用程序中，处理Excel文件是一项常见任务，尤其是在需要读取、写入或分析大量数据时。easyExcel是一个基于Java的高性能Excel处理库，它提供了简洁的API和优化的性能，以简化Excel文件的处理。本文将指导您如何使用easyExcel库…...
Vulnhub靶场 Metasploitable: 1 练习（上）
目录 0x00 准备0x01 主机信息收集0x02 Samba服务（CVE-2007-2447）0x03 Distccd（CVE-2004-2687）0x04 Mysql弱口令0x05 Postgresql弱口令0x06 Telnet弱口令0x07 Tomcat 0x00 准备 下载链接：https://download.vulnhub.com/…...
《Python编程实训快速上手》第二天--列表与元组
一、列表 1、理解 列表是一个值，包含由多个值构成的序列 2、元素查找 1）索引--取列表中的单个值 正数索引：同c语言中的数组 spam [[1,2,3,4],["cat","dog"]] print(spam[0][1]) #结果：2 负数索引&…...
MPNet：旋转机械轻量化故障诊断模型详解python代码复现
目录 一、问题背景与挑战 二、MPNet核心架构 2.1 多分支特征融合模块（MBFM） 2.2 残差注意力金字塔模块（RAPM） 2.2.1 空间金字塔注意力（SPA） 2.2.2 金字塔残差块（PRBlock） 2.3 分类器设计 三、关键技术突破 3.1 多尺度特征融合 3.2 轻量化设计策略 3.3 抗噪声…...
XCTF-web-easyupload
试了试php，php7，pht，phtml等，都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接，得到flag...
Qt Widget类解析与代码注释
#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码，写上注释 当然可以！这段代码是 Qt …...
（二）TensorRT-LLM | 模型导出（v0.20.0rc3）
0. 概述 上一节 对安装和使用有个基本介绍。根据这个 issue 的描述，后续 TensorRT-LLM 团队可能更专注于更新和维护 pytorch backend。但 tensorrt backend 作为先前一直开发的工作，其中包含了大量可以学习的地方。本文主要看看它导出模型的部分&#x…...
postgresql|数据库|只读用户的创建和删除（备忘）
CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...
（二）原型模式
原型的功能是将一个已经存在的对象作为源目标，其余对象都是通过这个源目标创建。发挥复制的作用就是原型模式的核心思想。 一、源型模式的定义 原型模式是指第二次创建对象可以通过复制已经存在的原型对象来实现，忽略对象创建过程中的其它细节。 📌 核心特点： 避免重复初…...
【单片机期末】单片机系统设计
主要内容：系统状态机，系统时基，系统需求分析，系统构建，系统状态流图 一、题目要求 二、绘制系统状态流图 题目：根据上述描述绘制系统状态流图，注明状态转移条件及方向。 三、利用定时器产生时…...
根据万维钢·精英日课6的内容，使用AI（2025）可以参考以下方法：
根据万维钢精英日课6的内容，使用AI（2025）可以参考以下方法： 四个洞见 模型已经比人聪明：以ChatGPT o3为代表的AI非常强大，能运用高级理论解释道理、引用最新学术论文，生成对顶尖科学家都有用的…...
聊一聊接口测试的意义有哪些？
目录 一、隔离性 & 早期测试 二、保障系统集成质量 三、验证业务逻辑的核心层 四、提升测试效率与覆盖度 五、系统稳定性的守护者 六、驱动团队协作与契约管理 七、性能与扩展性的前置评估 八、持续交付的核心支撑 接口测试的意义可以从四个维度展开，首…...
DeepSeek 技术赋能无人农场协同作业：用 AI 重构农田管理 “神经网”
目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...