HTML界面设计

新建一个web项目，在<body></body>标签中创建一个<div></div>，指定class属性=“header”。在<div></div>中创建一个无序列表<ul></ul>，指定class属性=“header_ul”。在其中添加几个<li></li>作为导航栏的菜单并分别指定class属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>导航栏</title>
	</head>
	<body>
		<div class="header">
			<ul class="header_ul">
				<li class="header_ul_home">HOME</li>
				<li class="header_ul_pages">PAGES</li>
				<li class="header_ul_portfollo">PORTFOLIO</li>
				<li class="header_ul_blog">BLOG</li>
			</ul>
		</div>
	</body>
</html>

然后为各个菜单添加子菜单

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>导航栏</title>
		<link rel="stylesheet" type="text/css" href="css/style.css" />
	</head>

	<body>
		<div class="header">
			<ul class="header_ul">
				<li class="header_ul_home">HOME
					<ul class="header_ul_ul">
						<li>HOME1</li>
						<li>HOME2</li>
						<li>HOME3</li>
					</ul>
				</li>

				<li class="header_ul_pages">PAGES
					<ul class="header_ul_ul">
						<li>PAGES1</li>
						<li>PAGES2</li>
						<li>PAGES3</li>
					</ul>
				</li>
				<li class="header_ul_portfollo">PORTFOLIO
					<ul class="header_ul_ul">
						<li>PORTFOLIO1</li>
						<li>PORTFOLIO2</li>
						<li>PORTFOLIO3</li>
					</ul>
				</li>
				<li class="header_ul_blog">BLOG
					<ul class="header_ul_ul">
						<li>BLOG1</li>
						<li>BLOG2</li>
						<li>BLOG3</li>
					</ul>
				</li>
			</ul>
		</div>
	</body>

</html>

将其在浏览器运行
HTML5+CSS设计导航栏及其子菜单
可以看到，这和我们需要的导航栏的效果可不同，这就需要我们在css文件中改变它的样式

CSS样式设计

创建一个style.css文件
首先将body的边缘留白设置为0

body {
	margin: 0px;
}

然后为div设计宽高

.header {
	width: 100%;
	height: 100px;
}

接着为一级菜单设置浮动位置，并将列表标点取消

.header_ul {
	float: left;
	list-style: none;
}

为<li></li>列表设置浮动及顶部左部留白
设置鼠标滑入变色

.header_ul li {
	margin-top: 26px;
	margin-left: 15px;
	float: left;
}

.header_ul li:hover {
	color: red;
}

为子菜单设置各个属性，主要有宽度，内部位置，固定位置

.header_ul_ul {
	width: 100px;
	text-align: center;
	position: absolute;
	list-style: none;
	background: white;
	color: black;
}

.header_ul_ul li {
	margin: 10px 15px 10px -25px;
	float: none;
}

将各个子菜单设置为隐藏

.header_ul_home .header_ul_ul {
	display: none;
}

.header_ul_pages .header_ul_ul {
	display: none;
}

.header_ul_portfollo .header_ul_ul {
	display: none;
}

.header_ul_blog .header_ul_ul {
	display: none;
}

再将其设置为鼠标滑入显示

.header_ul_home:hover .header_ul_ul {
	display: block;
}

.header_ul_pages:hover .header_ul_ul {
	display: block;
}

.header_ul_portfollo:hover .header_ul_ul {
	display: block;
}

.header_ul_blog:hover .header_ul_ul {
	display: block;
}

然后将css文件引入html文件中

<link rel="stylesheet" type="text/css" href="css/style.css" />

可以看到效果
HTML5+CSS设计导航栏及其子菜单

这样就基本实现了导航栏的效果
完整的css代码如下

body {
	margin: 0px;
}


/*导航栏*/

.header {
	width: 100%;
	height: 100px;
	background: #11333333;
}


/*一级菜单*/

.header_ul {
	float: left;
	list-style: none;
}

.header_ul li {
	margin-top: 26px;
	margin-left: 15px;
	float: left;
}

.header_ul li:hover {
	color: red;
}


/*二级菜单*/

.header_ul_ul {
	width: 100px;
	text-align: center;
	position: absolute;
	list-style: none;
	background: white;
	color: black;
}

.header_ul_ul li {
	margin: 10px 15px 10px -25px;
	float: none;
}

.header_ul_home .header_ul_ul {
	display: none;
}

.header_ul_pages .header_ul_ul {
	display: none;
}

.header_ul_portfollo .header_ul_ul {
	display: none;
}

.header_ul_blog .header_ul_ul {
	display: none;
}

.header_ul_home:hover .header_ul_ul {
	display: block;
}

.header_ul_pages:hover .header_ul_ul {
	display: block;
}

.header_ul_portfollo:hover .header_ul_ul {
	display: block;
}

.header_ul_blog:hover .header_ul_ul {
	display: block;
}

HTML5+CSS设计导航栏及其子菜单

HTML界面设计

CSS样式设计

相关推荐