当前位置：首页 > news >正文

[HTML]Web前端开发技术12（HTML5、CSS3、JavaScript ）——喵喵画网页

news 2025/12/29 22:10:20

希望你开心，希望你健康，希望你幸福，希望你点赞！

最后的最后，关注喵，关注喵，关注喵，佬佬会看到更多有趣的博客哦！！！

喵喵喵，你对我真的很重要！

前言

网页标题：三列自适应宽度

网页标题：多行三列自适应宽度

一级水平导航菜单：采用“无序列表+超链接”设计

纵向导航菜单

总结

前言

两日一更，今天也是准时报到的一天，喵~

网页标题：三列自适应宽度

网页的主体部分代码自行完善
使用外部样式表为其设置样式，在CSS文件夹下新建样式表文件style6.css
@charset "utf-8";
/* CSS Document */
*{padding:0px;margin:0px;}
#left{width:30%;height:700px;background:#223344;float:left;}
#center{width:50%;height:700px;background:#553344; float:left;}
#right{width:20%;height:700px;background:#993344; float:left;}
自行完成样式设置（提示：自适应宽度用%为单位即可）

<!doctype html>
<html>
<head><meta charset="UTF-8"><link rel="stylesheet" href="css/style6.css" type="text/css"><title>三列模式布局</title></head><body><div id="left" class="">left</div><div id="center" class="">center</div><div id="right" class="">right</div></body>
</html>

网页标题：多行三列自适应宽度
网页的主体部分代码自行完善
使用外部样式表为其设置样式，在CSS文件夹下新建样式表文件style7.css

*{font-size: 16px;margin: 0 auto;padding: 0;}
#container{background: #334455;width: 100%;height: 700px;}
#header{background: #FF4455;width: 100%;height: 150px;}
#logo{background: #FFDD55;width: 100%;height: 100px;}
#nav{background: #FFDD99;width: 100%;height: 50px;}
#main{background: #33DD55;width: 100%;height: 500px;}
#left{background: #33FBFB;width: 33%;height: 100%;float: left;}
#left_up_1{background: #334455;width: 100%;height: 125px;}
#left_up_2{background: #445566;width: 100%;height: 125px;}
#left_down_1{background: #556677;width: 100%;height: 125px;}
#left_down_2{background: #667788;width: 100%;height: 125px;}
#center{background: #88FBFB;width: 34%;height: 100%;float: left;}
#center_up{background: #66ff66;width: 100%;height: 200px;}
#center_down{background: #44DD22;width:100%;height:300px;}
#right{background: #DDFBFB;width: 33%;height: 100%;float: left;}
#right_up{background: #55DDFB;width: 100%;height: 150px;}
#right_down{background: #667733;width:100%;height: 350px;}
#footer{background: #DDDD11;width: 100%;height: 50px;clear: both;}

自行完成样式设置（提示：自适应宽度用%为单位即可）


<!-- edu_10_1_5.html -->
<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus®"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><title>多行三列模式布局</title><link rel="stylesheet" href="css/style7.css" type="text/css"></head><body><div id="container" class=""><div id="header" class=""><div id="logo" class="">logo</div>		  <div id="nav" class="">nav</div>			</div><div id="main" class=""><div id="left" class=""><div id="left_up_1" class="">left_up_1</div><div id="left_up_2" class="">left_up_2</div><div id="left_down_1" class="">left_down_1</div><div id="left_down_2" class="">left_down_2</div></div><div id="center" class=""><div id="center_up" class="">center_up</div><div id="center_down" class="">center_down</div></div><div id="right" class=""><div id="right_up" class="">right_up</div><div id="right_down" class="">right_down</div></div>			</div><div id="footer" class="">footer</div>	</div>  </body>
</html>

一级水平导航菜单：采用“无序列表+超链接”设计

网页标题：一级水平导航菜单
网页的主体部分代码为：

<div id="nav">

         <ul>

             <li><a href="#">首页</a></li>

        <li><a href="#">jQuery特效</a></li>

        <li><a href="#">JavaScript特效</a></li>

        <li><a href="#">Flash特效</a></li>

        <li><a href="#">div+css教程</a></li>

                <li><a href="#">HTML5教程</a></li>

    </ul>

</div>
使用外部样式表为其设置样式，在CSS文件夹下新建样式表文件style8.css
@charset "utf-8";
/* CSS Document */
ul{margin:0;padding:0;
}ul li{height:30px;width:115px;list-style-type:none;float:left;font:0.9em Arial, Helvetica, sans-serif;text-align:center;/*display:inline;*/
}ul li a{color:#fff;width:113px;margin:0px;padding:0 0 0 8px;display:inline-block; /*display:block;*/background:#808080;line-height:29px;border-right:1px solid #ccc;border-bottom:1px solid #ccc;text-decoration:none;
}
ul li a:hover{background-color:#666;border-bottom:1px dashed #ff0000;
}
并设置如下样式：
设置ul的样式：内外边距均为0
设置ul下li的样式为：高30px，宽115px，不显示项目符号，向左浮动，字体大小0.9em，字体为Arial系列字体，文本居中对齐。
设置ul li下a的样式为：字体颜色为白色，宽113px，行高29px，修改元素显示类型为inline-block，背景颜色为#808080，外边距为0，左内边距为8px，其余内边距均为0，设置右和下边框线为1px 实线 #ccc，取消下划线。
设置ul li下鼠标悬停时超链接a的样式为：背景颜色#666，下边框线1px 虚线 #ff0000。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>一级水平导航菜单</title>
<link rel="stylesheet" href="css/style8.css"
</head><body>
<div id="nav"><ul><li><a href="#">首页</a></li><li><a href="#">jQuery特效</a></li><li><a href="#">JavaScript特效</a></li><li><a href="#">Flash特效</a></li><li><a href="#">div+css教程</a></li><li><a href="#">HTML5教程</a></li></ul>
</div>
</body>
</html>

纵向导航菜单

网页标题：纵向导航菜单
网页的主体部分代码为：

<div id="nav">

         <ul>

             <li><a href="#">首页</a></li>

        <li><a href="#">jQuery特效</a></li>

        <li><a href="#">JavaScript特效</a></li>

        <li><a href="#">Flash特效</a></li>

        <li><a href="#">div+css教程</a></li>

                <li><a href="#">HTML5教程</a></li>

    </ul>

</div>
使用外部样式表为其设置样式，在CSS文件夹下新建样式表文件style9.css
@charset "utf-8";
/* CSS Document */
#nav{width:200px;font:0.9em Arial, Helvetica, sans-serif;
}#nav ul{padding:0;margin:0;list-style-type:none;
}
#nav ul li{border-bottom:1px solid #ed9f9f;
}
#nav ul li a{display:block;padding:5px 5px 5px 0.5em;text-decoration:none;border-left:12px solid #711515;border-right:1px solid #711515;
}#nav ul li a:link,#nav ul li a:visited{background-color:#c11136;color:#fff;
}#nav ul li a:hover{background-color:#990020;color:#ff0;
}
并设置如下样式：
#nav的样式:宽200px，字体为Arial系列
#nav下ul标签的样式：取消列表项标志，内外边距均为0
#nav下li的样式：下边框线1px 实线 #ed9f9f
#nav下li中a标签的样式：显示为块级元素，上右下内边距为5px，左内边距为0.5em，无下划线，左边框线12px 实线 #711515，右边框线1px实线 #711515
#nav下li中未访问过的超链接以及已访问过的超链接样式：背景颜色为#c11136，字体颜色#fff。
#nav下li中鼠标悬停时的超链接样式：背景颜色#990020，字体颜色#ff0

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>纵向导航菜单</title>
<link rel="stylesheet" href="CSS/style9.css">
</head><body>
<div id="nav"><ul><li><a href="#">首页</a></li><li><a href="#">jQuery特效</a></li><li><a href="#">JavaScript特效</a></li><li><a href="#">Flash特效</a></li><li><a href="#">div+css教程</a></li><li><a href="#">HTML5教程</a></li></ul>
</div>
</body>
</html>

总结

可以自己写写，挺好玩的！需要材料包的佬佬，欢迎来私信本喵！

希望你开心，希望你健康，希望你幸福，希望你点赞！

最后的最后，关注喵，关注喵，关注喵，佬佬会看到更多有趣的博客哦！！！

喵喵喵，你对我真的很重要！

[HTML]Web前端开发技术12（HTML5、CSS3、JavaScript ）——喵喵画网页

希望你开心，希望你健康，希望你幸福，希望你点赞！ 最后的最后，关注喵，关注喵，关注喵，佬佬会看到更多有趣的博客哦！！！ 喵喵喵，你对我真的…...

编程日记 2024/1/24 14:18:51

音频特效SDK，满足内容生产的音频处理需求

美摄科技，作为音频处理技术的佼佼者，推出的音频特效SDK，旨在满足企业内容生产中的音频处理需求。这款SDK内置多种常见音频处理功能，如音频变声、均衡器、淡入淡出、音频变调等，帮助企业轻松应对各种音频处理挑战。一…...

编程日记 2024/1/24 14:16:49

使用vue2写一个太极图，并且点击旋转

下面是我自己写的一个代码，命名有些不规范，大家不要介意。 <template><div class"qq"><div class"app" :style"{ transform: rotateStyle }"><div class"app1"><div class"ap…...

编程日记 2024/1/24 14:15:49

一、数据操作 1、基础 import torchx torch.arange(12) # x:tensor([ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11])x.shape # torch.Size([12])x.numel() # 12x x.reshape(3, 4) # tensor([[ 0, 1, 2, 3], # [ 4, 5, 6, 7], # [ 8, 9, 10, 11]])torch.zeros((2…...

编程日记 2024/1/24 14:14:47

【Spring Boot 3】【JPA】枚举类型持久化

【Spring Boot 3】【JPA】枚举类型持久化背景介绍开发环境开发步骤及源码工程目录结构总结背景软件开发是一门实践性科学，对大多数人来说，学习一种新技术不是一开始就去深究其原理，而是先从做出一个可工作的DEMO入手。但在我个人学习和工作经历中，每次学习新技术总是要花…...

编程日记 2024/1/24 14:11:44

SVN 常用命令汇总（2024）

1、前言 1.1、如何检索本文档使用CSDN自带的“目录”功能进行检索，会更容易查找到自己需要的命令。 1.2、svn常用命令查询：help —— 帮助在使用过程中，可随时使用help命令查看各常用svn命令： svn help2、检出及更新 2.1、…...

编程日记 2024/1/24 14:09:42

K8S四层代理Service-02

Service的四种类型使用 ClusterIP使用示例Pod里使用service的服务名访问应用 NodePort使用示例 ExternalName使用示例 LoadBalancer K8S支持以下4种Service类型：ClusterIP、NodePort、ExternalName、LoadBalancer 以下是使用4种类型进行Service创建，应对…...

编程日记 2024/1/24 14:04:36

3、非数值型的分类变量

非数值型的分类变量有很多非数字的数据，这里介绍如何使用它来进行机器学习。在本教程中，您将了解什么是分类变量，以及处理此类数据的三种方法。本课程所需数据集夸克网盘下载链接：https://pan.quark.cn/s/9b4e9a1246b2 提取码：uDzP 文章目录 1、简介2、三种方法的使用1…...

编程日记 2024/1/24 13:58:30

国内免费chartGPT网站汇总

https://s.suolj.com - （支持文心、科大讯飞、智谱等国内大语言模型，Midjourney绘画、语音对讲、聊天插件）国内可以直连，响应速度很快很稳定 https://seboai.github.io - 国内可以直连，响应速度很快很稳定 http://gp…...

编程日记 2024/1/24 13:54:26

【Alibaba工具型技术系列】「EasyExcel技术专题」实战研究一下 EasyExcel 如何从指定文件位置进行读取数据

实战研究一下 EasyExcel 如何从指定文件位置进行读取数据 EasyExcel的使用背景EasyExcel的时候痛点EasyExcel对比其他框架 EasyExcel的编程模式EasyExcel读取的指定位置导入数据的流程表头校验invokeHeadMap()方法数据处理invoke()方法执行中断hasNextdoAfterAllAnalysed()方…...

编程日记 2024/1/24 13:53:25

java.security.InvalidKeyException: Illegal key size错误

出现的问题最近在对接第三方，涉及获取token鉴权。在本地调试能获取到token，但是在Linux环境上调用就报错：java.security.InvalidKeyException: Illegal key size 与三方沟通 ，排除了是传参和网络的原因；搜索资料发现…...

编程日记 2024/1/24 13:49:20

python脚本，实现监控系统的各项资源

今天的文章涉及到docker的操作和一个python脚本，实现监控网络的流量、CPU使用率、内存使用率和磁盘使用情况。一起先看看效果吧： 这是在控制台中出现的数据，可以很简单的看到我们想要的监控指标。如果实现定时任务和数据的存储、数据的展示&a…...

编程日记 2024/1/24 13:44:14

Flink处理函数（2）—— 按键分区处理函数

按键分区处理函数（KeyedProcessFunction）：先进行分区，然后定义处理操作 1.定时器（Timer）和定时服务（TimerService） 定时器（timers）是处理函数中进行时间相关…...

编程日记 2024/1/24 13:42:12

服务器数据恢复—服务器进水导致阵列中磁盘同时掉线的数据恢复案例

服务器数据恢复环境： 数台服务器数台存储阵列柜，共上百块硬盘，划分了数十组lun。服务器故障&检测： 外部因素导致服务器进水，进水服务器中一组阵列内的所有硬盘同时掉线。北亚数据恢复工程师到达现场后发现机房内…...

编程日记 2024/1/24 13:40:09

npm或者pnpm或者yarn安装依赖报错ENOTFOUND解决办法

如果报错说安装依赖报错，大概率是因为npm源没有设置对，比如我这里安装protobufjs的时候报错：ENOTFOUND npm ERR! code ENOTFOUND npm ERR! syscall getaddrinfo npm ERR! errno ENOTFOUND npm ERR! network request to https://registry.cnpm…...

编程日记 2024/1/24 13:39:08

学会使用ubuntu——ubuntu22.04使用Google、git的魔法操作

ubuntu22.04使用Google、git的魔法操作转战知乎写作 https://zhuanlan.zhihu.com/p/679332988...

编程日记 2024/1/24 13:36:05

【机组】计算机组成原理实验指导书.

🌈个人主页：Sarapines Programmer🔥 系列专栏：《机组 | 模块单元实验》⏰诗赋清音：云生高巅梦远游， 星光点缀碧海愁。山川深邃情难晤， 剑气凌云志自修。目录第一章性能特点 1.1 系…...

编程日记 2024/1/24 13:33:02

解决Sublime Text V3.2.2中文乱码问题

目录中文乱码出现情形通过安装插件来解决乱码问题中文乱码出现情形打开一个中文txt文件，显示乱码，在File->Reopen With Encoding里面找不到支持简体中文正常显示的编码选项。通过安装插件来解决乱码问题安装Package Control插件打开Tool->…...

编程日记 2024/1/24 13:27:56

Oracle 12CR2 RAC部署翻车，bug避坑经历

📢📢📢📣📣📣 哈喽！大家好，我是【IT邦德】，江湖人称jeames007，10余年DBA及大数据工作经验一位上进心十足的【大数据领域博主】！😜&am…...

编程日记 2024/1/24 13:24:54

情绪共享机器：潜力与挑战

在设想的未来科技世界中，有一种神奇的机器，它能够让我们戴上后即刻感知并体验他人当下的情绪。这种情绪共享机器无疑将深刻地改变我们对人际关系、社会交互乃至人性本质的理解。然而，这一科技创新所带来的影响并非全然积极，也伴随…...

编程日记 2024/1/24 13:22:53

深度学习在微纳光子学中的应用

深度学习在微纳光子学中的主要应用方向深度学习与微纳光子学的结合主要集中在以下几个方向： 逆向设计通过神经网络快速预测微纳结构的光学响应，替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。特征提取与优化从复杂的光学数据中自…...

编程新知 2025/12/28 7:24:23

【kafka】Golang实现分布式Masscan任务调度系统

要求： 输出两个程序，一个命令行程序（命令行参数用flag）和一个服务端程序。命令行程序支持通过命令行参数配置下发IP或IP段、端口、扫描带宽，然后将消息推送到kafka里面。服务端程序： 从kafka消费者接收…...

编程新知 2025/12/22 9:15:22

【OSG学习笔记】Day 18: 碰撞检测与物理交互

物理引擎（Physics Engine） 物理引擎是一种通过计算机模拟物理规律（如力学、碰撞、重力、流体动力学等）的软件工具或库。它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互，广泛应用于游戏开发、动画制作、虚…...

编程新知 2025/12/28 10:52:10

【Oracle APEX开发小技巧12】

有如下需求： 有一个问题反馈页面，要实现在apex页面展示能直观看到反馈时间超过7天未处理的数据，方便管理员及时处理反馈。我的方法：直接将逻辑写在SQL中，这样可以直接在页面展示完整代码： SELECTSF.FE…...

编程新知 2025/12/19 17:19:04

阿里云ACP云计算备考笔记 (5)——弹性伸缩

目录第一章概述第二章弹性伸缩简介 1、弹性伸缩 2、垂直伸缩 3、优势 4、应用场景 ① 无规律的业务量波动 ② 有规律的业务量波动 ③ 无明显业务量波动 ④ 混合型业务 ⑤ 消息通知 ⑥ 生命周期挂钩 ⑦ 自定义方式 ⑧ 滚的升级 5、使用限制第三章主要定义 …...

编程新知 2025/12/15 15:15:10

Python爬虫实战：研究feedparser库相关技术

1. 引言 1.1 研究背景与意义在当今信息爆炸的时代，互联网上存在着海量的信息资源。RSS（Really Simple Syndication）作为一种标准化的信息聚合技术，被广泛用于网站内容的发布和订阅。通过 RSS，用户可以方便地获取网站更新的内容，而无需频繁访问各个网站。然而，互联网…...

编程新知 2025/8/18 9:54:31

（转）什么是DockerCompose?它有什么作用？

一、什么是DockerCompose? DockerCompose可以基于Compose文件帮我们快速的部署分布式应用，而无需手动一个个创建和运行容器。 Compose文件是一个文本文件，通过指令定义集群中的每个容器如何运行。 DockerCompose就是把DockerFile转换成指令去运行。 …...

编程新知 2025/12/14 16:13:40

vue3+vite项目中使用.env文件环境变量方法

vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量，这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...

编程新知 2025/12/23 21:52:08

鸿蒙DevEco Studio HarmonyOS 5跑酷小游戏实现指南

1. 项目概述本跑酷小游戏基于鸿蒙HarmonyOS 5开发，使用DevEco Studio作为开发工具，采用Java语言实现，包含角色控制、障碍物生成和分数计算系统。 2. 项目结构 /src/main/java/com/example/runner/├── MainAbilitySlice.java // 主界…...

编程新知 2025/12/19 22:56:05

安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”（装配）

船舶制造装配管理现状：装配工作依赖人工经验，装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书，但在实际执行中，工人对指导书的理解和遵循程度参差不齐。船舶装配过程中的挑战与需求挑战 (1…...

编程新知 2025/12/28 0:09:57

[HTML]Web前端开发技术12（HTML5、CSS3、JavaScript ）——喵喵画网页

前言

网页标题：三列自适应宽度

网页标题：多行三列自适应宽度

一级水平导航菜单：采用“无序列表+超链接”设计

纵向导航菜单

总结

相关文章：

[HTML]Web前端开发技术12（HTML5、CSS3、JavaScript ）——喵喵画网页

音频特效SDK，满足内容生产的音频处理需求

使用vue2写一个太极图，并且点击旋转

张量计算和操作

【Spring Boot 3】【JPA】枚举类型持久化

SVN 常用命令汇总（2024）

K8S四层代理Service-02

3、非数值型的分类变量

国内免费chartGPT网站汇总

【Alibaba工具型技术系列】「EasyExcel技术专题」实战研究一下 EasyExcel 如何从指定文件位置进行读取数据

java.security.InvalidKeyException: Illegal key size错误

python脚本，实现监控系统的各项资源

Flink处理函数（2）—— 按键分区处理函数

服务器数据恢复—服务器进水导致阵列中磁盘同时掉线的数据恢复案例

npm或者pnpm或者yarn安装依赖报错ENOTFOUND解决办法

学会使用ubuntu——ubuntu22.04使用Google、git的魔法操作

【机组】计算机组成原理实验指导书.

解决Sublime Text V3.2.2中文乱码问题

Oracle 12CR2 RAC部署翻车，bug避坑经历

情绪共享机器：潜力与挑战

深度学习在微纳光子学中的应用

【kafka】Golang实现分布式Masscan任务调度系统

【OSG学习笔记】Day 18: 碰撞检测与物理交互

【Oracle APEX开发小技巧12】

阿里云ACP云计算备考笔记 (5)——弹性伸缩

Python爬虫实战：研究feedparser库相关技术

（转）什么是DockerCompose?它有什么作用？

vue3+vite项目中使用.env文件环境变量方法

鸿蒙DevEco Studio HarmonyOS 5跑酷小游戏实现指南

安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”（装配）