成都企业门户网站建设,宁波网站制作与推广价格,wordpress轻社区模板,传奇世界手游官网本章主要探讨 HTML5 中 CSS 早期所使用的传统布局#xff0c;很多情况下#xff0c;这些布局方式还是非常有用的。一#xff0e;布局模型在早期没有平板和智能手机等移动设备大行其道的时期#xff0c;Web 页面的设计主要是面向PC 端电脑分辨率展开的。这种分辨率比例比较单… 本章主要探讨 HTML5 中 CSS 早期所使用的传统布局很多情况下这些布局方式还是非常有用的。一布局模型在早期没有平板和智能手机等移动设备大行其道的时期Web 页面的设计主要是面向PC 端电脑分辨率展开的。这种分辨率比例比较单一基本上只要满足最低分辨率设计即可。一般来说有 4:3、16:10、16:9 这样的主要分辨率。那么从这种比例上来看长度总是大于宽度的。从最低分辨率 1024 * 768 设计即可。为了使浏览器底部不出现滚动条需要减去适当的宽度比如减去 28最终固定长度设置为 996 即可。当然也有一些网站在近两年讲最低分辨率设置为 1280 减去滚动条宽度因为大显示器逐步主流。除了刚才所说的固定长度的布局还有一种是流体布局就是布局的长度为百分比比 如 100%。不管你是什么分辨率它都能全屏显示当然局限性也特别大只适合一些单一页面复杂的页面会随着不同浏览器产生各种阅读障碍。我们创建一个三行两列模型。并采用表格布局和浮动布局构建固定和流体布局的方式模型图如下二表格布局表格布局就是通过设定固定的单元格去除表格边框和填充实现的布局。当然这个布局非常不建议使用只是教学了解。表格应该用它最为语义的地方就是二维表的数据显示。1.固定布局HTML 部分 header asidesection footerCSS 部分body {margin:0;}table {margin:0 auto; width: 960px; border-spacing: 0;}.header {height: 120px; background-color: olive;}.aside {width: 200px; height: 500px; background-color: purple;}.section {width: 760px; height: 500px; background-color: maroon;}.footer {height: 120px; background-color: gray;}2.流体布局表格的固定布局改成流体布局非常简单只需要设置 table 为 100%即可。table { width: 100%;}三浮动布局浮动布局主要采用 float 和 clear 两个属性来构建。1.固定布局HTML 部分headerasidesectionfooterCSS 部分body { width: 960px; margin: 0 auto; color: white;}header {height: 120px;background-color: olive;}aside {width: 200px; height: 500px; background-color: purple; float: left;}section { width: 760px; height: 500px; background-color: maroon; float:right;}footer { height: 120px; background-color: gray; clear:both;}2.流体布局流体布局只要更改 body 元素的限定长度为 auto 或 100%。然后左右两列分别设置 20%和 80%即可。CSS 部分body {width: auto;}aside {width: 20%;}section {width: 80%;}如果您觉得有用记得在下方点赞、关注、留言小编会定期奉 上更多的惊喜哦您的打赏支持才是小编继续努力的动力么么哒。每日分享在学习过程中总结的学习经验学习笔记笔试题HTMLCSSJavaScriptjQuery教程Vue教程PHP教程TinkPHP教程等望大家能以学习为目的每天阅读一篇文章了解身边的技术陪有梦想的人一起成长
