很多人都知道对某个标签重复写css,会已最后那个css 为有效。
ID>class 大家都知道的了。但是用了包含选择符后,又怎么一回事呢。
那么猜猜下面最终的颜色会是什么?
<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>css选择符</title>
<style type="text/css">
#wrap #content h5.title{
color:red;
}
#wrap #content .title{
color:aqua;
}
#wrap #content h5{
color:black;
}
#content h5.title{
color:blue;
}
#content .title{
color:fuchsia;
}
#content h5{
color:gray;
}
h5.title{
color:green;
}
.title{
color:lime;
}
h5{
color:maroon;
}
</style>
</head>
<body>
<div id="wrap">
<div id="content">
<h5 class="title">TestTestTestTestTestTest</h5>
</div>
</div>
</body>
</html>
最终发现选择符是按这整个排序比较大小的:
1. 包含选择符+类型选择符+类选择符 #wrap #content h5.title(包含选择符越大越优先)
2. 类型选择符+类选择符 h5.title
3. 类选择符 .title
4. 类型选择符 h5
如有发现错误HY提出..
这周重构了公司电信项目的页面,13个页面,用了3天半时间。原来的页面也是用 div+css 写,只是不够标准。我全部重构后对比发现。同样的页面和内容,最后全部文件加起来居然少了1M 多。而且我还放了jquery进去(全部的js不超过200行)。
大概算了下,13个页面省下1兆,1M*10000 pv/天 ~=10G 流量。 假如一天1W个PV 访问了这13个页面,一天就省下10G 的流量哇.. 哈哈。
所以重构还是很值钱的。
一般IE 的话加个透明就可以了,但是flash好似不行。解决办法,就是在embed 中也加上wmode="transparent"
1、
很常用flash做为背景的命令,在这里就不罗嗦了。如果不加Firefox没问题,IE就会挡住DIV层显示。
2、
重点在这里,在
[align=center]

[/align]
http://www.iamkane.com/service/
我们专注 PSD to XHTML , PNG to XHTML
在8小时内将设计稿以手写代码方式(hand-coded)转化成高质量、符合W3C标准的XTHML+CSS文件,并提供友善的注释供各种程序的实现。
We provides hand-coded conversion of your designs into high quality, W3C valid XHTML/CSS in less than 8 hours.
我们保证转化页面和设计稿效果在 Internet Explorer 6+ 、Firefox3.0+ 、Opeara9+、Safari、Chrome 各款主流浏览器中的效果一致, 并且注重页面加载时的性能,SEO的网站结构语义化和搜索引擎友善性,幷根据您的需求在页面适当作出SEO。我们确认最终代码是符合W3C标准。
我们接受各种主流图形文件的设计稿: PSD, PNG, JPG ,AI 等。
做页面经常会遇到需要做tabs切换效果。而且每次的Tabs数目可能不一样。没用jquery的tabs插件.. 所以就自己写了一个页面上无脚本,通过绑定来实现无限个tabs的方法。
$(document).ready(function(){
var objli=$("#ultab >li"); //声明tabs的li为数组
var objtabs=$("#tabs > div[class='content']");//声明tabs的内容div为数组
objli.each(function(){
//给每个li绑定click事件
$(this).bind("click",function(){
//每个li 去除当前
objli.each(function(){
$(this).removeClass("current");
});
//每个tabs隐藏
objtabs.each(function(){
$(this).hide();
});
//当前点击的li加上css
$(this).addClass("current");
//获取当前点击的li的name属性,name属性用于传递需要显示tab对象
var curtab=$(this).attr("name");
$("#"+curtab).show();
})
})
});
<ul id="ultab">
<li class="current" name="tab_1"><a>Title1</a></li>
<li name="tab_2"><a>Title2</a></li>
<li name="tab_3"><a>Title3</a></li>
<li name="tab_4"><a>Title4</a></li>
<li name="tab_5"><a>Title5</a></li>
</ul>
<div id="tabs">
<div id="tab_1" class="content">
tab1
</div>
<div id="tab_2" class="content" style="display:none;">
tab2
</div>
<div id="tab_3" class="content" style="display:none;">
tab3
</div>
<div id="tab_4" class="content" style="display:none;">
tab4
</div>
<div id="tab_5" class="content" style="display:none;">
tab5
</div>
</div>
在IE8 FF 下 当 li float 了的时候,ul 会无法自动适应高度。此时2个方法fix 这个问题。
1. 对ul 进行float。
2. 对ul 进行 clearfix (reset中的 clearfix 类) http://www.iamkane.com/article.asp?id=10
一般推荐使用 clearfix 来解决。
IE8出来后,又需多一个兼容的IE版本了。目前最快捷的 IE8 IE7 IE6 Firefox CSS hack 方法:注意顺序不能乱
#element{
color:red /*FF起效*/
color:/*\**/blue\9 /*IE8起效 注意前后加的hack字符*/
*color:black /*IE7起效*/
_color:green /*IE6起效*/
}
当某些情况下,IE8 不兼容的时候可以用以下方法:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
刚上班没多久,公司让我整理Web前端开发的规范化文档。网上找了好久都是一些零零散散的文章。最终我只能自己整理和根据自己的经验补充一些地方。需求文档就写得多了,详细的教程还真没写过。现在把写好的教程共享出来给大家看看。如有什么不足的,可以给我留言。
Web前端开发规范教程
一.背景知识
1.1 WEB标准
1.11 结构标准语言
1.12 表现标准语言
1.13 行为标准
二. 如何实现Web标准
2.1 软件环境
2.11 制作软件
2.12 测试软件
2.2 网站架构的流程
2.21 设计稿的分析
2.22 切图 5
2.23 HTML和CSS的编写
2.3 XHTML的编写代码规范
2.31 所有的标签都必须使用结束标记
2.32 所有标签和属性名称都必须小写
2.33 属性值必须使用双引号括起来
2.34 不允许使用属性简写
2.35 所有标签都必须合理嵌套
2.36 不是标签一部分的特殊符号都用编码表示
2.37 图片标签必须要有ALT属性
2.38 不能在注释中使用两个以上的破折号“–”
2.4 CSS相关规范
2.41 选择DOCTYPE
2.42 指定语言及字符集
2.43 调用样式的方法比较
2.44 编写样式的习惯
2.5 Javascript 的编写代码规范
2.51 选择适合自己用的JavaScript框架(库)
2.52 JavaScript的编写规范
三. 目录结构和命名规范
3.1 网站的目录结构和文件命名
3.11 目录结构
3.12 html命名
3.13 css命名
3.14 js命名
3.15 图片的命名
3.2 XHTML元素的命名参考
3.21 布局页面的div id 命名
3.22 页面的各种元素id命名和class命名
SetVariable:是给flash中的变量赋值。(就是将javaScrip中数值赋给.swf)
TCallFrame:是执行flash中的actionScript.(主要是执行flash脚本中的打印)
function thisMovie(movieName) {
if (navigator.appName.indexOf("Microsoft") != -1)
{
return window[movieName]
}
else {
return document[movieName]
}
function fuck(n)
{
if(n=1)
{
thisMovie('flashid').SetVariable('a',1); //执行
}
else
{
thisMovie('flashid').SetVariable('a',2);
}
}

reply