第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 负数索引&…...
wordpress后台更新后 前端没变化的解决方法
使用siteground主机的wordpress网站，会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后，网站没有变化的情况。 不熟悉siteground主机的新手，遇到这个问题，就很抓狂，明明是哪都没操作错误&#x…...
生成xcframework
打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式，可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...
Linux链表操作全解析
Linux C语言链表深度解析与实战技巧 一、链表基础概念与内核链表优势1.1 为什么使用链表？1.2 Linux 内核链表与用户态链表的区别 二、内核链表结构与宏解析常用宏/函数 三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...
Prompt Tuning、P-Tuning、Prefix Tuning的区别
一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning（提示调优） 核心思想：固定预训练模型参数，仅学习额外的连续提示向量（通常是嵌入层的一部分）。实现方式：在输入文本前添加可训练的连续向量（软提示），模型只更新这些提示参数。优势：参数量少（仅提…...
ESP32读取DHT11温湿度数据
芯片：ESP32 环境：Arduino 一、安装DHT11传感器库 红框的库，别安装错了 二、代码 注意，DATA口要连接在D15上 #include "DHT.h" // 包含DHT库#define DHTPIN 15 // 定义DHT11数据引脚连接到ESP32的GPIO15 #define D…...
论文浅尝 | 基于判别指令微调生成式大语言模型的知识图谱补全方法（ISWC2024）
笔记整理：刘治强，浙江大学硕士生，研究方向为知识图谱表示学习，大语言模型 论文链接：http://arxiv.org/abs/2407.16127 发表会议：ISWC 2024 1. 动机 传统的知识图谱补全（KGC）模型通过…...
Android15默认授权浮窗权限
我们经常有那种需求，客户需要定制的apk集成在ROM中，并且默认授予其【显示在其他应用的上层】权限，也就是我们常说的浮窗权限，那么我们就可以通过以下方法在wms、ams等系统服务的systemReady()方法中调用即可实现预置应用默认授权浮…...
【JavaSE】绘图与事件入门学习笔记
-Java绘图坐标体系 坐标体系-介绍 坐标原点位于左上角，以像素为单位。 在Java坐标系中,第一个是x坐标,表示当前位置为水平方向，距离坐标原点x个像素;第二个是y坐标，表示当前位置为垂直方向，距离坐标原点y个像素。 坐标体系-像素 …...
【HarmonyOS 5 开发速记】如何获取用户信息（头像/昵称/手机号）
1.获取 authorizationCode： 2.利用 authorizationCode 获取 accessToken：文档中心 3.获取手机：文档中心 4.获取昵称头像：文档中心 首先创建 request 若要获取手机号，scope必填 phone，permissions 必填 …...
Maven 概述、安装、配置、仓库、私服详解
目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...