DIV+CSS导航栏

最新推荐文章于 2023-09-20 08:50:45 发布
最新推荐文章于 2023-09-20 08:50:45 发布
阅读量644 收藏 1
点赞数 1
分类专栏： HTML5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38844322/article/details/82974102
版权

DIV+CSS导航栏：这里我使用了三层UI嵌套。详细看代码

html代码：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Syros|About Us</title>
		<link rel="stylesheet" type="text/css" href="homeStyle.css" />
	</head>

	<body>
		<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>
		<div class="one2">

		</div>
	</body>

</html>

css代码

body {
	margin: 0px;
}

.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: none;
	margin-left: 350px;
}

.one1_ul li {
	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;
}

.one2 {
	width: 100%;
	height: 700px;
	position: absolute;
	background-image: url(img/about_us_title_bg.jpg);
	background-size: cover;
}
JAVACHENC
关注
专栏目录
css+div+js实现简单导航栏菜单栏
04-08
"CSS+Div+JS实现简单导航栏菜单栏"是一个基础但实用的主题，它涵盖了网页布局、样式设计以及交互功能的实现。接下来，我们将深入探讨这三个关键技术在创建导航栏菜单栏中的应用。 首先，CSS（层叠样式表）是用于...
第八章 利用CSS制作导航栏菜单
最新发布
whitesandcnm的博客
09-26 2478
水平顶部导航栏（Horizontal Top Navigation Bar）是网页设计中常用的一种导航栏布局，通常位于页面的顶部，以水平的方式排列导航选项。这种布局便于用户快速访问网站的主要部分。常见的设计元素包括菜单项、图标、搜索框、以及用户信息等。
div+css创建导航栏
MRWisme的博客
10-31 1885
1、准备一个html页面代码 导航栏           2、为导航栏创建一个div块以及添加相应的css，以及导航栏元素（ul、li）                       主页         生活大小事         公告         校园美景         个人主页               .dt{
css.rar_css_div+css导航_菜单
09-24
本压缩包"css.rar"包含了一个基于`div+css`实现的一级水平导航菜单的实例，这对于网页设计师和开发者来说是非常实用的学习和参考资料。 首先，`div`是HTML中的一个常用标签，全称为division，意为“分割”，主要...
div+css+ul-li制作横向导航栏
12-31
在网页设计中，导航栏是页面布局的重要...总之，通过`div+css+ul-li`，我们可以轻松地创建出具有专业外观的横向导航栏。随着技术的发展，可以进一步探索更高级的布局技巧和动态效果，以满足不断进化的网页设计需求。
css+div实现导航栏
L_Y_J_21的博客
10-08 4861
css+div实现导航栏 把页面分成两个部分，用div装起来 &lt;body&gt; &lt;div class="one1"&gt; &lt;h1&gt;SYROS&lt;/h1&gt; &lt;/div&gt; &lt;div class="one2"&gt; &lt;/div&gt; 用&lt;link rel=&q
左侧导航菜单div+css样式
11-03
左侧导航菜单div+css样式，样式非常好看，适合faq页面使用，分层级的可折叠菜单
div+css制作的几款好看的导航栏
11-07
网页特效，几款好看的导航栏，鼠标点击变斜体导航栏目网页特效，利用了div+css制作而成
CSS的导航栏
Hhjian524的博客
10-11 390
垂直导航栏： html中： &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;主页&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;新闻&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&
《CSS 导航栏》
yexiangCSDN的专栏
06-27 375
CSS 导航栏 垂直 水平 导航栏 熟练使用导航栏，对于任何网站都非常重要。 使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单。 导航栏=链接列表 作为标准的HTML基础一个导航栏是必须的 。在我们的例子中我们将建立一个标准的HTML列表导航栏。 导航条基本上是一个链接列表，所以使用 <ul> 和 <li>元素非常有意义： <!...
CSS导航栏
weixin_60835328的博客
06-03 1952
CSS导航栏
CSS 导航栏
梁辰兴的博客
09-20 2587
CSS导航栏是网站中一个基本的组成部分，它能够快速帮助用户进行需求选择，也是网站中不可或缺的一部分。CSS导航栏一般由选项列表、子选项列表和搜索框等组成。选项列表是可以点击的链接，子选项列表是鼠标滑过选项列表时出现的更详细的列表，搜索框便于用户搜索目标内容。除此之外，还可以添加LOGO等元素来增加导航栏的个性化。CSS可以设置导航栏的各种外观，包括背景色、宽度、高度、边框等，通过调整这些属性可以使得导航栏更加美观易用。
css导航栏
uequation的博客
07-08 543
本文通过 CSS，把乏味的 HTML 菜单转换为漂亮的导航栏。
DIV+CSS常见难点解决方案
DIV+CSS难点之经验总结 在本文中，我们将总结一些常见的DIV+CSS难点，并提供相应的解决方案。 **网页居中显示** 在网页设计中，网页居中显示是一个常见的问题。要解决这个问题，需要设置两个地方，一个是body，一...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值