溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“CSS美化網頁控件的代碼怎么寫”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“CSS美化網頁控件的代碼怎么寫”吧！
1.1標簽的style屬性實現(xiàn)標簽裝飾（裝飾功能不能重復使用：極少用到）
2.1 height：48px 高度
2.2 border:邊框(屬性:寬，樣式，顏色)
2.3 width：%80 寬度(寫法：像素：百分比)
2.4 font-size:16px 字體大小
2.5 text-align:center 居中
2.6 line-height:48px 字符串放在像素大小的中間
2.7 font-weight:bold 字體加粗
1 如：p標簽是塊級白板標簽 所以一個塊級標簽不管字符串多少就占據一行
如果想在一行里面使用2個塊級標簽以上的話：
必須使用float內部屬性：這樣就可以讓塊級標簽變成行內標簽了
folat:left讓塊級標簽變成行內標簽，往左靠
folat:right讓塊級標簽變成行內標簽，往右靠
（注：需大于2個并且緊挨著標簽，同時使用folat)
超過100%寬度就另起一行-->
格式 ：
6）position內部屬性（固定頁面標簽 ）fixed、absolute、relative
1.position: fixed; 固定在頁面某個位置，，瀏覽器滾動，跟著滾動
2.position:absolute; 絕對固定在頁面某個位置，瀏覽器滾動，不跟著滾動（應用場景不多，但是如果和absolute+relative那么可以應用很多場景）
3.position:relative;單獨使用沒有任何效果配合absolute使用（標簽有position:relative;那么該標簽下的標簽有position:absolute;這個時候：absolute標簽固定在relative標簽的某個位置）
4.pisition多層：應用場景當點擊一個按鈕的時候，跳出一個框，值可以對該框進行操作
需要使用兩個內部屬性配合:
z-index:9；區(qū)別層級，誰的數(shù)字大，誰就在最上層
opacity: 0.5; 透明度，0到1，0完全透明 1完全遮住
position: fixed應用場景：
1.1滾動頁面的時候不管如何頁面往下滾動會出現(xiàn)一個返回頂部
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .pg-header01{ height: 48px; background-color: black; color: #dddddd; position: fixed; top:0; right: 0; left: 0; }/*position: fixed; 固定頁面的位置，并且把該p從背景層（底層）變底層上層固定在 top right left:距離頂部、左、右 0px距離這樣以后就不管你頁面往下滾動，該p一直存在該瀏覽器頁面的頂部*/ .pg-body01{ background-color: #dddddd; height: 5000px; margin-top: 50px; }/*背景層（底層）試驗position寫的裝飾功能margin-top偏離頂部50px這樣才不會被蓋?。ê笃诰筒恍枰?，因為可以利用display隱藏固定p*/ </style></head><body> <p class="pg-header01">頭部</p><!-- 調用pg-header01裝飾，達到不管你如何在瀏覽器滾動頁面，該p永遠在頁面頂部--> <p class="pg-body01">內容</p><!--背景層（底層）試驗positionn該內部參數(shù)--></body></html>
position:relative;配合position:absolute應用場景：
absolute標簽依據relative標簽進行固定位置
格式：
8) :hover 當樣式后面加上:hover，那么鼠標移到裝飾該樣式的標簽，該:hover樣式生效
格式
9) background-image：背景圖片
background-image: url(icon_18_118.png) 添加背景圖片；（默認圖片橫豎平鋪該p空間）
background-repeat:repeat-y; 圖片豎平鋪，
background-repeat:repeat-x; 圖片橫平鋪，
background-repeat:no-repeat; 不平鋪，
background-position-x:0px;橫向移動框內背景圖片
background-position-y:-140px;豎向移動框內背景圖片
background-position:0 -140px ;上面兩個綜合簡寫
格式
<p > </p><!--background-image: url(icon_18_118.png) 背景圖片；默認圖片橫豎平鋪該p空間--> <p > </p><!--background-image: url(icon_18_118.png) 背景圖片；background-repeat:repeat-y; 圖片豎平鋪，background-repeat:repeat-x; 圖片橫平鋪，--> <p > </p><!--background-image: url(icon_18_118.png) 背景圖片；background-repeat:no-repeat; 不平鋪，--> <p > </p><!--background-image: url(icon_18_118.png) 背景圖片；background-repeat:no-repeat; 不平鋪，background-position-x:0px;橫向移動背景圖片background-position-y:-140px;豎向移動北京圖片background-position:0 -140px ;上面兩個綜合簡寫-->
感謝各位的閱讀，以上就是“CSS美化網頁控件的代碼怎么寫”的內容了，經過本文的學習后，相信大家對CSS美化網頁控件的代碼怎么寫這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
