html中的导航条制作

在这里插入图片描述
在网页中一个这样的导航条该怎么做呢?

用HTML中的无序列表(ul)做。。

然后在给列表设置需要的样式即可:

具体参考代码:


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>导航条title>
	<style type="text/css">
		*{
			padding: 0px;
			margin: 0px;
		}
		.nav{
			list-style: none;
			background-color: #6495ed;/*给整个列表设置蓝色背景*/
			width: 1200px;
			/*height: 45px;*/
			margin: 20px auto;
			overflow: hidden;
			zoom: 1;
		}
		.nav li{
			float: left;
			width: 25%;
		}
		.nav a{
			width: 100%;
			display: inline-block;
			text-align: center;
			padding: 5px 0px;
			text-decoration: none;
			color: white;
			font-weight: bold;
		}
		.nav a:hover{
			background-color: red;
		}
	style>
head>
<body>
	<ul class="nav">
		<li><a href="#">首页a>li>
		<li><a href="#">新闻a>li>
		<li><a href="#">联系a>li>
		<li><a href="#">关于a>li>
	ul>
body>
html>

你可能感兴趣的:(前端,CSS,HTML)