本节知识视频教程
33:481.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.nava.index{/*a.index代表一个class=index的a标签*/
background-color:orangered;
}
5.导航条的css代码
.header.nava{
background-color:royalblue;
font-size:17px;
color:#fff;
padding:10px;
float:left;/*向左浮动，一旦浮动后，就会脱离文档流*/
text-decoration:none;/*去下划线*/
}
6.鼠标放上去后的css
.header.nava:hover{/*当鼠标放上去的时候执行的css代码*/
background-color:orangered;
}
7.总结
1、回看几个基础的css属性，比如字体大小、颜色、浮动、背景颜色、内边距
2、掌握css的抒写原则与框架
8.源代码
index.html文件
!DOCTYPEhtmlhtmlheadmetacharset=utf-8/title刘金玉编程/titlelinkrel=stylesheethref=css/main.css/linkrel=stylesheethref=css/