[HTML]Web前端开发技术13（HTML5、CSS3、JavaScript ）横向二级导航菜单 Web页面设计实例——喵喵画网页

news2025/4/22 16:38:28

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

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

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

目录

前言

横向二级导航菜单

Web页面设计实例

总结

前言

该练的还是要练，终究是自己的！

  • 网页标题：二级下拉导航菜单
  • 网页的主体部分代码为：

  • 使用外部样式表为其设置样式，在CSS文件夹下新建样式表文件style10.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 li ul li{
	height:25px;
}

ul li ul li a{
	background-color:#666;
	line-height:24px;
}

ul li ul{
	display:none; /*visibility:hidden;*/
}

ul li:hover ul{
	display:block; /*visibility:visible;*/
}

ul li ul li a:hover{
	background-color:#333;
}

  • 并设置如下样式：
  • 整体样式和8-8中的style8.css中的样式一致。
  • 需要增加的样式就是设置二级下拉导航菜单的隐藏/显示，以及二级菜单单独的样式效果。
  • 利用后代选择器（ul li ul li）设置二级菜单中li的高度为25px。
  • 利用后代选择器（ul li ul li a）设置二级菜单中a的背景颜色为#666，行高24px。
  • 利用后代选择器（ul li ul）设置ul初始的时候为隐藏（不显示[display:none]）
  • 利用后代选择器（ul li:hover ul）设置当鼠标悬停在一级导航菜单上时，显示二级菜单。
  • 利用后代选择器（ul li ul li a:hover）设置鼠标悬停在二级菜单的超链接上时，超链接的背景颜色为#333.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>二级下拉导航菜单</title>
<link rel="stylesheet" href="CSS/style10.css">
</head>

<body>
<div id="nav">
	<ul>
    	<li><a href="#">首页</a></li>
        <li><a href="#">jQuery特效</a>
        	<ul>
      			<li><a href="#">jQuery图片特效</a></li>
     			<li><a href="#">jQuery导航特效</a></li>
     			<li><a href="#">jQuery选项卡特效</a></li>
      			<li><a href="#">jQuery文字特效</a></li>
     		</ul>
        </li>
        <li><a href="#">JavaScript特效</a></li>
        <li><a href="#">Flash特效</a>
        	<ul>
                <li><a href="#">Flash图片特效</a></li>
                <li><a href="#">Flash导航特效</a></li>
                <li><a href="#">Flash选项卡特效</a></li>
                <li><a href="#">Flash文字特效</a></li>
        	</ul>
        </li>
        <li><a href="#">div+css教程</a></li>
 		<li><a href="#">HTML5教程</a></li>
    </ul>
</div>
</body>
</html>

横向二级导航菜单

网页标题：横向二级导航菜单

  • 网页的主体部分代码为：

  • 使用外部样式表为其设置样式，在CSS文件夹下新建样式表文件style11.css
  • @charset "utf-8";
/* CSS Document */
/*定义外层图层样式*/
#menu{
	padding-left:100px;
	margin:0 auto;
	width:100%;
	height:60px;
	background-color:#55aaee;
	border:1px solid #333;
}

#menu ul{
	margin:0;
	padding:0;
}

 /*定义存放子菜单的图层样式*/
.submenu{
	width:900px;
	height:28px;
	text-align:center;
}

#menu ul li{
	height:30px;
	width:115px;
	list-style-type:none;
	float:left;
	font:0.9em Arial, Helvetica, sans-serif;
	text-align:center;
}
 /*定义主菜单中超链接样式*/
ul li a{
	color:#fff;
	width:114px;
	margin:0;
	padding:0 0 0 8px;
	text-decoration:none;
	display:block;
	background-color:#55a0ff;
	line-height:29px;
	border-bottom:1px solid #ccc;
}
/*定义子菜单中列表项的样式 */
ul li .submenu ul li{
	height:25px;
	width:113px;
	list-style-type:none;
	float:left;
	font:0.8em Arial, Helvetica, sans-serif;
	text-align:center;
}
/*定义子菜单中超链接的样式 */
ul li .submenu ul li a{
	background-color:#55aaee;
	line-height:24px;
}
 
ul li a:hover{
	background-color:#666;
	border-bottom:1px dashed #ff0000;
}

ul li .submenu{ /*定义子菜单初始状态为不显示 */
	display:none;
}

ul li:hover .submenu{
	display:block;
}

ul li .submenu ul li a:hover{
	background-color:#333;
}

  • 并设置如下样式：
  • 定义外层图层样式（#menu）：左内边距100px，相对于页面居中显示，宽100%，高60px，背景颜色#55aaee，边框1px 实线 #333
  • 定义主菜单样式（#menu ul）:内外边距均为0
  • 定义主菜单li的样式（#menu ul li）:高30px，宽115px，不显示项目符号，向左浮动，字体大小0.9em，Arial系列字体，文本居中对齐
  • 定义主菜单中超链接样式(ul li a):字体颜色白色，宽114px，外边距0，左内边距8px，其余内边距均为0，无下划线，显示为块级元素，背景颜色为#55a0ff，行高29px，下边框线1px 实线 #ccc
  • 定义主菜单中鼠标悬停在超链接上的样式（ul li a:hover）:背景颜色#666，下边框线1px 虚线 #f00
  • 定义子菜单图层样式（.submenu）:宽900px，高28px，文本居中对齐
  • 定义子菜单中列表项的样式(ul li .submenu ul li):高25px，宽113px，不显示项目符号，向左浮动，字体大小0.8em，Arial字体系列，文本居中显示
  • 定义子菜单中超链接的样式（ul li .submenu ul li a）:背景颜色#55aaee，行高24px
  • 定义子菜单初始状态为不显示(ul li .submenu)
  • 定义鼠标悬停在主菜单列表项上时显示其下的子菜单(ul li:hover .submenu)
  • 定义鼠标悬停在子菜单的超链接上时的样式(ul li .submenu ul li a:hover)：背景颜色#333
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>横向二级导航菜单</title>
<link rel="stylesheet" href="css/style11.css">
</head>

<body>
<div id="menu">
	<ul>
    	<li><a href="#">首页</a></li>
        <li><a href="#">jQuery特效</a>
        	<div class="submenu">
                <ul>
                    <li><a href="#">jQuery图片特效</a></li>
                    <li><a href="#">jQuery导航特效</a></li>
                    <li><a href="#">jQuery选项卡特效</a></li>
                    <li><a href="#">jQuery文字特效</a></li>
                </ul>
            </div>    
        </li>
        <li><a href="#">JavaScript特效</a></li>
        <li><a href="#">Flash特效</a>
        	<div class="submenu">
                <ul>
                    <li><a href="#">Flash图片特效</a></li>
                    <li><a href="#">Flash导航特效</a></li>
                    <li><a href="#">Flash选项卡特效</a></li>
                    <li><a href="#">Flash文字特效</a></li>
                </ul>
            </div>
        </li>
        <li><a href="#">div+css教程</a></li>
 		<li><a href="#">HTML5教程</a></li>
    </ul>
</div>
</body>
</html>

  • Web页面设计实例

  • 参照下图的显示效果完成网页的制作
  • 使用外部样式表为其设置样式，在CSS文件夹下新建样式表文件style12.css
  • @charset "utf-8";
/* CSS Document */
/* exp_10_1.css */

body { 
	font-family:Verdana; 
	font-size:16px; 
	margin:0;
	text-align:center;
}
h4{float:left;margin:45px auto;padding-left:50px;}
p{margin:2px;font-size:14px;
}
#Container {margin:0 auto; 
	width:900px;
}
#Header { 
	height:118px;  
	border-bottom:5px;
	background-color:rgb(230,230,230);
    border-bottom:5px solid #FFFFFF;   
}
#PageBody { 
	height:380px; 
	border-bottom:5px solid #FFFFFF;
}
#SideBar { 
	float:left; 
	width:200px; 
	height:380px; 
	background:#Dff100;
	text-align:center;
	padding:50px auto;	
	border-right:5px solid #FFFFFF;
}
#MainBody { 
	float:right; 
	width:695px; 
	height:380px; 
	background:#cff000;
}
#Footer { 
	height:60px; 
	background-color:rgb(230,230,230);
	text-align:center;
	font-family:"Courier New";
	font-size:12px;
	padding-top:10px;
}
#Header img{
	float:left;	
}
 span{margin-top:45px;width:50px;height:30px;font-size:20px;font-family:"华文新魏";padding:45px 10px; 
 vertical-align:middle;text-align:center;
 }

a{width:48px;height:24px;	
	font-size:20px;
	font-family:"华文新魏";	text-align:center;
}
ul{list-style-type:none;margin:0px;padding:35px;text-align:center;}
li{ width:50px;height:30px;
	font-size:20px;
	font-family:"华文新魏";	
	padding:10px 35px;
}
h3{text-align:center;color:red;font-size:24px;
background:#CFF000;padding:6px auto;}
a:link,a:visited,a:active{text-decoration:none;display:block; }
a:hover{border-bottom:2px solid #FF0000;background:#55A0FF;color:#FFFFFF;}

  • 建议页面的宽度设置为900px

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Web页面设计实例</title>
<link href=css/style12.css rel="stylesheet" />
</head>
<body>
	<div id="Container">
  		<div id="Header">
            <img src="images/Header.jpg">
            <h4>
            <span>首页</span>
            <span>|</span>
            <span>博客</span>
            <span>|</span>
            <span>设计</span>
            <span>|</span>
            <span>论坛</span>
            <span>|</span>
            <span>关于</span>
            </h4>
  		</div>
  		<div id="PageBody">
    		<div id="SideBar">
             <ul>
				<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>
             </ul>
			</div>
    		<div id="MainBody">
			<h3>欢度新春佳节</h3>			
<img src="images/huanduchunji.jpg" width="694" height="308" border="0" alt="">
			</div>
  		</div>
  		<div id="Footer">
  			<p>Copyrights 2015-2020  Web前端开发工作室&copy; All rights reserved.  中国江苏</p>  	
  		</div>
	</div>
</body>
</html>
 </body>
</html>

总结

不用一模一样，自己可以做个升级，有自己的风格！那真是超赞的！

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

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

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

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

离线数据仓库-关于增量和全量

离线数据仓库-关于增量和全量

数据同步策略 数据仓库同步策略概述一、数据的全量同步二、数据的增量同步三、数据同步策略的选择 数据仓库同步策略概述 应用系统所产生的业务数据是数据仓库的重要数据来源&#xff0c;我们需要每日定时从业务数据库中抽取数据&#xff0c;传输到数据仓库中&#xff0c;之后…
阅读更多...
探索Redis特殊数据结构：Bitmaps(位图)在实际中的应用

探索Redis特殊数据结构：Bitmaps(位图)在实际中的应用

一、概述 Redis官方提供了多种数据类型&#xff0c;除了常见的String、Hash、List、Set、zSet之外&#xff0c;还包括Stream、Geospatial、Bitmaps、Bitfields、Probabilistic&#xff08;HyperLogLog、Bloom filter、Cuckoo filter、t-digest、Top-K、Count-min sketch、Confi…
阅读更多...
一文掌握SpringBoot注解之@Async知识文集(1)

一文掌握SpringBoot注解之@Async知识文集(1)

&#x1f3c6;作者简介&#xff0c;普修罗双战士&#xff0c;一直追求不断学习和成长&#xff0c;在技术的道路上持续探索和实践。 &#x1f3c6;多年互联网行业从业经验&#xff0c;历任核心研发工程师&#xff0c;项目技术负责人。 &#x1f389;欢迎 &#x1f44d;点赞✍评论…
阅读更多...
手把手教你搭建一个数据可视化看板

手把手教你搭建一个数据可视化看板

前言 俗话说的好&#xff0c;“字不如表&#xff0c;表不如图”、“有图有真相&#xff0c;一图胜千言”。 数据可视化就是用图的形式把基础数据直观&#xff0c;简洁的&#xff0c;高效的展示出来&#xff0c;今天为大家介绍一下如何使用葡萄城公司的嵌入式BI工具——Wyn商业…
阅读更多...
Unity3d C#实现场景编辑/运行模式下3D模型XYZ轴混合一键排序功能（含源码工程）

Unity3d C#实现场景编辑/运行模式下3D模型XYZ轴混合一键排序功能（含源码工程）

前言 在部分场景搭建中需要整齐摆放一些物品&#xff08;如仓库中的货堆、货架等&#xff09;&#xff0c;因为有交互的操作在单个模型上&#xff0c;每次总是手动拖动模型操作起来也是繁琐和劳累。 在这背景下&#xff0c;我编写了一个在运行或者编辑状态下都可以进行一键排序…
阅读更多...
Day12 C基础（指针进阶）

Day12 C基础（指针进阶）

文章目录 指针修饰1.const 修饰2.void 大小端二级指针指针和数组1.指针和一维数组直接访问&#xff1a;间接访问&#xff1a; 2.指针和二维数组直接访问&#xff1a;间接访问&#xff1a; 数组指针 指针修饰 1.const 修饰 1)const int num 10; const int num 10;num 3; i…
阅读更多...
【面试合集】说说微信小程序的实现原理？

【面试合集】说说微信小程序的实现原理？

面试官&#xff1a;说说微信小程序的实现原理&#xff1f; 一、背景 网页开发&#xff0c;渲染线程和脚本是互斥的&#xff0c;这也是为什么长时间的脚本运行可能会导致页面失去响应的原因&#xff0c;本质就是我们常说的 JS 是单线程的 而在小程序中&#xff0c;选择了 H…
阅读更多...
Mac系统下，保姆级Jenkins自动化部署Android

Mac系统下，保姆级Jenkins自动化部署Android

一、Jenkins自动化部署 1、安装jenkins 官网&#xff1a;macOS Installers for Jenkins LTS 选择macOS brew install jenkins-lts 安装最新: brew install jenkins-lts 启动jenkins服务: brew services start jenkins-lts 重启jenkins服务: brew services restart jenkin…
阅读更多...
YOLOv5改进系列（27）——添加SCConv注意力卷积（CVPR 2023|即插即用的高效卷积模块）

YOLOv5改进系列（27）——添加SCConv注意力卷积（CVPR 2023|即插即用的高效卷积模块）

【YOLOv5改进系列】前期回顾&#xff1a; YOLOv5改进系列&#xff08;0&#xff09;——重要性能指标与训练结果评价及分析 YOLOv5改进系列&#xff08;1&#xff09;——添加SE注意力机制 YOLOv5改进系列&#xff08;2&#xff09;——添加CBAM注意力机制 YOLOv5改进系列&…
阅读更多...
Netty-Netty源码分析

Netty-Netty源码分析

Netty线程模型图 Netty线程模型源码剖析图 Netty高并发高性能架构设计精髓 主从Reactor线程模型NIO多路复用非阻塞无锁串行化设计思想支持高性能序列化协议零拷贝(直接内存的使用)ByteBuf内存池设计灵活的TCP参数配置能力并发优化 无锁串行化设计思想 在大多数场景下&#…
阅读更多...
如何用GPT进行论文润色与改写？

如何用GPT进行论文润色与改写？

详情点击链接&#xff1a;如何用GPT/GPT4进行论文润色与改写&#xff1f;一OpenAI 1.最新大模型GPT-4 Turbo 2.最新发布的高级数据分析&#xff0c;AI画图&#xff0c;图像识别&#xff0c;文档API 3.GPT Store 4.从0到1创建自己的GPT应用 5. 模型Gemini以及大模型Claude2二…
阅读更多...
1.16 day3 IO网络编程

1.16 day3 IO网络编程

用udp实现tftp下载功能 #include <myhead.h> #define PORT 69 #define IP "192.168.122.24" int xiazai(int sfd,struct sockaddr_in sin,int fd,socklen_t socklen) {char buf[516]"";char ack[4];short *p1(short *)buf;*p1htons(1);char *p2buf2…
阅读更多...
数字化转型：为何失败率居高不下，以及如何避免重蹈覆辙

数字化转型：为何失败率居高不下，以及如何避免重蹈覆辙

在当今快速发展的数字化时代&#xff0c;许多企业纷纷投身于数字化转型的浪潮中&#xff0c;以期通过技术革新提升竞争力、优化运营、提高效率。然而&#xff0c;尽管数字化转型的潜在益处巨大&#xff0c;但失败率却居高不下&#xff0c;甚至导致企业陷入困境。 本文将深入探讨…
阅读更多...
Git版本控制——分支

Git版本控制——分支

分支 几乎所有的版本控制系统都以某种形式支持分支。 使用分支意味着可以把工作从开发主线上分离开来进行重大的Bug修改、开发新的功能&#xff0c;以免影响开发主线。 查看本地分支 git branch创建本地分支 git branch 分支名切换分支(checkout) git checkout 分支名创建…
阅读更多...
jenkins url发生改变如何修改回来

jenkins url发生改变如何修改回来

问题&#xff1a; 我的jenkins服务器部署完后&#xff0c;此时url就已经固定了如下&#xff1a; 但是我更换了公网IP&#xff0c;url地址还是旧的&#xff0c;现在就需要修改一下配置文件&#xff1b; 修改配置文件 ($JENKINS_HOME/jenkins.model.JenkinsLocationConfiguratio…
阅读更多...
java日志框架总结

java日志框架总结

一、日志框架简单分类介绍 java常用的日志框架、可以分为两组&#xff1a; 1、JCL、JUL、Log4j&#xff1b; 2、SLF4J、Log4j2、Logback&#xff1b; 其中第一组是比较早期的日志实现框架&#xff0c;JCL并不是具体的日志实现框架&#xff0c;JCL其实是定义了一…
阅读更多...
SparkSQL——Dataset

SparkSQL——Dataset

Dataset Dataset 是什么&#xff1f; Testdef dataset1():Unit {// 1. 创建 SparkSessionval spark new SparkSession.Builder().master("local[6]").appName("dataset1").getOrCreate()// 2. 导入隐式转换import spark.implicits._// 3. 演示val sourceR…
阅读更多...
单元测试之Stub和Mock

单元测试之Stub和Mock

实例 Analyze类会检查filename的长度&#xff0c;如果小于8&#xff0c;我们就会使用一个实现IWebService的类来记录错误. 我们需要给Analyze方法写单元测试。 public class LogAnalyzer {private IWebService service;private IEmailService email;public IWebService Serv…
阅读更多...
小程序基础学习（登录）（重点核心）

小程序基础学习（登录）（重点核心）

首先&#xff0c;获取用户获取code&#xff0c;然后带着code向服务器发送请求&#xff0c;并把返回的token存入缓存中 然后&#xff0c;判断token是否过期如果过期则要重新登录 页面代码 <!--pages/me/me.wxml--> <navigation-bar title"牧原" back"{…
阅读更多...
计算机网络 网络安全

计算机网络 网络安全

网络安全 网络安全问题概述 计算机网络面临的女全性威胁 计算机网络的通信而临两大类威胁&#xff0c;即被动攻击和主动攻击 被动攻击是指攻击者从网络上窃听他人的通信内容。通常把这类攻击称为截获。在被动攻击中&#xff0c;攻击者只是观察和分析某一个协议数据单元 PDU…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023