找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 3642|回复: 6

[教程] 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取一个名字,大家有可能看到我上面有两个文件夹,CSSimage两个,一个是用来放CSS样式表的,一个是用来放图片的。(小技巧:这样做是为了能够很好的管理自己的文件,你也要这样做)。最后把新建设的CSS样式表保存到CSS文件夹下面。就会弹出下面:




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




给方框一个宽度和高度,在边界处,右和左选择自动。(小技巧:在边界中选择自动后,不管你如何调整浏览器的宽和高,这个方框始终会在中间位置)
在上面的所以都设置好之后,是不是你的这个绿色的小方框,就在网页编辑器的中间了呢。
一列式多行居中:
大家都知道,一个网站是有头部、主体部分和尾部组合而成的。所以,多列式也是应用到这些当中来的。




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



只须要设置一下,边界的上边界就OK了。
好了在这节课中讲的一列式与多列式的设置方法就讲到这里,在学习了上面的以后,一定要多动手去实践一下,再就是要学会举一反三。
7天学会DIV+CSS网页设计标准之一列式(视频教程)
转载时请注明出处:爱站长网  www.aizhanzhang.com

评分

参与人数 1金币 +10 收起 理由
光明使者 + 10 很给力!

查看全部评分

发帖求助前要善用【论坛搜索】功能,那里可能会有你要找的答案;

如何回报帮助你解决问题的坛友,好办法就是点击帖子下方的评分按钮给对方加【金币】不会扣除自己的积分,做一个热心并受欢迎的人!

发表于 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网页制作软件,相信很多人都会用哪,在这里就不讲如何使用了。
一列式居中:

发帖求助前要善用【论坛搜索】功能,那里可能会有你要找的答案;

如何回报帮助你解决问题的坛友,好办法就是点击帖子下方的评分按钮给对方加【金币】不会扣除自己的积分,做一个热心并受欢迎的人!

回复 支持 反对

使用道具 举报

发表于 2012-7-10 13:50:34 | 显示全部楼层 来自 中国–广西–桂林
当你默默离开我时,我痛苦万分,不知如何是好,看着你的背影远去,我恨自己,都是我的错……早起一点就赶上车了

发帖求助前要善用【论坛搜索】功能,那里可能会有你要找的答案;

如何回报帮助你解决问题的坛友,好办法就是点击帖子下方的评分按钮给对方加【金币】不会扣除自己的积分,做一个热心并受欢迎的人!

回复 支持 反对

使用道具 举报

发表于 2012-7-10 14:07:49 | 显示全部楼层 来自 中国–广东–珠海
顶!!!布局不能定死了,很多网站板块需要自己设计,这样才能做出还看的网站。

发帖求助前要善用【论坛搜索】功能,那里可能会有你要找的答案;

如何回报帮助你解决问题的坛友,好办法就是点击帖子下方的评分按钮给对方加【金币】不会扣除自己的积分,做一个热心并受欢迎的人!

回复 支持 反对

使用道具 举报

发表于 2012-7-23 10:12:25 | 显示全部楼层 来自 中国–河北–石家庄
都木有 图啊  求解释·······

发帖求助前要善用【论坛搜索】功能,那里可能会有你要找的答案;

如何回报帮助你解决问题的坛友,好办法就是点击帖子下方的评分按钮给对方加【金币】不会扣除自己的积分,做一个热心并受欢迎的人!

回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则 需要先绑定手机号

关闭

站长推荐上一条 /1 下一条

QQ|侵权投诉|广告报价|手机版|小黑屋|西部数码代理|飘仙建站论坛 ( 豫ICP备2022021143号-1 )

GMT+8, 2024-11-23 15:45 , Processed in 0.059560 second(s), 9 queries , Redis On.

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表