什么是盒子模型
一個頁面元素由：元素、邊框、內邊距、外邊距構成。
width和height通常指元素的高度和寬度。元素的實際高度和寬度的計算如下圖所示：（元素的寬度和高度是不加外邊距margin的，展位的寬度和高度需要加上margin）
技巧：margin-left=margin-right=auto時，元素可以水平居中。
一般在網頁設計過程中，body元素根據瀏覽器的不同會有不同的margin的默認值，一般要手動設置為0px。
示例代碼：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title>盒子模型的概念</title> 6 <meta charset="utf-8" /> 7 </head> 8 <body style="border:1px solid blue;margin:0px;"> 9 <div style="border:1px solid;width:200px;height:150px;padding:25px;margin:auto;"> 10 盒子模型的結構圖 11 </div> 12 </body> 13 </html>
盒子模型的尺寸樣式
width 元素的寬度。使用頻率極高（網頁實際設計過程中絕大多數情況都使用px作為寬度設置的單位）。
塊級標簽的特點：
1.默認填充整個父容器，等效於width：100%。
2.可以使用width：length的方式指定寬度。
行級標簽的特點：
1.行級元素的寬度不是認為指定的，是由元素內容本身的寬度來決定的。如果要設置width則必須使用display：block將行級標簽變成塊級標簽。
示例代碼如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title>盒子模型的尺寸樣式</title> 6 <meta charset="utf-8" /> 7 <style type="text/css"> 8 div { 9 border:1px solid red; 10 } 11 </style> 12 </head> 13 <body> 14 <ul> 15 <li> 16 <h3>width元素寬度（塊級標簽：div，li，ol，ul等）</h3> 17 <div style="width:300px;"> 18 這是一個塊級標簽 19 </div> 20 <dl> 21 <dt>塊級標簽的特點：</dt> 22 <dd> 23 1.默認填充整個父容器，等效於width：100% 24 </dd> 25 <dd> 26 2.可以使用width：length的方式指定寬度 27 </dd> 28 </dl> 29 </li> 30 <li> 31 <h3>width元素寬度（行級標簽：a，span，input，i，em標簽等）</h3> 32 <span> 33 這是一個行級標簽 34 </span> 35 <p><strong>1.行級元素的寬度不是認為指定的，是由元素內容本身的寬度來決定的。如果要設置width則必須使用display：block將行級標簽變成塊級標簽。</strong> </p> 36 </li> 37 <li> 38 <h3>width元素寬度（行級標簽：a，span，input，i，em標簽等）</h3> 39 <span> 40 這是一個行級標簽 41 </span> 42 <p><strong>將行級標簽變成塊級標簽后如下所示：</strong> </p> 43 <span style="display:block;"> 44 這是一個行級標簽轉變成塊級標簽后的樣式 45 </span> 46 </li> 47 </ul> 48 </body> 49 </html>
min-width（只適用於塊級標簽）
元素的最小寬度，一般用於網頁整體布局的美觀性，使用頻率一般。
與width同時使用，應用兩者中比較大的那個。
語法：min-width：length | percentage（父容器的百分比）| none
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title>盒子模型的尺寸樣式</title> 6 <meta charset="utf-8" /> 7 <style type="text/css"> 8 div { 9 border:1px solid red; 10 } 11 </style> 12 </head> 13 <body> 14 <ul> 15 <li> 16 <h3>min-width最小寬度的設置</h3> 17 <div style="min-width:500px;height:100px;width:350px;"> 18 <b>min-width:500px;width:350px;</b> 19 </div> 20 <div style="min-width:300px;height:100px;"> 21 22 </div> 23 <div style="min-width:300px;height:100px;"> 24 25 </div> 26 </li> 27 </ul> 28 </body> 29 </html>
當網頁在進行縮放時通常會出現網頁內容混亂和錯位的情況，可以設置min-width來解決這類問題。
max-width 元素的最大寬度，使用頻率較低。
語法：max-width：none | <percentage>（父容器的百分比） | length
與width一起使用時取最小值來應用。
示例代碼如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title>盒子模型的尺寸樣式</title> 6 <meta charset="utf-8" /> 7 <style type="text/css"> 8 div { 9 border:1px solid red; 10 } 11 </style> 12 </head> 13 <body> 14 <ul> 15 <li> 16 <h3>max-width最大寬度的設置</h3> 17 <div style="max-width:500px;height:100px;width:200px;"> 18 <b>max-width:500px;width:200px;</b> 19 </div> 20 <div style="max-width:500px;height:100px;width:900px;"> 21 <b>max-width:500px;width:900px;</b> 22 </div> 23 </li> 24 </ul> 25 </body> 26 </html>
height 元素的高度，使用的頻率非常高，絕大部分情況下使用px作為單位。
語法：height：length（按照指定高度來呈現內容） | percentage（父元素的百分比） | auto（默認為auto，根據內容進行調整）
對於圖片對象來說，設定了此屬性后，它的寬度將按照原圖的比例進行縮放。
當內容高度大於設置的高度時，內容將會跑出容器外面去，通常情況下需要使用overflow：hidden把超出容器范圍的內容進行隱藏。
注意：<body>是塊級標簽，與<div>類似，高度根據內容的變化而變化。
網頁的設計思想：在布局思想中使用頂級父元素控制整體的高度。
如果body沒有設置高度且其中沒有內容而想要設置內部div的高度時，可以給div設置position：absolute（絕對定位），在設置它的width屬性，而后可以設定它的height屬性值（百分比）改變高度。（根據可視區域的百分比來進行顯示）
示例代碼如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title>加深對height的理解</title> 6 <meta charset="utf-8" /> 7 <style type="text/css"> 8 div { 9 border:1px solid red; 10 } 11 </style> 12 </head> 13 <body> 14 <div style="height:50%;position:absolute;width:300px;"> 15 設置子元素為相對位置，指定它的寬度，而后可以根據body的可視區域的大小設置高度（百分比） 16 </div> 17 </body> 18 </html>
min-height與max-height 最小和最大的高度，一般用於整體布局的美觀性，常用px作為單位，使用頻率較小。
與min-width和max-width屬性類似。
min-height和height同時使用時，取較大值進行應用。
max-height和height同時使用時，取較小值進行應用。
示例代碼如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title>最小和最大高度的示例</title> 6 <meta charset="utf-8" /> 7 <style type="text/css"> 8 div { 9 border:1px solid red; 10 } 11 </style> 12 </head> 13 <body> 14 15 <div style="min-height:200px;height:100px;"> 16 min-height和height同時使用時，取較大值進行應用。 17 </div> 18 <div style="max-height:200px;height:100px;"> 19 max-height和height同時使用時，去較小值進行應用。 20 </div> 21 </body> 22 </html>
min-height和max-height同時設置時，高度選min-height的值進行顯示。
代碼示例如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title>最小和最大高度的示例</title> 6 <meta charset="utf-8" /> 7 <style type="text/css"> 8 div { 9 border:1px solid red; 10 } 11 </style> 12 </head> 13 <body> 14 15 <div style="min-height:20px;max-height:40px;"> 16 min-height和max-height同時存在，且前者小於后者，height設置為min-height的值進行顯示 17 </div> 18 <div style="height:40px;background-color:pink;"> 19 40px; 20 </div> 21 <div style="min-height:60px;max-height:40px;"> 22 min-height和max-height同時存在，且前者大於后者，height設置為min-height的值進行顯示 23 </div> 24 </body> 25 </html>
運行結果為：
邊框樣式
boder 元素的邊框的復合屬性的設置（包括border-width，border-style，border-color），使用頻率較高。
語法：border：[ border-width ]（邊框的厚度，多以px為單位，可以分上、右、下、左的順序給四個邊框不同的值） || [ border-style ]（邊框的樣式，none表示沒有邊框，hidden表示隱藏邊框，dotted點狀輪廓，dashed虛線輪廓，solid實線邊框，最常用，double雙線輪廓，groove3D凹槽輪廓，ridge3D凸槽輪廓，inset3D凹邊輪廓，outset3D凸邊輪廓。如果提供全部四個參數值，將按上、右、下、左的順序作用於四邊。） || [ border-color ]
注意：border只能設置四條邊的統一樣式，想要給四條邊設置不同樣式時，需要分別設置border-width、border-style、border-color的屬性值。
示例代碼如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title>邊框樣式的設置</title> 6 <meta charset="utf-8" /> 7 <style type="text/css"> 8 9 </style> 10 </head> 11 <body> 12 <div style="width:300px;height:100px;border-width:2px 3px 3px 5px; border-style:solid solid dashed double;border-color:red pink gray blue;"> 13 針對邊框的四條邊分別進行設置 14 </div> 15 <br/> 16 <div style="width:400px;height:200px;border:2px double red;"> 17 對邊框的四條邊整體進行設置 18 </div> 19 </body> 20 </html>
運行結果如下：
border-radius 圓角的設置（重要！！！！！）
設置或檢索對象使用圓角邊框。提供2個參數，2個參數以“/”分隔，每個參數允許設置1~4個參數值，第1個參數表示水平半徑，第2個參數表示垂直半徑，如第2個參數省略，則默認等於第1個參數。
水平半徑：如果提供全部四個參數值，將按上左(top-left)、上右(top-right)、下右(bottom-right)、下左(bottom-left)的順序作用於四個角。
如果只提供一個，將用於全部的於四個角。
如果提供兩個，第一個用於上左(top-left)、下右(bottom-right)，第二個用於上右(top-right)、下左(bottom-left)。
如果提供三個，第一個用於上左(top-left)，第二個用於上右(top-right)、下左(bottom-left)，第三個用於下右(bottom-right)。
垂直半徑也遵循以上4點。
示例代碼如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title>邊框樣式的設置</title> 6 <meta charset="utf-8" /> 7 <style type="text/css"> 8 9 </style> 10 </head> 11 <body> 12 <h3>boder-radius 4個圓角的設置：如京東購物車右上角顯示的0件物品的圖標可以用此屬性來實現</h3> 13 <p> 14 <b>line-height:14px;text-align:center;用來設置文本（0）的豎直和水平方向的居中顯示</b> 15 </p> 16 <div style="width:16px;height:14px;border-radius:7px 7px 7px 0;border:1px solid red;background-color:red;color:white;line-height:14px;text-align:center;"> 17 0 18 </div> 19 20 <hr/> 21 <p> 22 <b>給一個值，用到四個角上，下圖還可以通過圓角修飾變成一個圓</b> 23 </p> 24 <div style="width:45px;height:45px;background-color:orange;border-radius:5px;"> 25 26 </div> 27 <hr/> 28 <p><b>給四個角不同的值</b></p> 29 <div style="width:60px;height:50px;background-color:pink;border-radius:5px 10px 25px 45px;"> 30 31 </div> 32 <hr /> 33 <p><b>給兩個值：第一個用於上左、下右；第二個用於上右，下左</b></p> 34 <div style="width:60px;height:50px;background-color:gray;border-radius:10px 45px;"> 35 36 </div> 37 <hr /> 38 <p><b>給三個值：第一個用於上左；第二個用於上右，下左；第三個用於下右</b></p> 39 <div style="width:60px;height:50px;background-color:rebeccapurple;border-radius:10px 20px 45px;"> 40 41 </div> 42 <hr /> 43 <p><b>給一個值：給定水平和垂直半徑</b></p> 44 <div style="width:60px;height:50px;background-color:green;border-radius:10px/20px;"> 45 46 </div> 47 <hr /> 48 <p><b>給兩個值：分別給定水平和垂直半徑</b></p> 49 <div style="width:60px;height:50px;background-color:green;border-radius:10px 35px/20px 30px;"> 50 51 </div> 52 </body> 53 </html>
運行結果如下：
padding內邊距
內填充的復合屬性設置（復合屬性有：padding-top、padding-right、padding-bottom、padding-left），使用頻率較高。
語法：padding：[ <length> | <percentage> ]{1,4}
如果提供全部四個參數值，將按上、右、下、左的順序作用於四邊。
如果只提供一個，將用於全部的四邊。
如果提供兩個，第一個用於上、下，第二個用於左、右。
如果提供三個，第一個用於上，第二個用於左、右，第三個用於下。
padding-left比較常用。
示例代碼如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title>內邊距的設置</title> 6 <meta charset="utf-8" /> 7 <style type="text/css"> 8 div,span { 9 border:2px solid red; 10 } 11 </style> 12 </head> 13 <body> 14 <ul> 15 <li> 16 <h3>padding提供一個值</h3> 17 <div style="width:200px;text-align:center;padding:5px;"> 18 （塊級標簽）提供一個值 19 </div> 20 <hr /> 21 <span style="width:200px;text-align:center;padding:5px;"> 22 （行級標簽）提供一個值 23 </span> 24 </li> 25 <li> 26 <h3>padding提供兩個值：第一個給上下，第二個給左右</h3> 27 <div style="width:200px;text-align:center;padding:5px 15px;"> 28 塊級標簽 提供兩個值 29 </div> 30 <hr /> 31 <span style="width:200px;text-align:center;padding:5px 15px;"> 32 行級標簽 提供兩個值 33 </span> 34 </li> 35 <li> 36 <h3>padding提供三個值：第一個給上，第二個給左右，第三個給下</h3> 37 <div style="width:200px;text-align:center;padding:5px 15px 30px;"> 38 塊級標簽 提供三個值 39 </div> 40 <hr /> 41 <span style="width:200px;text-align:center;padding:5px 15px 30px;"> 42 行級標簽 提供三個值 43 </span> 44 </li> 45 <li style="list-style:none;"> 46 <br/><br /> 47 </li> 48 <li> 49 <h3>padding提供四個值：第一個給上，第二個給右，第三個給下，第四個給左</h3> 50 <div style="width:200px;text-align:center;padding:5px 15px 30px 10px;"> 51 塊級標簽 提供四個值 52 </div> 53 <hr /> 54 <span style="width:200px;text-align:center;padding:5px 15px 30px 10px;"> 55 行級標簽 提供四個值 56 </span> 57 </li> 58 </ul> 59 </body> 60 </html>
margin外邊距（與padding的學習類似）
外邊距綜合屬性設置，使用頻率較高。
語法：margin：[ <length> | <percentage> | auto（值被設定為相對邊的值，可以設置元素的居中） ]{1,4}
如果提供全部四個參數值，將按上、右、下、左的順序作用於四邊。
如果只提供一個，將用於全部的四邊。
如果提供兩個，第一個用於上、下，第二個用於左、右。
如果提供三個，第一個用於上，第二個用於左、右，第三個用於下。
內聯對象（即行級標簽）可以使用該屬性設置左、右兩邊的外補丁；若要設置上、下兩邊的外補丁，必須先使該對象表現為塊級或內聯塊級（應用很少）。
外延邊距始終透明。
示例代碼如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title>外邊距的設置</title> 6 <meta charset="utf-8" /> 7 <style type="text/css"> 8 div,span { 9 border:1px solid red; 10 } 11 </style> 12 </head> 13 <body> 14 <ul> 15 <li> 16 <h3> 17 行級元素的外邊距 18 </h3> 19 <span>第一個元素</span> 20 <span style="margin-left:15px;">第二個元素</span> 21 <span>第三個元素</span> 22 </li> 23 <li> 24 <h3> 25 行級元素的外邊距的一個特點：觀察第二個元素和第三個元素之間的距離 26 </h3> 27 <span>第一個元素</span> 28 <span style="margin-left:15px;">第二個元素</span><span>第三個元素</span> 29 </li> 30 <li> 31 <h3> 32 行級元素的外邊距的一個特點：觀察第二個元素和第三個元素之間的距離 33 </h3> 34 <span>第一個元素</span> 35 <span style="margin-left:15px;margin-right:10px;">第二個元素</span><span>第三個元素</span> 36 </li> 37 <li> 38 <h3> 39 若要設置上、下兩邊的外補丁，必須先使該對象表現為塊級或內聯塊級。 40 </h3> 41 <span>第一個元素</span> 42 <span style="margin-left:15px;margin-top:30px;display:inline-block;margin-bottom:50px;">第二個元素</span><span>第三個元素</span> 43 <div>底層元素</div> 44 </li> 45 </ul> 46 </body> 47 </html>
運行效果如下：
頂部外邊距和底部外邊距的取舍問題：取較大的值為最后的外邊距顯示兩元素之間的距離。
示例代碼如下：
1 <li> 2 <h3>頂部外邊距和底部外邊距的取舍問題</h3> 3 <div style="margin-bottom:10px;"> 4 第一層 5 </div> 6 <div style="margin-top:20px;"> 7 第二層 8 </div> 9 </li>
運行結果：
屬性的綜合使用
示例代碼如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title>外邊距的設置</title> 6 <meta charset="utf-8" /> 7 <style type="text/css"> 8 div,span { 9 border:1px solid red; 10 } 11 </style> 12 </head> 13 <body> 14 <h3>屬性的綜合使用</h3> 15 <ul style="list-style:none;"> 16 <li style="border:1px solid red;display:inline-block;">首頁</li> 17 <li style="border:1px solid red;display:inline-block;margin-left:15px;">登錄</li> 18 <li style="border:1px solid red;display:inline-block;margin-left:15px;">注冊</li> 19 <li style="border:1px solid red;display:inline-block;margin-left:15px;">我的訂單</li> 20 </ul> 21 </body> 22 </html>
運行效果：
啊太晚了，小例子明天補上
補上我的小例子
京東頂部導航條的實現
代碼如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title>京東頂部導航條</title> 6 <meta charset="utf-8" /> 7 <style type="text/css"> 8 body,ul,div{ 9 margin:0px; 10 padding:0px; 11 } 12 ul,li { 13 padding:0px; 14 display:inline-block; 15 list-style:none; 16 } 17 a { 18 text-decoration:none; 19 color:#C81623; 20 } 21 .diCeng { 22 width:100%; 23 height:30px; 24 line-height:30px; 25 background-color:#F1F1F1; 26 } 27 .content { 28 margin:auto 100px; 29 } 30 .right { 31 float:right; 32 } 33 .right-content { 34 float:left; 35 } 36 .i1 { 37 top: 12px; 38 right: 8px; 39 height: 7px; 40 overflow: hidden; 41 font: 400 15px/15px consolas; 42 color: #6A6A6A; 43 } 44 .i2 { 45 font:900 30px/30px 宋體; 46 } 47 .jiange { 48 width: 1px; 49 height: 12px; 50 margin-top: 9px; 51 padding: 0; 52 background: #ddd; 53 overflow: hidden; 54 } 55 </style> 56 </head> 57 <body> 58 <div class="diCeng"> 59 <div class="content"> 60 <ul class="left"> 61 <li> 62 <i class="i1">送至：</i> 63 <select> 64 <option>北京</option> 65 <option selected="selected">上海</option> 66 </select> 67 </li> 68 </ul> 69 <ul class="right"> 70 <li> 71 <ul class="right-content"> 72 <li> 73 <i class="i1">你好，請登錄 <a href="#">免費注冊</a></i> 74 </li> 75 <li class="jiange"></li> 76 <li> 77 <i class="i1">我的訂單</i> 78 </li> 79 <li class="jiange"></li> 80 <li> 81 <i class="i1">我的京東</i> 82 </li> 83 <li class="jiange"></li> 84 <li> 85 <i class="i1">京東會員</i> 86 </li> 87 <li class="jiange"></li> 88 <li> 89 <i class="i1">企業采購</i> 90 </li> 91 <li class="jiange"></li> 92 <li> 93 <i class="i1">手機京東</i> 94 </li> 95 <li class="jiange"></li> 96 <li> 97 <i class="i1">關注京東</i> 98 </li> 99 <li class="jiange"></li> 100 <li> 101 <i class="i1">客戶服務</i> 102 </li> 103 <li class="jiange"></li> 104 <li> 105 <i class="i1">網站導航</i> 106 </li> 107 </ul> 108 </li> 109 </ul> 110 </div> 111 </div> 112 <div style="background-color:pink;text-align:center;height:600px;line-height:600px;"> 113 <h1>Try my best doing this!O(∩_∩)O~</h1> 114 </div> 115 </body> 116 </html>
運行結果：
我遇到一個問題，就是粉紅色區域上邊的那一條白邊怎么都去不掉，用谷歌瀏覽器的工具發現是因為<h1>標簽的margin-top，於是我把它設置為0后，白色條消失，但是！！！！！but!!!!!我耍流氓的那段文字就！！！不！居！！！中！！！了！！！（同樣的情況在下面的例子中不會出現這樣的問題）
求大神指點/(ㄒoㄒ)/~~
新浪頂部導航條的實現
代碼如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title>新浪頂部導航條</title> 6 <meta charset="utf-8" /> 7 <style type="text/css"> 8 body, div,h1 { 9 margin:0px; 10 padding:0px; 11 } 12 i { 13 font-style:normal; 14 font-weight:normal; 15 font-size:12px; 16 display: inline-block; 17 height: 17px; 18 padding: 12px 9px 12px 16px; 19 line-height:16px; 20 color:#4c4c4c; 21 font-family:Microsoft YaHei,微軟雅黑,SimSun,宋體; 22 } 23 .diceng { 24 width:100%; 25 height:46px; 26 } 27 .diceng-content { 28 width:100%; 29 height:41px; 30 border-top:3px solid #FF8500; 31 border-bottom:1px solid #edeef0; 32 background-color:#fcfcfc; 33 } 34 .content { 35 height:41px; 36 margin:0 174.5px; 37 } 38 .content-left { 39 width:271.56px; 40 height:43px; 41 /*background-color:gray;*/ 42 display:inline-block; 43 line-height:43px; 44 /*float:left;*/ 45 } 46 .content-content { 47 height:41px; 48 line-height:41px; 49 display:inline-block; 50 } 51 .content-right { 52 display:inline-block; 53 float:right; 54 } 55 </style> 56 </head> 57 <body> 58 <div class="diceng"> 59 <div class="diceng-content"> 60 <div class="content"> 61 <div class="content-left"> 62 <div class="content-content"> 63 <i>設為首頁</i> 64 </div> 65 <div class="content-content"> 66 <i>手機新浪網</i> 67 </div> 68 <div class="content-content"> 69 <i>移動客戶端</i> 70 </div> 71 </div> 72 <div class="content-right"> 73 <div class="content-content"> 74 <i>登錄</i> 75 </div> 76 <div class="content-content"> 77 <i>微博</i> 78 </div> 79 <div class="content-content"> 80 <i>博客</i> 81 </div> 82 <div class="content-content"> 83 <i>郵箱</i> 84 </div> 85 <div class="content-content"> 86 <i>網站導航</i> 87 </div> 88 </div> 89 </div> 90 </div> 91 </div> 92 <div style="background-color:pink;text-align:center;height:600px;line-height:600px;list-style:none;"> 93 <h1>Try my best doing this!O(∩_∩)O~</h1> 94 </div> 95 </body> 96 </html>
運行結果：
