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>，