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