【div+css网页布局详解】
前言:
网页布局是制作一个网页的第一步也是最重要的一步,今天来详细谈一下使用div+css布局的方法。
用dw编写网页的时候是可以通过两种方法的,一是图形界面,二是代码,初学的话可以用图形界面,学的差不多的时候使用代码更能提高效率。
因为现在css3和之前css2有较大改动,咱们先从css2的说起吧。
(笔者采用的是dreamweaver cs6,破解版下载地址:http://www.aa25.cn/download/954.shtml)
一、单列布局
一个网页编写手先要搭一个框架,就像下图样:
简单把网页分成了4部分,header标题部分,nav导航部分,article主体,footer注脚
这样的就是单列布局。
通过div建立这4中结构,然后css布局、添加样式
使用dw快速建立div如下图:
以往建立这种结构直接用div,通过id找到这个div进行布局,
点图右的新建按钮,建立css样式,注意中间的select Type ,选择样式的规则,这个是直接通过id选择的,id就想一个身份证,每个的都不一样,当然根据情况
也可以选择css类选择器,伪类选择器等等
在确定弹出的页面中设置css样式:
我们给刚才的布局添加颜色,并设置固定大小宽度高度结果如下:
发现上面和左面有两处白边,这中问题也是新手容易疑惑的,其实这是css的默认值,有很多类似这样的,
把所以一般在写网页时先把一些属性都进行初始化。像这样的写法:body { margin:0 auto; font-size:12px; font-family:Verdana; line-height:1.5;}
ul,dl,dd,h1,h2,h3,h4,h5,h6,form,p { padding:0; margin:0;}
而这里取消白边只需要写:body { margin:0}
所有代码如下:
<span style="font-size:18px;color:#006600;"><strong><!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <style type="text/css"> #header { background-color: #0F9; height: 100px; width: 500px; } #nav { background-color: #F00; height: 50px; width: 500px; } #article { background-color: #93C; height: 300px; width: 500px; } #footer { background-color: #F99; height: 50px; width: 500px; } </style> </head> <body> <div id="header">header</div> <div id="nav">nav</div> <div id="article">article</div> <div id="footer">footer</div> </body> </html></strong></span>上面是固定宽度,如要要让宽度浏览器大小变化而变化,采用%单位即可,如:width:70%
使div居中的属性:margin属性改为 auto
上面是html4和css2的写法。
在html5中因为加入了新的结构标签 很多地方不需要写div这个块级结构,而是直接用<header><nav>等这种标签,加css时可以通过类选择器直接添加
<span style="font-size:18px;color:#006600;"><strong><header>header</header> <nav>nav</nav> <article>article</article> <footer>footer</footer></strong></span>
二、多列布局
因为div为块级元素,故名思议,一块一块的,而且一块占一行,如果要一行中有多个块,就要用css调成多列布局
显示如下效果:
代码:
<span style="font-size:18px;color:#006600;"><strong><!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <style type="text/css"> #left { background-color: #3FC; float: left; height: 400px; width: 100px; } #center { background-color: #9C0; float: left; height: 400px; width: 100px; } #right { background-color: #F9F; height: 400px; width: 100px; float: left; } </style> </head> <body> <div id="left">header</div> <div id="center">nav</div> <div id="right">article</div> </body> </html> </strong></span>css2中的方法是:给div加浮动属性,
在box中将float属性设置为left
float: left;
这种方式有一个坏处:比如你发了一篇文章,用float把这篇文章分了3列,你在任意一列增加内容后,这一列就会长于其他列,这样修改的话就会十分麻烦。
css3中新加的多列布局和盒布局完美的解决了这个问题。
先使用盒布局来看下代码,效果和上图一样,可以自己实现一下:
<span style="font-size:18px;color:#006600;"><strong><!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <style type="text/css"> #layout{ display: -moz-box; display: -webkit-box; } #left { background-color: #3FC; height: 400px; width: 100px; } #center { background-color: #9C0; height: 400px; width: 100px; } #right { background-color: #F9F; height: 400px; width: 100px; } #left,#center,#right{ -moz-box-sizing:border-box; -wdbkit-box-sizing:border-box; } </style> </head> <body> <div id="layout"> <div id="left">header</div> <div id="center">nav</div> <div id="right">article</div> </div> </body> </html> </strong></span>
以上的这种盒布局可以实现css2中float+position布局一样的效果,而且可以自动实现对齐不会出现float的那个问题。
下面来看一下多栏布局的实现:
就像例子中实现的一样,多栏布局主要适用于文章中,可以进行任意修改而不改变网页的美观。当然这种布局也有局限性 :每栏宽度都相等。
而且你要写出栏的总宽度,然后需要几栏它会自动平均分配。
代码如下:
<span style="font-size:18px;color:#006600;"><strong><!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <style type="text/css"> #article{ width:800px; -moz-column-count:3; -webkit-column-count:3; } </style> </head> <body> <div id="article"> (节省篇幅,文章内容略) </div> </body> </html> </strong></span>
好了,前面说了div+css的单栏布局和多栏布局,布局基本就差不多了,因为div是可嵌套的,所以一个div里面细分的话还是脱离不了这两种。
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。