案例一：對基礎選擇器的使用【網頁盒子】

【1】樣例：

首先，觀察到，幾個元素豎著排列的，所以使用塊級元素，而不是行內元素。

【2】代碼演示

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 緊緊貼著瀏覽器 無縫隙 *//* 清除所有元素的默認邊距 */* {/* 清除所有元素的默認外邊距 */margin: 0;/* 清除所有元素的默認內邊距 */padding: 0;}/* 設置 寬 高 背景色 */.header {height: 100px;background-color: black;}.nav {width: 1000px;height: 50px;background-color: pink;}.main {width: 1000px;height: 1000px;background-color: skyblue;}.footer {height: 150px;background-color: purple;}/* 讓塊級盒子在瀏覽器中水平居中對齊 */.center {margin: auto;}</style>
</head><body><!-- 頭部內容 --><div class="header"></div><!-- 導航欄 --><div class="nav center"></div><!-- 主體部分 --><div class="main center"></div><!-- 底部內容 --><div class="footer"></div>
</body>

【3】實際效果

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/bicheng/96203.shtml
繁體地址，請注明出處：http://hk.pswp.cn/bicheng/96203.shtml
英文地址，請注明出處：http://en.pswp.cn/bicheng/96203.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！