新建一个html文件 ， 定名为test.html ， 用于讲解div+css结构的根基流程 。
文章插图
2在test.html文件内 ， 对body进行样式初始化 ， 设置外边距margin为0 ， 内边距padding为0 ， 同时利用text-align设置文字居中 。
文章插图
3在test.html文件内 ， 为了讲解便利 ， 设置所有的div高度为200px ， 内容的颜色为红色 。
文章插图
4在test.html文件内 ， 利用div建立网页的头部 ， 利用margin:0 auto设置div居中 ， 同时设置其宽度为800px ， 布景颜色为灰色 。
文章插图
5【div+css布局的基本流程】在test.html文件内 ， 利用div建立网页的中部 ， 利用margin:0 auto设置div居中 ， 同时设置其宽度为800px 。
文章插图
6在test.html文件内 ， 在网页的中部 ， 建立两个div ， 用于将中部为两部门 ， 每一个部门宽度为50% ， 左部门利用float:left设置左浮动 ， 右部门利用float:right设置右浮动 。
文章插图
7在test.html文件内 ， 利用div建立网页的底部 ， 利用clear:both断根上面div的浮动 ， 避免影响底部的结构 。 同时 ， 利用margin:0 auto设置div居中 ， 同时设置其宽度为800px ， 布景颜色为#000fff 。
文章插图
8在浏览器打开test.html文件 ， 查看实现的结果 。
文章插图
以上内容就是div+css布局的基本流程的内容啦 ， 希望对你有所帮助哦！
推荐阅读
- 如何用手机遥控电视
- NSSD篇 免费的学术期刊搜索平台
- 微信小程序的JS 交互逻辑该如何处理
- Excel INT函数的使用方法
- Windows10系统电脑画图3D绘制倾斜的箭形图标
- 为ppt添加自己的专用logo
- 我的世界青金石获得
- 新注册的微软账户首次开启Windows 预览体验计划
- 怎样搜索电脑中的文件
- win10系统最简单有效的C盘系统清理办法！！！