DIV+CSS网页设计标准之一列式布局

自由自在 · 发表于 2011-9-19 15:04:30

今天学习到的内容主要是一列式布局与一列式多行布局。

看给大家看一下成品图：

一列式居中

一列式多行居中

下面就开始讲如何来实现这种效果与在制作中的一些小细节。

好了，下面开始我们的DIV+CSS之路吧，首先要用到的软件，Dreamweaver网页制作软件，相信很多人都会用哪，在这里就不讲如何使用了。

一列式居中：

首先我们要新建一个网页

大概的建立方法就是这样，按照上面的一到三步就可以了。注意的是第三步，要选择XHTML 1.0，现在我要主要讲得是这个文档类型。

接下来，就新建一个DIV标签，在新建这个标签后，会弹出一个窗口

上图为在新建DIV后，弹出的一个窗口。然后给这个DIV命名，然后点确定。

新建成功能，就会在界面上面看到一个“此处显示id”buju”的内容“几个字，然后选中这个buju标签。（小技巧：在下面有一个状态栏，可以看到<body><#buju>两个，你点一下<#buju>也可以选中buju标签）然后点新建CSS样式。

新建CSS样式一般在右下角，看图中的1号，新一下，就是弹出一个新建CSS规则出来，如2号。然后选择“高级（ID、伪类选择器等）”定义在选择“新建样式表文件”。然后点确定。就会弹出下图：

在这里面，在文件名处给新建的CSS取一个名字，大家有可能看到我上面有两个文件夹，CSS和image两个，一个是用来放CSS样式表的，一个是用来放图片的。（小技巧：这样做是为了能够很好的管理自己的文件，你也要这样做）。最后把新建设的CSS样式表保存到CSS文件夹下面。就会弹出下面：

这个是CSS规则定义编辑器，在这里选择背景，然后给背景填一个颜色。然后又选择方框

给方框一个宽度和高度，在边界处，右和左选择自动。（小技巧：在边界中选择自动后，不管你如何调整浏览器的宽和高，这个方框始终会在中间位置）

在上面的所以都设置好之后，是不是你的这个绿色的小方框，就在网页编辑器的中间了呢。

一列式多行居中：

大家都知道，一个网站是有头部、主体部分和尾部组合而成的。所以，多列式也是应用到这些当中来的。

大家有可能已经看出了，在三个DIV标签的方框，没有间隔的缝隙，如何让它们之间有缝隙，如下图的设置

，

只须要设置一下，边界的上边界就OK了。

好了在这节课中讲的一列式与多列式的设置方法就讲到这里，在学习了上面的以后，一定要多动手去实践一下，再就是要学会举一反三。

7天学会DIV+CSS网页设计标准之一列式（视频教程）

转载时请注明出处：爱站长网 www.aizhanzhang.com

梁委 · 发表于 2011-10-1 15:45:57

宁夏租车网：热线:400-685-0951 提供宁夏银川租车、宁夏银川旅游租车、宁夏银川租车公司、宁夏银川汽车租赁、宁夏银川旅游租车公司、宁夏银川租车网、宁夏银川汽车租赁公司、宁夏银川旅游大巴租车、宁夏银川租车包车、宁夏银川机场接送、宁夏银川会议租车、宁夏银川豪华大巴出租、宁夏银川旅游大巴租车、宁夏银川旅游租车、宁夏银川金龙大巴出租、宁夏银川大学城租车、宁夏银川旅游巴士租赁、宁夏银川会议包车、欢迎各大企业事单位、旅行社、来电洽谈！车型多！服务好！价格优！

宁夏租车网是一家正规的租车公司，专门为公司、集体及个人提供宁夏商务租车、宁夏企业包车及旅游接待用车的专业性汽车租赁公司。
1、宁夏租车网商务租车:我司司机熟悉深圳市内路线,服务周到。
2、宁夏租车网会议租车:我司对组织安排各种会议接待车队有着丰富的经验.
3、宁夏租车网机场接送:为你提供干净,准时舒适温馨的车辆接送服务.
4、宁夏租车网企业包车:长期合同,可配司机和不配司机,可根据合同为您购置新车.
5、宁夏租车网班车服务:可以根据客人要求制定合理路线.按时到达.
欢迎大家咨询 400-685-0951 13409510309 QQ：1183942118

以沐 · 发表于 2012-6-15 10:02:14

用层做网页真的很方便的，很好用

宫小燕 · 发表于 2012-7-9 10:59:01

一列式多行居中
下面就开始讲如何来实现这种效果与在制作中的一些小细节。
好了，淘宝刷钻下面开始我们的DIV+CSS之路吧，首先要用到的软件，Dreamweaver网页制作软件，相信很多人都会用哪，在这里就不讲如何使用了。
一列式居中：

xinsang · 发表于 2012-7-10 13:50:34

当你默默离开我时，我痛苦万分，不知如何是好，看着你的背影远去，我恨自己，都是我的错……早起一点就赶上车了

看男科 · 发表于 2012-7-10 14:07:49

顶！！！

布局不能定死了，很多网站板块需要自己设计，这样才能做出还看的网站。

春之素 · 发表于 2012-7-23 10:12:25

都木有图啊求解释·······

		自动登录	找回密码
密码			立即注册

[教程] DIV+CSS网页设计标准之一列式布局

评分

站长推荐 /1