第8章DIV+CSS布局單擊此處添加副標(biāo)題目錄盒子模型01CSS定位02DIV+CSS基本布局03DIV+CSS布局實(shí)例048.1盒子模型使用盒子模型DIV+CSS進(jìn)行布局，是當(dāng)前網(wǎng)頁最流行的布局方式。在盒子模型中，HTML頁面中的元素可看成一個(gè)矩形的盒子，即一個(gè)盛裝內(nèi)容的容器DIV，這些內(nèi)容可以是圖片、文本、表格等等。每個(gè)矩形都由元素的內(nèi)容、內(nèi)邊距（padding）、邊框（border）和外邊距（margin）組成。如圖所示：8.1盒子模型8.1.2盒子模型的邊距盒子模型的邊距分為內(nèi)邊距和外邊距，其主要描述如下：內(nèi)邊距padding用于設(shè)置層里面的內(nèi)容和層邊框的間距,有4個(gè)值，其排列順序?yàn)樯希遥拢蟆＞唧w設(shè)置方法如下:

padding-top:上內(nèi)邊距；padding-right:右內(nèi)邊距；padding-right:下內(nèi)邊距；padding-left：左內(nèi)邊距；padding：上內(nèi)邊距[右內(nèi)邊距下內(nèi)邊距左內(nèi)邊距];8.1.2盒子模型的邊距外邊距margin用于設(shè)置層和它所在容器的邊界距離，和padding一樣，有4個(gè)值，其排列順序?yàn)樯希遥拢蟆argin-top:上外邊距；margin-right:右外邊距；margin-right:下外邊距；margin-left：左外邊距；margin：上外邊距[右外邊距下外邊距左外邊距];下面的例子設(shè)置了margin屬性如下：margin-top:50px;margin-left:0;

8.1.2盒子模型的邊距8.1.3邊框?qū)傩赃吙騜order樣式包括三個(gè)屬性：borderstyle:邊框樣式bordercolor:邊框顏色borderwidth:邊框?qū)挾?.1.3邊框?qū)傩赃吙驑邮絙orderstyle較為復(fù)雜，有多種樣式，其主要包括以下幾種：none：定義無邊框。hidden：與"none"相同。IE不支持dotted：定義點(diǎn)狀邊框dashed：定義虛線。solid：定義實(shí)線。double：定義雙線。groove：定義3D凹槽效果線。ridge：定義3D凸槽效果線。inset：定義3Dinset邊框。outset：定義3Doutset邊框。inherit：規(guī)定應(yīng)該從父元素繼承邊框樣式。8.1.3邊框?qū)傩赃吙蝾伾玝ordercolor默認(rèn)為黑色。邊框?qū)挾纫灿心J(rèn)值，默認(rèn)為medium關(guān)鍵字，其大小為2-3px（根據(jù)不同瀏覽器而定），另外還包括thin(1-2px),thick(3-5px)等關(guān)鍵字。用戶也可以自己來定義邊框?qū)挾取：瓦吘嘁粯樱吙蚩梢越y(tǒng)一設(shè)置樣式，也可以單獨(dú)為各邊設(shè)置樣式。

border:邊框?qū)挾葇邊框樣式|邊框顏色

border-top:上邊框?qū)挾葇上邊框樣式|上邊框顏色

border-bottom:下邊框?qū)挾葇下邊框樣式|下邊框顏色

border-left:左邊框?qū)挾葇左邊框樣式|左邊框顏色

border-right:右邊框?qū)挾葇右邊框樣式|右邊框顏色例如下面的例子統(tǒng)一設(shè)置了一個(gè)2px的紅色實(shí)線邊框。border:1pxsolid#ff0000;8.1.3邊框?qū)傩詫?duì)于邊框的每一項(xiàng)樣式，也可以單獨(dú)設(shè)置，例如對(duì)于邊框樣式border-style，可以按照如下方法設(shè)置：

border-style:樣式值//統(tǒng)一設(shè)置四條邊框樣式

border-top-style:樣式值

border-bottom-style:樣式值

border-left-style:樣式值

border-right-style:樣式值8.1.3邊框?qū)傩詫?duì)于邊框?qū)挾萣order-width，可以按照如下方法設(shè)置：border-width:寬度值；//統(tǒng)一設(shè)置四條邊框?qū)挾戎礲order-top-width：上邊框?qū)挾戎担籦order-bottom-width：下邊框?qū)挾戎担籦order-left-width：左邊框?qū)挾戎担籦order-right-width：右邊框?qū)挾戎担?.1.3邊框?qū)傩酝瑯拥模瑢?duì)于邊框顏色border-color，可以按照如下方法設(shè)置：border-color:顏色值；//統(tǒng)一設(shè)置四條邊框顏色border-top-color：上邊框顏色值；border-bottom-color：下邊框顏色值；border-left-color：左邊框顏色值；border-right-color：右邊框顏色值；8.1.4CSS3新增邊框樣式CSS3對(duì)原來的盒模型進(jìn)行了改善，增加了一些新的邊框樣式，用于解決用戶界面問題。新增的主要屬性包括以下幾個(gè)部分：圓角邊框（border-radius）盒陰影(box-shadow)圖像邊框(border-image)圓角邊框（border-radius）圓角邊框用于給元素的邊框創(chuàng)建（1~4個(gè)）圓角效果；基本語法為“border-radius:1-4length|%”，設(shè)置1-4個(gè)方向的圓角效果，單位可以是長(zhǎng)度或者百分比，設(shè)置方向?yàn)樽笊辖恰⒂疑辖恰⒂蚁陆恰⒆笙陆恰８鞣N效果設(shè)置如圖所示：

8.1.4CSS3新增邊框樣式圓角邊框效果設(shè)置如圖所示：8.1.4CSS3新增邊框樣式8.1.4CSS3新增邊框樣式盒陰影box-shadow。盒陰影屬性包含5個(gè)參數(shù)值，這些參數(shù)值表述如下：（1）h-shadow:水平陰影的位置，該值指定了陰影的水平偏移量。即在x軸上陰影的位置。如果是正數(shù)陰影會(huì)出現(xiàn)在元素的右邊，如果是負(fù)值陰影出現(xiàn)在元素的左邊。（2）v-shadow:垂直陰影的位置，該值指定了陰影的垂直偏移量。即在y軸上陰影的位置。如果是正值陰影會(huì)出現(xiàn)在元素的上邊，如果是負(fù)值陰影會(huì)出現(xiàn)在元素的下邊。（3）blur：模糊距離，該值代表陰影的模糊半徑，如果是“0”意味著陰影是完全實(shí)心的，沒有任何模糊效果。該值越大，實(shí)心度越小，陰影越朦朧和模糊，該值不支持負(fù)數(shù)。8.1.4CSS3新增邊框樣式盒陰影box-shadow。盒陰影屬性包含5個(gè)參數(shù)值，這些參數(shù)值表述如下：（4）spread：陰影的尺寸，該值可以被看作是從元素到陰影的距離。如果正值會(huì)在元素的四個(gè)方向延伸陰影。負(fù)值會(huì)使陰影變得比元素本身尺寸還要小。默認(rèn)值“0”會(huì)讓陰影變得得和元素的大小一樣。（5）color：陰影的顏色。例如：圖8-13的設(shè)置中，5px表示陰影水平向右偏移量，10px表示陰影垂直向下偏移量，#08C表示陰影的顏色為藍(lán)色，得到一個(gè)藍(lán)色實(shí)陰影的邊框效果。圖8-14的設(shè)置中，在原來的基礎(chǔ)上，增加了模糊距離為10px，因此呈現(xiàn)的效果為藍(lán)色模糊陰影。圖8-15的設(shè)置中，增加了陰影的尺寸，得到帶暈邊效果的陰影。圖8-16，使用inset，設(shè)置了一個(gè)內(nèi)陰影的效果。盒陰影box-shadow效果8.1.4CSS3新增邊框樣式8.1.4CSS3新增邊框樣式圖像邊框border-image對(duì)于邊框的設(shè)置，除了普通的樣式外，還可以通過CSS3中的border-image屬性使用圖像來作為元素的邊框，以創(chuàng)建出豐富多彩邊框效果。

border-image屬性可以通過一些簡(jiǎn)單的規(guī)則，將一副圖像劃分為9個(gè)單獨(dú)的部分，瀏覽器會(huì)自動(dòng)使用相應(yīng)的部分來替換邊框的默認(rèn)樣式。其語法格式如下：border-image:border-image-source||border-image-slice[/border-image-width|/border-image-width?/border-image-outset]?||border-image-repeatborder-image是border-image-source、border-image-slice、border-image-width、border-image-outset和border-image-repeat這5個(gè)屬性的簡(jiǎn)寫，其中：border-image-source：定義邊框圖像的路徑；border-image-slice：定義邊框圖像從什么位置開始分割；border-image-width：定義邊框圖像的厚度（寬度）；border-image-outset：定義邊框圖像的外延尺寸（邊框圖像區(qū)域超出邊框的量）；border-image-repeat：定義邊框圖像的平鋪方式。8.2浮動(dòng)布局8.2.1浮動(dòng)設(shè)置（float）正常情況下，HTML頁面中塊元素都是從上到下排列的。如果要改變布局，可以使用浮動(dòng)布局。浮動(dòng)布局是網(wǎng)頁中較常見的布局方式，通過浮動(dòng)布局可以使塊級(jí)元素并排放置。CSS使用float來設(shè)置浮動(dòng)，其屬性值有兩個(gè)，float：left，表示元素向左浮動(dòng)，其右邊可以出現(xiàn)其他元素；float：right，表示元素向右浮動(dòng)，其左邊可以出現(xiàn)其他元素。8.2.1浮動(dòng)設(shè)置（float）例子1：在頁面中插入兩個(gè)層，定義樣式對(duì)層的大小進(jìn)行設(shè)置。<div>第1個(gè)層</div><div>第2個(gè)層</div>分別設(shè)置兩個(gè)層的樣式div1和div2，設(shè)置它們的寬度和高度為200px，同時(shí)設(shè)置背景顏色。#div1{background-color:#DDE9E9;height:200px;width:200px;}#div2{background-color:#FACCF1;height:200px;width:300px;}接下來應(yīng)用樣式到兩個(gè)層中：<divid=”div1”>第1個(gè)層</div><divid=”div2”>第2個(gè)層</div>8.2浮動(dòng)布局8.2.1浮動(dòng)設(shè)置（float）修改兩個(gè)層的樣式div1和div2，設(shè)置它們的float為left。則兩個(gè)層并排放置。#div1{background-color:#DDE9E9;height:200px;width:200px;float:left；}#div2{background-color:#FACCF1;height:200px;width:300px;float:left;}8.2浮動(dòng)布局8.2.2清除浮動(dòng)（clear）為了防止元素隨意浮動(dòng)，CSS定義了clear屬性，該屬性能夠清除浮動(dòng)，避免元素隨意浮動(dòng)顯示。clear的屬性值有四個(gè)，分別為：left：禁止元素左側(cè)顯示浮動(dòng)元素。right：禁止右側(cè)顯示浮動(dòng)元素。both：禁止左右兩側(cè)存在浮動(dòng)元素。none：不清除浮動(dòng)元素。例如上一個(gè)例子中，修改第三個(gè)層的樣式為：#div2{background-color:aliceblue;height:200px;width:200px;float:left;clear:both;}通過上述設(shè)置，第2個(gè)層的左右兩邊都不能有元素，因此第2個(gè)層只能放到1下一個(gè)位置。8.3CSS定位8.3.1position屬性CSS使用position屬性精確定位元素的顯示位置，其取值包括：（1）position：static，不定位顯示（默認(rèn)設(shè)置），所有元素都顯示為流動(dòng)布局效果。（2）position：absolute（絕對(duì)定位）---將元素從文檔流中拖出，使用left、right、top、bottom屬性，其值為相對(duì)于其最接近的一個(gè)具有定位屬性的父包含塊進(jìn)行絕對(duì)定位，如果不存在包含塊，則相對(duì)于body元素，也就是瀏覽器窗口絕對(duì)定位。（3）position：relative（相對(duì)定位）---通過left、right、top、bottom屬性確定元素在正常文檔流中的偏移位置，移動(dòng)的方向和幅度由left、right、top、bottom屬性確定，偏移前的位置保留不動(dòng)。（4）position：fixed,不會(huì)隨瀏覽器滾動(dòng)條滾動(dòng)而滾動(dòng)，因此固定定位的元素會(huì)始終位于瀏覽器窗口內(nèi)視圖的某個(gè)位置，不會(huì)受文檔流動(dòng)影響。下面的例子在body中建立了三個(gè)層。<body><divid="div1">第1個(gè)層</div><divid="div2">第2個(gè)層</div><divid="div3">第3個(gè)層</div></body>每個(gè)層對(duì)應(yīng)的樣式如下：#div1{position:relative;top:50px;background-color:#DDE9E9;height:200px;width:200px;

}#div2{position:relative;top:50px;background-color:#FACCF1;height:200px;width:200px;}#div3{position:absolute;top:25px;left:150px;background-color:aliceblue;height:200px;width:200px;}8.3.1position屬性其中第一個(gè)層和第二個(gè)層都設(shè)置position為relative，并設(shè)置上部偏移為50px，第3個(gè)層設(shè)置position為absolute，絕對(duì)定位，其相對(duì)的是父元素body的定位，因此脫離原來的文檔流，按照距離左邊left:150px,距離上邊top：25px放置，和第一個(gè)層會(huì)有重疊。其效果圖如圖所示：8.3.1position屬性8.3.2定位層疊順序z-index無論是相對(duì)定位還是絕對(duì)定位，只要層的坐標(biāo)相同，就有可能出現(xiàn)層的重疊。在默認(rèn)情況下，相同類型的定位元素，排列在后面的定位元素會(huì)覆蓋前面的定位元素。也可以通過使用CSS中的z-index屬性，來修改層疊順序。其使用方法為：z-index：auto|數(shù)字其中auto表示默認(rèn)值，根據(jù)父對(duì)象的定位來確定層疊關(guān)系,數(shù)字表示具體的值，值越大，就越顯示在上面。下面的例子在body中建立了三個(gè)并列的層。<body><divid="div1">第1個(gè)層</div><divid="div2">第2個(gè)層</div><divid="div3">第3個(gè)層</div></body>并設(shè)置每個(gè)層的樣式設(shè)置如下：div{position:relative;width:200px;height:100px;}#div1{background-color:#DDE9E9;}#div2{top:-50px;left:60px;background-color:#FACCF1;}#div3{top:-100px;left:120px;background-color:aliceblue;}8.3.2定位層疊順序z-index在上面樣式的基礎(chǔ)上，為三個(gè)層設(shè)置z-index的值如下：#div1{z-index:3;}#div2{z-index:2;

}#div3{z-index:1;

}得到的效果如圖。由于設(shè)置了第一個(gè)層的z-index值為3，所以這個(gè)層位于最上邊，把第2個(gè)層蓋住了，第二個(gè)層的z-index值為2，第一個(gè)層的z-index值為1，所以第二個(gè)層又在第一個(gè)層之上，把第1個(gè)層覆蓋住了。8.3.2定位層疊順序z-index8.4.1導(dǎo)航菜單設(shè)計(jì)導(dǎo)航信息是每個(gè)網(wǎng)站必備的內(nèi)容，所有網(wǎng)站都需要借助導(dǎo)航菜單來實(shí)現(xiàn)信息的瀏覽功能。下面的例子使用DIV+CSS設(shè)計(jì)了個(gè)人網(wǎng)站的導(dǎo)航菜單，其效果為，當(dāng)鼠標(biāo)放在導(dǎo)航文字上時(shí)，相應(yīng)部分會(huì)亮色顯示，例如，當(dāng)鼠標(biāo)位于“首頁”項(xiàng)目時(shí)，左邊會(huì)有一個(gè)亮黃色塊，首頁文字加粗，并顯示為亮黃色。整個(gè)頁面的設(shè)計(jì)操作步驟如下：1.建立一個(gè)網(wǎng)頁文件，命名為index.html。2.在body區(qū)，插入一個(gè)總的層，在層里面，插入ul和li，用于添加各個(gè)導(dǎo)航條目，具體代碼如下：<divid="menu"><ul><li><ahref="#">首頁</a></li><li><ahref="#">個(gè)人簡(jiǎn)介</a></li><li><ahref="#">我的愛好</a></li><li><ahref="#">我的相冊(cè)</a></li><li><ahref="#">和我聯(lián)系</a></li></ul></div>8.4DIV+CSS3布局案例3.設(shè)置總層的樣式menu。#menu{font-family:Cambria,"HoeflerText","LiberationSerif",Times,"TimesNewRoman","serif";font-size:18px;text-align:right;}4.設(shè)置項(xiàng)目列表ul和li的基本樣式，列表不顯示項(xiàng)目符號(hào):list-style-type:none;列表項(xiàng)浮動(dòng)顯示:float:left，即各個(gè)列表項(xiàng)水平排列成一行，形成橫向菜單。#menuul{list-style-type:none;

/*不顯示列表項(xiàng)目符號(hào)*/margin:0px;padding:0px;}#menuli{float:left;}8.4DIV+CSS3布局案例5.設(shè)置超鏈接效果，由于<a>為行內(nèi)元素，無法控制其寬度和高度，不利于外部項(xiàng)目的布局，因此需要把<a>定義為塊級(jí)元素，使它具有塊級(jí)元素的屬性，以便于用于設(shè)置。定義方法為：display:block;同時(shí)，需要設(shè)置每個(gè)導(dǎo)航項(xiàng)目左邊框?yàn)榇志€，具體代碼如下所示：#menulia{width:120px;display:block;

/*設(shè)置為塊狀元素*/height:1em;padding:5px5px5px0.5em;text-decoration:none;border-left:16pxsolid#151571;

/*設(shè)置左邊框?yàn)榇诌叄钏{(lán)色*/border-right:1pxsolid#151571;

/*設(shè)置右側(cè)深藍(lán)色邊框*/}#menulia:link,#menulia:visited{background-color:#1136c1;color:#FFFFFF;}8.4DIV+CSS3布局案例6.設(shè)置鼠標(biāo)經(jīng)過時(shí)的效果，當(dāng)鼠標(biāo)經(jīng)過時(shí)，改變超鏈接的背景顏色，改變邊框顏色為亮黃色，改變文字顏色也為亮黃色，具體代碼如下：#menulia:hover{

/*設(shè)置鼠標(biāo)經(jīng)過時(shí)效果*/background-color:#002099;

/*改變背景色*/color:#ffff00;

/*改變文字顏色為亮黃色*/border-left:16pxsolidyellow;/*左邊的粗邊為亮黃色*/font-weight:bold;}8.4DIV+CSS3布局案例也可以將水平的導(dǎo)航菜單，改成垂直的熒光菜單效果。如圖所示：：#menu{font-family:Cambria,"HoeflerText","LiberationSerif",Times,"TimesNewRoman","serif";font-size:18px;margin:auto;width:120px;background-color:#000;/*背景顏色為黑色*/}#menuul{list-style-type:none;

/*不顯示列表項(xiàng)目符號(hào)*/margin:0px;padding:0px;}#menulia{display:block;height:1em;padding:5px5px5px0.5em;text-decoration:none;border-top:8pxsolid#060;

/*設(shè)置上框?yàn)榇诌叄G色*/color:#ccc;}#menulia:hover{

/*設(shè)置鼠標(biāo)經(jīng)過時(shí)效果*/color:#ffff00;

/*改變文字顏色為亮黃色*/border-top:8pxsolid#0e0;/*上邊框?yàn)榱辆G色*/font-weight:bold;}8.4DIV+CSS3布局案例完成風(fēng)云人物的電子相冊(cè)，當(dāng)鼠標(biāo)放到圖片上時(shí)，會(huì)將對(duì)應(yīng)的人物名字和介紹顯示出來，如圖所示：1.新建一個(gè)網(wǎng)頁，命名為index.html。在頁面中，插入第一個(gè)層，內(nèi)容為標(biāo)題“web風(fēng)云人物榜”。并命名對(duì)應(yīng)的樣式為“maintitle”<divid="maintitle">web風(fēng)云人物榜</div>2.建立一個(gè)樣式表文件“style1.css”,在head區(qū)導(dǎo)入該樣式表：<head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>電子相冊(cè)集</title><linkhref="css/style1.css"rel="stylesheet"type="text/css"/></head>8.4.2互聯(lián)網(wǎng)風(fēng)云人物電子相冊(cè)在樣式表文件style1.css中，建立標(biāo)題的樣式：@charset"utf-8";#maintitle{font-family:"MSSerif","NewYork",serif;font-size:60px;font-weight:

bold;text-align:center;clear:both;height:160px;width:auto;background-color:#F90;margin-bottom:10px;color:#FFF;line-height:160px;

}8.4.2互聯(lián)網(wǎng)風(fēng)云人物電子相冊(cè)3.新建圖片所在層，該層里面首先包含一副圖片及對(duì)圖片的超鏈接，接下來使用列表方式，設(shè)置人物介紹內(nèi)容。具體內(nèi)容如下：<divclass="photounit"><ahref="img/1-vint.jpg"><imgsrc="img/1-vint.jpg"/></a>

<ul><liclass="title">文特·瑟夫(VintCerf)與鮑勃·卡恩(BobKahn)</li><li>互聯(lián)網(wǎng)之父</li><liclass="article">聯(lián)手締造了TCP/IP通信協(xié)議集。TCP/IP是網(wǎng)絡(luò)上的計(jì)算機(jī)互相通信的語言</li></ul></div>8.4.2互聯(lián)網(wǎng)風(fēng)云人物電子相冊(cè)8.4.2互聯(lián)網(wǎng)風(fēng)云人物電子相冊(cè)4.在樣式表文件中，建立圖片層的總樣式.photounit，向左浮動(dòng)，寬度為500，高度為500。.photounit{float:left;height:500px;width:500px;}5設(shè)置層里面圖片<img>的樣式，寬度為450，并設(shè)置邊框陰影效果。div.photounitimg{width:450px;border:0px;height:auto;margin:25px;

-moz-box-shadow:2px2px5px#333333;-webkit-box-shadow:2px2px5px#333333;box-shadow:2px2px5px#333333;}8.4.2互聯(lián)網(wǎng)風(fēng)云人物電子相冊(cè)6.接下來設(shè)置圖片所在超鏈接效果，設(shè)置為塊級(jí)元素：div.photounita{display:block;padding:0px;}7.設(shè)置列表的樣式，寬度為400，初始狀態(tài)下，列表內(nèi)容是不呈現(xiàn)的，所以設(shè)置列表模塊初始狀態(tài)為不可見：display:none。設(shè)置列表不出現(xiàn)項(xiàng)目符號(hào)：list-style：none。div.photounitul{margin-left:20px;background:#FFF;border:0px;width:400px;

font-size:18px;list-style:none;color:#F90;font-family:"MicrosoftYaHeiUI";

display:none;/*不顯示*/}8.4.2互聯(lián)網(wǎng)風(fēng)云人物電子相冊(cè)8.當(dāng)鼠標(biāo)放到層上時(shí)，同時(shí)出現(xiàn)文字介紹內(nèi)容，后面會(huì)顯示橙色背景，以及整個(gè)層的暈邊效果。div.photounit:hoverul{

display:block;

position:absolute;}div.photounit:hover{background:#F90;

-moz-box-shadow:2px2px5px#FC3;-webkit-box-shadow:2px2px5px#FC3;box-shadow:2px2px5px#FC3;

}8.4.2互聯(lián)網(wǎng)風(fēng)云人物電子相冊(cè)9.設(shè)置列表的標(biāo)題樣式以及文字內(nèi)容樣式如下：div.photounitli{line-height:25px;margin:0px;padding:0px;

}div.photounitli.title{

font-weight:bold;padding-top:5px;padding-bottom:0.2em;border-bottom:1pxsolid#F90;color:#F90;}div.photounitli.article{

padding-top:5px;padding-bottom:0.2em;color:#F90;font-size:14px;}下面講解如何用DIV+CSS實(shí)現(xiàn)個(gè)人主頁的布局。由效果圖分析可知，要完成上述布局，可將頁面分割成6個(gè)部分，分別為頂部，水平線，導(dǎo)航欄，左側(cè)圖片，右側(cè)文字，底部版權(quán)信息欄，同時(shí)為了控制整體的布局，在6個(gè)層外面，再加一個(gè)總的層，其布局如圖8-35所示8.4.3個(gè)人主頁面布局8.4.3個(gè)人主頁面布局1.首先建立一個(gè)頁面index.html，在<body>區(qū)輸入6個(gè)層，設(shè)置層的基本內(nèi)容，如下所示：<div>

<div>姍姍的個(gè)人主頁</div>

<div><hrcolor="#ffffff"></div>

<div>個(gè)人簡(jiǎn)介我的愛好我的相冊(cè)</div>

<div><imgsrc="images/girl.jpg"/></div>

<div>大家好，歡迎光臨</div>

<divid="bottom">Copyright?2020-2023xxd,AllRightsReserved</div><