分类 "HTML+DIV+CSS" 下的文章

width:192px; height:55px; margin-top:100px; background:url(images/anniu01.gif) no-repeat left bottom;

要将上面的改成

width:192px; height:155px; background:url(images/anniu01.gif) no-repeat left 50px;

2.尽量用padding-top:,少用margin-top

 

今天总算升级到IE8了,感觉CSS的写法要想同时适应IE6、IE7、IE8、FireFox,有以下几个基本的窍门。

1、使用float后必须clear,否则IE8显示错误。

2、h1,h2,h3,ul,li,dl,dt,dd,p...最好定义margin:0和padding:0,否则各种浏览器显示有误差。

3、line-height值最好是偶数,奇数显示有误差。

4、input 的text和password两种形式在IE8不定义字体(宋体)下长度高度不一样,可将input定义为font-family:Arial。

5、如果想在标题前后加小图标,最好不要直接用img,用img的话IE6行间距会缩小,应该用<li>加背景的形式。

...今天暂时只发现这几点,更多的以后继续总结。

实在不行再用分开定义的办法:

div {
margin:0; /* 给全部浏览器看 */
*margin:10px; /* 给IE6、IE7看 */
_margin:20px; /* 只给IE6看 */
}

附:基本CSS样式表

<style type="text/css">
body {
margin:0;
font-size:9pt;
line-height:18px;
}

h1,h2,h3,ul,li,dl,dt,dd,p {
margin:0;
padding:0;
}

ul {
list-style:none;
}

form {
margin:0;
}

input,textarea,select {
font-family:Arial;
font-size:9pt;
}

.clear {
clear:both;
}
</style>

1、不要使用过小的图片做背景平铺。
宽高 1px 的图片平铺出一个宽高 200px 的区域,需要 200*200=40, 000 次,占用资源。
2、无边框。
推荐的写法是 border:none;。border:0; 只是定义边框宽度为零,但边框样式、颜色还是会被浏览器解析,占用资源。
3、慎用 * 通配符。
所谓通配符,就是将 CSS 中的所有标签均初始化,不管用的不用的,过时的先进的,一视同仁,这样,大大的占用资源。要有选择的初始化标签。
4、CSS 的十六进制颜色代码缩写。
习惯了缩写及小写,这才知道,原来不是推荐的写法,为的是减少解析所占用的资源。但同时会增加文件体积。孰优孰劣,有待仔细考证。
5、样式放头上,脚本放脚下。不内嵌,只外链。
6、坚决不用 CSS 表达式。
7、使用 引用样式表,而不是通过 @import 导入。
8、一般来说,PNG 比 GIF 要小,小得多。再者,GIF 中有多少颜色是被浪费的,很值得优化。
9、千万不要在 HTML 中缩放图片,一者不好看,二者占资源。
10、正文字体最好用偶数,12px、14px、16px,效果非常好。特例,15px。
11、block、ul、ol 等上下留出至少一倍行距,左侧至少两倍行距,右侧随意。
12、段落之间,至少要有一倍行距。
13、强行指定某些元素的 line-height,正文 1.6 倍于文字大小,标题 1.3 倍。
14、中文标点用全角。英文夹杂在中文中,左右空格,半角。
15、中文字体的粗体和斜体,远离较好,利民利己。

记录一下,以防以后用到,搜罗自网络,兼容IE和Firefox。 js 计时器 (timer)
-------------------------------------------------------------------------------------------------
html head title Nonove js timer 计时器 /title /head body script langu
记录一下,以防以后用到,搜罗自网络,兼容IE和Firefox。

js 计时器 (timer) :

<html>
<head>
<title> Nonove js timer 计时器 </title>
</head>
<body>
<script language="javascript">
var se,m=0,h=0,s=0,ss=1;
function second(){
if((ss%100)==0){s+=1;ss=1;}
if(s>0 && (s%60)==0){m+=1;s=0;}
if(m>0 && (m%60)==0){h+=1;m=0;}
t=h+"时"+m+"分"+s+"秒"+ss+"毫秒";
document.getElementById("showtime").value=t;
ss+=1;
}
function startclock(){se=setInterval("second()",1);}
function pauseclock(){clearInterval(se);}
function stopclock(){clearInterval(se);ss=1;m=h=s=0;}
</script>
<input name="s" type="button" value="开始计时" onclick="startclock()">
<input name="s" type="button" value="暂停计时" onclick="pauseclock()">
<input name="s" type="button" value="停止计时" onclick="stopclock()">

<input name="showtime" style="color:#ff0000;width:200px;" id="showtime" type="text" value="0时0分0秒">
</body>
</html>

js 时钟(clock) 兼容IE和Firefox:

<html>
<head>
<title> Nonove js clock 时钟 </title>
<script type="text/javascript">
function Clock() {
var date = new Date();
this.year = date.getFullYear();
this.month = date.getMonth() + 1;
this.date = date.getDate();
this.day = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六")[date.getDay()];
this.hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
this.minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
this.second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();

this.toString = function() {
return "现在是:" + this.year + "年" + this.month + "月" + this.date + "日 " + this.hour + ":" + this.minute + ":" + this.second + " " + this.day;
};

this.toSimpleDate = function() {
return this.year + "-" + this.month + "-" + this.date;
};

this.toDetailDate = function() {
return this.year + "-" + this.month + "-" + this.date + " " + this.hour + ":" + this.minute + ":" + this.second;
};

this.display = function(ele) {
var clock = new Clock();
ele.innerHTML = clock.toString();
window.setTimeout(function() {clock.display(ele);}, 1000);
};
}
</script>
</head>
<body>
<div id="clock" align="center"></div>
<script type="text/javascript">
var clock = new Clock();
clock.display(document.getElementById("clock"));
</script>
</body>
</html>

用到li标签,要自动宽度,因为无法预计里面的text的长度,如果固定宽度,又浪费很多空白。
但是死活就是出错,英文没问题,中文就不行:

<!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=utf-8" />
<title>无标题文档</title>
<style>
.link-m1{
width:400px;
}
.link-m1 ul li{
float:left;
margin:2px 5px;
list-style:none;
display:block;
}
</style>
</head>
<body>
<div class="link-m1">
<ul>
<li>武汉晚报</li><li>汽车大世界</li><li>武汉晨报</li><li>车主之友</li><li>湖北日报</li><li>楚天金报</li><li>荆楚网</li><li>长江商报</li><li>武汉晚报</li><li>汽车大世界</li><li>武汉晨报</li><li>车主之友</li><li>湖北日报</li><li>楚天金报</li><li>荆楚网</li><li>长江商报</li>
</ul>
</div>
</body>
</html>

显示效果:

搞了足足1个小时。
靠,最后在百度中找到了,很简单,在LI标签中加这个样式即可:white-space: nowrap;

.link-m1 ul li{
float:left;
margin:2px 5px;
list-style:none;
display:block; 
white-space: nowrap;
}

问题解决。

<iframe border="0" name="piaoyun" src="你要显示的地址" width="400" height="400" allowTransparency scrollbars="yes" frameBorder="0"></iframe>

特点是无论使用何种分辨率,它的大小和位置都是不变的。
Iframe是Inline   Frame的缩写,称为内联框架。看着很眼熟吧,对了,它有个近亲可是大名鼎鼎的Frame(框架)标记。使用框架有两个缺点:占用了宝贵的显示面积、不利于保持网站整体风格。而使用Iframe则可以避免此类缺点。它可以在网页的局部插入另一个文件,更新时只要更改所插入的文件即可。

Iframe标记的主要格式是:

 <Iframe   src="url"   width="x"   height="y"   scrolling="yes或no或auto"   frameborder="0或1"></Iframe>

src:插入文件的路径,格式不限。
width、height:定义插入区域的宽高。
scrolling:是否显示Iframe框架的滚动栏。设为yes时始终显示、no为始终不显示、设为auto时只有所插入的文件其显示范围大于定义的Iframe宽高时才显示。
FrameBorder:只有0和1两个值,分别表示没有边框和有边框。