- 所在位置：
- 首页 >
- 编程技术 >
- CSS/HTML >
- 如何用CSS+HTML制作顶部导航栏，步骤是什么
如何用CSS+HTML制作顶部导航栏，步骤是什么
Admin 2022-11-12 群英技术资讯 506 次浏览
这篇文章主要讲解了“如何用CSS+HTML制作顶部导航栏，步骤是什么”，文中的讲解内容简单、清晰、详细，对大家学习或是工作可能会有一定的帮助，希望大家阅读完这篇文章能有所收获。下面就请大家跟着小编的思路一起来学习一下吧。导航栏的制作：
技术要求：
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>
<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="惠州客家面">
</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>
<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>
<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>
创建一个CSS文件，输入以下代码。
.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;
}
实现2：
鼠标动一下图标，字体可以变大哦。
制作攻略：
把logo的位置换成你图片的位置，alt属性是网页图片展示不出来时的字。 “li”标签里的a属性超链接想要链接的网页，“li”标签里面的文字换成你想要的的文字 背景颜色在CSS中**.header中的background-color:**进行修改，变成你想要的的颜色。 对于“li”标签中字体的特效，在CSS中**.list li:hover**进行修改。变色：
.header{
width: 100%;
height: 100px;
background-color: rgb(207, 238, 238);
position: relative;
}
标签特效：
.list li:hover{
color: rgb(168, 81, 81);
font-size: larger;
}
“如何用CSS+HTML制作顶部导航栏，步骤是什么”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业技术相关的知识可以关注群英网络网站，小编每天都会为大家更新不同的知识。
标签：
CSS顶部导航栏
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。
猜你喜欢
-
基于CSS怎样将元素固定容器底部，有哪些方法
基于CSS怎样将元素固定容器底部，有哪些方法？有不少朋友对此感兴趣，下面小编给大家整理和分享了相关知识和资料，易于大家学习和理解，有需要的朋友可以借鉴参考，下面我们一起来了解一下吧。
-
css三列自适应布局怎么写？教你三种方法
css怎么写三列自适应布局？在做前端开发的时候我们经常会使用三列布局，那么两边固定，中间自适应的三列布局要怎么写呢？下面是小编整理的多种实现方法，有需要的朋友可以看一下。
-
CSS中设置边框右下阴影效果的方法是什么
在css中，可以利用“box-shadow”属性来设置元素边框右边和下边的阴影，该属性的作用是设置元素的边框阴影样式，语法为“元素{box-shadow:向右阴影值 向下阴影值 blur spread color ;}”。
-
HTML怎样设定表格水平对齐，代码是什么
小编今天来给大家说说看关于HTML表格标记入门知识之水平对齐属性的相关内容，本文具有一定参考价值，希望能帮助到有需要的朋友们。
-
HTML5中外链嵌入页面通信怎么实现，方法是什么
这篇文章主要介绍了html5关于外链嵌入页面通信问题(postMessage解决跨域通信),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
推荐内容
成为群英会员,开启智能安全云计算之旅
立即注册
专业资深工程师驻守
7X24小时快速响应
一站式无忧技术支持
免费备案服务
Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008
