昨天临时接了个任务，修改个网页的前端CSS。
由于之前完全没有接触过。所以特来求助。。。
1、下面这种写法没搞懂是什么意思。
1 | #mainBox #topBanner #menu{ display:table; width:auto; height:100%; float:left;}
|
登入後複製
2、下面这段CSS在IE7以及IE8正常，但在IE9以上不正常。
这段主要实现是顶部的一个工具栏。
1 | CSS:#mainBox{ display:block; margin-left:auto; margin-right:auto; width:940px;}#mainBox #topBanner{ display:none; width:100%; height:30px; background:url("res/bannerBg.png") repeat-x;}#mainBox #topBanner #logo{ width:230px; height:100%; float:left; background:url("res/logo.png") no-repeat;}#mainBox #topBanner #menu{ width:auto; height:100%; float:left;}#mainBox #topBanner #menu a{ display:block; padding:8px; width:115px; background:url("res/bigbtn.png") repeat-x; color:#C6C5C8; line-height:100%; text-decoration:none; float:left;}HTML： <div id="mainBox"> <div id="topBanner"> <div id="logo"></div> <div id="menu"> <a id="liveBtn" href="javascript:;" title="LIVE SHOW">LIVE</a> <a id="playbackBtn" href="javascript:;" title="PLAY BACK">PLAY BACK</a> <a id="setupBtn" title="SET UP" href="javascript:;">SETTINGS</a> <a id="logoutBtn" title="LOG OUT" href="javascript:;">LOG OUT</a> </div> </div></div>
|
登入後複製
具体表现为：IE7下
这段正常显示，IE8的时候
这段整体下沉了30px，IE9下
整体不显示。
图片上传不了（CSDN最近大姨妈太严重了）。 大致的效果是这样的。
1 | IE7： <=====正常效果IE8： <=====下沉了30pxIE9：
|
登入後複製
3、请大家给介绍几个有关CSS布局的技术博客（由浅入深）和书籍。
4、第一次正面接触CSS，也不知道用什么工具，给介绍个常用的调试工具。
在此先谢过了。
回复讨论(解决方案)
补充一下：
1 | #mainBox #topBanner{ display:none; width:100%; height:30px; background:url("res/bannerBg.png") repeat-x;}display属性是通过JS来动态改变成block的。
|
登入後複製
贴出的代码咱看不出什么，，只能猜测是，a引起的，，#mainBox #topBanner #menu a设置一下margin:0;line-height:0;试试
ie9浏览器已经有控制台 可以查看dom元素状态了 f12
贴出的代码咱看不出什么，，只能猜测是，a引起的，，#mainBox #topBanner #menu a设置一下margin:0;line-height:0;试试
#mainBox #topBanner #menu
这种写法是不是 就是 CSS 后代选择器
http://www.w3school.com.cn/css/css_selector_descendant.asp
贴出的代码咱看不出什么，，只能猜测是，a引起的，，#mainBox #topBanner #menu a设置一下margin:0;line-height:0;试试
#mainBox #topBanner #menu
这种写法是不是 就是 CSS 后代选择器
http://www.w3school.com.cn/css/css_selector_descendant.asp
不是后代选择器
简单来说就是这几个id用的是同一个样式
贴出的代码咱看不出什么，，只能猜测是，a引起的，，#mainBox #topBanner #menu a设置一下margin:0;line-height:0;试试
#mainBox #topBanner #menu
这种写法是不是 就是 CSS 后代选择器
http://www.w3school.com.cn/css/css_selector_descendant.asp
不是后代选择器
简单来说就是这几个id用的是同一个样式
1 | #mainBox{ display:block; margin-left:auto; margin-right:auto; width:940px;}#mainBox #topBanner{ display:none; width:100%; height:30px; background:url("res/bannerBg.png") repeat-x;}#mainBox #topBanner #logo{ width:230px; height:100%; float:left; background:url("res/logo.png") no-repeat;}#mainBox #topBanner #menu{ width:auto; height:100%; float:left;}
|
登入後複製
登入後複製
登入後複製
那像这几个
mainBox ，topBanner ，menu，logo分别都是哪些属性呢？
贴出的代码咱看不出什么，，只能猜测是，a引起的，，#mainBox #topBanner #menu a设置一下margin:0;line-height:0;试试
#mainBox #topBanner #menu
这种写法是不是 就是 CSS 后代选择器
http://www.w3school.com.cn/css/css_selector_descendant.asp
不是后代选择器
简单来说就是这几个id用的是同一个样式
1 | #mainBox{ display:block; margin-left:auto; margin-right:auto; width:940px;}#mainBox #topBanner{ display:none; width:100%; height:30px; background:url("res/bannerBg.png") repeat-x;}#mainBox #topBanner #logo{ width:230px; height:100%; float:left; background:url("res/logo.png") no-repeat;}#mainBox #topBanner #menu{ width:auto; height:100%; float:left;}
|
登入後複製
登入後複製
登入後複製
那像这几个
mainBox ，topBanner ，menu，logo分别都是哪些属性呢？
你贴的这些全部都是以 CSS ID 选择器 命名的样式名.
CSS ID 选择器 有以下属性
1.在一个 HTML文档中,ID 选择器仅仅会使用一次;
2.ID 选择器不能结合使用;
至于你的问题
那像这几个
mainBox ，topBanner ，menu，logo分别都是哪些属性呢？
这个是后代选择器的写法.所以是选择作为某元素后代的元素.比如logo,把他定义到DIV/SPAN上面,SPAN/DIV就用上了他
但后代选择器用ID来定义 又没有任何意义.
所以我说他这套命名是不太规范的(个人意见)
贴出的代码咱看不出什么，，只能猜测是，a引起的，，#mainBox #topBanner #menu a设置一下margin:0;line-height:0;试试
#mainBox #topBanner #menu
这种写法是不是 就是 CSS 后代选择器
http://www.w3school.com.cn/css/css_selector_descendant.asp
不是后代选择器
简单来说就是这几个id用的是同一个样式
1 | #mainBox{ display:block; margin-left:auto; margin-right:auto; width:940px;}#mainBox #topBanner{ display:none; width:100%; height:30px; background:url("res/bannerBg.png") repeat-x;}#mainBox #topBanner #logo{ width:230px; height:100%; float:left; background:url("res/logo.png") no-repeat;}#mainBox #topBanner #menu{ width:auto; height:100%; float:left;}
|
登入後複製
登入後複製
登入後複製
那像这几个
mainBox ，topBanner ，menu，logo分别都是哪些属性呢？
你贴的这些全部都是以 CSS ID 选择器 命名的样式名.
CSS ID 选择器 有以下属性
1.在一个 HTML文档中,ID 选择器仅仅会使用一次;
2.ID 选择器不能结合使用;
至于你的问题
那像这几个
mainBox ，topBanner ，menu，logo分别都是哪些属性呢？
这个是后代选择器的写法.所以是选择作为某元素后代的元素.比如logo,把他定义到DIV/SPAN上面,SPAN/DIV就用上了他
但后代选择器用ID来定义 又没有任何意义.
所以我说他这套命名是不太规范的(个人意见)
1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><style type="text/css">div{margin:5px;}.t{background-color:#eee;width:200px;}.t .y{background-color:#ccc;}.t .y .o{background-color:#333;}.t .i{background-color:#999;}.t .i .o{background-color:#666;}.t #z{background-color:#FF5151;}.t #z #y{background-color:#000079;}.t #m{background-color:#8600FF;}.t #m #y{background-color:#642100;}</style></head><body><div class="t">t <div class="i">i <div class="o">o</div> </div> <div class="y">y <div class="o">o</div> </div> <div id="z">z <div id="y">y</div> </div> <div id="m">m <div id="y">y</div><!--个人感觉不规范的--> </div></div></body></html>
|
登入後複製
个人感觉不规范原因
1.与W3C CSSID选择器标准冲突;
2.CSS选择器也有权重的.
