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

一、导航栏实现步骤：

1、网页整体分为头部、内容、尾部。网页中心内容部分为版心。版心是定宽的。

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

3、header部分分为左、中、右三部分。分别用div包起来，可以设置padding。

4、nav部分用ul实现，li中的a标签为行内元素，要用display转为块标签，给li设置宽高、行高，可以实现居中。

5、鼠标移上去的效果用a：hover实现。

导航栏代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>

<style>

*{
margin:0;
padding:0;
}
body{
font-family: "微软雅黑";
font-size: 16px;
}
.header{
height:58px;
background: #191D3A;
}
.header .inner_c{
width:1000px;
margin: 0 auto;
}
.header .logo{
float:left;
padding-right: 50px;
}
.header .nav{
float:left;
}
.header .nav li{
line-height: 58px;
list-style: none;
float:left;
text-align: center;
border-right: 1px solid #212542;
}
.header .nav .last{
border: none;
}
.header .nav li a{
display: block;
height:58px;
width:100px;
text-decoration: none;
color: #6B6889;
}
.header .nav li .current{
color: #fff;
background: #252947;
}
.header .nav li a:hover{
color: #fff;
background: #252947;
};
.header .jrwm_box{
float: left;
}
.header .jrwm{
padding-left: 48px;
padding-top: 12px;
}

.banner{
height:465px;
background: url(images/banner.jpg) no-repeat center top;
}

</style>
</head>
<body>
<div class="header">
<div class="inner_c">
<div class="logo"><img src="data: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="data:images/jrwm.png" alt=""></a>
</div>
</div>
</div>
</body>
</html>

运行效果：

二、!important

important提高权重，权重无穷大

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

important在建站中是不允许使用的，避免混乱，了解就好。

第8天：CSS制作导航栏的更多相关文章

  1. css制作导航栏的上下三角

    1)先完成一个导航条 <style type="text/css"> .nav-ul{ list-style: none; } .nav-ul li{ width: 1 ...

  2. CSS制作导航栏

    最终效果: 代码: <!DOCTYPE html> <html> <head> <title>#练习册二</title> <style ...

  3. 巧妙使用checkbox制作纯css动态导航栏

    前提:很多时候.我们的网页都需要一个垂直的导航栏.可以分类.有分类.自然就有展开.关闭的功能.你还在使用jquery操作dom来制作吗?那你就out了! 方案:使用checkbox 的 checked ...

  4. 谈谈一些有趣的CSS题目（八）-- 纯CSS的导航栏Tab切换方案

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  5. html css二级导航栏

    二级导航栏制作: 1.将一级导航栏去除列表样式(list-style:none),并给予浮动,使其横向排列(float:left) 2.给每个li中添加一个<a></a>标签, ...

  6. css3制作导航栏

    <!doctype html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  7. C3制作导航栏分割线及立体风格

    //首先写一个导航栏样式 .nav{    width:560px;    height: 50px;    font:bold 0/50px Arial;    text-align:center; ...

  8. Css之导航栏学习

    Css: ul { list-style-type:none; margin:; padding:; overflow:hidden; background-color:blue; /*固定在顶部*/ ...

  9. CSS 笔记——导航栏、下拉菜单、提示工具

    8. 导航栏.下拉菜单.提示工具 (1)导航栏 垂直导航栏 <!DOCTYPE html> <html lang="en"> <head> &l ...

随机推荐

  1. atlwin中不停发WM_PAINT消息原因分析

    这里我们基于atlwin定义的窗口类SampleWindow继承自CWindowImpl(定义见atlwin.h),并注册了WM_PAINT消息处理函数OnPaint,注意,我们在OnPaint函数中 ...

  2. 浅谈游戏中BOSS设计的思路

    对于大多数游戏来说,BOSS在其设计上都有着不可替代的作用,也是玩家印象最为深刻的一部分.近期自己也有在做BOSS的设计工作,有一些心得想要分享一下: 1.明确BOSS的设计目的 在设计之初,我们一定 ...

  3. 使用Go和Let's Encrypt证书部署HTTPS

    为什么要使用HTTPS?使用HTTPS的途径有哪些?如何用Go来部署HTTPS?拿出你的小本本,你要的干货都在这儿! HTTPS的好处我们已在之前的文章中提高好多.它加密浏览器和服务器之间的流量,保障 ...

  4. 【SpringMVC】静态资源访问的问题

    在项目中经常会用到一些静态的资源,而一般我们在配置SpringMVC时会让SpringMVC接管所有的请求(包括静态资源的访问), 那么我们怎样才能最简单的来配置静态资源的访问呢? 一,在web.xm ...

  5. Hibernate学习之一对多关联

    注意事项: 1.单向一对多  只需在“一”放进行配置2.双向一对多  需要在关联双方都加以配置,而且需要在一的一方设置inverse=true 首先是实体类: TAddress.java(多的一方) ...

  6. AI人工智能-Python实现人机对话

    [前言] AI 在人工智能进展的如火如荼的今天,我们如果不尝试去接触新鲜事物,马上就要被世界淘汰啦~ 本文拟使用Python开发语言实现类似于WIndows平台的“小娜”,或者是IOS下的“Siri” ...

  7. java 常见数据结构

    1)tree 2) queue 3) list 4) stack 5) heap 6) map

  8. Java实现简单文件过滤器

    输入路径查找该路径下的指定文件类型的文件 代码思路: 想要循环遍历文件夹下所有子文件夹,就要用到递归. 首先判断路径是否存在: 是:获取文件 判断是否文件夹: 是:调用自身,继续获取子文件夹下内容 否 ...

  9. [补档][Tyvj 1728]普通平衡树

    [Tyvj 1728]普通平衡树 题目 您需要写一种数据结构(可参考题目标题),来维护一些数,其中需要提供以下操作: 1. 插入x数 2. 删除x数(若有多个相同的数,因只删除一个) 3. 查询x数的 ...

  10. matlab怎么查看已安装哪些工具箱和…

    问题描述:matlab怎么查看已安装哪些工具箱和它们相应的版本 解决方法:在命令行里敲击der,回车 效果: