简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 3月27号布局作业
Blogger Information
Blog 24
fans 0
comment 0
visits 15275
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
3月27号布局作业
小蚂蚁的博客
Original
631 people have browsed it

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title> 圣杯布局</title>

<style type="text/css">

.header, .footer{

/*宽度自适应*/

width:100%;

/*简化，头与底统一设置为60px*/

height: 60px;

/*背景颜色*/

background-color: lightgray;

    }


.footer {

/*底部二边不能有浮动元素*/

clear: both;

           }


.content{

/*设置总宽度*/

width: 1000px; 

/*设置高度*/

min-height: 100%;

/*背景*/

background-color: gray;

/*左右居中*/

margin: auto; 

/*文本居中*/

text-align: center;

line-height: 60px;

} 

                /*主体样式*/

.container{

width: 600px;

/*水平居中*/

margin: auto; 

/*背景颜色*/

background-color: yellow;

/*实现自身内容显示宽度

*/

padding: 0 200px;

/*包住浮动区块*/

overflow: hidden;

}

.container .mian{

/*mian的宽度*/

width: 100%;

/*最小高度 */

min-height: 650px;

/*浮动*/

float: left;

/*背景*/

background-color: lightgray;


}

.container .left{

/*宽度*/

width: 200px;

/*高度 */

min-height: 650px;

/*浮动*/

float: left;

/*左外边距离*/

margin-left: -100%;

/*相对定位及定位距离*/

position: relative;

left: -200px;

/*背景*/

background-color: lightgreen;

}

.container .right {

width: 200px; 

min-height: 650px;

float: left;

margin-left: -200px;

position: relative;

right: -200px;

background-color: wheat;}


</style>

</head>

<body>`-

<!--DOM结构-->

<!--头部—-->

<div>

<div>布局网站头部</div>

</div>

<div>

<!--中间-->            

<div>中间</div>

<div>左侧</div>

<div>右侧</div>

</div>

<!--底部-->

  <div>

      <div>底部</div>

  </div>

</body>

</html>

_LIME5WM467MV(%L20T(KP9.png


<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>双飞翼布局</title>

<style type="text/css">

.header, .footer{

/*宽度自适应*/

width:100%;

/*简化，头与底统一设置为60px*/

height: 60px;

/*背景颜色*/

background-color: lightgray;

    }

.content{

/*设置总宽度*/

width: 1000px; 

/*设置高度*/

min-height: 100%;

/*背景*/

background-color: gray;

/*左右居中*/

margin: auto; 

/*文本居中*/

text-align: center;

line-height: 60px;

}


.footer{

/*清除浮动*/

clear: both;

} 

                /*主体样式*/

.container{

/*宽度设置*/

width:1000px;

/*内部的区块水平居中*/

margin:auto;

  /*添加HIDDEN不让父级塌陷*/

overflow: hidden;

/*背景颜色*/

  background-color: yellow;


}

.wrap{

/*100%=1000*/

width:100%;

/*中间浮动*/       

    float: left;

    background-color: cyan;

    min-height: 600px;

}

.wrap .main {

min-height: 600px;

margin-left:200px;

margin-right:200px;

background-color: wheat;


}

.left{

   width: 200px;

   min-height: 600px; 

               /*左边浮动*/

float: left;

margin-left:-100%;

background-color: lightskyblue;


}

.right{

width: 200px;

min-height: 600px;

/*右边浮动*/

float: left;

margin-left:-20%;

background-color: lightgreen;

}


</style>

</head>

<body>

<!--DOM结构-->

<!--头部—-->

<div>

<div>布局网站头部</div>

</div>

<div>

<!--主体-->

<div>

<div style="min-height: 600px;

color:#000;text-align: center;">中间</div>

    </div>


<div>左侧</div>

<div>右侧</div>

</div>

<!--底部-->

  <div>

      <div>底部</div>

  </div>

</body>

</html>

终结：

个人觉得要掌握这两种布局可能还要反复复习几遍才可使用！还有很多布局中浮动还有移动方向及移动距离数值要计算清楚，要不然像我一样双飞翼布局中花了几个小时才能写完！个人总结这节课就是那么多！下面就是运行效果！

QQ截图20180329134014.png

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！