摘要:表格布局表格布局杂乱无章杂乱无章杂乱无章凝胶布局凝胶布局杂乱无章杂乱无章杂乱无章图中例子是引用与一书为本人自己发挥所写,可能比较肤浅,大牛可绕过或者多指点指点。。。
表格布局
html:
表格布局 杂乱无章 杂乱无章
css:
* { margin: 0px; padding: 0px; } html, body { height: 100%; overflow: hidden; background-color: gray; } header { height: 100px; background-color: bisque; margin: 10px 10px 0 10px; } nav { height: 50px; background-color: blueviolet; margin: 10px 10px 0 10px; } .content { position: absolute; top: 170px; bottom: 100px; width: 100%; } .tablecontent { display: table; border-spacing: 10px; height: 100%; width: 100%; } .tablerow { display: table-row; } #left { display: table-cell; background-color: darkmagenta; width: 20%; vertical-align: top; padding: 15px; margin: 0 0 0 10px; } #main { display: table-cell; background-color: dodgerblue; width: 60%; padding: 15px; vertical-align: top; } #right { display: table-cell; background-color: lightcoral; width: 20%; padding: 15px; vertical-align: top; } .foot { position: fixed; bottom: 0px; right: 0px; width: 100%; height: 100px; } footer { height: 100px; background-color: brown; margin: 0 10px 10px 10px; }凝胶布局
html:
凝胶布局 杂乱无章 杂乱无章
css:
* { margin: 0px; padding: 0px; } html, body { width: 800px; height: 100%; overflow: hidden; background-color: whitesmoke; margin-left: auto; margin-right: auto; } header { height: 100px; background-color: bisque; margin: 10px 10px 0 10px; } nav { height: 50px; background-color: blueviolet; margin: 10px; } .content { position: absolute; top: 180px; bottom: 110px; width: 800px; overflow: hidden; } #left { float: left; background-color: darkmagenta; width: 24%; margin: 0 0 10px 10px; height: 100%; } #main { position: absolute; left: 210px; right: 210px; background-color: dodgerblue; height: 100%; } #right { float: right; background-color: lightcoral; width: 24%; margin: 0 10px 0 0; height: 100%; } footer { position: absolute; bottom: 0; width: 780px; height: 100px; background-color: brown; margin-left: 10px; margin-right: 10px; } article { vertical-align: top; padding: 15px; } .clearfix { zoom: 1; } .clearfix:after { content: ""; display: block; clear: both; overflow: hidden; }
图中例子是引用<>一书,为本人自己发挥所写,可能比较肤浅,大牛可绕过或者多指点指点。。。O(∩_∩)O哈哈~
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/94716.html
摘要:表格布局表格布局杂乱无章杂乱无章杂乱无章凝胶布局凝胶布局杂乱无章杂乱无章杂乱无章图中例子是引用与一书为本人自己发挥所写,可能比较肤浅,大牛可绕过或者多指点指点。。。 表格布局 html: 表格布局 ...
摘要:表格布局表格布局杂乱无章杂乱无章杂乱无章凝胶布局凝胶布局杂乱无章杂乱无章杂乱无章图中例子是引用与一书为本人自己发挥所写,可能比较肤浅,大牛可绕过或者多指点指点。。。 表格布局 html: 表格布局 ...
摘要:中有个重要的概念,搞懂可以让我们理解中某些原本诡异的地方。简介在解释之前,先说一下文档流。我们常说的文档流其实分为定位流浮动流普通流三种。使用包含浮动元素注意,这里触发并不能阻止其它形式的脱离文档流的元素覆盖正常流元素。 CSS中有个重要的概念BFC,搞懂BFC可以让我们理解CSS中某些原本诡异(??)的地方。 1. 简介 在解释BFC之前,先说一下文档流。我们常说的文档流其实分为定位...
摘要:方法一为父元素添加方法二同时浮动元素方法三添加非浮动的清除元素定位布局的核心是属性,对元素盒子应用这个属性,可以相对于它在常规文档流中的位置重新定位。绝对定位绝对定位会把元素彻底从文档流中拿出来,然后相对于其他元素默认是定位上下文定位。 1.盒模型 盒模型,就是 浏览器为页面中的每个 HTML 元素生成的矩形盒子。 这些盒子们都要按照 可见版式模型(visual formattin...
阅读 2411·2021-11-23 09:51
阅读 469·2019-08-30 13:59
阅读 1783·2019-08-29 11:20
阅读 2504·2019-08-26 13:41
阅读 3207·2019-08-26 12:16
阅读 704·2019-08-26 10:59
阅读 3251·2019-08-26 10:14
阅读 561·2019-08-23 17:21