基于web標(biāo)準(zhǔn)的網(wǎng)頁(yè)設(shè)計(jì)與制作第4章(3)css盒子模型-在線瀏覽
2024-09-02 01:40本頁(yè)面
【正文】 高度，行高以及頂和底邊距都可控制； 寬度缺省是它的容器的 100%，除非用 width設(shè)定一個(gè)寬度 div, p, h1, form, ul 和 li是塊元素的例子。 span, a, label, input, img, strong 和em是 inline元素的例子 列表項(xiàng)元素 display: listitem ?在 html中只有 li元素默認(rèn)是此類型，將元素設(shè)置為列表項(xiàng)元素后將按列表元素顯示，再通過設(shè)置列表選項(xiàng)可使元素的左邊出現(xiàn)小黑點(diǎn)。 ?當(dāng)某個(gè)元素被設(shè)置成了隱藏元素之后，瀏覽器會(huì)完全忽略掉這個(gè)元素，該元素將不會(huì)被顯示，也不會(huì)占據(jù)文檔中的位置。 ?比較 visibility: hidden。 4. 控制 inline元素的高度（對(duì)導(dǎo)航條特別有用）； 5. 無(wú)須設(shè)定寬度即可為一個(gè)塊元素設(shè)定與文字同寬的背景色 標(biāo)準(zhǔn)流下定位的應(yīng)用－制作豎直導(dǎo)航菜單 nav a { fontsize: 14px。 textdecoration: none。 display: block。 padding: 6px 10px 4px。 margin: 2px。 backgroundcolor: 666666。 backgroundcolor:a9d6ff。 backgroundcolor:eeb0b0。塊元素 1/div div style=margintop:30px。若父元素的邊框或填充不為 0，那么父元素和子元素的 margin會(huì)被分隔開，因此不存在疊加的問題。而 Firefox對(duì)父塊和子塊均以定義的高度為準(zhǔn)，父塊高度不會(huì)伸展，任其子塊露在外面，子塊高度也不會(huì)壓縮。 背景的控制 CSS的背景屬性 ? 背景（ background）是網(wǎng)頁(yè)中常用的一種表現(xiàn)方法，無(wú)論是單純的背景顏色還是背景圖片，都能為網(wǎng)頁(yè)帶來(lái)豐富的視覺效果， HTML的很多元素都具有 bgcolor和backgroud屬性，可以設(shè)置背景顏色和背景圖片，如（ table、 td等），但形式比較單一，對(duì)背景圖片的設(shè)定，只支持在 X軸和 Y軸都平鋪的方式，因此，如果同時(shí)設(shè)置了背景顏色和背景圖片，那么背景顏色將被背景圖片擋住，以背景圖片來(lái)顯示。 ? CSS的背景屬性是 backgroud或以 backgroud開頭 CSS的背景屬性 屬性 描述 可用值 background 設(shè)置背景的所有控制選項(xiàng)，是其他所有背景屬性的縮寫 其他背景屬性的值的集合 backgroundcolor 設(shè)置背景顏色 rgb顏色 命名顏色 16進(jìn)制顏色 backgroundimage 設(shè)置背景圖片 url backgroundrepeat 設(shè)置背景圖片的平鋪方式 repeat（完全平鋪） repeatx（橫向平鋪） repeaty（縱向平鋪） norepeat（不平鋪） backgroundattachment 設(shè)置背景圖片固定還是隨內(nèi)容滾動(dòng) scroll（默認(rèn)值） fixed backgroundposition 設(shè)置背景圖片顯示的起始位置 （ [top] [left] [center] [center] [bottom] [right]） （ [x%] [y%] [xpos] [ypos]） 各個(gè)背景屬性的默認(rèn)值 ?backgroundcolor: transparent 透明模式 ?backgroundimage: none ?backgroundrepeat: repeat 平鋪 ?backgroundattachment: scroll ?backgroundposition: 0% 0% background屬性的縮寫 ?background屬性是所有背景屬性的縮寫形式，就像font屬性一樣，其縮寫順序?yàn)椋? ?background: backgroundcolor || backgroundimage || backgroundrepeat || backgroundattachment || backgroundposition ?如 body {background:EFF4FF url(images/) repeatx fixed。 ?body{background:666666 url(xxwlzx/) repeatx。因此有人建議所有的網(wǎng)頁(yè)圖像都作為元素的 CSS背景引入。 body { background: F7F2DF url() norepeat right bottom 。 ? 要解決這個(gè)問題，可以將小圖片設(shè)置成 li元素的背景，不平鋪，且居左，為防止文字遮住圖片，將 li元素的左padding設(shè)置成 20px，這樣還可通過調(diào)整左 padding的值實(shí)現(xiàn)任意調(diào)整列表小圖片和文字之間的距離。 } li{ background:url() norepeat 0px 3px。 } 可以看出，有了背景的精確定位能力，完全可以使列表項(xiàng)目圖片符號(hào)出現(xiàn)在 li元素中的任意位置上。下面以 4圖像可變寬 度圓角欄目框的制作來(lái)介紹多個(gè)元素背景疊加的技巧 圓角的設(shè)計(jì) ?固定寬圓角 ?可變寬圓角 4圖像可變寬度圓角欄目框 div id=round h3 p span div id=round h3這是圓角矩形的標(biāo)題 /h3 pspan……/span/p /div 4圖像可變寬度圓角欄目框 round { backgroundimage: url(xxwlzx/)。 backgroundcolor: 00FF99。 } round h3 { backgroundimage: url(xxwlzx/)。 backgroundposition: right top。 padding: 12px。 } round p { backgroundimage: url(xxwlzx/)。 backgroundposition: left bottom。 } round span { backgroundimage: url(xxwlzx/)。 backgroundposition: right bottom。 padding: 16px。 lineheight: 140%。 } 最后再設(shè)置背景色 ?由于幾層背景的疊加，背景色只能放在最底層的盒子上，也就是對(duì)最外層的元素設(shè)置背景色，這樣背景色就不會(huì)把背景圖片給覆蓋了。 ?但這個(gè)圓角框沒有邊框，要制作帶有邊框的可變寬度圓角框，需要采用 5圖像二維滑動(dòng)門法制作 滑動(dòng)門技術(shù)－背景的高級(jí)運(yùn)用 圖片陰影，自適用寬度圓角導(dǎo)航條 1. 圖像陰影 ?陰影是一種很流行、很有吸引力的圖像處理技巧，它給平淡的設(shè)計(jì)增加了深度，形成立體感。但是，可以使用 CSS產(chǎn)生簡(jiǎn)單陰影效果，而
試題試卷相關(guān)推薦
鄂ICP備17016276號(hào)-1