HTML CSS DIV網(wǎng)頁(yè)設(shè)計(jì)與布局（第3版）（微課版） 課件 第13章 網(wǎng)頁(yè)布局與設(shè)計(jì)技巧_第1頁(yè)
HTML CSS DIV網(wǎng)頁(yè)設(shè)計(jì)與布局（第3版）（微課版） 課件 第13章 網(wǎng)頁(yè)布局與設(shè)計(jì)技巧_第2頁(yè)
HTML CSS DIV網(wǎng)頁(yè)設(shè)計(jì)與布局（第3版）（微課版） 課件 第13章 網(wǎng)頁(yè)布局與設(shè)計(jì)技巧_第3頁(yè)
HTML CSS DIV網(wǎng)頁(yè)設(shè)計(jì)與布局（第3版）（微課版） 課件 第13章 網(wǎng)頁(yè)布局與設(shè)計(jì)技巧_第4頁(yè)
HTML CSS DIV網(wǎng)頁(yè)設(shè)計(jì)與布局（第3版）（微課版） 課件 第13章 網(wǎng)頁(yè)布局與設(shè)計(jì)技巧_第5頁(yè)
已閱讀5頁(yè)，還剩16頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

付費(fèi)下載

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶(hù)提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

第13章

網(wǎng)頁(yè)布局與設(shè)計(jì)技巧13.1網(wǎng)頁(yè)布局

13.2CSS布局技巧

13.3CSS盒子模型

13.4小結(jié)

13.1網(wǎng)頁(yè)布局13.1.1網(wǎng)頁(yè)大小

13.1.2網(wǎng)頁(yè)欄目劃分

13.1.3表格布局

13.1.4CSS布局13.1.1網(wǎng)頁(yè)大小1．影響網(wǎng)頁(yè)大小的因素2．如何設(shè)計(jì)網(wǎng)頁(yè)大小3．其他設(shè)計(jì)網(wǎng)頁(yè)大小的方法13.1.2網(wǎng)頁(yè)欄目劃分1．頁(yè)頭2．Banner3．導(dǎo)航區(qū)域4．內(nèi)容5．頁(yè)腳13.1.3表格布局【示例13-1】根據(jù)圖13.2所示的欄目劃分方式，將網(wǎng)頁(yè)不同的部分組成一個(gè)完整的網(wǎng)頁(yè)。1

<!DOCTYPEhtml>2

<html

xmlns="/1999/xhtml">3

<head>4

<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>5

<title>表格布局</title>6

</head>7

<body>8

<tablewidth="100%">9

<tr>10

<tdcolspan="2"><imgsrc="img/banner.gif"alt="banner"/></td>11

</tr>12

<tr>13

<td><imgsrc="img/1-1.gif"alt="什么是博客"/></td>14

<td><imgsrc="img/1-2.gif"alt="分享由此開(kāi)始"/></td>15

</tr>16

<tr>17

<tdrowspan="2"><imgsrc="img/2-1.gif"alt="每日推薦"/></td>18

<td><imgsrc="img/2-2.gif"alt="搜索"/></td>19

</tr>20

<tr>21

<td><imgsrc="img/2-3.gif"alt="博客秀"/></td>22

</tr>23

<tr>24

<td><imgsrc="img/3-1.gif"alt="名博推薦"/></td>25

<td><imgsrc="img/3-2.gif"alt="最近更新"/></td>26

</tr>27

<tr>28

<tdcolspan="2"align="center">29

<fontcolor="#AEAEAE"size="2">30 公司簡(jiǎn)介-聯(lián)系方法-招聘信息-客戶(hù)服務(wù)-相關(guān)法律-用戶(hù)反饋<br/>31

××公司版權(quán)所有1997—200732

</font>33

</td>34

</tr>35

</table>36

</body>37

</html>圖13.2中的“最近更新”欄目可以再用一個(gè)嵌套的表格細(xì)分，如圖13.3所示。然后將細(xì)分的欄目插入所在單元格中，形成多個(gè)表格的嵌套，如圖13.4所示。13.1.4CSS布局【示例13-2】根據(jù)圖13.5所示的CSS布局劃分方式，使用CSS創(chuàng)建網(wǎng)頁(yè)。1

<!DOCTYPEhtml>2

<html

xmlns="/1999/xhtml">3

<head>4

<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>5

<title>CSS布局</title>6

<styletype="text/css">7

#root{width:992px;}8

#Blog{float:left;width:595px;}9

#Suggest{float:left;width:595px;}10

#GoodBlog{float:left;width:595px;}11

#Foot{font-size:9pt;color:#AEAEAE;text-align:center;clear:left}12

</style>13

</head>14

<body>15

<divid="root">16

<divid="Head">17

<imgsrc="img/banner.gif"alt="banner"/>18

</div>19

<divid="Blog">20

<imgsrc="img/1-1.gif"alt="什么是博客"/>21

</div>22

<divid="Sharing">23

<imgsrc="img/1-2.gif"alt="分享由此開(kāi)始"/>24

</div>25

<divid="Suggest">26

<imgsrc="img/2-1.gif"alt="每日推薦"/>27

</div>28

<divid="Search">29

<imgsrc="img/2-2.gif"alt="搜索"/>30

</div>31

<divid="BlogShow">32

<imgsrc="img/2-3.gif"alt="博客秀"/>33

</div>34

<divid="GoodBlog">35

<imgsrc="img/3-1.gif"alt="名博推薦"/>36

</div>37

<divid="New">38

<imgsrc="img/3-2.gif"alt="最近更新"/>39

</div>40

<divid="Foot">41 公司簡(jiǎn)介-聯(lián)系方法-招聘信息-客戶(hù)服務(wù)-相關(guān)法律-用戶(hù)反饋<br/>42

××公司版權(quán)所有1997—200743

</div>44

</div>45

</body>46

</html>13.2

CSS布局技巧13.2.1一欄布局

13.2.2二欄布局

13.2.3多欄布局13.2.1一欄布局一欄布局代碼如下。<divid="mydiv">網(wǎng)頁(yè)內(nèi)容</div>為該層設(shè)置樣式，代碼如下。#mydiv{width:600px;height:300px;background-color:#AEAEAE;

border-style:solid;border-width:1px;border-color:blue;}在一欄布局中，經(jīng)常要考慮以下兩個(gè)方面的問(wèn)題。（1）寬度。（2）水平對(duì)齊方式?！臼纠?3-3】設(shè)置一欄布局網(wǎng)頁(yè)結(jié)構(gòu)。1

<!DOCTYPEhtml>2

<htmlxmlns="/1999/xhtml">3

<head>4

<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>5

<title>一欄布局</title>6

<styletype="text/css">7

#mydiv{width:600px;height:200px;background-color:#AEAEAE;border-style:solid;

border-width:1px;border-color:blue;margin:auto;}8

</style>9

</head>10

<body>11

<divid="mydiv">12 一欄布局13

</div>14

</body>15

</html>13.2.2二欄布局【示例13-4】設(shè)置二欄布局網(wǎng)頁(yè)結(jié)構(gòu)。1

<!DOCTYPEhtml>2

<html

xmlns="/1999/xhtml">3

<head>4

<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>5

<title>二欄布局</title>6

<styletype="text/css">7

#divleft{width:300px;height:200px;background-color:#AEAEAE;border-style:

solid;border-width:1px;border-color:blue;float:left;margin-right:10px;}8

#divright{width:300px;height:200px;background-color:#AEAEAE;border-style:

solid;border-width:1px;border-color:blue;float:left;}9

</style>10

</head>11

<body>12

<divid="divleft">左分欄</div>13

<divid="divright">右分欄</div>14

</body>15

</html>13.2.3多欄布局【示例13-5】設(shè)置多欄布局網(wǎng)頁(yè)結(jié)構(gòu)。1

<!DOCTYPEhtml>2

<htmlxmlns="/1999/xhtml">3

<head>4

<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>5

<title>三欄布局</title>6

<styletype="text/css">7

#div1{width:200px;height:200px;background-color:#AEAEAE;border-style:solid;

border-width:1px;border-color:blue;position:absolute;left:10px;top:15px;}8

#div2{height:200px;background-color:#AEAEAE;border-style:solid;border-width:

1px;border-color:blue;margin-left:220px;margin-right:220px;}9

#div3{width:200px;height:200px;background-color:#AEAEAE;border-style:solid;

border-width:1px;border-color:blue;position:absolute;right:10px;top:15px;}10

</style>11

</head>12

<body>13

<divid="div1">左分欄</div>14

<divid="div2">中間欄</div>15

<divid="div3">右分欄</div>16

</body>17

</html>13.3CSS盒子模型13.3.1盒子模型的概念

13.3.2設(shè)置外邊距

13.3.3設(shè)置邊框樣式

13.3.4設(shè)置內(nèi)邊距13.3.1盒子模型的概念盒子的實(shí)際寬度為盒子寬度=（padding-left）+（border-left）+（margin-left）+width+（padding-right）+（border-right）+（margin-right）盒子的實(shí)際高度為盒子高度=（margin-top）+（border-top）+（padding-top）+height+（padding-bottom）+（border-bottom）+（margin-bottom）13.3.2設(shè)置外邊距【示例13-6】控制盒子的外邊距。1

<!DOCTYPEhtml>2

<html

xmlns="/1999/xhtml">3

<head>4

<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>5

<title>控制盒子的外邊距</title>6

<styletype="text/css">7 *{margin:0px;}8

#all{width:400px;height:300px;margin:0pxauto;background-color:#ccc;}9

#alldiv{width:150px;height:50px;text-align:center;line-height:50px;background-

color:#fff;}10

#a{margin-left:5px;margin-bottom:20px;}11

#b{margin-left:5px;margin-right:5px;margin-top:6px;float:left;}12

#c{margin-bottom:5px;float:left;}13

#d{float:left;}14

#e{margin-left:5px;margin-top:15px;float:left;}15

</style>16

</head>17

<body>18

<divid="all">19

<divid="a">a盒子</div>20

<divid="b">b盒子</div>21

<divid="c">c盒子</div>22

<divid="d">d盒子</div>23

<divid="e">e盒子</div>24

</div>25

</body>26

</html>13.3.3設(shè)置邊框樣式【示例13-7】設(shè)置盒子邊框的樣式。1

<!DOCTYPEhtml>2

<html

xmlns="/1999/xhtml">3

<head>4

<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>5

<title>邊框樣式設(shè)置</title>6

<styletype="text/css">7 *{margin:0px;}8

#all{width:400px;height:270px;margin:0pxauto;background-color:#ccc;}9

#alldiv{width:160px;height:50px;text-align:center;line-height:50px;background-

color:#eee;float:left;margin-left:5px;margin-bottom:5px;}10

#a{width:380px;margin:5px;border:1pxsolid#333;}11

#b{border:20pxsolid#333;}12

#c{border:20pxgroove#f00;}13

#d{border:2pxdashed#000;}14

#e{border:2pxdotted#000;}15

#f{border-left:2pxsolid#fff;border-top:2pxsolid#fff;border-right:2pxsolid#333;border-bottom:2pxsolid#333;}16

#g{border-top:2pxgroove#333;}17

</style>18

</head>19

<body>20

<divid="all">21

<divid="a">a盒子</div>22

<divid="b">b盒子（solid類(lèi)型）</div>23

<divid="c">c盒子（groove類(lèi)型）</div>24

<div

id="d">d盒子（dashed類(lèi)型）</div>25

<divid="e">e盒子（dotted類(lèi)型）</div>26

<divid="f">f盒子</div>27

<divid="g">g盒子</div>28

</div>29

</body>30

</html>13.3.4設(shè)置內(nèi)邊距【示例13-8】控制盒子的內(nèi)邊距。1

<!DOCTYPEhtml>2

<html

xmlns="/1999/xhtml">3

<head>4

<metahttp

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶(hù)所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶(hù)上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶(hù)上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶(hù)因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論