零基础html5+div+css+js网页开发教程第009期 导航栏css美化
零基础html5+div+css+js网页开发教程第009期 导航栏css美化
本节知识视频教程
1.Css基础结构
html中的class属性对应到css中为符号 .
html中的id属性对应到css中为符号 #
html中的层次结构，每一层对应到css中要用 空格 隔开
2.logo设置
.header .logo{
font-size: larger;/* 字体大小 */
background-color: black; /* 背景颜色 */
color:#fff;/* 字体颜色 */
padding:10px;/*内边距*/
}
3.导航条容器设置
.header .nav{
background-color:royalblue;
overflow: auto;/* 使用浮动时候结合使用,可以使得容器的宽高自动体现出来 */
}
4.首页两个字的特殊配置
.header .nav a.index{ /*a.index代表一个class=index的a标签*/
background-color: orangered;
}
5.导航条的css代码
.header .nav a{
background-color:royalblue;
font-size:17px;
color:#fff;
padding: 10px;
float:left; /* 向左浮动，一旦浮动后，就会脱离文档流 */
text-decoration: none; /*去下划线*/
}
6.鼠标放上去后的css
.header .nav a:hover{ /*当鼠标放上去的时候执行的css代码*/
background-color: orangered;
}
7.总结
1、回看几个基础的css属性，比如字体大小、颜色、浮动、背景颜色、内边距
2、掌握css的抒写原则与框架
8.源代码
index.html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>刘金玉编程</title>
<link rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" href="css/common.css" />
</head>
<body>
<div class="wrapper">
<div class="header">
<div class="logo">刘金玉编程</div>
<div class="nav">
<a class="index" href="index.html">首页</a>
<a href="#">美丽生活</a>
<a href="#">VB</a>
<a href="#">JAVA</a>
<a href="#">C++</a>
<a href="http://ljy.kim">编程创造城市</a>
</div>
</div>
<div class="main"></div>
<div class="footer"></div>
</div>
</body>
</html>
common.css文件
body{
margin:0;
}main.css文件
.header .logo{
font-size: larger;/* 字体大小 */
background-color: black; /* 背景颜色 */
color:#fff;/* 字体颜色 */
padding:10px;/*内边距*/
}
/* 导航条 */
.header .nav{
background-color:royalblue;
overflow: auto;/* 使用浮动时候结合使用,可以使得容器的宽高自动体现出来 */
}
.header .nav a.index{ /*a.index代表一个class=index的a标签*/
background-color: orangered;
}
.header .nav a{
background-color:royalblue;
font-size:17px;
color:#fff;
padding: 10px;
float:left; /* 向左浮动，一旦浮动后，就会脱离文档流 */
text-decoration: none; /*去下划线*/
}
.header .nav a:hover{ /*当鼠标放上去的时候执行的css代码*/
background-color: orangered;
}