css+div实现导航栏

最新推荐文章于 2024-04-26 19:19:48 发布
最新推荐文章于 2024-04-26 19:19:48 发布
阅读量4.7k 收藏 15
点赞数 4
分类专栏： 代码 知识点
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/L_Y_J_21/article/details/82974138
版权

css+div实现导航栏

把页面分成两个部分，用div装起来

<body>
		<div class="one1">
			<h1>SYROS</h1>
		</div>
		<div class="one2">

		</div>

用<link rel="stylesheet" type="text/css" href="css/style.css" />给div添加样式
如果需要两部分公用一张背景图，就需要给他们设置一个属性position: absolute;

导航栏部分

用无序列表罗列，做出效果如下，当鼠标划过会变为红色，划过不同的标题会显示它下面的内容
在这里插入图片描述

<div class="one1">
			<h1>SYROS</h1>
			<ul class="one1_ul">
				<li>
					<a href="">HOME</a>
					<ul class="Home_ul">
						<li>
							<a href="">HOME Default</a>
						</li>
						<li>
							<a href="">HOME Onepage</a>
						</li>
						<li>
							<a href="">HOME Business</a>
						</li>
						<li>
							<a href="">HOME Agency</a>
						</li>
						<li>
							<a href="">HOME Landing</a>
						</li>
						<li>
							<a href="">HOME Shop</a>
						</li>

					</ul>
				</li>
				<li>
					<a href="">PAGES</a>
					<ul class="Home_ul">
						<li>
							<a href="">Services</a>
							<ul class="servies_ul">
								<li>
									<a href="">Services1</a>
								</li>
								<li>
									<a href="">Services2</a>
								</li>
							</ul>
						</li>
						<li>
							<a href="">About Us</a>
							<ul class="servies_ul">
								<li>
									<a href="">About Us1</a>
								</li>
								<li>
									<a href="">About Us2</a>
								</li>
							</ul>
						</li>
						<li>
							<a href="">Contact</a>
							<ul class="servies_ul">
								<li>
									<a href="">Contact1</a>
								</li>
								<li>
									<a href="">Contact2</a>
								</li>
							</ul>
						</li>
						<li>
							<a href="">404</a>
						</li>
					</ul>
				</li>
				<li>
					<a href="">PORTFOLLIO</a>
					<ul class="Home_ul">
						<li>
							<a href="">Classic</a>
							<ul class="servies_ul">
								<li>
									<a href="">4 Columns</a>
								</li>
								<li>
									<a href="">3 Columns</a>
								</li>
								<li>
									<a href="">2 Columns</a>
								</li>
							</ul>
						</li>
						<li>
							<a href="">Fullwidth</a>
							<ul class="servies_ul">
								<li>
									<a href="">5 Columns</a>
								</li>
								<li>
									<a href="">4 Columns</a>
								</li>
								<li>
									<a href="">3 Columns</a>
								</li>
								<li>
									<a href="">2 Columns</a>
								</li>
							</ul>
						</li>
						<li>
							<a href="">Masonry</a>
							<ul class="servies_ul">
								<li>
									<a href="">5 Columns</a>
								</li>
								<li>
									<a href="">4 Columns</a>
								</li>
								<li>
									<a href="">3 Columns</a>
								</li>
								<li>
									<a href="">5 Columns</a>
								</li>
							</ul>
						</li>
						<li>
							<a href="">With Title</a>
							<ul class="servies_ul">
								<li>
									<a href="">5 Columns</a>
								</li>
								<li>
									<a href="">4 Columns</a>
								</li>
								<li>
									<a href="">3 Columns</a>
								</li>
								<li>
									<a href="">2 Columns</a>
								</li>
							</ul>
						</li>
						<li>
							<a href="">Single Project</a>
							<ul class="servies_ul">
								<li>
									<a href="">Standard</a>
								</li>
								<li>
									<a href="">Extended</a>
								</li>

							</ul>
						</li>
					</ul>
				</li>
				<li>
					<a href="">BLOG</a>
					<ul class="Home_ul">
						<li>
							<a href="">Standard</a>
						</li>
						<li>
							<a href="">Masonry</a>
						</li>
						<li>
							<a href="">Single Post</a>
						</li>
						<li>
							<a href="">No Sidebar</a>
						</li>
					</ul>
				</li>
				<li>
					<a href="">SHOP</a>
					<ul class="Home_ul">
						<li>
							<a href="">Catalog Grid</a>
						</li>
						<li>
							<a href="">Single Product</a>
						</li>
						<li>
							<a href="">Cart</a>
						</li>
						<li>
							<a href="">Checkout</a>
						</li>
					</ul>
				</li>
				<li>
					<a href="">FEATURES</a>
				</li>

			</ul>
		</div>

无序列表需要用list-style-type: none;把前面的点去除
超链接需要用text-decoration: none;把下划线去除
给字体加粗设置font-weight: bold;
下面是导航栏的css完整代码

.one1 {
	color: white;
	width: 100%;
	height: 150px;
	position: absolute;
	z-index: 1000;
}
.one1 h1 {
	float: left;
	margin-left: 35px;
}
/*第一层嵌套*/
.one1_ul {
	float: left;
	list-style-type: none;
	margin-left: 350px;
}

.one1_ul li {
	/*给字体加粗*/
	font-weight: bold;
	float: left;
	padding: 10px 10px 10px 10px;
	margin-top: 10px;
}

.one1_ul li a {
	text-decoration: none;
	color: white;
}

.one1_ul li a:hover {
	color: red;
}
/*第二层嵌套*/
.Home_ul {
	position: absolute;
	display: none;
}

.Home_ul li {
	width: 150px;
	float: none;
	list-style: none;
}

.one1_ul li:hover .Home_ul {
	display: block;
}

/**
 * 第三层嵌套
 */

.servies_ul {
	position: absolute;
	display: none;
}

.servies_ul li {
	width: 150px;
	margin-left: 55px;
	margin-top: -15px;
}

.Home_ul li:hover .servies_ul {
	display: block;
}
月亮很圆.
关注
  • 4
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css+div+js实现简单导航栏菜单栏
04-08
"CSS+Div+JS实现简单导航栏菜单栏"是一个基础但实用的主题，它涵盖了网页布局、样式设计以及交互功能的实现。接下来，我们将深入探讨这三个关键技术在创建导航栏菜单栏中的应用。 首先，CSS（层叠样式表）是用于...
div+css 制作横向导航菜单
热门推荐
wl_haanel的专栏
05-19 3万+
好，开始上课！                前三节课，我们知道了什么是“块状元素和内联元素”，以及xHTML+CSS布局的核心概念“盒子模型”，同时又学习了一下页面布局中两种方法中的一种方法“浮动”，这次我们就利用这三个概念，来制作一款经典的导航条，别看它其貌不扬，可是网上所有的导航条都可以在它的基础上演变而来~，厉害吧~！其实理论都是一样的，只要你能理解并学会这节课的内容，以后再困难的导航
div+css创建导航栏
MRWisme的博客
10-31 1848
1、准备一个html页面代码 导航栏           2、为导航栏创建一个div块以及添加相应的css，以及导航栏元素（ul、li）                       主页         生活大小事         公告         校园美景         个人主页               .dt{
各种CSS导航代码集合！CV即可！水平导航，垂直导航，jd粘性导航…
最新发布
u013179804的博客
04-26 435
今天，我们综合运用之前所看到的知识，来写 3 个有代表性的导航样式。注意：文章中的 href 链接均为#，实际项目中替换为目标链接即可。
DIV+CSS实现导航条功能
wanglihuhappy的专栏
09-07 269
DIV+CSS实现导航条功能 导航条元素1 元素2 元素3 元素4 元素5 元素6 元素7 元素8 元素9 元素10 序号 具体说明及须知 第一:...
网页设计css导航链接怎么做,如何用DIV+CSS制作导航条
weixin_42110070的博客
08-04 2577
一个蓝色主题的导航条布局案例，本CSS小实例，采用DIV CSS实现。同时不用图片做背景，直接使用背景色实现，鼠标经过悬停对应栏目名称是对应背景蓝色变深。一般导航条采用ul li列表布局，这里也不例外DIVCSS5实例也采用列表标签ul li + CSS布局。这样的导航条有以下二部分代码组成。1、CSS代码：ul#nav{ width:100%; height:60px; background:#...
DIV+CSS基础教程：导航条的制作详解
thewebcode
03-12 688
课程开始： 前三节课，我们知道了什么是“内容块状元素和内联元素”，以及XHTML+CSS布局的核心概念“盒子模型”，同时又学习了一下页面布局中两种方法中的一种方法“浮动”，这次我们就利用这三个概念，来制作一款，经典的导航条，别看它其貌不扬，可是网上所有的导航条都可以再它的基础上修改而来哟~，厉害吧~！其实理论都是一样的，只要你能理解并学会这节课的内容，以后再困难的导航条你都可以很应对，EASY！...
CSS+DIV实现的导航栏
06-22
本文将深入探讨如何使用CSS（层叠样式表）和DIV（division，分块元素）来创建灵活且响应式的导航栏，包括横排和竖排两种布局方式。 首先，我们从基础开始。CSS是一种样式表语言，用于描述HTML或XML（包括如SVG、...
html+css侧边伸缩导航栏
01-26
在这个主题中，我们将深入探讨如何使用 HTML 结构和 CSS 样式来实现一个可伸缩的侧边导航栏。 首先，让我们从 HTML 结构开始。一个基本的侧边导航栏通常包含一系列链接或按钮，这些链接可能被组织成层次结构。以下...
css+div 导航栏
06-27
"CSS+div"是实现这种导航栏的常用技术，这里我们将深入探讨如何利用这两种技术创建功能性和美观的导航栏。 首先，`div`是HTML中的一个块级元素，用于组织页面内容。在创建导航栏时，`div`可以被用来定义一个容器，...
CSS+DIV布局赏析案例.zip_CSS+DIV布局赏析案例
09-22
案例可能利用这些属性实现特定元素的精确定位，如导航栏、侧边栏等。 5. **响应式设计**：随着移动设备的普及，响应式设计成为必需。案例可能采用了媒体查询（media queries）和其他响应式技术，确保页面在不同设备...
day11——图标导航栏
jumao555的博客
10-21 695
1.结构分析 2.样式分析
div布局和导航栏案例
qq_43668733的博客
01-29 606
div布局，其中css的 #daohang ul li表示的是id为daohang的ul标签下的li的属性，hover是鼠标放上去的状态，text-decoration:none是设置超链接时不要下划线，list-style: none是无序列表去掉前面的点。
css+div 制作网页导航栏
yushengabc的专栏
01-18 6354
课程开始： 前三节课， 我们知道了什么是 “内容块状元素和内联元素” ， 以及 XHTML+CSS 布局的 核心概念“盒子模型”，同时又学习了一下页面布局中两种方法中的一种方法“浮动”， 这 次我们就利用这三个概念， 来制作一款， 经典的导航条， 别看它其貌不扬， 可是网上所有的 导航条都可以再它的基础上修改而来哟~， 厉害吧~！ 其实理论都是一样的， 只要你能理解并 学会这节课的内容，
利用css和DiV怎样创建导航条,cssdiv做导航条（Cssdiv makes navigation bars）.doc
weixin_42188512的博客
08-03 262
cssdiv做导航条(Cssdiv makes navigation bars)cssdiv做导航条(Cssdiv makes navigation bars)In fact, do this navigation very easy, you just need to move the mouse knock on the keyboard, with KwooJan do it, ha ha[...
html+css网页开发实战——2、头部logo,搜索框和导航条的制作
qq_38268534的博客
01-27 2万+
网页效果图： 完整代码如下： 头部导航条hml代码 &amp;lt;div class=&quot;nav&quot;&amp;gt; &amp;lt;!--&amp;lt;div class=&quot;nav-list wp&quot;&amp;gt; &amp;lt;span z&amp;gt;&amp;lt;a href=&quot;&quot;&a
html有形状导航栏制作,div css制作导航栏
weixin_32938207的博客
06-03 2992
如何用DIV+CSS做漂亮的横排导航栏先码好导航栏所需要的基本的HTML代码 这个就不必多说具体的代码如下： 横向导航栏 首页 导航1 导航2 导航3 导航4 导航5 导航6 下面我们通过CSS 来改变他的样式。 首先我们先让导航在浏览器的中间。不过在让他居中前得先设置一个宽度。如何使用div+css 实现简单的导航栏li{list-style-type:none; } a{text-decora...
html+css实现页面顶部导航栏
caterpie_771881的博客
11-03 1万+
利用html+css制作下拉式的导航栏
HTML5网页设计小案例：网页导航栏的设计
weixin_63279307的博客
08-02 1万+
HTML5网页设计小案例：网页导航栏的设计
html纵向滚动导航栏,html+css+js实现导航栏滚动渐变效果
05-25
以下是一个简单的实现纵向滚动导航栏并且带有渐变效果的HTML、CSS和JS代码示例： HTML代码： ```html <div id="navbar"> <li><a href="#section1">Section 1</a></li> <li><a href="#section2">Section 2</a>...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值