如何用div+css布局页面-转_html/css_WEB-ITnose
实际上div布局并不是什么高深的东西,如果你知道一点css就变得更简单了.首先我要说明几点:
1.这里的div并不是我们所说的层,虽然他们的标签都是
解成一个容器,它可以放文字,图片,表格等等.
2.用div布局必须对页面的结构进行准确的分析,当然用table也要分析页面结构.用div要分清上下,左右,实际上div布局也只有上下,左右.分析结构要先整体再部分,先分析整体的页面布局,例如我们一般的页面是上(banner和导航),中(页面主体内容,新闻等等),下(版权信息块)结构.
+------------------------------------+
| |
| header |
| |
|------------------------------------|
| |
| |
| midbody |
| |
| |
| |
| |
| |
|------------------------------------|
| |
| foot |
| |
+------------------------------------+
于是我们可以把整个页面放在一个大div内,于是我们可以这样来写
解释下上面的id是什么东西,id后面的内容是当前div以及div内部的东西用的css,这个css可
以规定div的宽度,大小,位置以及内部文字的大小、样式、颜色等等。
下面看下这几个css的代码:
/*页面主容器样式*/
#container{
width:90%;/*宽度*/
margin: 0 auto;/*边界auto为自动,这里用到了缩写形式意思为上下为0,
左右自动*/
}
/*页面头*/
#header{
width:780px;
height: 130px;
margin: 0 auto;
overflow:hidden;/*防止div被撑开,超过div大小就隐藏*/
background:#999999;/*背景色*/
}
/*页面中间*/
#midbody{
width:780px;
height: auto;
height:auto;
margin:0 auto;
overflow:hidden;
background: #990000;
}
/*页面底部*/
#foot{
width:780px;
height:100px;
margin:0 auto;
background: #99FFCC;
}
看完整体就要研究部分了,对于部分来说无非就是上下或左右结构了,例如下面的中间又分
为左右。
+------------------------------------+
| |
| header |
| |
|------------------------------------|
| | |
| | midbody |
| | |
|leftside| rightside |
| | |
| | |
| | |
| | |
|------------------------------------|
| |
| foot |
| |
+------------------------------------+
于是div结构可写成:
midbody中的leftside和rightside的css为:
#leftside{
width:220px;
float:left;/*该层位于外层的左边*/
height:500px;
background:#167692;
}
#rightside{
width:558px;
height:500px;
float:right;/*该层位于外层的右边*/
background: #CCCC00;
}
如果是这样的结构:
+------------------------------------+
| |
| header |
| |
|------------------------------------|
| | rightside |
| | rtop |
| | |
|leftside|---------------------------|
| | |rbottom |
| | left | right |
| | | |
| | | |
|------------------------------------|
| |
| foot |
| |
+------------------------------------+
则div结构为:
css为:
#rtop{
width:558px;
height:200px
margin:0 auto;
background: #CCCC00;
}
#rbottom{
width:558px;
height:300px;
margin:0 auto;
background: #CCee00;
}
#left{
width:258px;
float:left;
height:300px;
background: #CCCCed;
}
#rightside{
width:300px;
height:300px;
float:right;
background: #Cdfd00;
}
应该很清楚了吧?只要看懂了最外层的到里面都是一样的道理。
源文件在附件里(index1.html为以上上所说样式,index.html为用div画边框线的样式)
下载附件:div.rar
声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
相关文章
相关视频
专题推荐
-
独孤九贱-php全栈开发教程
全栈 170W+
主讲:Peter-Zhu 轻松幽默、简短易学,非常适合PHP学习入门
-
玉女心经-web前端开发教程
入门 80W+
主讲:灭绝师太 由浅入深、明快简洁,非常适合前端学习入门
-
天龙八部-实战开发教程
实战 120W+
主讲:西门大官人 思路清晰、严谨规范,适合有一定web编程基础学习
推荐阅读
-
div+css页面布局_html/css_WEB-ITnose
-
【转】Div+CSS布局入门教程_html/css_WEB-ITnose
-
[转]DIV+CSS瀑布流布局浅析_html/css_WEB-ITnose
-
(转)div+css布局时 ,response.write()会改变布局的问题_html/css_WEB-ITnose
-
Div+CSS布局入门教程2 页面顶部制作_html/css_WEB-ITnose
-
div+css 页面布局居中_html/css_WEB-ITnose
-
如何用DIV+CSS来构建内嵌页面跟随按钮变化_html/css_WEB-ITnose
-
div+css布局入门[转]_html/css_WEB-ITnose
-
div+css网页布局小结 【转】_html/css_WEB-ITnose
-
Div+CSS布局入门教程2 页面顶部制作_html/css_WEB-ITnose
网友评论
文明上网理性发言,请遵守 新闻评论服务协议
我要评论