第十天　div+css网页标准布局实例教程（一）

共有 83 位网友发表了评论　我要评论..

geoe(60.222.*.*) 发表于：2011-08-28 00:19:55

老师我问下， 如果下载下来的PSD 有背景文件 还用切片么？ 特别对于比较复杂的背景图怎么切？ 切好了一个一个拼起来？

管理员回复：方便有多种，看自己习惯用哪种方法了吧

leeleewc(14.210.*.*) 发表于：2011-07-30 18:17:55

你好，我想问下，现在做网页可以用ps完全代替fireworks吗？ 因为看过一些教程都是用ps

管理员回复：是的

qykg007(222.243.*.*) 发表于：2011-07-12 18:13:59

你好，问下那个随机抽数程序怎么写啊？就是有个按钮，按下之后会有一组编号在随机转动，转到自己设置的时间或再按一下按钮时就会停下来出现一组抽中的编号，然后这组编号是跟预先设置的信息如图片等链接的，只要抽中任意一组编号就会在信息显示框里出现该编号所对应的内容信息，这个我画了个图，就是这个随机程序不知道怎么写，还有怎么跟所需链接的信息图片链接上！！求老师教教好吧！！

管理员回复：那个是程序实现的，找一些程序的站点提问吧

wei(125.88.*.*) 发表于：2011-06-30 21:27:56

老师，刚刚那个问题已经测试可以了。但是在遨游浏览器下还是不行，只要是切在同一张图上的，遨游都显示不出来。

管理员回复：你说是预览吗？那是图片路径问题。

wei(125.88.*.*) 发表于：2011-06-30 21:13:36

请问一下老师，为什么我整站下载之后，新建了站点，那些切在同一张图片的小图片都不会显示出来呢

管理员回复：不明白

531833998(219.128.*.*) 发表于：2011-06-26 14:01:03

版主，那个JAVA的脚本广告轮显，是怎么做的，能否解释下，还有怎么连接我要连接的网址，这个教程，跟不上哦，能不能带代码后面增加注释

管理员回复：那个幻灯是在网上下载的插件，里边的图片地址、文字、链接的参数，按他的格式填好就行了

531833998(219.128.*.*) 发表于：2011-06-26 13:59:08

这里面的图片广告能不能解释下，我看不懂，还有，这里面的设置，先设置CSS样式,还是先布局好DIV

管理员回复：图片广告不知道你哪里看不懂。两者同步进行吧

rtxcmgy(114.138.*.*) 发表于：2011-06-14 22:21:42

老师，我也是和一样的问题，也是复制你的代码后预览footer和上面的main是紧挨着的，你说是main的高度没有自适应，我想了下还是没想明白，怎么让main的高度自适应呢？

管理员回复：请看之前相关教程，已经讲过了

YangQiu(222.87.*.*) 发表于：2011-06-05 21:59:04

非常感谢老师的细致讲解 给我们初学者带来了不少的帮助 我想请问下老师 我做了整体布局后 预览时发现我的footer和main没有间隔开 这两个模块是挨着的 这是为什么呢

管理员回复：main高度没有自适应

cola523(122.30.*.*) 发表于：2011-06-04 15:20:52

管理员你好 新手报道，我用的是mac版火狐，为什么点击运行代码没有反应，请教一下。还有就是我不插入<div class="clearfloat"></div>这个代码， 直接在css的footer中插入chear：both可以吗

管理员回复：暂时不支持火狐；两者有些差别

pp552594996(219.157.*.*) 发表于：2011-06-04 12:34:17

站长你好，我想知道透明背景的切片是怎么弄的，还有导航上的切片是如何整合到一起的，我在下面弄的好久就是弄不好。。。。还有 你用的PS 貌似是完全汉化的 能提供个下载地址不？ O(∩_∩)O谢谢

管理员回复：1、新建一个文件，把背景隐藏掉，保存成gif格式背景就透明了。2、新建一个文件，把要放到一块的图片排到这个文件上。3、我用的ps是官方下载的简体中文版，非汉化版

birdcs(121.10.*.*) 发表于：2011-06-02 16:08:20

谢谢教程，想请教下站长为什么要加这2句清除浮动呢？ <div class="clearfloat"></div> .clearfloat {clear:both;height:0;font-size: 1px;line-height: 0px;}

管理员回复：为了避免某些情况下因浮动造成的页面错乱

rtxcmgy(114.138.*.*) 发表于：2011-05-31 23:53:10

站长，我有个问题，你这上面模块宽度是测量的。如果我新做个网页，怎样让这个网页在每台电脑，也就是显示器分辨率不同情况下都全屏显示啊？要满屏的哦,不是你做的这种两边有间隔的这种

管理员回复：宽度设置成100%就可以了呀

yanliming(111.164.*.*) 发表于：2011-05-30 14:50:30

真的很喜欢这个网站，就是不知道能不能多介绍一些背景图定位的事情，我看到第二个教程中很多都是background:url(../images/nav_bg.gif) right -163px no-repeat;我都不明白是什么意思

管理员回复：前边有一章节中有关于背景的介绍，这个很好理解，建议去看看css手册

weizai(125.88.*.*) 发表于：2011-05-25 23:34:52

老师您好！请问一下我下载了这个站点的信息后，建了一个站点后，其他都显示正常，但就是导航的按纽显示不出来？这是怎么回事呢？还有想请问一下，几张图片放在同一张图片的时候，套用的时候怎么知道套用的是图片里面的哪一张小图片呢？希望帮忙解答一下，不胜感激。

管理员回复：1、表述不清；2、背景图片定位，请查看css手册的解释

lky541(124.235.*.*) 发表于：2011-05-25 09:11:19

嘿嘿每天都来看一遍。真的很好。比一些视频的讲的还要详细！站长你真好

管理员回复：^_^

kankan980h(221.11.*.*) 发表于：2011-05-23 22:17:33

衷心的感谢站长的无私奉献~~ 在这我学会了很多知识~

管理员回复：欢迎常来

zzjylj(119.249.*.*) 发表于：2011-05-23 09:43:10

太好了非常细致，感谢老师毫无保留，不遗余力的教我们大家这么多东西

管理员回复：欢迎常来

xxchong(124.165.*.*) 发表于：2011-05-20 10:24:13

这么好的教程 让我有了学习的动力

管理员回复：欢迎常来

278580701(183.44.*.*) 发表于：2011-05-04 10:21:07

内容很强大 可惜不是视频 嘿嘿 顶你 谢谢

管理员回复：是的，不过图文已经说的很清楚了

lzh0427(125.119.*.*) 发表于：2011-04-24 21:34:55

站长能不能加个QQ号啊，有没有QQ群啊？谢谢了！

管理员回复：每页面都有呀

lzh0427(125.119.*.*) 发表于：2011-04-24 21:33:33

真是个不错的站点，是我见过的教程最棒，最清晰的！

管理员回复：谢谢啊

z7194203(120.32.*.*) 发表于：2011-04-24 19:11:51

特地注册了一个账号，一来是学习地，二来看到了老师你无私的贡献着你的才华，我为之敬佩。如果有不懂的地方还望多多指教啊！

管理员回复：欢迎常来

zhangzhengya(223.242.*.*) 发表于：2011-04-19 22:55:23

站长说的是哈.可是我觉得比最后三篇的那个实例比较难,所以能不能出个简单点的,前面的教程我都看过了而且都已经做过好几次拉.所以还是希望你能出点比较简单点的额.从容易到困难嘛.

管理员回复：如果前边章节都理解的话，这节一点都不难，这三节只是把前边的内容给综合起来

meiquguo(116.226.*.*) 发表于：2011-04-19 10:11:01

在网上飘了这么久，这是我见过的最干净的学习型网站。 真不知道站长是怎么实现盈利的，但是您这种互联网无私贡献的精神，真的让人敬佩。 而且在几乎评论都有您的回复，难得难得啊。 在互联网已经差不多商业化的今天，能有这么一个互联网初期精神的站点存在，还做的这样仔细负责，真的除了敬佩钦服以外，只能膜拜了。 希望这个站，永远屹立在互联网上，而且越做越好。

管理员回复：我也不知道怎么盈利，因为就不盈利，纯粹是把自己的所学奉献给大家

fanyong(221.214.*.*) 发表于：2011-04-18 15:03:48

终于找到了一个CSS的好网站，常驻在此了哈哈！

管理员回复：欢迎常来

zhangzhengya(124.112.*.*) 发表于：2011-04-17 20:12:04

站长你好。这个系列的教程我都看完了，一共看了两次每次看的体会是不一样的。但是后面的三篇实例我感觉有点晕。我是一名在学校的学生还有一个学期就毕业了。我由衷的希望你可以出一些小型公司的网站实例。我希望可以在后面的教程中看到更多的网站实例，最好是一些简洁美观的最好。呵呵！不知道您能不能出这样的实例。如果出了不胜感激。

管理员回复：最后三往篇就是小型公司的实例，你现在的问题是动手太少了

ynwai(113.241.*.*) 发表于：2011-04-17 02:59:18

不顶都对不去自己了

管理员回复：我也顶

smarcorp(117.63.*.*) 发表于：2011-04-15 09:24:16

您好，老师，我知道复制你的代码不对，但，你在复制中增加了你的的网站代码，每次都要去删除，好麻烦的。

管理员回复：目的是转载到别的网站时，大家在学习时遇到问题，能找到源出处来提问

smarcorp(117.63.*.*) 发表于：2011-04-15 09:00:23

您好老师，请问您用的DW的哪个版本，我机子是IBM T42 1.7G的主频

管理员回复：cs3、4、5都用了

smarcorp(117.63.*.*) 发表于：2011-04-14 23:46:33

看了你的网站页面，看了你的内容，真是叹为观止……敬佩之，学习之

管理员回复：欢迎常来

shihongtao(58.20.*.*) 发表于：2011-04-14 11:12:15

站长，源文件里面：#nav_l { float:left; height:66px; width:5px; overflow:hidden; background:url(../images/nav_bg.gif) 0 -66px no-repeat; margin-right:10px;} 加一个overflow:hidden;干嘛 ？和出不出现导航条有关系吗 ？

管理员回复：超出隐藏，主要是为了防止意外情况的发生

luguangwei(113.120.*.*) 发表于：2011-04-10 20:14:21

问下老师：有不用zoom：1这个属性的方法吗?因为IE私有属性w3c不支持啊。

管理员回复：本有用到另外一种方法了呀

luguangwei(113.120.*.*) 发表于：2011-04-10 19:52:42

#maincontent加了背景色后，IE5，ie6浏览，#maincontent背景会显示多出一条细线背景。实际排版要精确的话，就不好了。

管理员回复：用css hack来解决

luguangwei(113.120.*.*) 发表于：2011-04-10 18:44:51

问下老师，给#maincontent加上背景会在ie8的兼容模式下不完美，怎么解决。

管理员回复：哪里不完美？

vansoking(119.6.*.*) 发表于：2011-04-10 02:27:50

教程很棒，那天搜出来的css布局模板下载，下了一个，简单明了，实用！灰常灰常的好！会常驻此站的！

管理员回复：欢迎常来

shirentianfu(112.66.*.*) 发表于：2011-04-07 22:03:29

学习中....教程不错

管理员回复：常来

ymj(222.77.*.*) 发表于：2011-04-06 15:57:46

老师那些切片为什么要那样切，有没有别的切法了，或者要遵循什么原则没

管理员回复：图片清晰前提下体积最小的原则

why1210(125.123.*.*) 发表于：2011-03-28 10:48:45

一直想学网页设计，看了很多网站都没有静下心来好好学习，今天一早上就学习了以前一个星期能学到的内容！实在太有成就感了~~~非常感谢老师的帮助！

管理员回复：不客气，欢迎常来

lhmphp(61.135.*.*) 发表于：2011-03-25 18:33:52

今天简略浏览下老师的文章，就犹如醍醐灌顶，以后要常来学习，老师辛苦啦！你是最棒的！

管理员回复：谢谢啊，欢迎常来

onlyone(61.142.*.*) 发表于：2011-03-09 13:51:00

能找到这个网站，真的太好了，找了很多网站都没有这个好！

管理员回复：欢迎常来

song727(114.249.*.*) 发表于：2011-01-07 18:18:35

老师，放置那些icon的时候，icon之间的间距是可以随意设置的还是说有一定的规律呢，

管理员回复：这个应该说根据需要，比如列表显示用的图标的话，那么它的间距要超过列表中每一行的最大高度，要不在下端就显示出了下一个图标了

song727(114.249.*.*) 发表于：2011-01-07 18:13:33

老师的教程讲的很详细，这是其他同类网站无法比拟的，老师辛苦了！

管理员回复：谢谢你的肯定

SSM1209(119.112.*.*) 发表于：2010-12-22 11:04:43

老师您好，我要问一下maincontent的清除浮动#clearfloat可以放在它的这个DIV里面吗，就是放在maincontent的</div>前一行

管理员回复：可以，应该放这一行

xiaomu0305(59.59.*.*) 发表于：2010-12-14 15:54:47

我不明白那个导航图片为什么要整合到一张图上面 能不能说详细点

管理员回复：前边章节有详细讲解，或者新手常见问题视频教程中也有

a7861266(59.52.*.*) 发表于：2010-12-05 11:37:08

哇，我在#footer添加了margin-top:10px，就有空隙了。同样谢谢老师！

a7861266(59.52.*.*) 发表于：2010-12-05 11:23:11

老师你好，请问为什么我预览时footer和maincontent上下两块中间没有间隙？但header与nav，nav与maincontent之间都有白色间隙啊？

管理员回复：maincontent里的两块都浮动了，浮动后父容器的高度不会自动适应，这个问题在前边章节讲过，需要清除浮动

li407280456(218.82.*.*) 发表于：2010-11-30 18:03:48

我的问题解决了 用的JS如果有CSS的方法也请发出来下 谢谢

li407280456(218.82.*.*) 发表于：2010-11-30 17:55:59

外部容器随这内部容器的大小而变化 要如何实现 例如 外部容器最小是 300*300 当内部超出变成 400*400 是 外部容器也要变成400*400 高度用min-height可以实现 宽度要怎么写呢？

管理员回复：如果是这样的话你就不定义外部容器就行了

Richard(60.216.*.*) 发表于：2010-11-30 16:40:48

非常好 不断学习中 谢谢~~

管理员回复：欢迎常来

vae(119.180.*.*) 发表于：2010-11-30 08:54:42

main里添加一个div可以正常显示，再添加第二个（跟第一个宽度相同）时，side就跑到main右下角了。

管理员回复：应该不会呀，不知你添加的div设置宽度了没有，是否把边框的宽度也考虑进去了呢

vae(119.180.*.*) 发表于：2010-11-29 11:31:03

老师您好！在制作网页过程中发现一个问题，就是main里添加内容过长后,side就跑到main下边去了。请问问题出在哪里？谢谢

管理员回复：你添加的是什么内容

tengzbiao(58.57.*.*) 发表于：2010-11-17 18:01:05

非常适合我这样的童鞋来学习啊，本站真是太好了。。

管理员回复：欢迎常来

xiaotude1105(125.33.*.*) 发表于：2010-11-17 16:59:20

zoom:1 这是什么意思

管理员回复：请去查css手册

858584783(203.177.*.*) 发表于：2010-11-15 18:37:14

希望老师，详细讲解网站切图的全过程，本人不是很理解。谢谢！

管理员回复：切图的话用文字很难描述清楚

avada2010(113.138.*.*) 发表于：2010-11-13 15:15:13

那个导航条是怎么切图的，我还是不懂，麻烦老师（站长）能不能制作一个视频教程专门介绍一下。讲一下这个导航条的制作。

管理员回复：是把几张图片在ps里合成一张上的，本站的新手常见问题视频教程中有相关教程

www(120.203.*.*) 发表于：2010-11-11 12:35:54

我还是没有弄懂，导航条怎么弄的

管理员回复：那我也没办法了

jandz(110.87.*.*) 发表于：2010-11-10 17:33:45

解决办法是在#maincontent增加 overflow:autol; zoom:1;，这样就可以让它自动适应内部元素的高度了。 auto多了一个l

管理员回复：哦，是的，谢谢指正

wwclovexp(58.247.*.*) 发表于：2010-11-09 09:22:24

LZ,请问本讲的那个企业网站地址是多少啊.

管理员回复：没有地址，我就自己做了个模板

doublejun(114.224.*.*) 发表于：2010-11-02 14:47:24

这里是web设计师成长的摇篮！

管理员回复：谢谢肯定

dreams44(114.96.*.*) 发表于：2010-10-23 11:49:41

相见恨晚啊 ！！！！！！！ 这里真是太好了

管理员回复：欢迎常来

wushuang(221.212.*.*) 发表于：2010-10-10 09:06:17

我的问题是首字下沉，我按照本教程的教法做的网页，本机调试时都是好的，但网站上传后，首字下沉样式就没有了，不知道是怎么回事啊 谢谢

管理员回复：本机调试正常，上传上之后应该也正常呀，css是内部还是外部？连接是否正确？

zyx1584(183.17.*.*) 发表于：2010-10-08 15:36:55

非常谢谢LZ的帮助 让我终于会了 虽然很生疏 嘿嘿 一起努力

管理员回复：欢迎常来

moviesky(218.89.*.*) 发表于：2010-10-04 18:19:19

这个教程真的很好，对我帮助很大。

管理员回复：我顶

walkingpig(219.148.*.*) 发表于：2010-09-23 16:46:35

虽然是文字教程，比某些言之无味的视频教程强多了，很有启发性。

管理员回复：谢谢肯定，常来哟

wushuang(125.211.*.*) 发表于：2010-09-23 08:31:21

十分感谢。我是个职业主妇，没有一丁点专业知识。但这个教程我看懂了，这是我看过的讲得最明白的教程。我从去年开始，学了点ps，flash，主要是为了好玩。后来又学了dw和asp，都是在网上找的教程但说实话，讲的都不是太好，而且很保守。dw没什么难度，但asp代码还是有难度的。我看的讲座都是讲到关键的地方就不讲了，都靠自己琢磨。有的时候，一个小问题能困扰我好几天。勉强我能开始做网站了，数据库，代码，总是磕磕绊绊。网站是做出来了，但样子总是怪怪的，前几天我发现了这个讲座，真是太好了，讲的真明白。真是太感谢了！祝管理员们天天好心情，工作顺心，一切如意。

管理员回复：谢谢你的肯定，能对你有所帮助我感到很欣慰

明河(123.6.*.*) 发表于：2010-09-21 11:43:48

第二部分什么时候出来啊，期待........

管理员回复：快了

课程(183.1.*.*) 发表于：2010-09-21 09:07:50

第二节教程什么时候出来啊··最好有第三节课程。套用台课/建设一个完美的网站

管理员回复：第二节快了，第三节正在考虑出不出呢

REA(58.254.*.*) 发表于：2010-09-20 11:59:27

老大，另存为的图片不是原图吧？请上传原图。

管理员回复：第二节教程出来后，上psd文件

kylin87(123.14.*.*) 发表于：2010-09-20 11:02:42

管理员辛苦了，教程非常非常好，谢谢

surin(119.100.*.*) 发表于：2010-09-19 18:28:41

老大辛苦一下，能不能做成视频教程，呵呵，多谢

管理员回复：目前没有时间做视频，能出图文教程已经是不错了

好(183.1.*.*) 发表于：2010-09-19 16:44:14

前台设计学完，如果有如何套用后台教程就是非常好的对想学习网站设计的人来说的完美网站。管理员请考虑这方面的教程出台吧！！热烈期待着啊

管理员回复：如果再出加程序的话估计得三节教程了，看情况吧

？？？？(211.103.*.*) 发表于：2010-09-19 15:15:59

这个网页的图片怎么不上传一下 我们可以方便练习一下

管理员回复：你右键另存为不就行了。等第下一节出来后，会把psd文件上传的

maomaochong(116.231.*.*) 发表于：2010-09-19 14:51:20

管理员赶紧更新下文。 还有文章标题后面的浏览和评论的显示数目好像没有及时更新啊

管理员回复：快了；是的，那个是生成后才会更新的，不是实时读取的

xuanxuanstudy(125.127.*.*) 发表于：2010-09-19 14:34:17

不知道好不好！我先考下来看一下！谢谢啦！

szyt(60.1.*.*) 发表于：2010-09-18 17:33:04

真 真不错！！

55555(61.50.*.*) 发表于：2010-09-18 14:58:20

我喜欢

tttt(124.239.*.*) 发表于：2010-09-17 16:36:28

太经典，我也想收藏这一页，不过好像没法收藏到我的用户名下！小遗憾了

管理员回复：如果提示添加成功，肯定收藏在你的用户名下了

princewhj(60.14.*.*) 发表于：2010-09-17 15:03:23

怎么好象没看完啊

管理员回复：开头不说了嘛，分两部分

shixiaohua(61.232.*.*) 发表于：2010-09-17 11:06:19

不懂为什么要把图片切到一张图上。 顶，继续努力学习。

管理员回复：请看前边的教程

今非昔比(123.119.*.*) 发表于：2010-09-17 11:04:39

哈哈，等了好久，第十天课程终于出现了。管理员辛苦了。。。

管理员回复：欢迎常来

amysue(210.22.*.*) 发表于：2010-09-17 10:43:52

第十天终于出来了 占个座再看

管理员回复：还有第二部分

miaozf(58.221.*.*) 发表于：2010-09-17 07:55:52

太经典了！很实用！一直关注着你的教程，是我学习网页的导师！可否QQ加我好友，本人也是一名学校教师。QQ：810380638

管理员回复：呵呵，谢谢肯定