HTML实现W3school导航栏（附带重置样式表reset.css）

最新推荐文章于 2023-05-05 09:56:42 发布

着执的变不

最新推荐文章于 2023-05-05 09:56:42 发布

阅读量492

点赞数

文章标签：大数据

本文链接：https://blog.csdn.net/qq_62113366/article/details/125823236

版权

W3school的导航栏

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>W3school导航栏</title>
    <link rel="stylesheet" href="css/reset.css">
</head>
<style>
	
	
	/*设置nav大小*/
	.nav{
		width: 1210px;
		height: 48px;
		background-color: #e8e7e3;
		/*设置上下和左右的位置*/
		margin: 100px auto;
	}
	
	/*设置nav中的li*/
	.nav li{
		float: left;
	}
	
	/*设置a的样式*/
	.nav a{
		/*将文字重置居中*/
		line-height: 48px;
		/*将a转换为块元素*/
		display: block;
		/*去除下划线*/
		text-decoration: none;
		color: #777777;
		font-size: 18px;
		padding:0px 40px;	
	}
	
	/*设置鼠标移入效果*/
	.nav a:hover{
		background-color: #3f3f3f;
		color: #E8E7E3;
	}
	
	
</style>

<body>
 	<ul class="nav">
 		<li>
 			<a href="#">HTML/CSS</a>
 		</li>
 		<li>
 			<a href="#">Browser Side</a>
 		</li>
 		<li>
 			<a href="#">Sever Side</a>
 		</li>
 		<li>
 			<a href="#">Programming</a>
 		</li>
 		<li>
 			<a href="#">XML</a>
 		</li>
 		<li>
 			<a href="#">Web Building</a>
 		</li>
 		<li>
 			<a href="#">Reference</a>
 		</li>
 	</ul>
 	
</body>
</html>

重置样式表

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
   margin: 0;
   padding: 0;
   border: 0;
   font-size: 100%;
   font: inherit;
   vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
   display: block;
}
body {
   line-height: 1;
}
ol, ul {
   list-style: none;
}
blockquote, q {
   quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
   content: '';
   content: none;
}
table {
   border-collapse: collapse;
   border-spacing: 0;
}

最后面的实现效果