资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

CSS中页面布局

这篇文章主要介绍CSS中页面布局,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

专注于为中小企业提供成都网站制作、网站设计服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业南岔免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了数千家企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。

一、左右两列布局

1、代码如下





两列布局


*{
padding: 0;
margin: 0;
}
body{
min-width: 600px;
}
.lef{
width: 100px;
height: 400px;
background: hotpink;
float: left;
}
.rig{
height: 400px;
background: yellowgreen;
margin-left: 50px;
/*给right开启BFC
利用BFC的特性:
bfc的区域不会与浮动的box重叠*/

/* 溢出内容部分被切割,所以使用省略号表示 */
overflow: hidden;
/*出现省略号需要四个设置:
* display: block;
* overflow: hidden;
* white-space: nowrap;
* text-overflow: ellipsis
* */
/* white-space: nowrap; */
/* text-overflow: ellipsis; */
}
.con{
width: 300px;
margin: 0 auto;
}




left
lzprightrightrightrightrightrightrightrightrightrightrightrightrightright  rightrightrightrightrightrightrightrightrightrightrightrightrightright  rightrightrightrightrightrightrightrightrightrightrightrightrightright  rightrightrightrightrightrightrightrightrightrightrightrightrightright 

效果如下:

CSS中页面布局

2、必要说明

外层容器con如果为固定宽度,right元素的overflow: hidden;是必须的,否则会出现rig中的字体不在rig里面。

外层容器con宽度如果是100%,或者默认,此时right元素的overflow: hidden;可有可无,页面不会因此受到影响。

二、粘连布局

1、代码如下:






粘连布局


*{
padding: 0;
margin: 0;
}
html, body{
height: 100%;
}
.wrap{
/* 设置wrap的最小高度,当main元素中的内容较少或者为空时,也能保持100%高度 */
min-height: 100%;
background: yellowgreen;
text-align: center;
}
.main{
/*main的height值由内容决定*/
/*当内容不足一屏时,下面的设置不会撑开父元素wrap,此时wrap的min-height设置生效,
* 当内容刚好一屏时,下面的设置开始撑开父容器,其height值为100%+50px。
* 拉开这50px的原因是防止footer遮盖住main内容,这个值不是固定死的,由footer的高度值决定
* 为footer向上填充margin-top: -50px;做准备
* */
padding-bottom: 50px;
}
.footer{
height: 50px;
line-height: 50px;
background: deeppink;
text-align: center;
margin-top: -50px;
}





mainmainmainmain
mainmainmainmain
mainmainmainmain
mainmainmainmain
mainmainmainmain
mainmainmainmain
mainmainmainmain
mainmainmainmain
mainmainmainmain
mainmainmainmain
mainmainmainmain
mlzpain




footer


CSS中页面布局

三、双飞翼布局





双飞翼三列布局

/*清除浏览器默认样式*/
*{
padding: 0;
margin: 0;
}
/*设置body的最小宽度*/
body{
min-width: 600px;
}
/*左浮动*/
.fl{
float: left;
}
/*双飞翼三列布局*/
.mid{
width: 100%;
}
.lef{
width: 200px;
background: mediumpurple;
margin-left: -100%;
}
.rig{
width: 200px;
background: orangered;
margin-left: -200px;
}
.inn_mid{
margin: 0 200px;
background: pink;
}
/*等高布局*/
/* 先使子元素溢出父盒子范围,然后在父盒子中设置overflow:hidden;
清除溢出部分,从而由原来的不等高达到等高效果 */
.mid, .lef, .rig{
padding-bottom: 10000px;
margin-bottom: -10000px;
}
.con{
border: 5px solid deepskyblue;
overflow: hidden;
}






middle
middle
middle
left right

效果如下:

CSS中页面布局

以上是“CSS中页面布局”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!


当前标题:CSS中页面布局
本文URL:http://cdkjz.cn/article/ppgish.html
返回首页 了解更多建站资讯
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

业务热线:400-028-6601 / 大客户专线   成都:13518219792   座机:028-86922220