碼上歡樂
相關內容    簡體    繁體

HTML、CSS常用技巧

本文轉載自   查看原文   2016-08-24 01:15   1678    Web基礎開發

一、HTML

在介紹HTML之前，我們先看一下HTML的文檔樹結構，主要包括哪些：

    

（一）、頭部標簽

1，Doctype

      Doctype告訴瀏覽器使用什么樣的HTML或XHTML規范來解析HTML文檔。

有和無的區別：

  •     BackCompat：標准兼容模式未開啟(怪異模式、混雜模式)；

  •     CSS1Compat：標准兼容模式已開啟(嚴格模式)。

    這個屬性會被瀏覽器識別並使用，但是如果你的頁面沒有DOCTYPE的聲明，那么compatMode默認就是BackCompat，這也就是惡魔的開始，瀏覽器按照自己的方式解析渲染頁面，那么，在不同的瀏覽器就會顯示不同的樣式； 

    如果你的頁面添加了那么就等同於開啟了標准模式，瀏覽器會老老實實按照W3C的標准解析渲染頁面，這樣一來，你的頁面在所有的瀏覽器顯示的就都是一樣的了。

有，用什么？

    Doctype告訴瀏覽器使用什么樣的HTML或XHTML規范來解析HTML文檔，dtd文件則包含了標記、attributes、properties、約束規則，在這里推薦使用<!DOCTYPE html>。

更多規則請參考：https://hsivonen.fi/doctype/

2、Meta(metadata infomation)

提供有關頁面的元信息，例：頁面編碼、刷新、跳轉、針對搜索引擎和更新頻度的描述和關鍵詞。

  • 頁面編碼(告訴瀏覽器是什么編碼)

1
2

<meta http-equiv="content-type" content="text/html;charset=utf-8">

<meta charset="utf-8">

  • 刷新和跳轉

1
2
3
4
<  meta  http-equiv=“Refresh” Content=“30″> 
<!--頁面30秒刷新一次-->
<  meta  http-equiv=”Refresh“ Content=”5;  Url = http ://www.autohome.com.cn“ />    
<!--5秒后自動跳轉到后面地址-->

  • 關鍵詞

1
<  meta  name = "keywords"  content = "python,java,C++,語言" >

3、Title(頁面頭部信息)

4、Link

  • CSS

1
2
< link  rel = "stylesheet"  type = "text/css"  href = "css/common.css" >
<!--引入外部樣式-->

  • icon

1
2
< link  rel = "shortcut icon"  href = "image/test.ico" >
<!--導入圖片-->

5、Style(在頁面中寫樣式)

1
2
3
4
5
< style  type = "text/css" >
    .hide{
        display: none;
    }
</ style >

6、Script

  • 引進文件

1
<  script  type = "text/javascript"  src = "http://www.googletagservices.com/tag/js/gpt.js" > </ script  >

  • 寫JS代碼(一般寫在body的最底部)

1
2
3
< script  type = "text/javascript" >
      .......
</ script >

(二)、常用標簽

標簽一般分為兩種：塊級標簽和行內標簽。

  • 塊級標簽：a標簽、span標簽、select標簽等；

  • 行內標簽：div標簽、h標簽、p標簽等。

1、p標簽、br標簽

  • p標簽：表示段落，默認段落之間是有間隔的；

  • br標簽：換行

1
2
< p >hello，world!!</ p >< br />
< p >hello，world!!</ p >

2、a標簽

  •  target屬性，_back表示在新的頁面打開；

  •  錨點

 
1
2
3
4
5
6
7
8
9
10
11
12
13
< body >
     < a  href = "http://www.baidu.com" >本頁面直接跳轉</ a >< br />
     < a  href = "http://www.baidu.com"  target = "_blank" >開啟新頁面</ a >< br />
     <!--加target生成新頁面-->
  
     <!--尋找頁面中id=i1的標簽，將其標簽放置在頁面頂部-->
     < a  href = "#i1"  style = "color: green" ;>第一章</ a >< br />
     < a  href = "#i2"  style = "color: fuchsia" ;>第二章</ a >< br />
  
     <!--id沒有一個標簽的id屬性值不允許重復，id屬性可以不寫-->
     < div  id = "i1"  style = "height: 500px" ;>第一章內容</ div >
     < div  id = "i2"  style = "height: 500px" ;>第二章內容</ div >
</ body >

3、HTML標題

標題(Heading)是通過<h1>--<h6>等標簽進行定義的，<h1>定義最大的標題，<h6>定義最小的標題。

1
2
3
4
< h1 >1,br換行為自閉合標簽</ h1 >
< p >asdf< br  />ghjkl</ p >
< h1 >2,a標簽</ h1 >
< h2 >屬性:</ h2 >

4、select標簽

    這里有一個知識點，就是在標簽上加默認值：

  • selected="selected"（下拉框默認值）

  • checked="checked"（復選框默認值）

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
< p >城市:
     < select >
         < option >上海</ option >
         < option >北京</ option >
         < option >河北</ option >
         < option >山東</ option >
     </ select >
<!--顯示幾條信息,size設置顯示的條數-->
     <!--<select multiple size="10">-->
     < select  multiple>
         < option >上海</ option >
         < option >北京</ option >
         < option >河北</ option >
         < option >廣州</ option >
         < option >山西</ option >
         < option >河南</ option >
     </ select >
<!--創建組-->
     < select >
         < optgroup  label = "南方" >
             < option >上海</ option >
             < option >廣州</ option >
         </ optgroup >
         < optgroup  label = "北方" >
             < option >北京</ option >
             < option >河北</ option >
         </ optgroup >
     </ select >
</ p >

6、input標簽

input標簽的類型有：

  •  text

  • password

  • redio

  • checkbox

  • file

  • button(普通按鈕)

  • submmit(提交當前表單)

  • reset(清空內容)

textarea：備注框

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
< html  lang = "en" >
< head >
     < meta  charset = "UTF-8" >
     < title >Form</ title >
</ head >
<!--<body>傳文件的時候要添加enctype="multipart/form-data-->
     < form  action = "http://192.168.11.88:8000/index/"  method = "get"  enctype = "multipart/form-data" >
         < div  style = "border: 1px solid chartreuse;" >
             < p >用戶名:< input  type = "text"  name = "user" /></ p >
             < p >密碼:< input  type = "password"  name = "pwd" /></ p >
             <!--<p>郵箱:<input type="email"/></p>-->
             <!--email支持IE9以上的版本，不兼容低版本-->
             < p >性別(單選框):
                 <!--要想互斥的話，需添加屬性name並將值設置成相同-->
                 < br />男< input  type = "radio"  name = "ee"  value = "1" />
                 < br />女< input  type = "radio"  name = "ee"  value = "2" />
             </ p >
             < p >愛好(多選框):
                 < br />籃球< input  type = "checkbox"  value = "1" />
                 < br />足球< input  type = "checkbox"  value = "2" />
                 < br />乒乓球< input  type = "checkbox"  value = "3" />
                 < br />橄欖球< input  type = "checkbox"  value = "4" />
             </ p >
             < p >城市:
                 < select  name = "city" >
                     < option  value = "1" >上海</ option >
                     < option  value = "2" >北京</ option >
                     < option  value = "3" >河北</ option >
                     < option  value = "4" >山東</ option >
                 </ select >
             <!--顯示幾條信息,size設置顯示的條數-->
                 <!--<select multiple size="10">-->
                 < select  multiple>
                     < option >上海</ option >
                     < option >北京</ option >
                     < option >河北</ option >
                     < option >廣州</ option >
                 </ select >
             <!--創建組-->
                 < select >
                     < optgroup  label = "南方" >
                         < option >上海</ option >
                         < option >廣州</ option >
                     </ optgroup >
                     < optgroup  label = "北方" >
                         < option >北京</ option >
                         < option >河北</ option >
                     </ optgroup >
                 </ select >
             </ p >
             < p >上傳文件: < input  type = "file"  /></ p >
             < p >備注: < textarea  name = "extra" ></ textarea ></ p >
             < input  type = "submit"  value = "提交" />
             < input  type = "button"  value = "普通按鈕" />
             < input  type = "reset"  value = "重新設置" />
         </ div >
     </ form >
</ body >
</ html >

7、ul ol dl

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
< html  lang = "en" >
< head >
     < meta  charset = "UTF-8" >
     < title >Title</ title >
     < style >
         body{
             margin: 0;
         }
         ul{
             margin: 0;
             list-style-type: none;
         }
         ul li{
             float: left;
             padding: 0 8px 0 8px;
             color: white;
             cursor: pointer;
         }
         /*當鼠標移動到li標簽上時，自動應用以下樣式*/
         ul li:hover{
             background-color: blueviolet;
         }
         .pg-header{
             height: 44px;
             background-color: #2459a2;
             line-height: 44px;
         }
         .w{
             width: 980px;
             margin: 0 auto;
             background-color: red;
         }
     </ style >
</ head >
< body >
     < div  class = "pg-header" >
         < div  class = "w" >
             < ul >
                 < li >菜單一</ li >
                 < li >菜單二</ li >
                 < li >菜單三</ li >
                 < li >菜單三</ li >
                 < li >菜單三</ li >
                 < li >菜單三</ li >
                 < li >菜單三</ li >
                 < li >菜單三</ li >
             </ ul >
         </ div >
     </ div >
     < div  class = "pg-body" ></ div >
     < div  class = "pg-footer" ></ div >
</ body >
</ html >

8、table

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
36
< html  lang = "en" >
< head >
     < meta  charset = "UTF-8" >
     < title >Table</ title >
</ head >
< body >
     < table  border = "5" >
         <!--border 表格外邊框寬度-->
         < thead >
              < tr >
                  <!--colspan是列合並-->
                 < th  colspan = "2" >ID</ th >
                 < th >姓名</ th >
                 < th >年齡</ th >
                 <!--<th>性別</th>-->
             </ tr >
         </ thead >
         < tbody >
             < tr >
                 <!--rowspan是行合並-->
                 < td  rowspan = "2" >1</ td >
                 < td >張小凡</ td >
                 < td >18</ td >
                 < td >男</ td >
             </ tr >
              < tr >
                 < td >2</ td >
                 < td >田靈兒</ td >
                 < td >18</ td >
                 < td >女</ td >
             </ tr >
         </ tbody >
     </ table >
 
</ body >
</ html >

9、fieldset (會在相關表單元素周圍繪制邊框)

1
2
3
4
5
6
7
8
9
10
11
12
13
< body >
 
< form >
  < fieldset >
   < legend >Personalia:</ legend >
   Name: < input  type = "text" >< br >
   Email: < input  type = "text" >< br >
   Date of birth: < input  type = "text" >
  </ fieldset >
</ form >
 
</ body >
</ html >

更多標簽使用方法請參考：

    http://www.runoob.com/html/html-tutorial.html

   http://www.w3school.com.cn/h.asp

二、CSS樣式

    CSS是英文Casscading Style Sheets的縮寫，稱為層疊樣式表，用於對頁面進行美化。

存在方式有三種：元素內聯、頁面嵌入和外部引入，比較三種方式的優缺點。

  • 在標簽中直接使用 style='xxx;'

  • 在頁面中嵌入<style type="text/css"></style>塊

  • 引入外CSS文件

（一）、CSS選擇器

  • 標簽選擇器

  • class選擇器

  • id選擇器

  • 層級選擇器

  • 組合選擇器

  • 屬性選擇器

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
< html  lang = "en" >
< head >
     < meta  charset = "UTF-8" >
     < title >CSS</ title >
     <!--link引入樣式-->
     <!--<link rel="stylesheet" href="common.css" />-->
     < style >
         div{
             /*標簽選擇器*/
             color: chartreuse;
         }
         #i1{
             /*id選擇器*/
             font-size: 56px;
             color: green;
         }
         .c1{
             /*class選擇器*/
             background-color: green;
         }
         .c2 div p .c3{
             /*層級選擇器*/
             background-color: red;
         }
         .c4,.c5,.c6{
             /*組合選擇器，找到class=c4,class=c5,class=c6的標簽*/
             background-color: red;
         }
     </ style >
</ head >
< body >
     <!--組合選擇器-->
     < div  class = "c4" >1</ div >
     < div  class = "c5" >1</ div >
     < div  class = "c6" >1</ div >
 
     < div  class = "c2" >
         < div ></ div >
         < div >
             < p >
                 < span >oo</ span >
                 <!--層級選擇器，只適用這一級-->
                 < a  class = "c3" >uu</ a >
             </ p >
         </ div >
     </ div >
     <!--這一層的c3格式不會受上面的影響-->
     < div  class = "c3" >sdfsdf</ div >
 
     <!--class選擇器-->
     < span  class = "c1" >1</ span >
     < div  class = "c1" >2</ div >
     < a  class = "c1" >3</ a >
 
     <!--id選擇器-->
     < a  id = "i1" >baidu</ a >
 
     <!--標簽選擇器-->
     < div >99</ div >
     < div >99</ div >
     < div >99</ div >
     < div >
         < div >asdf</ div >
     </ div >
 
</ body >
</ html >

屬性選擇器：

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
36
37
<!DOCTYPE html>
< html lang = "en" >
< head >
     < meta charset = "UTF-8" >
     < title >Title</ title >
     < style >
         /*<屬性標簽/>*/
         .c1[jack='a']{
             color: red;
         }
     </ style >
</ head >
< body >
     < input value = "123" >
     < textarea >123</ textarea >
     < select >
         < option >上海</ option >
         < option selected = "selected" >廣州</ option >
         < option >北京</ option >
     </ select >
     男:< input type = "radio" name = "g1" value = "1" />
     女:< input type = "radio" name = "g1" checked = "checked" value = "2" />
 
     < input type = "checkbox" name = "c1" value = "1" checked = "checked" />
     < input type = "checkbox" name = "c1" value = "2" />
     < input type = "checkbox" name = "c1" value = "3" checked = "checked" />
     </ select >
 
<!--<屬性標簽>-->
     < div >
         < div class = "c1" jack = "a" >1</ div >
         < div class = "c1" jack = "a" >2</ div >
         < div class = "c1" >3</ div >
     </ div >
 
</ body >
</ html >

（二）、CSS常用屬性

1、background屬性：

  • background-color：設置背景色；

1
2
3
4
5
/*背景色定義的三種方式*/
/*background-color: #FF69B4;*/
/*background-color: rgb(25,180,10);*/
/*background-color: red;*/
font-size : 32px ;

  • background-image：設置body元素的背景圖像；

  • color:blue !important：優先級最高；

  • background-repeat:

       no-repeat：background-image不會重復;

            repeat-x：只在水平位置會重復背景圖像；

       repeat-y：只在垂直位置會重復背景圖像；

  • background-position：如何定位background-image；

background-position的屬性：

值 描述
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom		 如果僅指定一個關鍵字，其他值將會是"center"
x% y% 第一個值是水平位置，第二個值是垂直。左上角是0％0％。右下角是100％100％。如果僅指定了一個值，其他值將是50％。 。默認值為：0％0％
xpos ypos 第一個值是水平位置，第二個值是垂直。左上角是0。單位可以是像素（0px0px）或任何其他 CSS單位。如果僅指定了一個值，其他值將是50％。你可以混合使用％和positions
inherit 指定background-position屬性設置應該從父元素繼承

2、border屬性

1
2
3
4
5
6
7
8
9
10
11
12
#i 1  {
     border :  2px  solid  red ;
     /*邊框2像素，實體，紅色*/
}
#i 2 {
     border :  2px  dotted  red ;
     /*邊框2像素，小虛線，紅色*/
}
#i 3 {
     border :  2px  dashed  red ;
     /*邊框2像素，大虛線，紅色*/
}

3、margin屬性

     圍繞在元素邊框的空白區域是外邊距。設置外邊距會在元素創建額外的"空白"。設置外邊距最簡單的方法就是使用margin屬性，這個屬性接收任何長度單位、百分數甚至負值。

margin屬性

屬性 描述
margin 簡寫屬性。在一個聲明中設置所有外邊距屬性。
margin-bottom 設置元素的下外邊距。
margin-left 設置元素的左外邊距。
margin-right 設置元素的右外邊距。
margin-top

設置元素的上外邊距。
1
2
3
4
5
6
7
line-height : 30px ;
/*行居中*/
background : #F1F1F1 ;
margin : 0 ;
/*沒有外邊距，直接在頁面頂部*/
margin : 0 auto ;
/*居中*/

4、padding屬性

   元素的內邊距在邊框和內容區之間，控制該區域最簡單的屬性就是padding屬性。CSS padding屬性定義元素的內邊距，padding屬性接受長度值或百分比值，但不允許使用負值。

 內邊距屬性

屬性 描述
padding 簡寫屬性。作用是在一個聲明中設置元素的所內邊距屬性。
padding-bottom 設置元素的下內邊距。
padding-left 設置元素的左內邊距。
padding-right 設置元素的右內邊距。
padding-top 設置元素的上內邊距。
1
2
3
4
5
6
h 1 {
   padding-top : 10px ;
   padding-right : 0.25em ;
   padding-bottom : 2 ex;
   padding-left : 20% ;
}

5、display屬性

display屬性規定元素應該生成的框的類型。下面主要說我們最常用的幾種：

  • display：none     此元素不會被顯示；

  • display：block    此元素將顯示為塊級元素，此元素前后會帶有換行符；

  • display：inline    默認，此元素會被顯示為內聯元素，元素前后沒有換行符；

  • display：inline-block    行內塊元素。

6、cursor屬性

cursor屬性定義了鼠標指針放在一個元素邊界范圍內時所用的光標形狀。

CSS提供的cursor值：

  • pointer  ：小手指；

  • help：箭頭加問號；

  • wait：轉圈圈；

  • move：移動光標；

  • crosshair：十字光標。

通過pointer屬性我們可以​偽造超鏈接：

1
< span style = "cursor:pointer;color:blue;" >pointer</ span >

7、float屬性

float屬性指定一個元素是否應該浮動。

CSS提供的float的屬性值：

  • left：元素向左浮動；

  • right：元素向右浮動；

  • none：默認值，元素不浮動，並會顯示在其文本中出現的位置；

  • inherit：規定應該從父元素繼承float屬性值。

在這我們在補充說明一個屬性：

     clear屬性：指定段落的左側或右側不允許浮動的元素。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
< html lang = "en" >
< head >
     < meta charset = "UTF-8" >
     < title >Title</ title >
</ head >
< body >
     < div style = "width: 500px;height: 500px;border: 1px solid red" >
         < div style = "width: 20%;background-color: green;float: left" >dadada</ div >
         < div style = "width: 80%;background-color: coral;float: right" >tatata</ div >
         < div style = "clear: both;" ></ div >
     </ div >
</ body >
</ html >

8、position定位屬性

position屬性指定一個元素(靜態的、相對的、絕對或固定)的定位方法的類型。

position的屬性值：

  • absolute：生成絕對定位的元素；

  • fixed：生成絕對定位的元素，相對於瀏覽器窗口進行定位；

  • relative：生成相對定位的元素，相對於其正常位置經行定位。

  • z-index：指定一個元素的堆疊順序。

兩種返回頂部的定義方法，一般absolute和relative一起使用：

1
2
3
4
5
6
7
8
9
第一種：
< div style = "height:1000px;background-color: #ddd;" ></ div >
< div style = "position: fixed;right: 200px;bottom: 100px;" >返回頂部</ div >
 
第二種：
< div style = "height: 500px;width: 500px;border: 2px solid green;position: relative" >
     < div style = "position: absolute;right: 0px;bottom: 0px;color: brown" >返回頂部</ div >
     < div style = "background-color: green;height: 100px;width: 500px" ></ div >
</ div >

9、透明度設置

設置圖像透明度的兩種方式：

  • opcity:0.6；

  • background:rgba(0,0,0,.6)；

10、hover選擇器

     hover在鼠標移動到鏈接上時添加的特殊樣式，hover選擇器可用於所有元素，不僅是鏈接。

提示：link選擇器設置了未訪問的頁面鏈接樣式，:visited選擇器設置訪問過的頁面鏈接的樣式，:active選擇器設置當你點擊鏈接時的樣式。

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
<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" >
< title >mytest</ title >
< style >
a.ex1:hover,a.ex1:active {color:red;}
a.ex2:hover,a.ex2:active {font-size:150%;}
a.ex3:hover,a.ex3:active {background:red;}
a.ex4:hover,a.ex4:active {font-family:monospace;}
a.ex5:visited,a.ex5:link {text-decoration:none;}
a.ex5:hover,a.ex5:active {text-decoration:underline;}
</ style >
</ head >
 
< body >
< p >將鼠標移至鏈接上查看其樣式改變.</ p >
 
< p >< a class = "ex1" href = "/css/" >This link changes color</ a ></ p >
< p >< a class = "ex2" href = "/css/" >This link changes font-size</ a ></ p >
< p >< a class = "ex3" href = "/css/" >This link changes background-color</ a ></ p >
< p >< a class = "ex4" href = "/css/" >This link changes font-family</ a ></ p >
< p >< a class = "ex5" href = "/css/" >This link changes text-decoration</ a ></ p >
</ body >
 
</ html >

11、before、after選擇器

  • before：向選定的元素之前插入內容；

  • after：向選定的元素之后插入內容

12、font字體選擇器

  • font-style：規定字體樣式；

  • font-variant：規定字體異體；

  • font-weight：規定字體粗細；

  • font-size/line-height：規定字體尺寸和行高；

  • ​font-family：規定字體系列。

三、實例

1、清除浮動

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
<!DOCTYPE html>
< html lang = "en" >
< head >
     < meta charset = "UTF-8" >
     < title >清除浮動</ title >
     < style >
         .clearfix:after{
             content: '.';
             clear: both;
             display: block;
             visibility: hidden;    （元素是否可見，hidden為不可見）
             height: 0;
         }
         .left{
             float: left;
         }
 
     </ style >
</ head >
< body >
     < div style = "background-color: #00CC00" class = "clearfix" >
         < div class = "left" style = "height: 100px;background-color: red" >1</ div >
         < div class = "left" >2</ div >
 
     </ div >
</ body >
</ html >

2、使用Font awesome插件渲染出小尖角

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
< html lang = "en" >
< head >
     < meta charset = "UTF-8" >
     < title >使用插件</ title >
     <!--<link rel="stylesheet" href="plugins/Font-Awesome-master/css/font-awesome.css"/>-->
     < style >
         .icon{
             display: inline-block;
             border-top:20px solid red;
             border-right: 20px solid green;
             border-bottom: 20px solid transparent;
             border-left:20px solid transparent ;
         }
     </ style >
</ head >
< body >
     <!--<i class="fa fa-bug" aria-hidden="true"></i>-->
     < div class = "icon" ></ div >
     < a href = "Dy15/plugins/Font-Awesome-master/css/font-awesome.css" >
</ body >
</ html >

插件地址：http://fontawesome.io/

3、常用的兩種滾動條

第一種：頁面整體滾動

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
< html lang = "en" >
< head >
     < meta charset = "UTF-8" >
     < title >Title</ title >
     < style >
         body{
             margin: 0;
         }
         .pg-header{
             height:48px;
             background-color: #012a62;
         }
         .pg-body .body-menu{
             position: absolute;
             top: 48px;
             left: 0;
             bottom: 0;
             width: 200px;
             /*bottom: 0;*/
             background-color: #e67e4a;
         }
         .pg-body .body-content{
             position: absolute;
             top: 48px;
             left: 220px;
             right: 0;
             background-color: green;
         }
     </ style >
</ head >
< body >
     < div class = "pg-header" ></ div >
     < div class = "pg-body" >
        < div class = "body-menu" ></ div >
        < div class = "body-content" >
            sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />
            sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />
            sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />
            sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />
            sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />
            sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />
            sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />
            sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />
            sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />
 
        </ div >
     </ div >
</ body >
</ html >

 第二種：頁面內部分內容滾動

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
< html lang = "en" >
< head >
     < meta charset = "UTF-8" >
     < title >Title</ title >
     < style >
         body{
             margin: 0;
         }
         .pg-header{
             height:48px;
             background-color: #012a62;
         }
         .pg-body .body-menu{
             position: absolute;
             top: 48px;
             left: 0;
             bottom: 0;
             width: 200px;
             background-color: #e67e4a;
         }
         .pg-body .body-content{
             position: absolute;
             top: 48px;
             left: 220px;
             right: 0;
             bottom: 0;
             background-color: green;
             overflow: auto;
             /*< overflow 添加滾動條>*/
         }
     </ style >
</ head >
< body >
     < div class = "pg-header" ></ div >
     < div class = "pg-body" >
        < div class = "body-menu" ></ div >
        < div class = "body-content" >
            sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />
            sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />
            sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />
            sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />
            sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />
            sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />
            sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />
            sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />
            sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />sdfasdfa< br />
 
        </ div >
     </ div >
</ body >
</ html >

 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 20 個常用的 CSS 技巧 史上最全Html和CSS布局技巧 Web Essentials之HTML和CSS操作技巧 史上最全Html和CSS布局技巧 HTML/CSS 常用單詞整理 常用html、CSS、javascript前端命名規范 HTML+CSS常用代碼（筆記） CSS技巧（二）：CSS hack webpack--css、html 和 js 代碼的常用處理 html/css彈性布局的幾大常用屬性詳解
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM