日本一区二区三区免费观看视频,中文字幕在线高清乱码,国语普通话对白国产

　CSS 實(shí)用實(shí)例

作者：Linyupark　時(shí)間： 2006-07-12　文檔類型：翻譯　來自：網(wǎng)絡(luò)維他命

第 1 頁 CSS 實(shí)用實(shí)例 [1]
第 2 頁 CSS 實(shí)用實(shí)例 [2]
第 3 頁 CSS 實(shí)用實(shí)例 [3]
第 4 頁 CSS 實(shí)用實(shí)例 [4]
第 5 頁 CSS 實(shí)用實(shí)例 [5]
第 6 頁 CSS 實(shí)用實(shí)例 [6]
第 7 頁 CSS 實(shí)用實(shí)例 [7]
第 8 頁 CSS 實(shí)用實(shí)例 [8]
第 9 頁 CSS 實(shí)用實(shí)例 [9]

Positioning 定位

相對(duì)定位

運(yùn)行代碼框
<html> <head> <style type="text/css"> h2.pos_left { position:relative; left:-20px } h2.pos_right { position:relative; left:20px } </style> </head> <body> <h2>This is a heading in normal position</h2> <h2 class="pos_left">This heading is moved left to its normal position</h2> <h2 class="pos_right">This heading is moved right to its normal position</h2> <p>Relative positioning moves an element RELATIVE to its original position.</p> <p>The style "left:-20px" subtracts 20 pixels from the element's original left position.</p> <p>The style "left:20px" adds 20 pixels to the element's original left position.</p> </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]

絕對(duì)定位

運(yùn)行代碼框
<html> <head> <style type="text/css"> h2.pos_abs { position:absolute; left:100px; top:150px } </style> </head> <body> <h2 class="pos_abs">This is a heading with an absolute position</h2> <p>With absolute positioning, an element can be placed anywhere on a page. The heading below is placed 100px from the left of the page and 150px from the top of the page.</p> </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]

設(shè)置元素的大小

運(yùn)行代碼框
<html> <head> <style type="text/css"> img { position:absolute; clip:rect(0px 50px 200px 0px) } </style> </head> <body> <p>The clip property is here cutting an image:</p> <p><img border="0" src="/articleimg/2006/07/3744/bookasp20.gif" width="120" height="151"></p> </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]

當(dāng)元素的內(nèi)容超過一個(gè)指定的范圍時(shí)會(huì)發(fā)生什么

運(yùn)行代碼框
<html> <head> <style type="text/css"> div { background-color:#00FFFF; width:150px; height:150px; overflow: scroll } </style> </head> <body> <p>The overflow property decides what to do if the content inside an element exceeds the given width and height properties.</p> <div> You can use the overflow property when you want to have better control of the layout. Try to change the overflow property to: visible, hidden, auto, or inherit and see what happens. The default value is visible. </div> </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]

一個(gè)圖片的垂直對(duì)齊

運(yùn)行代碼框
<html> <head> <style type="text/css"> img.top {vertical-align:text-top} img.bottom {vertical-align:text-bottom} </style> </head> <body> <p> This is an <img class="top" border="0" src="/articleimg/2006/07/3744/logocss.gif" width="95" height="84" /> image inside a paragraph. </p> <p> This is an <img class="bottom" border="0" src="/articleimg/2006/07/3744/logocss.gif" width="95" height="84" /> image inside a paragraph. </p> </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]

將一個(gè)元素放到另一個(gè)元素的后面

運(yùn)行代碼框
<html> <head> <style type="text/css"> img.x { position:absolute; left:0px; top:0px; z-index:-1 } </style> </head> <body> <h1>This is a Heading</h1> <img class="x" src="/articleimg/2006/07/3744/bulbon.gif" width="100" height="180"> <p>Default z-index is 0. Z-index -1 has lower priority.</p> </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]

將一個(gè)元素放到另一個(gè)元素的后面2

運(yùn)行代碼框
<html> <head> <style type="text/css"> img.x { position:absolute; left:0px; top:0px; z-index:1 } </style> </head> <body> <h1>This is a Heading</h1> <img class="x" src="/articleimg/2006/07/3744/bulbon.gif" width="100" height="180"> <p>Default z-index is 0. Z-index 1 has higher priority.</p> </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]

出處：網(wǎng)絡(luò)維他命
責(zé)任編輯：moby

上一頁 CSS 實(shí)用實(shí)例 [7] 下一頁 CSS 實(shí)用實(shí)例 [9]

◎進(jìn)入論壇網(wǎng)站綜合、網(wǎng)頁制作版塊參加討論

相關(guān)文章

更多相關(guān)鏈接

首屆世界CSS設(shè)計(jì)大賽結(jié)果揭曉

《CSS權(quán)威指南》

實(shí)用在線工具集

web標(biāo)準(zhǔn)布局實(shí)例教程

組合CLASS來完成網(wǎng)頁布局風(fēng)格

作者文章

設(shè)計(jì)上的精挑細(xì)選會(huì)削弱網(wǎng)站

瀏覽器發(fā)展/CSS布局/怎樣運(yùn)用?


關(guān)鍵字搜索	常規(guī)搜索	推薦文檔
熱門搜索：CSS Fireworks 設(shè)計(jì)比賽網(wǎng)頁制作 web標(biāo)準(zhǔn) 用戶體驗(yàn) UE photoshop Dreamweaver Studio8 Flash 手繪 CG

站點(diǎn)最新

站點(diǎn)最新列表

周大�！熬�•自然”設(shè)計(jì)大賽開啟

國際體驗(yàn)設(shè)計(jì)大會(huì)7月將在京舉行

中國國防科技信息中心標(biāo)志征集

云計(jì)算如何讓安全問題可控

云計(jì)算是多數(shù)企業(yè)唯一擁抱互聯(lián)網(wǎng)的機(jī)會(huì)

阿里行云

云手機(jī)年終巨獻(xiàn)，送禮標(biāo)配299起

阿里巴巴CTO王堅(jiān)的"云和互聯(lián)網(wǎng)觀"

1499元買真八核云OS雙蛋大促

首屆COCO桌面手機(jī)主題設(shè)計(jì)大賽

欄目最新

欄目最新列表

淺談JavaScript編程語言的編碼規(guī)范

如何在illustrator中繪制臺(tái)歷

Ps簡單繪制一個(gè)可愛的鉛筆圖標(biāo)

數(shù)據(jù)同步算法研究

用ps作簡單的作品展示頁面

CSS定位機(jī)制之一:普通流

25個(gè)最佳最閃亮的Eclipse開發(fā)項(xiàng)目

Illustrator中制作針線縫制文字效果

Photoshop制作印刷凹凸字體

VS2010中創(chuàng)建自定義SQL Rule

中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx