版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認(rèn)領(lǐng)
文檔簡介
第12章
控制元素布局12.1塊級元素和內(nèi)聯(lián)元素
12.2定位
12.3浮動
12.4溢出與剪切
12.5對象的顯示與隱藏
12.6小結(jié)
12.1塊級元素和內(nèi)聯(lián)元素12.1.1塊級元素和內(nèi)聯(lián)元素的概念
12.1.2div元素和span元素
12.1.1塊級元素和內(nèi)聯(lián)元素的概念塊級元素內(nèi)聯(lián)元素12.1.2div元素和span元素<div>各種元素或文字</div>【示例12-1】div元素的使用。1
<!DOCTYPEhtml>2
<html
xmlns="/1999/xhtml">3
<head>4
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>5
<title>div標(biāo)簽范例</title>6
<styletype="text/css">7
div{
8
font-size:18px;
/*字號大小*/9
font-weight:bold;
/*字體粗細(xì)*/10
font-family:Arial;
/*字體*/11
color:#FFFF00;
/*顏色*/12
background-color:#0000FF;
/*背景顏色*/13
text-align:center;
/*對齊方式*/14
width:300px;
/*塊寬度*/15
height:100px;
/*塊高度*/16
}17
</style>18
</head>19
<body>20
<div>21 這是一個div標(biāo)簽22
</div>23
</body>24
</html>2．span元素<span>各種元素或文字</span>【示例12-2】div元素和span元素的不同。1
<!DOCTYPEhtml>2
<htmlxmlns="/1999/xhtml">3
<head>4
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>5
<title>div與span的區(qū)別</title>6
</head>7
<body>8
<p>div元素：</p>9
<div><imgsrc="pic02-12.jpg"border="0"></div>10
<div><imgsrc="pic02-12.jpg"border="0"></div>11
<div><imgsrc="pic02-12.jpg"border="0"></div>12
<p>span元素：</p>13
<span><imgsrc="pic02-12.jpg"border="0"></span>14
<span><imgsrc="pic02-12.jpg"border="0"></span>15
<span><imgsrc="pic02-12.jpg"border="0"></span>16
</body>17
</html>12.2定位12.2.1定位模式
12.2.2偏移
12.2.3綜合應(yīng)用
12.2.4定位元素的層疊順序
12.2.1定位模式position:static|relative|absolute|fixed|inherit;12.2.2偏移在CSS中，偏移量有4個屬性其語法格式如下。left:長度|百分比|auto|inheritright:長度|百分比|auto|inherittop:長度|百分比|auto|inheritbottom:長度|百分比|auto|inherit12.2.3綜合應(yīng)用1．靜態(tài)定位【示例12-3】為元素設(shè)置靜態(tài)定位和偏移。1
<!DOCTYPEhtml>2
<html
xmlns="/1999/xhtml">3
<head>4
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>5
<title>靜態(tài)定位</title>6
<styletype="text/css">7
div.a{position:static;left:100px;top:100px;right:100px;bottom:200px;}8
div.b{position:static;background-color:red;color:white;width:200px;}9
</style>10
</head>11
<body>12
<divclass="a">13
<imgalt="tupian"src="pic01-12.jpg"/>14
</div>15
<divclass="b">16 玫瑰，別名徘徊花，薔薇科，屬落葉叢生灌木。它可以高達2m，莖枝上密生毛刺，葉呈橢圓形，花單生或數(shù)朵叢生，花期5～6月，單瓣或重瓣。目前全世界的玫瑰品種有資料可查的已達七千種。17
</div>18
</body>19
</html>2．絕對定位【示例12-4】為元素設(shè)置絕對定位。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
div.a
{position:absolute;background-color:black;color:white;}8
div.b
{position:absolute;background-color:red;color:white;width:300px;}9
div.c
{position:absolute;background-color:blue;color:white;left:0px;top:150px;
right:100px;}10
</style>11
</head>12
<body>13
<divclass="a">14 多風(fēng)的天氣，很干燥，我不喜歡；我喜歡淅淅瀝瀝的小雨輕柔飄灑……我喜歡欣賞郁郁蔥蔥、青翠欲滴、茵茵青青的芳草坪，枝頭綻放的絢麗花朵，我更喜歡欣賞仰天伸展、靜默滄桑的老樹……15
</div>16
<divclass="b">17 我喜歡欣賞翠柳依依、朦朧柔情的妙曼空靈，喜歡欣賞隨風(fēng)飛舞的漂亮花瓣雨，我更喜歡觀看、欣賞那一樹一樹含苞待放的花蕾綴滿枝頭……我總是喜歡仰視那高遠深邃的蔚藍天空，如同一塊無邊無際的寶藍色綢緞，靜美又唯美。18
</div>19
<divclass="c">20 櫻花園里，那一樹樹繽紛綻放的花兒，一串串、一簇簇或潔白素雅、或鮮紅如火、或粉色如綢、或粉白參半……綻放得簡直如夢如幻，如同世外仙境一般，美妙絕倫！湖畔翠柳依依，湖水銀光閃閃。滿眼青草茵茵、櫻花絢爛、游船、歡樂的人群，還有那悠揚美妙的歌曲，春天多美好！21
</div>22
</body>23
</html>3．相對定位【示例12-5】設(shè)置元素的相對定位。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
.a{position:relative;background-color:red;color:white;left:100px;top:100px;}8
.b{position:absolute;background-color:blue;color:white;left:100px;top:100px;}9
</style>10
</head>11
<body>12
<inputtype="button"value="按鈕一"/><inputtype="button"value="按鈕二"/><br/>13
<inputtype="button"value="按鈕三"/><inputtype="button"value="按鈕四"class="a"/><inputtype="button"value="按鈕五"/><br/>14
<inputtype="button"value="按鈕六"class="b"/>15
</body>16
</html>12.2.4定位元素的層疊順序z-index:順序號【示例12-6】為不同元素定義不同的層疊順序。1
<!DOCTYPEhtml>2
<htmlxmlns="/1999/xhtml">3
<head>4
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>5
<title>使用CSS設(shè)置層疊順序</title>6
<styletype="text/css">7
h2{font-family:"方正姚體"}8
.exam1{position:absolute;top:80px;left:40px;background-color:#9FF;z-index:1;}9
.exam2{font-family:"黑體";color:#96C;position:absolute;top:130px;left:70px;background-color:#F60;z-index:2;}10
</style>11
</head>12
<bodyleftmargin="30px">13
<h2>花朵介紹</h2>14
<divclass="exam1">15
<p><imgsrc="12.2.jpg"width="100px"align="left">玫瑰，別名徘徊花，薔薇科，屬落葉叢生灌木。它可以高達2m，莖枝上密生毛刺，葉呈橢圓形，花單生或數(shù)朵叢生，花期5～6月，單瓣或重瓣。目前全世界的玫瑰品種有資料可查的已達七千種。</p>16
</div>17
<divclass="exam2">18
<p>牡丹為花中之王，有“國色天香”之稱。每年4～5月開花，朵大色艷，奇麗無比，有紅、黃、白、粉紫、墨、綠、藍等色?；ǘ嘀匕辏藨B(tài)典雅，花香襲人，被看作富麗繁華的象征，稱為“富貴花”。</p>19
</div>20
</body>21
</html>12.3浮動12.3.1浮動的概念
12.3.2設(shè)置浮動
12.3.3清除浮動
12.3.1浮動的概念12.3.2設(shè)置浮動float:left|right|none【示例12-7】為元素設(shè)置左浮動。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
.a{width:100px;float:left;margin:10px;}8
</style>9
</head>10
<body>11
<p>12 散文精選13
</p>14 多風(fēng)的天氣，很干燥，我不喜歡；我喜歡淅淅瀝瀝的小雨輕柔飄灑……我喜歡欣賞郁郁蔥蔥、青翠欲滴、茵茵青青的芳草坪，枝頭綻放的絢麗花朵，我更喜歡欣賞仰天伸展、靜默滄桑的老樹……15
<hr/>16
<pclass="a">17 散文精選18
</p>19 櫻花園里，那一樹樹繽紛綻放的花兒，一串串、一簇簇或潔白素雅、或鮮紅如火、或粉色如綢、或粉白參半……綻放得簡直如夢如幻，如同世外仙境一般，美妙絕倫！湖畔翠柳依依，湖水銀光閃閃。20
</body>21
</html>12.3.3清除浮動clear:none|left|right|both【示例12-8】清除元素的浮動效果。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
.a{float:left;margin:10px;}8
.b{clear:left;}9
</style>10
</head>11
<body>12
<h1>鴨子的定義</h1>13
<img
src="duck.gif"class="a"alt=""
/>14 鴨是雁形目、鴨科、鴨屬禽類。鴨全身被羽，頭大而圓，無冠、肉垂及耳葉；喙長而扁平，上下腭邊緣呈鋸齒狀；頸較長，活動自如；體寬長、呈船形，前驅(qū)……15
<h1class="b">鴨子的習(xí)性</h1>16 鴨在中國大部分地區(qū)均有分布，喜歡在水中覓食、嬉戲。鴨性情溫馴，膽小易驚，只要有合適的飼養(yǎng)條件，不論鴨日齡大小，混群飼養(yǎng)都能和睦共處，爭斗現(xiàn)象不明顯。公鴨的適配年齡鑒于品種不同有所差異，一般孵化期為26～28天。17
</body>18
</html>12.4溢出與剪切12.4.1設(shè)置溢出效果
12.4.2設(shè)置水平方向內(nèi)容超出范圍的處理方式12.4.3設(shè)置垂直方向內(nèi)容超出范圍的處理方式12.4.4內(nèi)容的剪切
12.4.1設(shè)置溢出效果overflow:visible|hidden|scroll|auto|inherit【示例12-9】對元素設(shè)置不同的溢出處理方式。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
div{width:200px;height:100px;background-color:#cccccc;}8
.a{position:absolute;left:10px;top:10px;overflow:visible;}9
.b{position:absolute;left:300px;top:10px;overflow:hidden;}10
.c{position:absolute;left:10px;top:250px;overflow:scroll;}11
.d{position:absolute;left:300px;top:250px;overflow:auto;}12
</style>13
</head>14
<body>15
<divclass="a">16 多風(fēng)的天氣，很干燥，我不喜歡；我喜歡淅淅瀝瀝的小雨輕柔飄灑……我喜歡欣賞郁郁蔥蔥、青翠欲滴、茵茵青青的芳草坪，枝頭綻放的絢麗花朵，我更喜歡欣賞仰天伸展、靜默滄桑的老樹……櫻花園里，那一樹樹繽紛綻放的花兒，綻放得簡直如夢如幻。17
</div>18
<divclass="b">19 多風(fēng)的天氣，很干燥，我不喜歡；我喜歡淅淅瀝瀝的小雨輕柔飄灑……我喜歡欣賞郁郁蔥蔥、青翠欲滴、茵茵青青的芳草坪，枝頭綻放的絢麗花朵，我更喜歡欣賞仰天伸展、靜默滄桑的老樹……櫻花園里，那一樹樹繽紛綻放的花兒，綻放得簡直如夢如幻。20
</div>21
<divclass="c">22 多風(fēng)的天氣，很干燥，我不喜歡；我喜歡淅淅瀝瀝的小雨輕柔飄灑……我喜歡欣賞郁郁蔥蔥、青翠欲滴、茵茵青青的芳草坪，枝頭綻放的絢麗花朵，我更喜歡欣賞仰天伸展、靜默滄桑的老樹……櫻花園里，那一樹樹繽紛綻放的花兒，綻放得簡直如夢如幻。23
</div>24
<divclass="d">25 多風(fēng)的天氣，很干燥，我不喜歡；我喜歡淅淅瀝瀝的小雨輕柔飄灑……我喜歡欣賞郁郁蔥蔥、青翠欲滴、茵茵青青的芳草坪，枝頭綻放的絢麗花朵，我更喜歡欣賞仰天伸展、靜默滄桑的老樹……櫻花園里，那一樹樹繽紛綻放的花兒，綻放得簡直如夢如幻。26
</div>27
</body>28
</html>12.4.2設(shè)置水平方向內(nèi)容超出范圍的處理方式overflow-x:
visible|
auto|
hidden|
scroll【示例12-10】設(shè)置元素內(nèi)容在水平方向超出范圍的處理方式。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
h2{font-family:"方正姚體"}8
.exam{padding:20px;width:350px;height:220px;overflow-x:hidden;}9
.exam2{width:450px;}10
</style>11
</head>12
<body
leftmargin="30px">13
<h2>花朵介紹</h2>14
<divname="out"class="exam">15
<divclass="exam2">16
<p>玫瑰，別名徘徊花，薔薇科，屬落葉叢生灌木。它可以高達2m，莖枝上密生毛刺，葉呈橢圓形，花單生或數(shù)朵叢生，花期5～6月，單瓣或重瓣。目前全世界的玫瑰品種有資料可查的已達七千種。</p>17
<p>牡丹為花中之王，有“國色天香”之稱。每年4～5月開花，朵大色艷，奇麗無比，有紅、黃、白、粉紫、墨、綠、藍等色?；ǘ嘀匕?，姿態(tài)典雅，花香襲人，被看作富麗繁華的象征，稱為“富貴花”。</p>18
</div>19
</div>20
</body>21
</html>12.4.3設(shè)置垂直方向內(nèi)容超出范圍的處理方式overflow-y:visible|
auto|
hidden|
scroll【示例12-11】設(shè)置元素內(nèi)容在垂直方向超出范圍的處理方式。1
<!DOCTYPEhtml>2
<htmlxmlns="/1999/xhtml">3
<head>4
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>5
<title>設(shè)置超出范圍時的處理方式</title>6
<styletype="text/css">7
h2{font-family:"方正姚體";}8
.exam{padding:5px20px;width:400px;height:200px;overflow-y:scroll;}9
.exam2{height:240px;}10
</style>11
</head>12
<body
leftmargin="30px">13
<h2>花朵介紹</h2>14
<divname=outclass=exam>15
<divclass=exam2>16
<p>玫瑰，別名徘徊花，薔薇科，屬落葉叢生灌木。它可以高達2m，莖枝上密生毛刺，葉呈橢圓形，花單生或數(shù)朵叢生，花期5～6月，單瓣或重瓣。目前全世界的玫瑰品種有資料可查的已達七千種。</p>17
<p>牡丹為花中之王，有“國色天香”之稱。每年4～5月開花，朵大色艷，奇麗無比，有紅、黃、白、粉紫、墨、綠、藍等色?；ǘ嘀匕?，姿態(tài)典雅，花香襲人，被看作富麗繁華的象征，稱為“富貴花”。</p>18
</div>19
</div>20
</body>21
</html>12.4.4內(nèi)容的剪切clip:auto|
rect(上右下左)|inherit【示例12-12】對圖片進行剪切顯示。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
.a{clip:rect(50px350px150px50px);}8
.b{position:absolute;clip:rect(50px350px150px50px);}9
</style>10
</head>11
<body>12
<imgsrc="duck.gif"alt=""clas
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 2025年上半年安徽省合肥經(jīng)開區(qū)政府購買服務(wù)崗招聘12人易考易錯模擬試題（共500題）試卷后附參考答案
- 2025年上半年安徽省亳州蒙城縣小辛集鄉(xiāng)人民政府招聘10人易考易錯模擬試題（共500題）試卷后附參考答案
- 2025年上半年安徽淮北市礦工總醫(yī)院招聘68人易考易錯模擬試題（共500題）試卷后附參考答案
- 2025年上半年安徽池州東至縣部分鄉(xiāng)鎮(zhèn)事業(yè)單位公開招聘59人易考易錯模擬試題（共500題）試卷后附參考答案
- 2025年上半年寧波市級機關(guān)大院后勤服務(wù)中心招考編外人員易考易錯模擬試題（共500題）試卷后附參考答案
- 2024年醫(yī)用放射治療設(shè)備項目投資申請報告代可行性研究報告
- 2025年嬰兒涼鞋項目可行性研究報告
- 2025年絲印隧道爐項目可行性研究報告
- 高中語文情感美文親愛的你把溫柔給了誰
- 2025年8口光纖盒項目可行性研究報告
- 煤粉鍋爐燃燒器的構(gòu)造
- 全口義齒概述?？普n件
- 人參中國藥典
- 通用技術(shù)考試設(shè)計方案參考范本
- 外周血管的介入治療課件
- 《當(dāng)代廣播電視概論》(廣播電視發(fā)明與技術(shù)基礎(chǔ))課件
- 核心能力模型庫(-勝任力模型-)
- 高中地理 紐約的發(fā)展 紐約的輻射功能 城市的輻射功能 作業(yè)設(shè)計
- 5.3.2.2函數(shù)的最大（?。┲?課件（共20張PPT）
- TSG-R0005-2022《移動式壓力容器安全技術(shù)監(jiān)察規(guī)程》(2022版)
- 2020 ACLS-PC-SA課前自我測試試題及答案
評論
0/150
提交評論