第8天：CSS制作导航栏

最新推荐文章于 2024-02-01 09:00:00 发布

lelara

最新推荐文章于 2024-02-01 09:00:00 发布

阅读量235

点赞数

分类专栏： html+css

本文链接：https://blog.csdn.net/lelara/article/details/84577716

版权

html+css 专栏收录该内容

60 篇文章 1 订阅

订阅专栏

今日主要学习了网页导航栏的制作。注意：引入外部CSS样式时，如果使用背景：url（../ images / 1.png），一定记得用..跳出当前文件夹，回到上级目录。

一，导航栏实现步骤：

如图1所示，网页整体分为头部，内容，尾部。网页中心内容部分为版心。版心是定宽的。

2，设定版心宽度。其余每部分内容只需要设置高度即可。

3，报头部分分为左，中，右三部分。分别用DIV包起来，可以设置填充。

4，NAV部分用UL实现，李中的一个标签为行内元素，要用显示转为块标签，给立设置宽高，行高，可以实现居中。

5，鼠标移上去的效果用一个：悬停实现。

导航栏代码如下：

<！DOCTYPE html>
<html lang =“en”>
<head>
<meta charset =“UTF-8”>
<title>文件</ title>

<风格>

* {
保证金：0;
填充：0;
}
body {
font-family：“微软雅黑”;
font-size：16px;
}
.header {
height：58px;
背景：＃191D3A;
}
.header .inner_c {
width：1000px ;
保证金：0自动;
}
.header .logo {
float：left;
padding-right：50px;
}
.header .nav {
float：left;
}
.header .nav li {
line-height：58px;
list-style：none;
向左飘浮;
text-align：center;
border-right：1px solid＃212542;
}
.header .nav .last {
border：none;
}
.header .nav li a {
display：block;
高度：58px;
宽度：100像素;
text-decoration：none;
颜色：＃6B6889;
}
.header .nav li .current {
color：#fff;
背景：＃252947;
}
.header .nav li a：hover {
color：#fff;
背景：＃252947;
};
.header .jrwm_box {
float：left;
}
.header .jrwm {
padding-left：48px;
padding-top：12px;
}

.banner {
身高：465px;
background：url（images / banner.jpg）无重复中心顶部;
}

</ style>
</ head>
<body>
<div class =“header”>
<div class =“inner_c”>
<div class =“logo”> <img src =“images / logo.png”alt =“” > </ div>
<div class =“nav”>
<ul>
<li> <a href="" class="current">首页</a> </ li>
<li> <a href="">博雅游戏</a> </ li>
<li> <a href="">博雅新闻</a> </ li>
<li> <a href="">关于我们</a> </ li>
<li> <a href="">客服中心</a> </ li>
<li class =“l”> <a href="">投资者关系</a> </ li>
</ ul>
</ div>
<div class =“jrwm”>
<a href=""> <img src =“images / jrwm.png”alt =“”> </a>
</ div>
</ div>
</ div >
</ body>
</ html>

运行效果：

二，！重要

提高权重，权重无穷大重要

font-size：24px！important;
提高的是一个属性权重，不是选择器。
！important无法提升继承的权重，该是0还是0
<div>
<p>哈哈哈哈哈哈</ p>
</ div>
div {color：red！important;}
p {color：blue;}
由于div是通过继承来影响文字颜色的，所以无法提高权重。