經典css布局案例
1、css浮動
包括：塊元素和行內元素、display屬性、浮動
float
。塊元素和行內元素的區別是：塊元素有大小，而行內元素沒有；塊元素預設單獨佔一行，行內元素都在同一行。
既然塊元素和行內元素有各自的特點，當我們需要來回切換他們的模式時，該怎麼做呢？例如想要塊元素都按行排列。這時，就引入了display屬性，它是規定元素應該生成的框的型別，即可以讓塊元素和行內元素之間進行切換。
2、展示效果
3、重難點配置
浮動：三個div，前兩個浮動，後面不浮動。（
clear:both;
）；左邊固定，右側滿鋪。
外邊框顯示含義：margin:0px 100px 0px 100px;
4、目錄結構
源**演示
top-div網頁頭部
second-div網頁第二部分
line31-div
line32-div
line41-div網頁中部
line42-div網頁中部
1line43-div網頁中部
2line44-div網頁中部
3line51-div
line52-1-div網頁
line52-2-div網頁
line52-3-div網頁
line52-4-div網頁
line52-5-div網頁
line6-div
line7-div
樣式格式：
.top-div{
background-color: #333333;
width: 100%;
height: 50px;
color: #b0b0b0;
text-align: center;
line-height: 50px;
.second-div{
width: 100%;
height: 127px;
text-align: center;
line-height: 127px;
.line31-div{
height: 293px;
text-align: center;
line-height: 293px;
background-color: #000099;
/* margin:0px 100px 0px 100px; //上,右
,下,左
*/margin-left: 6%;
width: 10%;
float: left;
margin-bottom:10px;
.line32-div{
height: 293px;
width: auto;
text-align: center;
line-height: 350px;
margin-right: 6%;
overflow: hidden; background-color: #0066ff;
margin-bottom:10px;
.line41-div{
clear: both;
margin-left: 6%;
height: 150px;
width: 10%;
background-color: #660066;
float: left;
.line42-div{
margin-left: 100px;
height: 150px;
margin-left: 0.6%;
width: 25.4%;
float: left;
overflow: hidden; background-color: #ffcc66;
.line43-div{
margin-left: 0.6%;
margin-right: 0.6%;
height: 150px;
width: 25.4%;
background-color: #ff3366;
float: left;
.line44-div{
margin-right: 6%;
height: 150px;
width: 25.4%;
background-color: #ccffff;
float: left;
.line5-div{
clear: both;
height: 350px;
/* margin:0px 100px 0px 100px; //上,右
,下,左
*/margin: 170px 6% 10px 6%;
.line51-div{
height: 100px;
width: 100%;
text-align: center;
line-height: 100px;
.line52-div{
height: 350px;
.line52-1-div{
background-color: red;
height: 100%;
float: left;
width: 19.46%;
.line52-2-div{
background-color: #bfbfbf;
height: 100%;
float: left;
margin-left: 0.6%;
width: 19.46%;
.line52-3-div{
background-color: #f1f1f1;
height: 100%;
float: left;
margin-left: 0.6%;
width: 19.46%;
.line52-4-div{
background-color: #f1f1f1;
height: 100%;
float: left;
margin-left: 0.6%;
width: 19.46%;
.line52-5-div{
background-color: #bfbfbf;
height: 100%;
float: left;
margin-left: 0.6%;
width: 19.46%;
.line6-div{
height: 100px;
text-align: center;
line-height: 100px;
background-color: #333333;
margin: 110px 6% 0px 6%;
.line7-div{
margin-top: 10px;
height: 200px;
width: 100%;
background-color: #d7d7d7;
.line8-div{
display: flex;
justify-content: center;
align-items: center;
.line8-div img{
width: 100%;
.line91-div{
display: flex;
justify-content: center;
align-items: center;
.line91-div img{
width: 100%;
CSS經典布局 聖杯布局
廢話不多說，先上全部的 body container container column center left right footer ie6 fix html left 首先就是建立大體的布局，header footer container 給 container 乙個預設的padding le...
CSS布局經典問題
brianway.github.io 2017 05 18 css layout classical problems 本文主要對 css 布局中常見的經典問題進行簡單說明，並提供相關解決方案的參考鏈結，涉及到三欄式布局，負 margin，清除浮動，居中布局，響應式設計，flexbox 布局，等等。...
css經典布局 聖杯布局 雙飛翼布局 經典寫法
我第一次聽到這兩個布局的時候以為這是兩個不一樣的布局，但我現在覺得他倆是一樣的，就是左右兩欄等寬，中間自適應的布局，沒有flex的時候想要實現自適應就需要用一些獨特的方法，也就是我今天介紹的經典寫法。當然如今實現左右兩欄等寬，中間自適應已經很方便啦。後邊我會補一種用flex實現的方法 html部分 ...