标准之路div+css网页版式宽度固定、自适应布局模板频道上线

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

doocal(183.160.*.*) 发表于：2011-08-28 16:24:30

第24套模板，不能自动适应全屏高度。

管理员回复：是，就没做适应全屏高度

wonderful(121.12.*.*) 发表于：2011-08-01 10:10:33

自适应(弹性)宽度CSS版式布局 模板41为什么把HTML文件中sidebar与content位置对换一下，就错位了呢？

suoguocs(114.219.*.*) 发表于：2011-06-22 20:55:13

绝对好站

suifeng1201(112.241.*.*) 发表于：2011-01-27 15:01:30

老师好，有一个问题向你请教，我在排版的时候，内容栏设置了三列，左，中，右，类名分别为1，2，3 为他们设置了宽度，我已经注意到了关于宽度的问题，没有让他们超过容器的宽度，并且2的左右margin都设置恰当，我为1设置了left，height 3设置了right,height 2只设置了height,margin. 可是3却没有和1，2并列，跑到了下一行显示，我在容器中加入了清除浮动，可是没有任何的作用，请问这个问题怎样解决。

管理员回复：不清楚了，得看实例

lymekin(114.222.*.*) 发表于：2010-11-10 00:51:46

我就是在这里学会div css的，感觉很不错，现在遇到一个问题，我用的设计稿的头图是1280*350的，但是我在家用我的15寸笔记本布局时，页面下面出现滑块，或者是头图不能完全显示，怎么才能使这种图片对不同分辨率的屏幕自适应呢，我的意思就是如果是1280的屏幕，那么该图完全显示，如果是1024，那么该图等比缩到1024，始终保持满屏，还请赐教。。。

管理员回复：不太明白，如果单纯是一张图片可以设置宽度为百分比

yjpl8(123.147.*.*) 发表于：2010-10-09 22:58:41

通过几天的模板实例学习，受益匪浅，非常感谢站长。

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

xiaoxiao321(222.162.*.*) 发表于：2010-07-30 09:33:23

固定宽度CSS版式布局 第16个 为什么中间总有3个象素的空白 我在IE6下看的 告诉我吧 怎么解决 站长

管理员回复：可能是IE6的3px bug造成的，本站有相关解决教程

hongyl(218.5.*.*) 发表于：2010-07-27 16:42:58

细细地浏览了本网站，一个感觉就是站长“很用心”，我想这里就是我学习div+CSS的起点,并且每天进步一点点。谢谢站长...

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

miaozf(218.91.*.*) 发表于：2010-07-26 18:09:46

站长你好！感谢是你的教程把我带进了CSS+DIV的大门。从页面布局、菜单制作学习起，每天觉得很充实，期待着你出更多的教程。另外在这里请问下老师，如果在DIV+CSS布局的页面里要调用后台的ASP数据，如何解决？是不是用Table,有什么好的方法或教程，请指导。谢谢！

管理员回复：调用数据和你之前做网页一样呀，如果数据是表格式的，那最好还用表格，因为div+css不是要摈弃表格，而是要各标签合理利用

xiaohe(115.238.*.*) 发表于：2010-06-12 12:56:45

实例20中layout.css中，content类属性中的 margin:0 205px !important; margin:0 202px 我不理解，你能否具体解释一下，尤其是那个感叹号。 另外，我看了一下“标准之路的主页”觉得非常不错，但通过查看静态源代码，再想依照做一个，怎么也做不出来，大概站长大人是用动态网页转静态网页做的。 谢谢你的热心解答。

管理员回复：第一个问题是兼容用的，属于css hack部分内容；第二个问题，只能是深入研究，平时多动手，不建议直接照搬本站的设计

xiaohe(115.238.*.*) 发表于：2010-06-01 08:11:21

“红色字符和背景标识的为比较实用的结构”，“红色字符”的一眼可看出，而“背景标识”我怎么也找不出来？

管理员回复：其它的背景是灰色，只有这几个带色的

learnDC(123.233.*.*) 发表于：2010-05-23 12:24:15

很有用啊 太好了，向你学习

管理员回复：欢迎学习

kaiceseo(222.133.*.*) 发表于：2010-05-19 17:58:43

你好管理员，我正在学你的教程，很通俗易懂，谢谢你的分享，请问在“模板30：2列右侧固定，左侧自适应宽度，中间无缝型”中，为什么一定要把#content放到#sidebar的后面，我觉得应该是从左到右放置啊，可把#content放到前面的话，版面就会错位，不知道为什么，呵呵，刚学DIV，见笑了，另外能说说本站用的是什么CMS吗？祝网站越办越好。

管理员回复：#sidebar放前边，然后向右浮动，这样才#content才会让出空间

aleoyu(218.5.*.*) 发表于：2010-05-04 17:41:54

站长你好，我是个初学者,模板实例(29)当中的* html #sidebar{margin-right:-3px;}/*使用此方法解决ie 3像素bug可通过验证*/ 用以上方法是可以去避免3像素的出现,然而,我现在把左边那个div的高度定义成(width:3px;)时就会看不见,没了,这个要怎么弄.

管理员回复：到底是高度还是宽度

melime77(121.22.*.*) 发表于：2010-05-03 11:27:54

1.在模板24中，在IE6.0中测试没有空隙。可在DW的编辑状态下，haeder,menu,maincontent,footer之间有很多的距离，我知道是<br class="clearfloat" />弄的，可是：.clearfloat { clear:both; height:0px; font-size: 1px; line-height: 0px;}height:0px;了，为什么还有空隙呢。我删掉<BR/>不用它可以吗？也不会引起浮动的问题吧。 2.我在MENU中加入了带#CURRENT的一个NAV。#CURRENT和a:hover的CSS代码一样，可是#CURRENT的文本颜色不变是怎么回事啊？代码如下： <div id="menu"> <ul id="nav"> <li><a id="current" href="index.php">首页</a></li> <li><a href="select.php">查询练习</a></li> <li><a href="insert.php">插入练习</a></li> <li><a href="update.php">更新练习</a></li> <li><a href="del.php">删除练习</a></li> </ul> </div> #menu { height:30px; background:#09c; margin-bottom:5px;} #nav{ margin-top:10px; margin-left:2px;} #nav li{float:left;} #nav li a{display:block; width:80px; height:25px; color: #CC3399; margin-right:5px; text-decoration:none; text-align:center;} #nav li a:hover{ background:#cff;color:#000000;} a#current{background:#cff; color:#000000;} 恳请老师指点。谢谢！

管理员回复：1、把br换成一对div再看看，因为IE和dw解析使用的内核不一样造成的。2、把最后一行的a#current换成#nav li a#current

初学者(123.147.*.*) 发表于：2010-04-29 22:23:26

老师你好，模板3中DIV之间的空隙在IE7和FF中不一样

管理员回复：能说出哪里不一样吗

MAY(219.140.*.*) 发表于：2010-04-29 15:39:53

问题已经解决，谢谢

MAY(219.140.*.*) 发表于：2010-04-29 15:38:04

站长你好！在你模板３（1列固定宽度居中+头部+尾部）为什么#mainContent和#header之间会有很大的空白，你只在#header中设置了margin-bottom:5px，然而它和主要内容之间的空白有十几个多？这是为什么了？ 管理员回复：在样式表中加上p { margin:0;}就可以解决了 好像处理不了啊。。

管理员回复：怎么处理不了？是还取消不掉吗

MAY(219.140.*.*) 发表于：2010-04-29 15:36:48

老师您好，模板的DIV之间的空隙怎样去掉呢，我把margin-bottom属性去掉了也不行，该如何处理呢，谢谢回答！

管理员回复：你是说具体哪个模板呢

leo(59.172.*.*) 发表于：2010-03-26 10:29:18

站长你好！在你模板３（1列固定宽度居中+头部+尾部） 为什么#mainContent和#header之间会有很大的空白，你只在#header中设置了margin-bottom:5px，然而它和主要内容之间的空白有十几个多？这是为什么了？

管理员回复：在样式表中加上p { margin:0;}就可以解决了

感恩的心(61.50.*.*) 发表于：2010-01-15 01:20:44

管理员你真的太棒了，我因有缘认识你而高兴。我打心底佩服你这种无私的奉献精神。向你学习！

管理员回复：共同学习

初学者(61.50.*.*) 发表于：2010-01-15 00:59:18

站长你好，我是个初学者，我觉的你的这么模板很好，不过有些我理解不了，我想问一下，如果我想提高一下自己的水平，就以能达到比较透彻理解这些模板为目标的话，我应该学写什么书籍，最好具体一些，谢谢！

管理员回复：我觉得就分析这些模板就行了，里边用到的css属性也不多，了解每个属性是干什么的，那么你的水平也就差不多了

IE6 BUG(61.145.*.*) 发表于：2010-01-05 23:51:31

而我用了另一个方法就是，float:left float:left float:right 这样好像就可以把bug清除，这方法对吗？

管理员回复：这种方法是可以避免3像素bug的产生

IE6 BUG(61.145.*.*) 发表于：2010-01-05 23:48:34

你的教程中，三列的那个，中间有IE6 BUG 怎么办 比如说第16个

管理员回复：具体是什么bug，能说明一下吗

邱嵩松(117.67.*.*) 发表于：2009-12-30 14:19:13

能否把CSS直接写到例子里呢，这样就能直接看源文件研究了

管理员回复：css分开是为了让朋友们下载下来后使用方便，所以才分离的

snow(58.244.*.*) 发表于：2009-12-27 09:02:35

管理员,真是辛苦了.真是个好东东.能弱弱的问一下,你这有没有制作在线编辑的网页方法,就是发表留言的时候可以设置字体,字形,字号等等.

管理员回复：你说的不就是在线文本编辑器吗，网上一大堆呢

尘埃(124.16.*.*) 发表于：2009-12-16 12:07:00

您好，请问第16个模板3列固定宽度居中，为什么要把中间列写在最后才不会变形呢？

管理员回复：你把浮动搞明白了，这个问题就解决了

digicake(116.22.*.*) 发表于：2009-12-09 17:56:45

47，48布局在iE7下，content与footer没有5px的页边距，而其他版本IE和firefox都可以呈现，不知为何？

管理员回复：#mainContent {margin-bottom:5px;}这句去掉，#footer加上 margin-top:5px;可以避免这个bug

支持(124.115.*.*) 发表于：2009-12-06 09:21:26

不错的网站，这些模板我全部下载下来了，很实用，支持你们

管理员回复：顶

haha(121.228.*.*) 发表于：2009-11-21 12:56:20

这个网站很棒》》》》》顶

管理员回复：我也顶

心剑(113.57.*.*) 发表于：2009-11-05 15:33:42

真的很好的学习资料，谢谢了.

管理员回复：常来哟

Guest(125.211.*.*) 发表于：2009-10-27 13:03:44

请问以上模板的源代码在哪里下载啊???求学心切!!有知道的请回我下,多谢了!

管理员回复：在css网站布局频道

木子小姐(117.32.*.*) 发表于：2009-10-17 16:05:41

我是刚刚学习DIV的看了这些教程 学习了不少知识要点呢，以前都不知道怎么布局 这下好了 明白了里面的知识要点及原理 哈哈 好开心那 基本的要点是掌握了还是有些东西搞不懂 慢慢学习吧 ，反正是进步了不少呢谢谢哈

管理员回复：不客气

AllenKOO(116.54.*.*) 发表于：2009-10-16 16:20:39

29,31,33我这里下载了看是一样的。是不是？

管理员回复：是不一样的，鼠标放到图标上查看说明

好好(210.74.*.*) 发表于：2009-10-15 14:34:58

相当不错 好东西

管理员回复：顶

学习来的(124.66.*.*) 发表于：2009-09-14 17:17:44

你好。第23、24、49、50部分能不能实现如果左边（右边）高于右边（左边），那么对应的右边（左边）都能自动适应高度，这样的效果如何实现呢？现在实现的都是只有左右的其中一部分，能不能实现两部分呢？如果有时间，希望写一份啊。谢谢。

管理员回复：现在的背景已经可以实现底部平齐了，如果高度要相等的话，最好是用js来实现

kitty(222.64.*.*) 发表于：2009-09-06 11:46:01

第34个模块，有些问题，右边区块里放置一个tr内容很多的table，会出现变形。请帮忙解决一下

管理员回复：这个得看你的源代码，问题应该出在表格上

挽夏(114.114.*.*) 发表于：2009-08-17 15:44:42

请问模板47，50为什么我在IE中直接打开界面正常，在Eclipse中通过Tomcat打开就无法显示footer了呢？

管理员回复：不太明白你所说的用的什么内核。其它我们做的网站只要能兼容主流浏览器都行了。像本站的实例，都不兼容IE6以下浏览器，包括腾讯网站，因为这一部分用户群基本可以忽略。

ailee(58.31.*.*) 发表于：2009-07-30 19:46:37

写的太好了！学习了．

管理员回复：^_^

李*(125.33.*.*) 发表于：2009-07-30 13:48:40

好，写的很好，值得学习，值得借鉴！！顶

管理员回复：谢谢

小小成功先生(218.13.*.*) 发表于：2009-07-18 00:02:08

写的非常好，good！非常感谢！在学这优秀课程的同时，会多多少少出一些小麻烦，其实各位不要担心，你认真分析一下，就马上能明白了！我也是新手！

管理员回复：不客气

ok(119.21.*.*) 发表于：2009-07-14 11:51:34

楼主真负责哦。呵呵，顶呀！很好的东西。

管理员回复：偶也顶～～

helun(123.129.*.*) 发表于：2009-07-04 23:36:02

#lefts { width: 200px; float: left; }#rights { margin-left: 204px; }

helun(123.129.*.*) 发表于：2009-07-04 23:34:40

请问管理员这该怎么解决 所有内容贴左对齐以下是代码: div { border: #ccc 1px solid; }#bodys { margin: 0; padding: 0; }

helun(123.129.*.*) 发表于：2009-07-04 23:33:18

两列 左列固定宽度 右列宽度自适应 的问题, firefox 正常, ie 不正常.问题是:当窗口变小时 右列的内容折回头下起一行(第三行)时 是贴左对齐的但第一行和第二行 却没有贴左对齐

Guest(123.129.*.*) 发表于：2009-07-04 23:29:02

两列 左列固定宽度 右列宽度自适应 的问题, firefox 正常, ie 不正常.问题是:当窗口变小时 右列的内容折回头下起一行(第三行)时 是贴左对齐的但第一行和第二行 却没有贴左对齐 请问管理员这该怎么解决 所有内容贴左对齐以下是代码: div { border: #ccc 1px solid; }#bodys { margin: 0; padding: 0; }#lefts { width: 200px; float: left; }#rights { margin-left: 204p

管理员回复：你按照我提供的实例下载下来对比一下，看看是哪儿的问题

Parabola(58.246.*.*) 发表于：2009-06-24 17:47:46

写的太好了！

管理员回复：好

李姓人士(219.137.*.*) 发表于：2009-06-05 17:10:00

谢谢!对以前的学习有了个很好的总结

管理员回复：不客气

小小人物(123.112.*.*) 发表于：2009-05-06 22:33:56

接触这个东西1年了，但是一直没有成功的做过。基本上都是美工在做，但是我的美工很差，今天看到这些东西，我非常的感谢楼主的无私奉献，多谢。。。

管理员回复：不客气，要多多支持哟

123(116.24.*.*) 发表于：2009-05-05 13:58:44

我还是这几天刚开始看css有关的东西以前懂一些html公司有个网站要我维护给我的任务是让终端的web页面自适应分辨率这几天我在查有关方面的资料可是还是效果不是很明显恳请多指点

管理员回复：那就采用这种自适应布局，如果目前对web标准掌握不好的话，不仿先用表格

cgcn(222.78.*.*) 发表于：2009-04-09 20:36:27

断断续续的在这个网站上泡了一个多月了，尽管每天能用来学习的时间不多但终于学到这一步了，感觉很好，昨天试着给自己的网站头部改一下，一下子成功，当然还得继续学习，坚持，感谢站长提供了这么好的学习CSS的网站，循序渐进，内容精致，实用，每一篇都是精品！

管理员回复：谢谢呀，一定要常来，同时介绍给你身边的朋友

奋斗(59.33.*.*) 发表于：2009-01-03 15:57:59

固定布局第20个。 CSS样式代码有个 !important 是什么意思啊？

管理员回复：这个是css hack部分的内容。!important之前的IE7和FF识别，之后IE6识别

学习(222.72.*.*) 发表于：2008-12-19 22:21:47

感觉这里的内容很好，自己买了两本书，看了，都能看懂，结果上手联系，发现什么都不会弄，漏洞百出。唉 是不是要去专门学啊？

管理员回复：要多练，根据自己的实际情况，从书上看一些例子，最好能自己手写一遍，这样能才尽快掌握。

江 南(218.249.*.*) 发表于：2008-12-19 17:20:44

如果我想实现这样的效果，不用ＪＳ有实现的方法吗，比如table实现也可以

管理员回复：我暂时还没见过这种方法

江　南(218.249.*.*) 发表于：2008-12-19 15:00:00

我指的　自动高度100%，是相对浏览器来说的

管理员回复：那得用js来判断当前浏览器的高度，然后把高度赋值给需要100%的div

江 南(218.249.*.*) 发表于：2008-12-17 16:38:18

版主，可以Head部分是固定高度，Body部分自动高度100%吗？

管理员回复：不知你说的自动高度指什么？是相对于浏览器窗口，还是内容？

江 南(218.249.*.*) 发表于：2008-12-17 11:51:30

有没有按屏幕高度自适应的例子，比如：800，1024的屏幕都是满屏显示，内容少则背景充满，内容多的话，自动出现滚动条，多谢，望回复！！

管理员回复：这个是需要js来实现，用js获取浏览器的高度。可参考www.mapbar.com的地图查询页

nbhbp(122.246.*.*) 发表于：2008-12-15 21:59:42

看到这个教程，很想学习，今天为此专门开了一个群：23864692，欢迎大家一起来学习，老师也能经常来辅导吗，期待中

管理员回复：好的，谢谢啦

无语(59.172.*.*) 发表于：2008-12-06 13:27:05

哎！太老套了，没新异.....

管理员回复：确定有点老套，不过很实用

佐佐木屎壳郎(218.107.*.*) 发表于：2008-12-04 10:30:07

第一次来这里，很不错，支持一下～

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

小馒头(124.93.*.*) 发表于：2008-12-01 16:22:24

有没有高度自适应的例子？

管理员回复：第23、24、49、50为高度自适应的例子

小叫花(211.160.*.*) 发表于：2008-11-26 16:06:43

站长你好，因为不知道哪里可以有提建议的地方，所以只好又来这里了，我在看了其中一个布局以后有问题想问，但发现贵站好象没有这样可供交流的地方，只能是针对你们给的教程例子等我们被动的提出问题来，要是有个论坛一样的地方就更好了，大家一起交流学习。；）

管理员回复：布局上有问题的话请在此标明布局编号，然后说出问题，待核实后会更正。本站暂时没有建论坛的想法～～

小叫花(211.160.*.*) 发表于：2008-11-26 10:30:35

提个建议哈,前面我提交时说我的验证码不对,然后内容全没了,觉得这样挺麻烦,要是能保留住内容就好了,这样就不用重新写了,嘿嘿,个人意见.

管理员回复：不错的建议，下一步会修改一下系统的，本来不想加验证码的，但垃圾留言太多了，没办法！只好启用验证码！！

小叫花(211.160.*.*) 发表于：2008-11-26 10:28:11

贵站真的很适合我们这样的新手,谢谢站长们,你们辛苦了,希望贵站人气越来越旺哦.

管理员回复：谢谢您的光顾，希望能带给您帮助！！

ermao_ba(59.61.*.*) 发表于：2008-11-23 22:45:59

精制实用,还能下载,谢谢

管理员回复：呵呵，不客气，目的就是为大家提供方便

fkeuem(219.237.*.*) 发表于：2008-11-20 12:49:19

嘿嘿。开始学习啦。谢谢站长哈。

管理员回复：不客气，欢迎经常来学习哟！

Guest(222.190.*.*) 发表于：2008-10-29 18:02:30

这么好的站，我等新手有福啊！

管理员回复：谢谢啦！以后要常来哟！

somewindow(61.183.*.*) 发表于：2008-09-15 20:20:45

感谢站长，现在像这样的好站长已经很少了.今天一来就发现改版了,呵呵..不错,都是一些实用的东西...内容质量也很高..支持!

管理员回复：欢迎给本站提些发展建议，谢谢

zdy(58.61.*.*) 发表于：2008-09-12 12:50:54

希望把所有的打包下载,可以吗?让我们学习一下.

管理员回复：这样学习哪个下载哪个也挺好的，全部下载之后往往使用哪个不容易找

wo_is神仙(221.226.*.*) 发表于：2008-09-07 14:42:43

好久没来了，站点改版了嘛。总结了这么多CSS布局，那些新手应该有福了

管理员回复：改版是为了更好的发展，谢谢您的关注。css布局主要是为新手准备，而且也可以帮助老手每次做页面写基本布局的麻烦！

Guest(219.143.*.*) 发表于：2008-09-02 09:37:43

这么全呀，以后做网站不用愁了，直接来这儿下载模板了

管理员回复：欢迎常来！！