网站开发与设计公司,福建seo搜索引擎优化,界面设计优秀作品欣赏,WordPress去除index插件请珍惜小编劳动成果#xff0c;该文章为小编原创#xff0c;转载请注明出处。 摘要#xff1a; CSS3相对CSS2增加了一些新的布局方式#xff1a;多栏布局和盒子布局。在这篇文章中#xff0c;将对CSS2的布局进行简单的回忆#xff0c;并总结CSS3的布局方式。DIVCSS其实是… 请珍惜小编劳动成果该文章为小编原创转载请注明出处。 摘要 CSS3相对CSS2增加了一些新的布局方式多栏布局和盒子布局。在这篇文章中将对CSS2的布局进行简单的回忆并总结CSS3的布局方式。 DIVCSS其实是错误的叫法 关于当前的页面布局很多人都习惯于叫做DIVCSS,其实这是一种错误的叫法标准叫法应该叫做XHTMLCSS. 这是为什么呢传统的页面布局采用的是Table布局即TableCSS后来出现了使用DIV的布局方式所以人们就把它叫做DIVCSS,而且有些人认为用DIVCSS制作的页面才是标准页面其实这句话是比较狭隘的。 那什么是标准页面呢WEB标准由结构表现和行为三部分组成。其中结构话标准语言是XHTML和XML,表现化标准语言是CSS。因为XML比较复杂大多数浏览器都没有完全支持故不使用XML来实现页面布局所以标准的页面布局应该是符合WEB标准的页面布局即XHTMLCSS。 而XHTML中不仅仅只有DIV标签还有a,p,ul,li,dl,dt等等标签所以即使不使用DIV标签制作的页面也是标准页面XHTML的各个标签都有其功能并不是说只能用DIV去实现页面布局在一本书上有怎么一句话如果满屏都是DIV那也算不上标准页面了 所以说以后我们要尽可能的说XHTMLCSS而不是DIVCSS. CSS2时代的布局方式 简单点说CSS2时代是使用float的浮动属性来实现布局的。 layout.css /* CSS Document *//*基本信息*/
body{
margin:0px; /*外边距*/
text-align:center; /*文字居中对齐*/
background:#E1D0BB; /*背景色*/
}
/*页面层容器*/
#container{
width:80%;
height:100%;
margin-left:10%;
margin-right:10%;
background:#ABE0F1;
}
/*头部*/
#header{
width:100%;
height:15%;
margin:0px;
background:#FF0000;
}#logo{
float:left; /*浮动属性居左对齐使其可以在同一行显示*/
width:60%;
height:80%;
margin:0px;
background:#E18CDD;
clear:left; /*取消左侧浮动*/
}
#banner{
float:right; /*浮动属性居右对齐使其可以在同一行显示*/
width:38%;
height:80%;
margin:0px;
background:#8376D8;
clear:right; /*取消右侧浮动*/
}
#menu{
width:100%;
height:5%;
margin:0px;
background:#00FF00;
}
#pageBody{
width:100%;
height:70%;
margin:0px;
background:#00FFFF;}
#footer{
width:100%;
height:10%;
margin:0px;
background:#FFFF00;
} layout.html !DOCTYPE
html
head
meta charsetutf-8
title布局/title
link hrefstyle/layout.css relstylesheet typetext/css /
/headbody
div idcontainerdiv idheaderdiv idlogologo/divdiv idbannerbanner/divcontainer/divdiv idmenumenu/divdiv idpageBody/divdiv idfooterfooter/div
/div
/body
/html但是使用float实现布局会有一些缺点由于各个div是相互独立的所以在一个div中加入一些内容后会使得无法对齐CSS3提供了多栏布局和盒子布局来弥补这种缺点。 多栏布局 layout.css /* CSS Document *//*基本信息*/
body{
margin:0px; /*外边距*/
text-align:center; /*文字居中对齐*/
background:#E1D0BB; /*背景色*/
}
/*页面层容器*/
#container{
width:80%;
height:100%;
margin-left:10%;
margin-right:10%;
background:#ABE0F1;
}
/*头部*/
#header{
width:100%;
height:15%;
margin:0px;
background:#FF0000;
}#logo{
float:left; /*浮动属性居左对齐使其可以在同一行显示*/
width:60%;
height:80%;
margin:0px;
background:#E18CDD;
clear:left; /*取消左侧浮动*/
}
#banner{
float:right; /*浮动属性居右对齐使其可以在同一行显示*/
width:38%;
height:80%;
margin:0px;
background:#8376D8;
clear:right; /*取消右侧浮动*/
}
#menu{
width:100%;
height:5%;
margin:0px;
background:#00FF00;
}
#pageBody{
width:100%;
height:70%;
margin:0px;
background:#00FFFF;
-moz-column-count:4; /*多栏布局火狐浏览器中需要的格式表示列数*/
-moz-column-gap:10px; /*列之间的间隔*/
-moz-column-rule:1px solid red; /*在列之间加一条红色的线*/-webkit-column-count:4; /*多栏布局safari和chrome需要的格式*/
-webkit-column-gap:10px; /*列之间的间隔*/
-webkit-column-rule:1px solid red; /*在列之间加一条红色的线*/
}
#footer{
width:100%;
height:10%;
margin:0px;
background:#FFFF00;
} layout.html !DOCTYPE
html
head
meta charsetutf-8
title布局/title
link hrefstyle/layout.css relstylesheet typetext/css /
/headbody
div idcontainerdiv idheaderdiv idlogologo/divdiv idbannerbanner/divcontainer/divdiv idmenumenu/divdiv idpageBody内容省略/divdiv idfooterfooter/div
/div
/body
/html效果图 盒子布局 hezi.css /* CSS Document *//*基本信息*/
body{
margin:0px; /*外边距*/
text-align:center; /*文字居中对齐*/
background:#E1D0BB; /*背景色*/
}
/*页面层容器*/
#container{
display:-moz-box;
display:-webkit-box;
}
#left_side{
width:200px;
height:200px;
margin:20px;
padding:50px;
background-color:#FF0000}
#center_side{
width:200px;
height:200px;
margin:20px;
padding:50px;
background-color:#00FF00
}
#right_side{
width:200px;
height:200px;
margin:20px;
padding:50px;
background-color:#FFFF00;
}
#left_side,#center_side,#right_side{ /*实现盒子布局*/
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
#down_left{
-moz-box-flex:1; /*可根据内容自动调整大小实现弹性盒子此为火狐下的格式*/
-webkit-box-flex:1;
padding:20px;
margin:20px;
background-color:blue;
}
#down_left{
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}hexi.html !DOCTYPE
html
head
meta charsetutf-8
title布局/title
link hrefstyle/hezi.css relstylesheet typetext/css /
/headbody
div idcontainerdiv idleft_side百度/divdiv idcenter_side谷歌/divdiv idright_side淘宝/divdiv iddown_left亚马逊/div
/div
/body
/html效果图 如果想要让盒子垂直分部可以在将container改为 #container{
display:-moz-box;
display:-webkit-box;
-moz-box-orient:vertical; /*垂直分布*/
-webkit-box-orient:vertical;
} 这里仅给出了大致的布局方式关于更多的属性大家可以阅读相关的书籍和资料。 版权声明本文为博主原创文章未经博主允许不得转载。 转载于:https://www.cnblogs.com/dingxiaoyue/p/4931792.html
