DIVCSS5 -07年学习时实用笔记
直接可用[url=http://www.divcss5.com/]CSS[/url]总结DIVCSS5-黑光QQ：418082085总结
网址：http://www.divcss5.com
[url=http://www.divcss5.com/bbs/]CSS论坛[/url]：http://www.divcss5.com/bbs/
网站内容：DIV+CSS基础、CSS基础 学习CSS成为高手不再是梦想！系统..全面..我们一直在努力！
1.隐藏连接文字
#xx a{display:block;width:100%;height:100%;}
#xx a span{display:none;width:100%;height:100%;}
2.背景图片定位
#xx ul li{ cursor:hand;float:left;width:130px;height:38px;margin:0px;background-image: url(../../images/);background-repeat:no-repeat;}
#xx ul li#abc{width:130px;height:38px;line-height:38px;background-position:0px 0px;}
3.鼠标经过为手图标
cursor:hand;
cursor: pointer ;
4.省略显示不完的汉字
overflow :hidden;text-overflow:ellipsis; //有点好的
overflow : hidden; white-space:nowrap; //没有点好的
5.显示不完的信息换行显示
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;强制把内容在同行享受完.
6.鼠标经过时候背景色改变
onMouseMove="this.style.background='#FF0000'" onMouseOut="this.style.background='#FFFFFF'"
7.标准字体设置
body{
font-size: 62.5%;
}
h1{
fong-size: 1.4em;/* h1字的大小相当于14px */
}
8.规定图片大小
.card_kad_word_tp img{
width:expression(this.width>80?"80px":width+"px"); max-width:80px;
height:expression(this.height>60?"60px":height+"px"); max-height:60px;
}
9.针对iE7
!important
现在写一个CSS可以这样：
#example { color: #333; } /* Moz */
* html #example { color: #666; } /* IE6 */
*+html #example { color: #999; } /* IE7 */
区别IE6与FF：
background:orange; *background:blue;
区别IE6与IE7：
background:green !important; background:blue;
区别IE7与FF：
background:orange; *background:green;
区别FF，IE7，IE6：
background:orange; *background:green !important; *background:blue;
注：IE都能识别*;标准浏览器(如FF)不能识别*；
IE6能识别*，但不能识别 !important,IE7能识别*，也能识别!important;FF不能识别*，但能识别!important;
IE6 IE7 FF
* √ √ ×
!important × √ √
--------------------------------------------------------------------------------
另外再补充一个，下划线"_",
IE6支持下划线，IE7和firefox均不支持下划线。
于是大家还可以这样来区分IE6，IE7，firefox
: background:orange;*background:green;_background:blue;
注：不管是什么方法，书写的顺序都是firefox的写在前面，IE7的写在中间，IE6的写在最后面。
10.JS调用
<script type="text/JavaScript">
<!--
function step(id){
var c=3;
for(var i=1;i<=c;i++)document.getElementById('step'+i).style.display='none';
document.getElementById('step'+id).style.display='';
}
//-->
</script>
<a href="#" onclick="step(1); return false;">第一步：选择搜索方式</a>
<a href="#" onclick="step(2); return false;">第二步：查看搜索结果</a>
<a href="#" onclick="step(3); return false;">第三步：查看商品详细信息页面，准备进行购买</a>
<div id="step1"></div>
<div id="step2" style="display:none;"></div>
<div id="step3" style="display:none;"></div>
11.js调用 页面
<script src="JS/bottom.js"></script>
bottoms = "http://www.5173.com/uicomm/foot.aspx";
document.write("<iframe frameborder=0 src=" + bottoms + " width=1002 height=150 scrolling=no></iframe>");
12.显示文字
white-space : normal | pre | nowrap
normal : 默认值。默认处理方式。文本自动处理换行。假如抵达容器边界内容会转到下一行
nowrap : 强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象。参阅 noWrap 属性
13.生成循环的CSS调用方法
{if $i%2!=1}class="第一中样式"{else}class="第二中样式"{/if}
14.如果点击输入 输入框内字就没有了
<input value="关键字" style="width:80px; margin-top:2px" onMouseOver="this.focus()" onBlur="if (this.value =='') this.value='关键字'" onFocus="this.select()" onClick="if (this.value=='关键字') this.valutById(x);
}
15./*如果发现自己被嵌套到IFRAME了就替换父窗口的URL,bbs除外;*/
var url=window.location.href;
if(window!=parent&&url.indexOf("bbs")==-1&&url.indexOf("iframe")==-1)
parent.navigate(url);
16.鼠标经过背景色改变
html:
<span id="headBtn"> <a href="" target="_top"><img src="" alt="我要买" border="0" align="absmiddle" onmouseover="showHeadOver(this)" onmouseout="showHeadOut(this)" /></a> <a href="" target="_top"><img src="http://pics.paipai.com/head/headSell.gif" alt="我要卖" border="0" align="absmiddle" onmouseover="showHeadOver(this)" onmouseout="showHeadOut(this)" /></a> <a href="" target="_top"><img src="http://pics.paipai.com/head/headMy.gif" alt="我的拍拍" border="0" align="absmiddle" onmouseover="showHeadOver(this)" onmouseout="showHeadOut(this)" /></a> <a href="" target="_top"><img src="http://pics.paipai.com/head/headBbs.gif" alt="社区" name="headBbs" border="0" align="absmiddle" id="headBbs" onmouseover="showHeadOver(this)" onmouseout="showHeadOut(this)" /></a> </span>
js:
function showHeadOver(obj){
obj.src=obj.src.replace(".gif","Over.gif");
}
function showHeadOut(obj){
obj.src=obj.src.replace("Over","");
}
css:
#headBtn{padding:0 1px 0 3px}
#headBtn{padding:0 0 0 13px}
17.是否允许用户激活输入中文，韩文，日文等的输入法(IME)状态
ime-mode : auto | active | inactive | disabled
auto : 默认值。不影响IME的状态。与不指定 ime-mode 属性时相同
active : 指定所有使用IME输入的字符。即激活本地语言输入法。用户仍可以撤销激活IME
inactive : 指定所有不使用IME输入的字符。即激活非本地语言。用户仍可以撤销激活IME
disabled : 完全禁用IME。对于有焦点的控\不可以激活IME
18、字体的描边显示属性
FILTER: Dropshadow(offx=1,offy=0,color=#ffffff) Dropshadow(offx=0,offy=1,color=#ffffff) Dropshadow(offx=0,offy=-1,color=#ffffff) Dropshadow(offx=-1,offy=0,color=#ffffff);
19、网页全部灰黑色
*{filter: Gray;}
20.clearfloat { clear:both;height:0;font-size: 1px; line-height: 0px;}调用<br class="clearfloat" />
21, font: 12px/1.5 arial; 字号12px 行高：12*1.5px 字体arial
22, 12px=0.75em, 10px=0.625em 1em=16px
23, min-width: 710px; _width:710px;
max-width: 1200px;
24,下面是定义container容器的宽度，如果<725就为自己的宽度，否则就等于725，相当于max-width:725px;。不推荐使用因为有时第一次图片不会被载入
<style type="text/css" media="screen">
#container { width: expression((documentElement.clientWidth < 725) ? "725px" : "auto" ); }
</style>
25.css 链接
a:active是超级链接的初始状态
a:hover是把鼠标放上去时的状况
a:link是鼠标点击时
a:visited是访问过后的情况
这几个CSS样式一般情况下是默认的。
26.IE7
<meta http-equiv="x-ua-compatible" content="ie=7" />
27,图片与文字同排需要设置IMG属性
img{vertical-align:middle;}
DIVCSS5-黑光QQ：418082085总结
网址：http://www.divcss5.com
CSS论坛：http://www.divcss5.com/bbs/
网站内容：DIV+CSS基础、CSS基础 学习CSS成为高手不再是梦想！系统..全面..我们一直在努力！
页:
[1]