紧急!标题要长~_html/css_WEB-ITnose
昨天临时接了个任务,修改个网页的前端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选择器也有权重的.

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

公众号网页更新缓存,这玩意儿,说简单也简单,说复杂也够你喝一壶的。你辛辛苦苦更新了公众号文章,结果用户打开还是老版本,这滋味,谁受得了?这篇文章,咱就来扒一扒这背后的弯弯绕绕,以及如何优雅地解决这个问题。读完之后,你就能轻松应对各种缓存难题,让你的用户始终体验到最新鲜的内容。先说点基础的。网页缓存,说白了就是浏览器或者服务器为了提高访问速度,把一些静态资源(比如图片、CSS、JS)或者页面内容存储起来。下次访问时,直接从缓存里取,不用再重新下载,速度自然快。但这玩意儿,也是个双刃剑。新版本上线,

本文讨论了使用HTML5表单验证属性,例如必需的,图案,最小,最大和长度限制,以直接在浏览器中验证用户输入。

本文展示了使用CSS为网页中添加有效的PNG边框。 它认为,与JavaScript或库相比,CSS提供了出色的性能,详细介绍了如何调整边界宽度,样式和颜色以获得微妙或突出的效果

本文讨论了html&lt; datalist&gt;元素,通过提供自动完整建议,改善用户体验并减少错误来增强表格。Character计数:159

本文讨论了HTML&lt; Progress&gt;元素,其目的,样式和与&lt; meter&gt;元素。主要重点是使用&lt; progress&gt;为了完成任务和LT;仪表&gt;对于stati

本文解释了HTML5&lt; time&gt;语义日期/时间表示的元素。 它强调了DateTime属性对机器可读性(ISO 8601格式)的重要性,并在人类可读文本旁边,增强Accessibilit

本文讨论了HTML&lt; meter&gt;元素,用于在一个范围内显示标量或分数值及其在Web开发中的常见应用。它区分了&lt; meter&gt;从&lt; progress&gt;和前
