1
2
3
4
5
6
7
8
9
10
11
12
当然css代码很多，不可能这么快就精通的，我们只能慢慢来
css层叠样式表是嵌套在html代码内部的
 
一般格式都是< style > type="text/css"
                           #siderRight {
                              float:left;
                              width:200px;
                              height=300px;
                         }
 
 
                         </ style >


这里有个老旧html  css代码的对比

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
< html >
< head >
< meta  charset = "UTF-8" >
< title >Insert title here</ title >
< style  type = "text/css" >
#header,#siderLeft,#siderRight,#footer{
     border:solid 1px #666;
     padding:10px;
     margin:6px;
}
#header {width:500px}
#siderLeft{
     float:left;
     width:60px;
     height:100px;
}
#siderRight{
     float:left;
     width:406px;
     height:100px
}
#footer{
     clear:both;
     width:500px;
}
</ style >
</ head >
< body >
< div  id = "header" >导航</ div >
< div  id = "siderLeft" >菜单</ div >
< div  id = "siderRight" >内容</ div >
< div  id = "footer" >底部说明</ div >
</ body >
</ html >

这里是新的html  css代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
< html >
< head >
< meta  charset = "UTF-8" >
< title >Insert title here</ title >
< style  type = "text/css" >
header,nav,article,footer{
     border:solid 1px #666;
     padding:10px;
     margin:6px;
}
header {width:500px}
nav{
     float:left;
     width:60px;
     height:100px;
}
article{
     float:left;
     width:406px;
     height:100px
}
footer{
     clear:both;
     width:500px;
}
</ style >
</ head >
< body >
< header >导航</ header >
< nav >菜单</ nav >
< article >内容</ article >
< footer >底部说明</ footer >
</ body >
</ html >

这里我们来发现一个超链接引用css文件的方式和h5里面引用css里面定义的类的一般格式

1
2
3
4
5
6
7
8
9
   <!-- Custom styles for this template -->
     < link  href = "/css/dashboard.css"  rel = "stylesheet" >
   </ head >
 
   < body >
     < nav  class = "navbar navbar-fixed-top navbar-dark bg-inverse" >
       < button  class = "navbar-toggler hidden-md-up"  type = "button"  data-toggle = "collapse"  data-target = "#navbar"  aria-controls = "navbar"  aria-expanded = "false"  aria-label = "Toggle navigation" ></ button >
       < div  class = "collapse navbar-toggleable-sm"  id = "navbar" >
         < a  class = "navbar-brand"  href = "#" >运维工具</ a >

这里注意了h5 里面的引用超链接有相对路径和绝对路径的区别

1
2
3
4
5
6
7
< a  href = "url" 
title = "" >链接</ a > 
其中，url可以是一个绝对网址，比如：http://www.xuexuexi.com;也可以是一个相对的网页。如：123.html；还可以是其它
文件。比如pdf，doc等等。还有一种是根目录的方式，根目录其实跟绝对路径有些相似，就是去掉前面的域名即可，比如：< a 
 
 
这个是相对路径 href = "/html/h1.html" >链接</ a >，