案例一：对基础选择器的使用【网页盒子】

【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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！