|
導(dǎo)讀網(wǎng)頁的本質(zhì)就是超級文本標(biāo)記語言,通過結(jié)合使用其他的Web技術(shù)(如:腳本語言、公共網(wǎng)關(guān)接口、組件等),可以創(chuàng)造出功能強(qiáng)大的網(wǎng)頁。因而,超級文本標(biāo)記語言是萬維網(wǎng)(Web)編程的基礎(chǔ),也就是說萬維網(wǎng)是建立... 網(wǎng)頁的本質(zhì)就是超級文本標(biāo)記語言,通過結(jié)合使用其他的Web技術(shù)(如:腳本語言、公共網(wǎng)關(guān)接口、組件等),可以創(chuàng)造出功能強(qiáng)大的網(wǎng)頁。因而,超級文本標(biāo)記語言是萬維網(wǎng)(Web)編程的基礎(chǔ),也就是說萬維網(wǎng)是建立在超文本基礎(chǔ)之上的。超級文本標(biāo)記語言之所以稱為超文本標(biāo)記語言,是因為文本中包含了所謂“超級鏈接”點。 本章給大家?guī)?strong>css負(fù)外邊距是什么?css負(fù)外邊距的作用(詳解),帶大家看看css負(fù)外邊距有什么作用。有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。負(fù)邊距介紹 負(fù)邊距的使用如下: #content {margin-left:-100px;}負(fù)邊距通常在小范圍使用。但是接下來你會看到,它能做的事情很多。下面是一些你應(yīng)該知道的關(guān)于負(fù)邊距的事情: 他們是完全有效的CSS 負(fù)邊距不是在hack 它符合正常的文檔流 它是相當(dāng)好的兼容性 當(dāng)使用了float之后,會有不同的表現(xiàn) Dreamweaver不理解它 負(fù)邊距如果可以正確的使用的話它的功能是很強(qiáng)大的。有兩種場景負(fù)邊距是很重要的。 在static元素中使用負(fù)邊距:
一個static元素是一個沒有使用過float的元素。上面的圖片展示了一個static的元素使用負(fù)邊距之后的情況。 當(dāng)一個static元素在top/left使用負(fù)邊距時,它把元素向這個特定的方向拉,比如 /* Moves the element 10px upwards */
#mydiv1 {margin-top:-10px;}但是當(dāng)你將負(fù)邊距設(shè)置為相對bottom/right時,它并不會把元素向下或右拉,相反,它會把后面的元素往里面拉,從而覆蓋自己。 /*
所有在#mydiv1后面的元素都會向上
移動10px,而#mydiv1一點都不會移動
*/#mydiv1{margin-bottom:-10px;}如果寬度沒有設(shè)置,左右負(fù)邊距會把元素向兩個方向拉以增加寬度。在這里margin的作用相當(dāng)于padding 加入下面就是我們的html代碼: <div id="mydiv1">First</div> <div id="mydiv2">Second</div> 如果對一個浮動的元素使用負(fù)邊距,它會產(chǎn)生一個空白,其他元素就可以覆蓋這一部分。這個技巧可以很好地用戶流式布局。比如有一列寬度100%,另一列有固定的寬度,比如說100px。 #mydiv1 {float:left; margin-right:-100px;}如果兩個元素都使用了左浮動并且設(shè)置margin-right:-20px。#mydiv2會把#mydiv1看成寬度縮小20px(所以會覆蓋一部分),但是有趣的是#mydiv1并不會有任何變化,而是依然保持原先的寬度。 既然我們知道使用負(fù)邊距在CSS2中是有效的,使用它可以給我們提供一些非常有趣的CSS技巧。 把單個列表變成三列 如果你有一個列表垂直方向太長了,為什么不把它分成幾列呢?負(fù)邊距可以讓你在不增加任何浮動和標(biāo)簽的情況下完成。你會發(fā)現(xiàn)用負(fù)邊距實現(xiàn)這個是多么地簡單,就像下面: HTML: <ul> <li class="col1">Eggs</li> <li class="col1">Ham<li> <li class="col2 top">Bread<li> <li class="col2">Butter<li> <li class="col3 top">Flour<li> <li class="col3">Cream</li> </ul> CSS ul {list-style:none;}
li {line-height:1.3em;}
.col2 {margin-left:100px;}
.col3 {margin-left:200px;}
.top {margin-top:-2.6em;} /* the clincher */通過對.top的添加margin-top:-2.6em。所有的元素會完美的對齊好。使用負(fù)邊距會比使用相對定位好很多,因為你只需要給新的一列的第一個元素添加負(fù)邊距即可。 重疊來強(qiáng)調(diào)
故意重疊元素也是一種很好地設(shè)計隱喻。重疊效果可以增強(qiáng)深度感從而為突出特定元素。一個很好地例子就像上圖一樣,通過重疊來吸引注意力。只需要使用z-index屬性和一點小創(chuàng)意你就可以做到。 驚艷的3D文本效果
這是一個精致的技巧。通過使用兩個視圖的兩種顏色創(chuàng)建safari一樣有點傾斜的效果。然后通過負(fù)邊距來把其中一個疊加到另一個上面,保持1到2像素的偏移。這樣你就可以二道可選的,機(jī)器友好的傾斜字體。就不需要浪費很多貸款來加載大的圖片來實現(xiàn)這個效果啦 簡單的兩列布局 負(fù)邊距也是在流式布局中創(chuàng)建簡單一列寬度固定,一列內(nèi)容為寬度的100%的兩列布局的好方法。 HTML <div id="content"> <p>Main content in here</p> </div> <div id="sidebar"> <p>I’m the Sidebar! </p> </div> CSS #content {width:100%; float:left; margin-right:-200px;}
#sidebar {width:200px; float:left;}哈哈,這樣你就得到了一個簡單的兩列布局。它也能在IE6完美的渲染出來。現(xiàn)在為了讓#sidebar不要被#content給掩蓋,只要簡單的加上: /* Prevent text from being overlapped */
#content p {margin-right:210px;}
/* It’s 200px + 10px, the 10px being an additional margin.*/當(dāng)適當(dāng)?shù)氖褂玫臅r候,負(fù)外邊距能夠提供一個靈活的文檔結(jié)構(gòu),完爆table的布局。靈活的文檔布局是一種可訪問性和SEO的技巧,通過它能夠讓你根據(jù)你的關(guān)注點以任意順序組織你的html代碼。這里有一個文章討論了負(fù)邊距在多列布局中的應(yīng)用。 微調(diào)元素 這是負(fù)外邊距最常也是最簡單的使用方式。假如你把第十個div插入到9個其他的div中,不知道什么原因沒有正確的排列,使用負(fù)邊距來調(diào)整這個div就不需要改變其他9個div了,很方便。 解決bug 文本和鏈接問題 在float中使用負(fù)邊距可能會在舊的瀏覽器造成一些問題,比如下面的這些: 讓鏈接不可點擊 解決方法:只要添加position:relative,就可以啦。 圖片被剪切啦 如果你運氣不好剛好在辦公室使用IE6,當(dāng)遇到覆蓋和浮動的時候內(nèi)容有些時候回突然被剪切掉。 解決方法:同樣的只要給浮動元素加上position:relative,所有的問題就解決啦。 結(jié)論 負(fù)外邊距能夠在不使用任何額外標(biāo)簽的情況下定位元素讓它在現(xiàn)在網(wǎng)頁設(shè)計中占有一席之地。隨著更多的用戶使用更新的瀏覽器(包括IE8),未來使用這些技巧的網(wǎng)站會變得更加有前景。 以上就是css負(fù)外邊距是什么?css負(fù)外邊距的作用(詳解)的詳細(xì)內(nèi)容,更多請關(guān)注php中文網(wǎng)其它相關(guān)文章! 網(wǎng)站建設(shè)是一個廣義的術(shù)語,涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。 |
溫馨提示:喜歡本站的話,請收藏一下本站!