基于web標準的網頁設計與制作第4章(3)css盒子模型(編輯修改稿)
2025-08-19 01:40 本頁面
【文章內容簡介】 顏色 rgb顏色 命名顏色 16進制顏色 backgroundimage 設置背景圖片 url backgroundrepeat 設置背景圖片的平鋪方式 repeat（完全平鋪） repeatx（橫向平鋪） repeaty（縱向平鋪） norepeat（不平鋪） backgroundattachment 設置背景圖片固定還是隨內容滾動 scroll（默認值） fixed backgroundposition 設置背景圖片顯示的起始位置 （ [top] [left] [center] [center] [bottom] [right]） （ [x%] [y%] [xpos] [ypos]） 各個背景屬性的默認值 ?backgroundcolor: transparent 透明模式 ?backgroundimage: none ?backgroundrepeat: repeat 平鋪 ?backgroundattachment: scroll ?backgroundposition: 0% 0% background屬性的縮寫 ?background屬性是所有背景屬性的縮寫形式，就像font屬性一樣，其縮寫順序為： ?background: backgroundcolor || backgroundimage || backgroundrepeat || backgroundattachment || backgroundposition ?如 body {background:EFF4FF url(images/) repeatx fixed。} DW中的背景設置面板 backgroundcolor:0099cc backgroundimage: url(img/) backgroundrepeat: norepeat backgroundposition: right bottom backgroundattachment: norepeat 背景的運用技巧 背景的運用技巧 ? 同時運用背景顏色和背景圖片 ? 控制背景在盒子中的位置及是否平鋪 ? 多個元素背景的疊加 ? 滑動門技術 ? 背景位置的控制－實現圖片的翻轉 ? 圓角的設計方法總結 同時運用背景顏色和背景圖片 ?目前網頁中流行采用一種漸變背景，即網頁的背景從上至下由一種深顏色過渡到一種淺顏色，由于網頁的長度通常是不好估計的，所以無法用一幅背景圖片來做這種漸變背景，只能在網頁的上部用漸變的圖片做背景，下部使用用一種和圖片下部顏色相同的顏色做背景色 ?通過在 CSS中設置 body標記的背景顏色和背景圖片，并把背景圖片設置為橫向平鋪就可以實現漸變背景了。 ?body{background:666666 url(xxwlzx/) repeatx。} 控制背景在盒子中的位置及是否平鋪 ? 在 html中，背景圖像只能平鋪，而在 CSS中，背景圖像能做到精確定位，允許不平鋪，效果就像普通的圖像元素一樣。因此有人建議所有的網頁圖像都作為元素的 CSS背景引入。例如下面的網頁的背景就是用讓背景圖片不平鋪并且定位于右下角實現的。 body { background: F7F2DF url() norepeat right bottom 。 } li元素的背景應用 ? 通過背景圖片不平鋪的技術還可以用來改變列表的項目符號，雖然使用列表元素 ul的 CSS屬性 liststyleimage:url()可以將列表項前面的小黑點改變成自定義的小圖片，但無法調整小圖片和列表文字之間的距離。 ? 要解決這個問題，可以將小圖片設置成 li元素的背景，不平鋪，且居左，為防止文字遮住圖片，將 li元素的左padding設置成 20px，這樣還可通過調整左 padding的值實現任意調整列表小圖片和文字之間的距離。 ul{ liststyletype:none。 } li{ background:url() norepeat 0px 3px。 /*距左邊 0px，距上邊 3px*/ paddingleft:20px。 } 可以看出，有了背景的精確定位能力，完全可以使列表項目圖片符號出現在 li元素中的任意位置上。 多個元素背景的疊加 ?背景圖片的疊加是很重要的 CSS技術，當兩個元素是嵌套關系時，那么里面元素的盒子背景的不透明部分將覆蓋在外面元素盒子背景之上，利用這一點，再結合對背景圖片位置的控制，可以得到滑動門技術。下面以 4圖像可變寬 度圓角欄目框的制作來介紹多個元素背景疊加的技巧 圓角的設計 ?固定寬圓角 ?可變寬圓角 4圖像可變寬度圓角欄目框 div id=round h3 p span div id=round h3這是圓角矩形的標題 /h3 pspan……/span/p /div 4圖像可變寬度圓角欄目框 round { backgroundimage: url(xxwlzx/)。 backgroundrepeat: norepeat。 backgroundcolor: 00FF99。 width: 244px。 } round h3 { backgroundimage: url(xxwlzx/)。 backgroundrepeat: norepeat。 backgroundposition: right top。 textalign: center。 padding: 12px。 margin: 0px。 } round p { backgroundimage: url(xxwlzx/)。 backgroundrepeat: norepeat。 backgroundposition: left bottom。 margin: 0px。 } round span { backgroundimage: url(xxwlzx/)。 backgroundrepeat: norepeat。 backgroundposition: right bottom。 display: block。 padding: 16px。 fontsize: 14px。 lineheight: 140%。 color: FF0000。 } 最后再設置背景色 ?由于幾層背景的疊加，背景色只能放在最底層的盒子上，也就是對最外層的元素設置背景色，這樣背景色就不會把背景圖片給覆蓋了。與此相反，為了讓內容能放在距邊框有一定邊距的區(qū)域，必須設置 padding值，而且 padding值只能設置在最里層的盒子上。 ?但這個圓角框沒有邊框，要制作帶有邊框的可變寬度圓角框，需要采
試題試卷相關推薦
鄂ICP備17016276號-1