第8天:CSS制作导航栏
今天主要学习了网页导航栏的制作。注意:引入外部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制作导航栏的更多相关文章
- css制作导航栏的上下三角
1)先完成一个导航条 <style type="text/css"> .nav-ul{ list-style: none; } .nav-ul li{ width: 1 ...
- CSS制作导航栏
最终效果: 代码: <!DOCTYPE html> <html> <head> <title>#练习册二</title> <style ...
- 巧妙使用checkbox制作纯css动态导航栏
前提:很多时候.我们的网页都需要一个垂直的导航栏.可以分类.有分类.自然就有展开.关闭的功能.你还在使用jquery操作dom来制作吗?那你就out了! 方案:使用checkbox 的 checked ...
- 谈谈一些有趣的CSS题目(八)-- 纯CSS的导航栏Tab切换方案
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- html css二级导航栏
二级导航栏制作: 1.将一级导航栏去除列表样式(list-style:none),并给予浮动,使其横向排列(float:left) 2.给每个li中添加一个<a></a>标签, ...
- css3制作导航栏
<!doctype html><html lang="en"><head> <meta charset="UTF-8&qu ...
- C3制作导航栏分割线及立体风格
//首先写一个导航栏样式 .nav{ width:560px; height: 50px; font:bold 0/50px Arial; text-align:center; ...
- Css之导航栏学习
Css: ul { list-style-type:none; margin:; padding:; overflow:hidden; background-color:blue; /*固定在顶部*/ ...
- CSS 笔记——导航栏、下拉菜单、提示工具
8. 导航栏.下拉菜单.提示工具 (1)导航栏 垂直导航栏 <!DOCTYPE html> <html lang="en"> <head> &l ...
随机推荐
- springmvc(四) springmvc的数据校验的实现
so easy~ --WH 一.什么是数据校验? 这个比较好理解,就是用来验证客户输入的数据是否合法,比如客户登录时,用户名不能为空,或者不能超出指定长度等要求,这就叫做数据校验. 数据校验分为客户端 ...
- Java 基本语法----关键字、标识符
关键字 关键字的定义和特点 定义:被Java语言赋予了特殊含义,用做专门用途的字符串(单词)特点:关键字中所有字母都为小写 用于定义数据类型的关键字 class interface enum byte ...
- LoadRunner压力测试之Unique Number参数类型、Random Number参数类型浅析
前几天工作需要用LoadRunner进行压力测试,期间对手机号进行参数化设置. 当时选用了<Value>137{Random_quhao}{Unique_weiyi}</Value& ...
- 记一次 联想杨天A4600K 安装操作系统遇到的尴尬
故事的开始: 某日,有一台联想扬天A4600K台式机,该机器原来使用的系统为windowsXP,先需要安装win7系统. 准备好gho镜像,准备ghost安装系统.不料,提示镜像文件损坏,无法安装.起 ...
- SetConsoleTitle 函数--设置控制台窗口标题
SetConsoleTitle函数 来源:https://msdn.microsoft.com/en-us/library/windows/desktop/ms686050(v=vs.85).aspx ...
- 【SqlServer系列】集合运算
1 概述 已发布[SqlServer系列]文章如下: [SqlServer系列]SQLSERVER安装教程 [SqlServer系列]数据库三大范式 [SqlServer系列]表单查询 [SqlS ...
- Fiddler基础使用一之捕获https请求
fiddler抓包工具: http协议cookieFiddler是一个调试代理工具,它能够记录并检查所有你的电脑和互联网之间的http通讯,设置断点,查看所有的"进出"Fiddle ...
- 木棍分割[HAOI2008]
题目描述 有n根木棍, 第i根木棍的长度为Li,n根木棍依次连结了一起, 总共有n-1个连接处. 现在允许你最多砍断m个连接处, 砍完后n根木棍被分成了很多段,要求满足总长度最大的一段长度最小, 并且 ...
- geotrellis使用(三十)使用geotrellis读取PostGIS空间数据
前言 最近事情很多,各种你想不到的事情--such as singing and dancing--再加上最近又研究docker上瘾,所以geotrellis看上去似乎没有关注,其实我一直在脑中思考着 ...
- 136. Single Number【LeetCode】异或运算符,算法,java
Given an array of integers, every element appears twice except for one. Find that single one. Note:Y ...