HTML+CSS简单的顶部导航栏菜单制作导航栏的制作：
技术要求：
CSS
HTML各类标签
实现⽬的：
制作导航栏菜单
代码分析：
基本样式清除
⽆序列原点删除
下划线删除
⽂字默认居中
a标签设置块级元素
伪类选择器对a状态修饰
分步实现：
分三栏布局：使⽤浮动
logo⼀栏；选择栏⼀栏；搜索栏⼀栏
logo部分：
img标签，导⼊图⽚，a标签超链接 ，img导⼊图⽚，防⽌图⽚失真width和height设置⼀个就可以了
<div class="logo">
<a href="#">
<img src="D:\惠州客家⾯.jpg"width="150"alt="惠州客家⾯">
</a>
</div>
选择栏：ul>li标签
列表标签，a标签超链接
<ul class="list">
<li>
<a href="#">猪脚⾯</a>
</li>
<li>
<a href="#">叉烧⾯</a>
</li>
<li>
<a href="#">⾁丸⾯</a>
</li>
<li>
<a href="#">卤蛋⾯</a>
</li>
<li>
<li>
<a href="#">斋⾯</a>
</li>
<li>
<a href="#">樱花⾯</a>
</li>
<li>
<a href="#">猪脚叉烧⾯</a>
</li>
<li>
<a href="#">猪脚卤蛋⾯</a>
</li>
<li>
<a href="#">猪脚⾁丸⾯</a>
</li>
<li>
<a href="#">叉烧⾁丸⾯</a>
</li>
</ul>
搜索栏：
font表单，input属性，输⼊框和按钮
<div class="search">
<form>
<input type="submit"value="搜索"class="search1">
<input type="text"class="content1">
</form>
</div>
实现分析：
⾸先在body内设置⼀个站点的头部盒⼦，头部盒⼦⾥⾯有⼀个中⼼的盒⼦。
<div class="header">
<div class="container"clearfix>
</div>
</div>
把logo，选择栏，搜索栏放⼊中⼼盒⼦中
<!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>惠州客家⾯</title>
</head>
<body>
<div class="header">
<div class="container"clearfix>
<div class="logo">
<a href="#">
<img src="D:\桌⾯\互联⽹+创业⼤赛/惠州客家⾯素材/图⽚_20210423194229.jpg"width="150"alt="惠州客家⾯">
<img src="D:\桌⾯\互联⽹+创业⼤赛/惠州客家⾯素材/图⽚_20210423194229.jpg"width="150"alt="惠州客家⾯">
</a>
</div>
<ul class="list">
<li>
<a href="#">猪脚⾯</a>
</li>
<li>
<a href="#">叉烧⾯</a>
</li>
<li>
<a href="#">⾁丸⾯</a>
</li>
<li>
<a href="#">卤蛋⾯</a>
</li>
<li>
<a href="#">斋⾯</a>
</li>
<li>
<a href="#">樱花⾯</a>
</li>
<li>
<a href="#">猪脚叉烧⾯</a>
</li>
html ul标签
<li>
<a href="#">猪脚卤蛋⾯</a>
</li>
<li>
<a href="#">猪脚⾁丸⾯</a>
</li>
<li>
<a href="#">叉烧⾁丸⾯</a>
</li>
</ul>
<div class="search">
<form>
<input type="submit"value="搜索"class="search1">
<input type="text"class="content1">
</form>
</div>
</div>
</div>
</body>
</html>
实现1：
是不是感觉不够美观，我们使⽤CSS试试看吧！
CSS代码：
删除a标签下划线，删除li⽆序列原点，在⼀⾏上显⽰。
.header{
width: 100%;
height: 100px;
background-color:rgb(207, 238, 238);
position: relative;
}
.container{
width: 1226px;
height: 20px;
margin: 0 auto;
}
.header .logo{
float: left;
margin-top: 25px;
}
.logo a{
display: block;
width: 150px;
height: 150px;
}
.header .list{
float: left;
width: 820px;
height: 88px; padding: 12px 0 0 30px; }
clearfix::after{
content:'';
clear: both;
display: block;
}
a{
text-decoration: none;
}
.header li{
float: left;
list-style: none;
}
.list li{
padding: 28px 10px 38px ; display: block;
color:rgb(68, 57, 5);
}
.search{
float: right;
width: 296px;
margin-top: 10px; position: absolute;
top: 28px;
right: 53px;
}
.search form{
height: 50px;
width: 296px;
}
.content1{
display: block;
width: 223px;
height: 48px;
border: 1px solid #e0e0e0;
padding: 0 10px;
float:right;
}
.search1{
width: 49px;
height: 49px;
float: right;
}
.list li:hover{
color:rgb(168, 81, 81);
font-size: larger;
}
使⽤外部式引⼊：
<link rel="stylesheet"href="惠州客家⾯.css">
最后梳理⼀下：
创建⼀个HTML⽂件，输⼊以下代码
<!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"> <link rel="stylesheet"href="惠州客家⾯.css">
<title>惠州客家⾯</title>
</head>
<body>
<div class="header">
<div class="container"clearfix>
<div class="logo">
<a href="#">
<img src="D:\惠州客家⾯.jpg"width="150"alt="惠州客家⾯">
</a>
</div>
<ul class="list">
<li>
<a href="#">猪脚⾯</a>
</li>
<li>
<a href="#">叉烧⾯</a>
</li>
<li>
<a href="#">⾁丸⾯</a>
</li>
<li>
<a href="#">卤蛋⾯</a>
</li>
<li>
<a href="#">斋⾯</a>
</li>
<li>
<a href="#">樱花⾯</a>
</li>
<li>
<a href="#">猪脚叉烧⾯</a>
</li>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。