婷婷五月国产手机在线视频,中文无码精品久久高潮喷水,亚洲乱色伦图片区小说

　CSS 實用實例

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

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

Classification 分類

怎樣顯示一個元素？

運行代碼框
<html> <head> <style type="text/css"> p {display: inline} div {display: none} </style> </head> <body> <p>A display property with a value of "inline" results in</p> <p>no distance between two elements.</p> <div>And this div section is not displayed!</div> </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運行]

一個簡單的浮動屬性使用

運行代碼框
<html> <head> <style type="text/css"> img { float:right } </style> </head> <body> <p>In the paragraph below, we have added an image with style <b>float:right</b>. The result is that the image will float to the right in the paragraph.</p> <p> <img src="/articleimg/2006/07/3744/logocss.gif" width="95" height="84" /> This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. </p> </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運行]

一個有著邊框個邊距的圖象浮動到一個段落的右邊

運行代碼框
<html> <head> <style type="text/css"> img { float:right; border:1px dotted black; margin:0px 0px 15px 20px; } </style> </head> <body> <p> In the paragraph below, the image will float to the right. A dotted black border is added to the image. We have also added margins to the image to push the text away from the image: 0 px margin on the top and right side, 15 px margin on the bottom, and 20 px margin on the left side of the image. </p> <p> <img src="/articleimg/2006/07/3744/logocss.gif" width="95" height="84" /> This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. </p> </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運行]

一個帶說明的圖片浮動到右邊

運行代碼框
<html> <head> <style type="text/css"> div { float:right; width:120px; margin:0 0 15px 20px; padding:15px; border:1px solid black; text-align:center; } </style> </head> <body> <div> <img src="/articleimg/2006/07/3744/logocss.gif" width="95" height="84" /><br /> CSS is fun! </div> <p> This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. </p> <p> In the paragraph above, the div element is 120 pixels wide and it contains the image. The div element will float to the right. Margins are added to the div to push the text away from the div. Borders and padding are added to the div to frame in the picture and the caption. </p> </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運行]

讓一個段落中首個字母浮動到左邊

運行代碼框
<html> <head> <style type="text/css"> span { float:left; width:0.7em; font-size:400%; font-family:algerian,courier; line-height:80%; } </style> </head> <body> <p> <span>T</span>his is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. </p> <p> In the paragraph above, the first letter of the text is embedded in a span element. The span element has a width that is 0.7 times the size of the current font. The font-size of the span element is 400% (quite large) and the line-height is 80%. The font of the letter in the span will be in "Algerian". </p> </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運行]

建立水平菜單

運行代碼框
<html> <head> <style type="text/css"> ul { float:left; width:100%; padding:0; margin:0; list-style-type:none; } a { float:left; width:6em; text-decoration:none; color:white; background-color:purple; padding:0.2em 0.6em; border-right:1px solid white; } a:hover {background-color:#ff3300} li {display:inline} </style> </head> <body> <ul> <li><a href="#">Link one</a></li> <li><a href="#">Link two</a></li> <li><a href="#">Link three</a></li> <li><a href="#">Link four</a></li> </ul> <p> In the example above, we let the ul element and the a element float to the left. The li elements will be displayed as inline elements (no line break before or after the element). This forces the list to be on one line. The ul element has a width of 100% and each hyperlink in the list has a width of 6em (6 times the size of the current font). We add some colors and borders to make it more fancy. </p> </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運行]

將一個元素的相對定位到它的正常位置

運行代碼框
<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 全部選擇提示：你可先修改部分代碼，再按運行]

用一個絕對值來定位一個元素

運行代碼框
<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 全部選擇提示：你可先修改部分代碼，再按運行]

怎樣讓一個元素不可見

運行代碼框
<html> <head> <style type="text/css"> h1.visible {visibility:visible} h1.invisible {visibility:hidden} </style> </head> <body> <h1 class="visible">This is a visible heading</h1> <h1 class="invisible">This is an invisible heading</h1> </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運行]

改變鼠標樣子

運行代碼框
<html> <body> <p>Move the mouse over the words to see the cursor change:</p> <span style="cursor:auto"> Auto</span><br /> <span style="cursor:crosshair"> Crosshair</span><br /> <span style="cursor:default"> Default</span><br /> <span style="cursor:pointer"> Pointer</span><br /> <span style="cursor:move"> Move</span><br /> <span style="cursor:e-resize"> e-resize</span><br /> <span style="cursor:ne-resize"> ne-resize</span><br /> <span style="cursor:nw-resize"> nw-resize</span><br /> <span style="cursor:n-resize"> n-resize</span><br /> <span style="cursor:se-resize"> se-resize</span><br /> <span style="cursor:sw-resize"> sw-resize</span><br /> <span style="cursor:s-resize"> s-resize</span><br /> <span style="cursor:w-resize"> w-resize</span><br /> <span style="cursor:text"> text</span><br /> <span style="cursor:wait"> wait</span><br /> <span style="cursor:help"> help</span> </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運行]

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

上一頁 CSS 實用實例 [6] 下一頁 CSS 實用實例 [8]

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

相關文章

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

作者文章

設計上的精挑細選會削弱網(wǎng)站

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


關鍵字搜索	常規(guī)搜索	推薦文檔
熱門搜索：CSS Fireworks 設計比賽網(wǎng)頁制作 web標準用戶體驗 UE photoshop Dreamweaver Studio8 Flash 手繪 CG

站點最新

站點最新列表

周大福“敬•自然”設計大賽開啟

國際體驗設計大會7月將在京舉行

中國國防科技信息中心標志征集

云計算如何讓安全問題可控

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

阿里行云

云手機年終巨獻，送禮標配299起

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

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

首屆COCO桌面手機主題設計大賽

欄目最新

欄目最新列表

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

如何在illustrator中繪制臺歷

Ps簡單繪制一個可愛的鉛筆圖標

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

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

CSS定位機制之一:普通流

25個最佳最閃亮的Eclipse開發(fā)項目

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

Photoshop制作印刷凹凸字體

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

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