首页 > web前端 > html教程 > 紧急!标题要长~_html/css_WEB-ITnose

紧急!标题要长~_html/css_WEB-ITnose

WBOY
发布: 2016-06-24 11:52:38
原创
1355 人浏览过

昨天临时接了个任务,修改个网页的前端CSS。
由于之前完全没有接触过。所以特来求助。。。
1、下面这种写法没搞懂是什么意思。

#mainBox #topBanner #menu{	display:table;	width:auto;	height:100%;	float:left;}
登录后复制

2、下面这段CSS在IE7以及IE8正常,但在IE9以上不正常。
这段主要实现是顶部的一个工具栏。
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最近大姨妈太严重了)。 大致的效果是这样的。
IE7:/*logo*//*btn1*//*btn2*//*btn3*//*btn4*/          <=====正常效果IE8:/*logo*/     /*btn1*//*btn2*//*btn3*//*btn4*/        <=====下沉了30pxIE9:/*logo*/
登录后复制

3、请大家给介绍几个有关CSS布局的技术博客(由浅入深)和书籍。
4、第一次正面接触CSS,也不知道用什么工具,给介绍个常用的调试工具。
在此先谢过了。


回复讨论(解决方案)

补充一下:

#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用的是同一个样式


#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用的是同一个样式


#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用的是同一个样式


#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来定义 又没有任何意义.
所以我说他这套命名是不太规范的(个人意见)



<!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选择器也有权重的.

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板