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

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

wwt8565559(60.163.*.*) 发表于：2011-08-25 18:31:58

导航栏背景在设置圆角的时候，右边图片的坐标用的是-5px -66px,这里没明白是为什么，按照我的理解，这里是应该去圆角图片的右半边，那坐标应该是5px -66px啊，我自己实验了下，发现这样不行，没找到图片，但就是不明白为什么，这个坐标如果是以图片左上角为原点的话不应该是这样啊

管理员回复：请查看css手册中的background的解释

wuyuning(123.161.*.*) 发表于：2011-08-25 14:42:44

下载的教程里的index.psd,用PS编辑是，为什么文字图层为什么会带个叹号，用文字工具编辑的时候会提示“将会改变其版式”，这是怎么回事呀？

管理员回复：字体问题

jpc50520zz(220.160.*.*) 发表于：2011-08-19 15:36:52

老师我按教程上说的更改那个flash的图片地址，结果在DW时实视图下不能正常显示，图片会更换但下角数字都不正常，只显示最后个数值。数标移到数字上变换图片的效果也没有，这是什么原因呢

管理员回复：图片是按照实例中的格式提供的吗，多张图片中间要有|

jpc50520zz(220.160.*.*) 发表于：2011-08-19 15:34:17

为什么发不了评论啊

管理员回复：你这不是发表上了吗

macroe(58.16.*.*) 发表于：2011-08-10 14:06:18

管理猿在吗？我想写一系列HTML CSS JS教程，其中可能要用到您的这个界面，请问可以使用吗？有没有什么条件这些的？初定目录在http://leehom0123.cnblogs.com

管理员回复：用到哪些界面？

ws00268085(116.253.*.*) 发表于：2011-08-09 11:28:39

什么侧边栏的<li><dt><dd>里面输入了超过side宽的文字,文字不会自动换行,而是超出到外面?全Float不是仅仅会让内容不适应高而已?宽不是固定的吗?为什么会文字还溢出?

管理员回复：是不是输入了一串连续的英文或标点，中间没有空格

anglesdl(58.58.*.*) 发表于：2011-08-09 08:38:47

不错这网站很好很强大！

xiaoluyouyou(123.232.*.*) 发表于：2011-08-04 15:47:25

.nav_main ul li a span { display:block; padding-right:20px;} 想问这句必须有么，他的目的是不是使a左右留有20px边距，文字居中啊？能不能和子菜单一样，直接用text-align:center啊？请站长赐教。

管理员回复：让导航菜单自适应宽度

wfynn(125.39.*.*) 发表于：2011-07-27 00:14:40

老师，有个问题请教，就是头上的搜索框，当文字很长时，会把背景头像挤掉，该怎么处理

管理员回复：什么浏览器？

hantao96(119.5.*.*) 发表于：2011-07-21 17:17:26

老是能不能把那个幻灯切换说详细点我做出来不能显示图片

管理员回复：这个其实是最简单的，按照它人格式把数据提供出来就行了

songhu(218.22.*.*) 发表于：2011-07-21 16:39:25

.nav_main ul li a:hover span { background:url(../images/nav_bg.gif) right -163px no-repeat;} 这句中的-163px 是怎么算出来的？麻烦指教！

管理员回复：根据要显示部分在图片中的位置算出来的

dengwei4378(60.10.*.*) 发表于：2011-07-14 08:46:25

老师您好，看了教程，收获很多，但是有一个问题始终困扰我，那就是我看到css代码中，随处可见“width:78px; height:22px;padding:25px;”等设置，我想问一下，这些值都是从哪里获取的呢？我很迷茫......

管理员回复：根据你设计的效果图呀

lvzhiming18(114.96.*.*) 发表于：2011-07-11 09:23:10

希望能跟着站长，跟着本站一起成长……

Tyrande(117.25.*.*) 发表于：2011-07-03 21:16:23

这是我见过CSS讲的最详细，最认真，最仔细的网站了。不顶实在是不好意思。 以后一定经常来学习

tianniao(60.220.*.*) 发表于：2011-07-01 09:40:01

讲的好；好老师！

tianniao(60.220.*.*) 发表于：2011-07-01 09:38:09

要找一份做网站的工作，要会哪些软件和知识啊？

管理员回复：做网站的工作也分好多工种哟

ckyh(222.66.*.*) 发表于：2011-06-30 12:55:37

怎么样实现三个DIV在未知高度下，高度相等，不能用背景平铺，不能用table实现，我应该怎样来做

管理员回复：本站有相关实例，请搜索

fenglintop(1.195.*.*) 发表于：2011-06-22 17:33:57

老师，我布局的界面footer总是不在最下面 反而跑到中间 在div标签里 它是在最后的啊 不知道为什么 ？

管理员回复：没有清除浮动

franco(211.102.*.*) 发表于：2011-06-22 11:33:31

看到这篇视频，激动啊，找了很多教程，没有一个这么详细，容易理解，马上就注册了下，支持老师，争取十天学会基础。。非常感谢！

liuping(61.163.*.*) 发表于：2011-06-06 18:15:15

想问一下站长关于第10章幻灯片转换的问题，当我把实例及源代码下载以后，里面有一个pic文件夹，在pic文件夹里有一个index。swf，当我打开时里面却是空白，在网上下载地址里也看不到，我想学这个，因为打不开这个swf，我也无从学起，先谢谢站长

管理员回复：学这个什么？你在参数里设置好图片路径和url就可以显示了

beichenwenrou(113.135.*.*) 发表于：2011-05-31 01:01:06

我重新搞过，但是，还是有一点点小问题。 <style type="text/css"> @charset "gb2312"; #maincontent { overflow:auto; zoom:1;} #main { float:left; width:750px;} #index_top { height:209px; overflow:hidden; margin-bottom:8px;} #pic { float:left; width:450px;} #login { margin-top:6px;} #hot_news { float:right; width:300px; height:209px; padding:15px; background:url(../images/hot_bg.gif) 0 0 no-repeat;} #news_top { border-bottom:1px dotted #ccc; padding-bottom:8px;} #news_top h1 { font-size:18px; line-height:2.2; font-family:"microsoft yahei"; color:#444;} #news_top p { color:#666; font-size: 13px; } #news_list ul li { background:url(../images/icon.gif) 0 -300px no-repeat; padding-left:20px; line-height:1.9;} #index_pic { border:1px solid #dbdbdb; margin-bottom:8px;} #index_pic h2 { height:28px; background:url(../images/box_tit_bg.gif) 0 0; border-bottom:1px solid #dbdbdb;} #index_pic h2 span { display:block; height:25px; background:url(../images/rmcp.gif) 12px 6px no-repeat;} #index_pic ul { padding:0 0 15px 0; overflow:auto; zoom:1;} #index_pic ul li { width:107px; float:left; margin:15px 0 0px 21px; display:inline; text-align:center;} #index_pic ul li a { display:block;} #index_pic ul li img { margin-bottom:3px;} </style> <div id="maincontent"> <div id="main"> <div id="index_top"> <div id="pic"> <script language='javascript' type="text/javascript"> linkarr = new Array(); picarr = new Array(); textarr = new Array(); var swf_width=445; var swf_height=209; var files = "*|*|*|*"; var links = "#|#|#|#"; var texts = ""; for(i=1;i<picarr.length;i++){ if(files=="") files = picarr[i]; else files += "|"+picarr[i]; } for(i=1;i<linkarr.length;i++){ if(links=="") links = linkarr[i]; else links += "|"+linkarr[i]; } for(i=1;i<textarr.length;i++){ if(texts=="") texts = textarr[i]; else texts += "|"+textarr[i]; } document.write('<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="'+ swf_width +'" height="'+ swf_height +'">'); document.write('<param name="movie" value="images/pic4.gif"><param name="quality" value="high">'); document.write('<param name="menu" value="false"><param name=wmode value="opaque">'); document.write('<param name="FlashVars" value="bcastr_file='+files+'&bcastr_link='+links+'&bcastr_title='+texts+'">'); document.write('<embed src="images/pic4.gif" wmode="opaque" FlashVars="bcastr_file='+files+'&bcastr_link='+links+'&bcastr_title='+texts+'& menu="false" quality="high" width="'+ swf_width +'" height="'+ swf_height +'" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />'); document.write('</object>'); </script> </div> <div id="hot_news"> <div id="news_top"> <h1>苹果iphone 4手机将于9月25日在中国上市</h1> <p>日前中国联通正式宣布将于9月25日9时在中国大陆市场全面推出iPhone4，并为iPhone4用户量身定制了合约计划。</p> </div> </div> </div> </div> <div id="index_pic"> <h2><span></span></h2> <ul> <li><a href="#"><img src="images/pic4.gif" alt="产品名称" width="107" height="87" />二月</a></li> <li><a href="#"><img src="images/pic4.gif" alt="产品名称" width="107" height="87" />二月</a></li> <li><a href="#"><img src="images/pic4.gif" alt="产品名称" width="107" height="87" />二月</a></li> <li><a href="#"><img src="images/pic4.gif" alt="产品名称" width="107" height="87" />二月</a></li> <li><a href="#"><img src="images/pic4.gif" alt="产品名称" width="107" height="87" />二月</a></li> <li><a href="#"><img src="images/pic4.gif" alt="产品名称" width="107" height="87" />二月</a></li> </ul> </div> </div> 图片地址那里，放上本地图片不显示。然后极不稳定，老师指导下，哪里出了情况。

管理员回复：那是图片路径不正确

beichenwenrou(123.62.*.*) 发表于：2011-05-29 09:12:36

请问,只有图片,想做轮播,不要有swf格式可以吗,我找了几个JS的代码,试验了下,都没办法成功的做出效果,自己的电脑是IE6的,然后它预览时是白屏,什么都没有,请老师不吝指导..万分感谢ing

管理员回复：那就找个js来实现吧。参考http://www.aa25.cn/css_example/928.shtml

system(210.56.*.*) 发表于：2011-05-21 00:58:21

由浅入深，滴水不漏，有问必答，复杂而不繁琐。 管理员集耐心，细心，恒心，决心和爱心于一身。 好人一生平安！

管理员回复：谢谢啊

aaaaaaa(113.74.*.*) 发表于：2011-05-18 22:04:06

哎,看了几次没看懂,不过还是非常感谢站长,有耐心写得这么详细,真是好人,和楼上一样,不顶一下实在过间不去.

管理员回复：就常来学习吧，希望再推荐给身边的朋友

okjia(58.44.*.*) 发表于：2011-05-06 10:01:40

老师您好：ask部分的dl底部不要加上类似product3样式去掉底部虚线吗？谢谢！

管理员回复：虚线颜色和背景色相同了，看不出来了

pp552594996(219.155.*.*) 发表于：2011-05-02 22:47:59

老师~~~~请问如何控制幻灯的播放速度呀 求解~~！

管理员回复：这个不能控制，最新的版本可以控制

kuangwang(111.173.*.*) 发表于：2011-04-28 02:25:36

感觉第十天的内容好难,老是出问题...期待站长把第十天的内容做成视频教程..

管理员回复：如果前边几天都搞懂的话，最后一节不难，就是前边的总结

biaozhun8(59.55.*.*) 发表于：2011-04-27 10:07:37

老师你好，怎么把4个幻灯窗口的数量减少到2个窗口呢？

管理员回复：少填写两个不就行了吗

zjzjzjzjz(113.12.*.*) 发表于：2011-04-23 23:27:38

老师你的网站 当前位置：首页 > DIV+CSS教程 > 正文 点击导航栏的 div+css教程 再点翻页 出现无法访问的状况

管理员回复：杯具了，已确认程序设计没问题，应该和服务器设置有关

yyzz866(220.169.*.*) 发表于：2011-04-20 16:47:31

老师想问下，就是背景图片上不是有几张图片放在一起，怎么去定位把他放在相应的位置上，是用绝对定位和相对定位，在那里面测试位置呢

管理员回复：把background这个css属性给搞明白吧

luckycqlee(210.21.*.*) 发表于：2011-04-19 15:35:41

老师，我是初学者，在这里学习了不少东西，非常感谢！　现在有一个问题想问一下.nav_main ul li a#nav_current 　　这个是对选择中的li　进行的一个样式定义，但现在做的网页里，例如你最后的这个例子里也是吧，选择其他li, 样式并不会变化到其他li上啊，还是在原来的　“企业新闻”　里，这是怎么回事呢？怎么实现？

管理员回复：请看本站的头部导航的实现方法

divver(124.228.*.*) 发表于：2011-04-19 10:33:50

background:url(..省略) 0 bottom; 这个bottom有什么作用？

管理员回复：对齐底部

wwyangyun2007(61.190.*.*) 发表于：2011-04-18 14:36:19

老师您好！此段css#nav_l { float:left; height:66px; width:5px; overflow:hidden; background:url(../images/nav_bg.gif) 0 -66px no-repeat; margin-right:10px;} 中maring-right:10px;有无必要加 我对比添加前后 感觉没什么区别

管理员回复：有呀，仔细对比下吧

yangbingpcx(58.242.*.*) 发表于：2011-04-15 16:05:28

老师你好，顶部是幻灯 图片显示速度怎么找不到设置的地方.

管理员回复：好像是设置不了

Divver(124.228.*.*) 发表于：2011-04-14 09:55:56

终于可以发评论了。站长开个论坛吧，这样方便大家讨论。

管理员回复：论坛暂时不予考虑，主要没时间管理

Divver(124.228.*.*) 发表于：2011-04-14 09:55:19

评论发不了....

lvguang(220.163.*.*) 发表于：2011-04-02 09:48:22

老师您好：我跟着你的做了，代码全部都一样，但是那个导航栏不对，显示的和效果图的不一样，有些部分会被遮挡，背景也不对，用您的源代码，显示的效果也是这样，请老师帮忙解决，谢谢

管理员回复：你用的什么浏览器？

icey831(58.240.*.*) 发表于：2011-03-25 09:23:30

老师我想问下什么时候用 id 和 class 有明确的定位么？

管理员回复：单个时用id，多个用时用class，都用class也行

youyezi(120.82.*.*) 发表于：2011-03-24 11:36:30

老师您好！我在插入上述flash的js代码把图片地址换成自己的图片地址如：files="/images/***.jpg"在ＩＥ预览显示不出来，若把自己的主机用pc_webserver设置成服务器的话同样的地址就能在http://localhost上显示，会是什么原因呢？

管理员回复：路径问题，建议再学习一下URL的相对路径和相对根目录路径

geoe(60.222.*.*) 发表于：2011-03-09 23:47:17

老师 我的INDEX_BOX 与底部 FOOTER 没有距离，也就是 FOOTER与两个企业历史的框框没有距离，贴在一起....??

管理员回复：仔细和我的源代码对比

net80earn(117.57.*.*) 发表于：2011-03-08 21:12:10

导航栏圆角框，想不明白是怎么实现的，求助！ #nav_l { float:left; height:66px; width:5px; overflow:hidden; background:url(../images/nav_bg.gif) 0 -66px no-repeat; margin-right:10px;} #nav_r { float:right; height:66px; width:5px; overflow:hidden; background:url(../images/nav_bg.gif) -5px -66px no-repeat;} 图片如下： [img]http://pic.qnpic.com/r.jsp?fn=//net80earn/nav_bg.gif[/img] 上面两行代码实现了导航栏左右两边的圆角框，而图片中明明只有一个圆角框，不知道是怎么实现的。 第一行代码中，背景图片定位，设置右外边距为10px是为了圆角框刚好在导航栏的左侧这个能理解，但是在第二行代码中，-5px -66px为什么要这样定位呢？也没有外边距值。 小弟跪求帮助，想不明白啊！

管理员回复：背景图片呀

xiaogaga(218.60.*.*) 发表于：2011-03-08 12:24:14

你好老师，请问主页的源代码怎么查.我的查看菜单里怎么没有啊？

管理员回复：那不知道了，每个浏览器应该都有的

net80earn(117.57.*.*) 发表于：2011-03-08 00:08:24

老师，你好！ 我学习你的课程已经很多天了，这最后一节碰到的问题自己始终无法理解，希望得到您的帮助，导航栏部分有如下代码 .nav_main { height:36px; overflow:hidden;} .nav_main ul li { float:left; font-size:14px; font-weight:bold; margin:5px 5px 0 5px;} .nav_main ul li a { float:left; display:block; height:26px; line-height:26px; color:#fff; padding-left:20px;} .nav_main ul li a span {[color=Red] float:left; [/color]display:block; padding-right:20px;} 在这里如果不在span标签里加[color=Red] float:left; [/color]，在IE6中页面会显示 成如下，firefox中正常。 [img]http://pic.qnpic.com/r.jsp?fn=//net80earn/-672a-547d-540d.jpg[/img] 只有在加上 {[color=Red] float:left; [/color]时，所有浏览器显示的效果才一样，如下, [img=913,79]http://pic.qnpic.com/r.jsp?fn=//net80earn/2.jpg[/img] 在网上找ie bug也没找到有这个例子

管理员回复：这是ie6的一个bug

geoe(60.222.*.*) 发表于：2011-03-07 00:02:58

老师那个 字体偏移我弄好了，把nav_main ul li值改为负的就好了。可是新的问题来了，首页，企业新闻，企业简介，那几个BLOCK觉得不对， 鼠标移到首页上，那个BLOCK好像显示不完整，移动到，企业简介上，那个BLOCK 又把企业新闻的白色区域 遮挡了一点...

管理员回复：不太明白你的问题，请参考实例，如果我的正确，请仔细查找问题

geoe(60.222.*.*) 发表于：2011-03-06 23:42:40

老师啊，我的导航栏字体位置不正常，菜单，子菜单字体全部偏下，子菜单的字位置已经出去一半了，是什么原因？

管理员回复：是不是行高设置的太大了

bailin555(58.243.*.*) 发表于：2011-02-28 17:17:37

请教老师怎么控制幻灯部分的播放速度，现在是8秒，我想改4秒怎么改？

管理员回复：这个我也不清楚，网上现在的swf，好像没有提供方式

a262131247(121.27.*.*) 发表于：2011-01-20 12:32:07

老大！为什么IE6测试的导航混乱了就！不兼容？怎么解决？

管理员回复：应该不会的呀，你把最终实例下载下来看看

liyuanyuan(27.38.*.*) 发表于：2011-01-10 15:28:29

老师，您好！很感谢你的网站，你的讲解确实是让我受益匪浅，网上到处教程泛滥，能找到这么好的教程我很庆兴，轻言万语道不尽我的感激。不过我今天在联系的时候遇到了个问题，弄很久都没解决，问同伴也没找出原因，我的问题跟pfqianjin的很像，就是为什么我的li里面的文字都是竖着的，但是在IE8和firefo里面预览的时候都是好的，再Dreamwe CS3里面字都竖着了，而且把下面的mian都挤到右边去了。急啊，求解。

管理员回复：因为dw的内核和浏览器的内核不一样，我的也是竖着的，如果影响和话定义个高度和越出隐藏，在dw里就不会把下边撑开了

luguangwei(113.120.*.*) 发表于：2011-01-08 16:49:24

横细线弄好了 呵呵 不用麻烦老师啦

luguangwei(113.120.*.*) 发表于：2011-01-08 16:21:18

老师side背景的细线怎么做上的，横的径向渐变那条。

管理员回复：那是图片呀

weifq24(222.178.*.*) 发表于：2011-01-07 21:18:40

老师，您好，首先非常感谢您提供了这么好的一个教程，二是谢谢您回答我之前的疑问，我已经学完了十天的教程，基本上学会了用div结合css来设计页面，我照着教程把最后一天的主页代码写了一遍，不过还是有个地方始终没弄明白，就是导航部分的背景图片没有载入，但两边的圆角部分却显示出来了，还有就是感觉#nav的margin-bottom：8px没有起作用，导航部分是紧贴着maincontent部分的，我检查了好几遍都不知那里写错了，最后我干脆把您给的那个jiaocheng文件夹里的html代码和相应的css代码拷贝过来，还是不行，不知问题出在哪儿，望老师指点，导航部分html代码： <div id="nav"> <div id="nav_l"></div> <div id="nav_r"></div> <div class="nav_main"> <ul> <li><a href="#"><span>首页</span></a></li> <li><a href="#" id="nav_current"><span>企业新闻</span></a></li> <li><a href="#"><span>企业简介</span></a></li> <li><a href="#"><span>产品展厅</span></a></li> <li><a href="#"><span>企业历史</span></a></li> <li><a href="#"><span>招商加盟</span></a></li> <li><a href="#"><span>网上下单</span></a></li> <li><a href="#"><span>联系我们</span></a></li> </ul> </div> <div class="nav_son"> <ul> <li><a href="#">企业动态</a></li> <li><a href="#">领导活动</a></li> <li><a href="#">产品资讯</a></li> <li><a href="#">通知公告</a></li> </ul> </div> </div> 相应的css代码：#nav { height:66px; background:url(images/nav_bg.gif) 0 0 repeat-x; margin-bottom:8px;} #nav_l { float:left; height:66px; width:5px; overflow:hidden; background:url(images/nav_bg.gif) 0 -66px no-repeat; margin-right:10px;} #nav_r { float:right; height:66px; width:5px; overflow:hidden; background:url(images/nav_bg.gif) -5px -66px no-repeat;} .nav_main { height:36px; overflow:hidden;} .nav_main ul li { float:left; font-size:14px; font-weight:bold; margin:5px 5px 0 5px;} .nav_main ul li a { float:left; display:block; height:26px; line-height:26px; color:#fff; padding-left:20px;} .nav_main ul li a span { float:left; display:block; padding-right:20px;} .nav_main ul li a:hover { background:url(images/nav_bg.gif) 0 -163px no-repeat; color:#fff;} .nav_main ul li a:hover span { background:url(images/nav_bg.gif) right -163px no-repeat; cursor:pointer;} .nav_main ul li a#nav_current { height:31px; line-height:31px; background:url(images/nav_bg.gif) 0 -132px no-repeat; color:#646464;} .nav_main ul li a#nav_current span { height:31px; background:url(images/nav_bg.gif) right -132px no-repeat;} .nav_son { height:30px;} .nav_son ul li { float:left; margin-top:4px;} .nav_son ul li a { display:block; width:78px; height:22px; line-height:22px; text-align:center; color:#6e6e6e;} .nav_son ul li a:hover { background:url(images/nav_bg.gif) 0 -198px no-repeat;}

管理员回复：把#nav添加个高度，应该问题都解决了，之前章节讲过高度自适应的问题，还有本站的新手常见问题视频教程有一节也讲解了这个问题

tigeredwin(115.217.*.*) 发表于：2011-01-06 23:30:28

谢谢老师的耐心解答,问题解决了.我现在还是想就这个奇妙的幻灯效果提个问题:这个幻灯片的效果如图片模糊过渡,图片右下的数字,和鼠标在数字上停留出现的变化等是如何实现的?纯粹是通过制作flash吗?我对js代码知道不多,但是我懂英文,好像本教程这段js代码也没有包含实现如上种种效果的语句,老师我猜对吗? 另外,我有试着去自己找答案,把您的原始swf文件下载后,用flash打开,虽打开了,但是空白,是您把这个文件加密了吗? 奥妙是在这个文件中吧? 再次谢谢您的解答.

管理员回复：这个swf文件是网上现在的，我也没有具体研究，只是拿来使用，如果js中参数不能定义的，那么就是在swf中实现的，如果想研究，可以下载本站首页推荐的硕思闪客精灵破解开看看

tigeredwin(61.175.*.*) 发表于：2011-01-06 16:20:40

老师谢谢您的教程,太棒了,而且还提供原代码,使我受益匪浅. 这里想问一个关于幻灯的问题: 我下载下来看这个swf的文件,播放的内容是空白的,但是文件有15k大小.我很好奇的是,本例中的幻灯效果应该是用js代码和swf文件相互配合而成的,但是这个flash为什么播放是空白的? 请老师再费心解答下是如何实现这个功能的,文件这么小,效果又这么好. 谢谢!

管理员回复：有三个参数是分别提供图片地址，名称和url的，文章中有说明的，显示空白是图片路径不正确

newman(222.247.*.*) 发表于：2011-01-05 23:55:18

老师您好！在这里跟你学了很多有用的东西，首先对您的无私说声谢谢。用您的方法和思路做出来的网页真的很漂亮；但还是有点遗憾，就是最后这个实例的导行单卡壳了，我还很菜做不出想要的那种效果，很伤心！希望老师指点一二。

管理员回复：这个多分析分析实例，明白原理后就可以举一反三了，另外开始不要定的目标太高

bskjgeg(219.134.*.*) 发表于：2011-01-05 11:06:53

<script language="javascript"> var x=50,y=60; var xin=true,yin=true,step=1; function float(){ var l=t=0;/** var r=document.body.offsetWidth-document.all("Layer1").offsetWidth;*/ /**var b=document.body.offsetHeight-document.all("Layer1").offsetHeight;*/ /**document.all("Layer1").style.left=x;*/ /**document.all("Layer1").style.top=y; x=x+step*(xin?1:-1); if(x<=l){xin=true; if(x>=r){xin=false;}*/ y=y+step*(yin?1:-1); if(y<=t){yin=true;} if(y>=b){yin=false;} setTimeout("float()",10); } </script> 是的，注释部分的（/**内容*/）

chaoren(116.208.*.*) 发表于：2010-12-30 10:03:30

请教老师一个问题，在幻灯片这段代码中。当var texts = "";中输入文字时，这段文字显示在图片上面，我想让这段文字显示在图片下面且居中对齐，请问如何做，请老师给段完整的代码。谢谢。

管理员回复：好像不能，这个是flash设定的

9898(60.179.*.*) 发表于：2010-12-29 15:47:38

泪奔 重要找到这么好的学习网站了 我会跟身边的朋友们分享的

管理员回复：谢谢分享

pfqianjin(119.163.*.*) 发表于：2010-12-29 12:50:47

老师，为什么在设置side的两个类后就跑到main右下角去了呢，而不 是并排显示了呢？

管理员回复：宽度超出了总宽度

pfqianjin(119.163.*.*) 发表于：2010-12-28 19:33:16

老师，您好，我在练习您提供的实例的时候（即第十天案例）在设置.nav_main ul li a{float:left;display:block;height:26px;line-height:26px;color:#fff;padding-left:20px;}时为什么导航菜单都竖着显示了呢

管理员回复：我的实例是横向的呀

chaoren(121.63.*.*) 发表于：2010-12-26 19:42:19

我按照老师的方法在做导航菜单时出了点问题，没有查出来到底是哪的问题，想请教一下老师。在用IE8预览时没有问题，用IE6预览时出了问题。当我在 <li><a href="#" id="nav_current"><span>企业新闻</span></a></li> 中插入id="nav_current"时出现了如图所示的问题（请点链接）请老师帮我找出问题所在谢谢！我把代码也复制上来了。http://b56.photo.store.qq.com/http_imgload.cgi?/rurl4_b=f0718b796fe7cacfdb447fec62ec90441bb6bf1ec337dfe0cdd5830d08d29a3bdd06ce71857cd7a3d72582a2001007d5a7a3ec4c118c79927b2e6ed441e2a5f52fdf58024b26ed5d8f2b899d31a8b1b98e7411c2&a=53&b=56 <div id="nav"> <div id="nav_l"></div> <div id="nav_r"></div> <div class="nav_main"> <ul> <li><a href="#"><span>首页</span></a></li> <li><a href="#" id="nav_current"><span>企业新闻</span></a></li> <li><a href="#"><span>企业简介</span></a></li> <li><a href="#"><span>产品展厅</span></a></li> <li><a href="#"><span>企业历史</span></a></li> <li><a href="#"><span>招商加盟</span></a></li> <li><a href="#"><span>网上下单</span></a></li> <li><a href="#"><span>联系我们</span></a></li> </ul> </div> <div class="nav_son"> <ul> <li><a href="#">企业动态</a></li> <li><a href="#">领导活动</a></li> <li><a href="#">产品咨询</a></li> <li><a href="#">通知公告</a></li> </ul> </div> </div>

管理员回复：那就在我的源代码的基础上一点一点改成你想要的

chaoren(116.208.*.*) 发表于：2010-12-26 12:47:07

这是我出现问题的代码。请老师帮我研究一下。第一次做，做的比较乱。以后要写整洁一点。养成一个好的习惯。

管理员回复：你给我这么多代码没有样式表我怎么看呀

chaoren(116.208.*.*) 发表于：2010-12-26 12:44:40

我按照第十天　div+css网页标准布局实例教程 进行练习的时候出现了这个问题，不知道如何解决，当我设置发#maincontent {overflow: auto;zoom:1;}时，#side就跑到了#main的下面，我当时以为是#container的宽度设置小了，我加大了宽度，但#side还是在#main的下面，当我把#maincontent {overflow:visible;zoom:1;}溢出设为可见时，解决了这个问题，在ie8下预览时正常，当我在ie6下预览时，#side又跑到#main的下面去了。研究了半天不知道是哪儿出了问题。

管理员回复：不知道了

zsj071815(58.254.*.*) 发表于：2010-12-23 10:48:29

管理员好 在nav导航部分 在ff里面显示效果一样 可是在ie里面 就不行 不知道是什么原因

管理员回复：是你自己做的还是我的实例

kakaluoyite(218.7.*.*) 发表于：2010-12-22 16:35:46

老师为什么我按照教程编辑完右侧边栏，footer跑到main和side之间了啊？

管理员回复：没有清除maincontent的浮动

fenglanbing(182.89.*.*) 发表于：2010-12-22 15:05:34

站长你好,请问一下,幻灯功能在静态页面中可以实现,但是在aspx页面中就不能实现该功能呢?这两者有什么区别吗?还有就是aspx页面调用静态的也不能实现幻灯功能,能为我解答下吗?谢谢!

管理员回复：幻灯在动态静态都可以实现呀，本例的教程不就是php动态读取数据库的吗

jeffrey9061(61.146.*.*) 发表于：2010-12-16 16:44:25

学到这里啦。。讲的真的很详细，谢谢老师啦。。。

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

yishuiqingyao(115.151.*.*) 发表于：2010-12-15 23:45:15

老师，我是初学CSS，每次写“.nav_main”这一类的代码时，都是只能写成“.nav－main”，那个下划的短横线怎么都写不出来，换了几种输入法都没什么用，请问该怎么写呀？

管理员回复：按shift键后不就是了吗

crazyxingjc(111.76.*.*) 发表于：2010-12-06 10:04:27

老师，我想问下那个新闻图片切换的JS怎么跟数据库里的数据联系啊？？ 如何动态加载数据到那个flash里去呢？？

管理员回复：如果你懂程序的话就知道怎么加载了，按照它的数据形式会程序调用出来就行了。而且这个实例就是用程序动态加载的

a7861266(59.52.*.*) 发表于：2010-12-05 14:21:07

老师你好！幻灯片图片切换的时间间隔可以改变么？如果能，又如何改呢？期待回答。

管理员回复：这个好像不能吧，swf文件没提供这个接口

jjj(222.222.*.*) 发表于：2010-12-03 15:18:18

logo加上链接也可以用背景图片呀.. 设置一个文本隐藏就行了.

管理员回复：是的

Richard(218.58.*.*) 发表于：2010-12-02 10:03:09

有些地方代码放的位置不对 不过自己更改还是做到了与效果图一致

winding(218.56.*.*) 发表于：2010-11-29 21:28:52

<h2><a class="more" href="#">更多..</a><span>企业历史</span></h2> 中我不用其中的class="more"而直接定义在a标签上也可，这种写法我不知道对不对？！第二问题是上面一句我这样写：<h2>企业历史<span><a href="#">更多..</span></a></h2>就老有问题,这个机子调好，换一个机子就变样了，我对比你上面的写法，是不是企业历史是块元素而后面span是行元素,所以老有问题而你的都是行元素，是不是这样，望老大明示呀！先谢

管理员回复：1、那种写法也是可以的。2、你的嵌套错误呢，span和a不能混套

wushuang(221.207.*.*) 发表于：2010-11-23 09:50:06

管理员好。我在网上看到有用交互样式表的，我们站里好像没有呢，能给指点一二吗，谢谢。

管理员回复：交互样式表？第一次听说，能说具体些吗？

avada2010(222.90.*.*) 发表于：2010-11-20 15:40:41

“苹果iphone 4手机将于9月25日在中国上市”这个标题的最后一个安跑到下一行使整个布局变形怎么处理？字体我也装了的

管理员回复：删除掉一个字就可以了呀，或者用css限制超出隐藏或者程序截取

avada2010(222.91.*.*) 发表于：2010-11-17 17:41:41

老师您好： 样式#nav_l { float:left; height:66px; width:5px; overflow:hidden; background:url(../images/nav_bg.gif) 0 -66px no-repeat; margin-right:10px;} 中 最后为什么要加上margin-right:10px;起什么作用，nav_r中为什么没有？

管理员回复：首页的文字距左侧太近了，为了让它离远一点才加的

sch8732(123.232.*.*) 发表于：2010-11-15 23:02:27

老师您好，非常感谢能有这么好的教程让大家来学习。现在有一个问题请教您：幻灯片中每张图片的链接，有的地址没法显示，比如这个地址：http://www.tyice.com/?point=News&dis=showContent&id=2119 ，点击图片，只能链接到http://www.tyice.com/?point=News这个网页，而后面的&dis=showContent&id=2119 页面无法链接到，也就是说只能链接到二级页面，三级页面无法到达，是不是动态地址的链接无法显示啊？！ 实在搞不明白，期待您的回复...

管理员回复：这个没遇到过，一般情况应该可以的，它是用|来分隔的。如果真有这个问题，应该是那个swf文件内部的问题

crazyxingjc(115.150.*.*) 发表于：2010-11-15 17:14:09

您好，老师，我想问下那个菜单里那个企业新闻现在是写死的样式，我怎么设置鼠标单击之后才是这样呢？？

管理员回复：请看标准之路网站源代码，研究实现方式

dafei(58.211.*.*) 发表于：2010-11-01 01:12:14

老师，不好意思我是最近学习css的菜鸟，我刚刚搞了好久，那个幻灯片还是没有搞定，能不能仔细的说说具体的步骤？我也试了把你的代码文件下载下来，放到DW上，就你的幻灯片可以显示，我自己做的就是显示不了，纠结。 还有，在maincontent里的side 总是不能跟main水平对齐，总是在main下面 靠右对齐，这个怎么弄啊？

管理员回复：1、先查看是swf能否找到，如果找不到是swf地址不对，如果正确，确认图片地址是否正常，如果正确，查看是不是js里地址的写法不对，总之就这些原因，别的没了。2、side在下边显示，可能是两者的宽度之合超过了设置的总宽度

wfynn(125.33.*.*) 发表于：2010-10-24 17:01:55

做网站果然是个细活，首先感谢老师的细心，做的过程中遇到好多问题都是我不细心造成的，结果害我多花了好多时间，一个background（）0 bottom 括号与0还要有空格，不然图片竟然不显示，还有我构思的时候，怎么老是感觉想不出来该怎么去写代码，看到PSD文件，看到一个效果，不知如何去构思的代码，也许是刚起步，老师的教程很好，我相信通过这个网站一定会学会的，去年的时候看了这个网站，买了一本你写的书《精通CSS+DIV网页样式与布局》，也许是自己没有坚持下去，现在又重新抓起来，一定要学会。老师辛苦了，祝你赚多多的 money

管理员回复：欢迎常来

wxshanm(58.214.*.*) 发表于：2010-10-21 13:45:59

CSS Sprites 在做图片整合的时候要注意哪些啊？怎么做最有利于排版？

管理员回复：根据自己的情况，如果能驾驭全都放一张图片上的话，可以放一张上，如果觉得困难，可以分多个组合，比如本例的把导航部分放一张图片上

wxshanm(58.214.*.*) 发表于：2010-10-20 14:20:26

#maincontent { overflow:auto; zoom:1;}这两个属性是什么意思啊？ 我平时都定义成#maincontent {width：900px；margin：0 auto;} 这两个的区别是什么啊？

管理员回复：自适应高度，兼容用，请看前边章节教程

fenglanbing(180.137.*.*) 发表于：2010-10-12 23:10:27

站长，你好，看了你的WEB标准，学到了很多东西，先谢谢了，现在有个问题也是前面有朋友问到过的，就是幻灯片的JS程序，我下载了swf文件，改了图片地址 var files = "../image/pic.jpg|../image/pic1.jpg"; <param name="movie" value="../image/indexpic.swf"> <embed src="../image/indexpic.swf" 还有我也试过不用相对路径，等等，但是问题就是不能显示图片出来，请问有什么解决办法吗？

管理员回复：如果设置都正确，肯定能显示出来的

illvfs(118.249.*.*) 发表于：2010-10-01 13:54:20

站长 国庆快乐啊 很喜欢你的网站 对我帮助很大 我在学习制作二级导航时 我希望可以连接到数据库 通过点击一级导航元素 改变二级导航里的值 改过之后整个结构都乱了 怎么办呢

管理员回复：请使用第十课（三）中的调试方法，查找问题出在哪里

wuyingpiaofeng(115.56.*.*) 发表于：2010-09-30 15:37:36

那段JS代码代码看不懂，试着修改了一天也没搞明白！

管理员回复：那我也没辙了，只能学基础知识了

hackzhi007(113.117.*.*) 发表于：2010-09-30 15:28:29

main里面那个幻灯图.我改了几个地址还是没显示图,请求帮助下.我的网站www4.图片www4/images下.indexpic.swf文件我也放到了images里.我把var files = ""里面改为了"../amages/pic1.jpg",第二,第四句embed src="http://www.aa25.cn/upload/2010-09/21/images/indexpic.swf"改为embed src="/images/indexpic.swf"不行.图片前面少删少二点也不行..都是没显示图片..请帮忙一下.总之我用光了会的办法.试了接了4小时多了还是解决不了.

管理员回复：1、先确定swf路径对不？2、如果swf路径没错，那就是图片路径不对了，多个图片地址中间的分隔符还在不？

wuyingpiaofeng(222.138.*.*) 发表于：2010-09-28 11:04:36

就是边界或填充的像素数据，还有就是图片位置的数据。

管理员回复：从效果图中测量

wuyingpiaofeng(115.56.*.*) 发表于：2010-09-27 17:52:30

请问一下课程中的这些数0据跟是根据什么方法来定的？

管理员回复：什么数据？

YanYi(114.138.*.*) 发表于：2010-09-26 17:00:29

想请教一下： 1.教程效果在IE6.0中运行时，鼠标光标不能移到表单文本中！请问为什么，如何解决？ 2.这个问题与本教程无关，请老师指点一下：在做菜单时，如菜单有图形背景，在鼠标移到这个链接时，我想用一张png的小图片来实现鼠标在相关链接上的效果，在IE6.0中透明的png图片无内容区域成了白色的，但在别的浏览器中都是正常融合的，请问如何解决在IE6.0中png透明图片的这个问题。

管理员回复：1、我在IE6下测试正常；2、有关IE6下png背景透明问题，请搜索本站相关文章，有好几篇关于这方面的教程，如果非得用png不可以的话，建议还是用gif格式

maomaochong(116.231.*.*) 发表于：2010-09-26 09:15:32

站长能再出个教程说下整站的css代码的怎么来写，比如这个css文件是来控制首页的，其他很多子页的css一般怎么定义，是共用一个css文件，还是依具体情况各个子页各写一个css文件。最好举个例子来说明！

管理员回复：我的写法，一般是把全局样式放在一个base.css，头尾放在一个header.css，其它的都放另外一个样式表中，如果又出一个二级频道，内部结构变动较大的话，再建个样式表并包含base.css和header.css

kylin87(123.14.*.*) 发表于：2010-09-25 16:29:16

管理员你好，你在写那个ask的时候，按照分析，应该和上面的product一样，最下面的那个，底部有一个虚线，为什么ask没有写border-bottom：none ，但是，我看的你的源码，也没有写，但是，却没有虚线。 求解惑，谢谢

管理员回复：哈哈，那个虚线的颜色和下部的底色一样了，所以看不出来了，你把背景图片隐藏掉就看到了

aixuan2046(220.162.*.*) 发表于：2010-09-25 09:58:40

第5部分，导航栏代码运行后效果明显有问题，希望改下

管理员回复：嗯，少写了一个兼容IE6的，最后一个运行代码改过来了

caiym0523(125.76.*.*) 发表于：2010-09-23 19:39:33

我这搜索框里鼠标在放大镜前怎么处理呀

管理员回复：padding-left:20px;

pufuling1988130(111.194.*.*) 发表于：2010-09-22 09:01:42

我知道远程服务器的IP， 登录账号 登录密码，怎么用dreamweaver远程链接修改网页，具体该怎么设置

管理员回复：看来真该出第三节了

eVer(113.141.*.*) 发表于：2010-09-21 22:16:16

天哪~ 我终于等到了。

管理员回复：来的挺及时呀，刚上传完