如何用CSS+HTML制作顶部导航栏步骤是啥

发布时间：2023-08-15 13:21:39 所属栏目：语言来源：

导读：这篇文章主要讲解了“如何用CSS+HTML制作顶部导航栏，步骤是什么”，文中的讲解内容简单、清晰、详细，对大家学习或是工作可能会有一定的帮助，希望大家阅读完这篇文章能有所收获。下面就请大家跟着小编的

这篇文章主要讲解了“如何用CSS+HTML制作顶部导航栏，步骤是什么”，文中的讲解内容简单、清晰、详细，对大家学习或是工作可能会有一定的帮助，希望大家阅读完这篇文章能有所收获。下面就请大家跟着小编的思路一起来学习一下吧。

导航栏的制作：

技术要求：

CSS HTML各类标签

实现目的：

制作导航栏菜单

代码分析：

基本样式清除无序列原点删除下划线删除文字默认居中 a标签设置块级元素伪类选择器对a状态修饰

分步实现：

分三栏布局：使用浮动

logo一栏；选择栏一栏；搜索栏一栏

logo部分：

img标签，导入图片，a标签超链接，img导入图片，防止图片失真width和height设置一个就可以了

</a>

</div>

选择栏：ul>li标签

列表标签，a标签超链接

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

<a href="#">猪脚叉烧面</a>

</li>

<li>

<a href="#">猪脚卤蛋面</a>

</li>

<li>

<a href="#">猪脚肉丸面</a>

</li>

<li>

<a href="#">叉烧肉丸面</a>

</li>

</ul>

搜索栏：

font表单，input属性，输入框和按钮

<form>

</form>

</div>

实现分析：

首先在body内设置一个站点的头部盒子，头部盒子里面有一个中心的盒子。

</div>

把logo，选择栏，搜索栏放入中心盒子中

<!DOCTYPE html>

<head>

<title>惠州客家面</title>

</head>

<body>

</a>

</div>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

<a href="#">猪脚叉烧面</a>

</li>

<li>

<a href="#">猪脚卤蛋面</a>

</li>

<li>

<a href="#">猪脚肉丸面</a>

</li>

<li>

<a href="#">叉烧肉丸面</a>

</li>

</ul>

<form>

</form>

</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;

}

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;

}

使用外部式引入：

最后梳理一下：

创建一个HTML文件，输入以下代码

<!DOCTYPE html>

<head>

<title>惠州客家面</title>

</head>

<body>

</a>

</div>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

<a href="#">猪脚叉烧面</a>

</li>

<li>

<a href="#">猪脚卤蛋面</a>

</li>

<li>

<a href="#">猪脚肉丸面</a>

</li>

<li>

<a href="#">叉烧肉丸面</a>

</li>

</ul>

<form>

</form>

</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;

}

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+HTML制作顶部导航栏 步骤是啥

如何用CSS+HTML制作顶部导航栏步骤是啥