資訊專欄INFORMATION COLUMN
摘要：表格布局表格布局雜亂無章雜亂無章雜亂無章凝膠布局凝膠布局雜亂無章雜亂無章雜亂無章圖中例子是引用與一書為本人自己發揮所寫，可能比較膚淺，大牛可繞過或者多指點指點。。。
表格布局
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哈哈~
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113206.html
摘要：表格布局表格布局雜亂無章雜亂無章雜亂無章凝膠布局凝膠布局雜亂無章雜亂無章雜亂無章圖中例子是引用與一書為本人自己發揮所寫，可能比較膚淺，大牛可繞過或者多指點指點。。。 表格布局 html: 表格布局 ...
摘要：表格布局表格布局雜亂無章雜亂無章雜亂無章凝膠布局凝膠布局雜亂無章雜亂無章雜亂無章圖中例子是引用與一書為本人自己發揮所寫，可能比較膚淺，大?？衫@過或者多指點指點。。。 表格布局 html: 表格布局 ...
摘要：中有個重要的概念，搞懂可以讓我們理解中某些原本詭異的地方。簡介在解釋之前，先說一下文檔流。我們常說的文檔流其實分為定位流浮動流普通流三種。使用包含浮動元素注意，這里觸發并不能阻止其它形式的脫離文檔流的元素覆蓋正常流元素。 CSS中有個重要的概念BFC，搞懂BFC可以讓我們理解CSS中某些原本詭異(??)的地方。 1. 簡介 在解釋BFC之前，先說一下文檔流。我們常說的文檔流其實分為定位...
摘要：方法一為父元素添加方法二同時浮動元素方法三添加非浮動的清除元素定位布局的核心是屬性，對元素盒子應用這個屬性，可以相對于它在常規文檔流中的位置重新定位。絕對定位絕對定位會把元素徹底從文檔流中拿出來，然后相對于其他元素默認是定位上下文定位。 1.盒模型 盒模型，就是 瀏覽器為頁面中的每個 HTML 元素生成的矩形盒子。 這些盒子們都要按照 可見版式模型（visual formattin...
閱讀 2512·2023-04-25 17:27
閱讀 1824·2019-08-30 15:54
閱讀 2368·2019-08-30 13:06
閱讀 2979·2019-08-30 11:04
閱讀 746·2019-08-29 15:30
閱讀 729·2019-08-29 15:16
閱讀 1732·2019-08-26 10:10
閱讀 3602·2019-08-23 17:02
