超实用的样式写法

-----表格样式---------------------------------------

//去表格间距
table{ border-collapse:collapse; border-spacing:0; }

//内框可见
<table bordercolor=#008000 border=1 style="border-collapse: collapse" width="567">

//内框不可见
<table border="0" style="border: 1px solid #008000" width=500>

--------------------------------------------------------------------------------------

//鼠标放上去时整行变颜色
<tr onMouseOver="this.style.background='#cccccc'" onMouseOut="this.style.background='white'">
//鼠标放上去变化图片
<img src="dh.jpg" onmouseover="javascript:src='wsyd2.gif'" onmouseout="javascript:src='wsyd.gif'">


---可判断QQ是否在线
<a href=tencent://message/?uin=503854412&amp;Site=用心教师&amp;Menu=yes><img class="leftimg" border="0" SRC=http://wpa.qq.com/pa?p=1:503854412:6></a>


---背景图片的控制---------------------------------------------------------------------------------
----如何使表格的背景图片即不重复又居中或者右、左边对齐

<td background="**.jpg" style="background-repeat:no-repeat">

style="background: url(dhbj2.jpg) no-repeat center; background-repeat: no-repeat"

---左上角对齐,不重复
 background="images/j_newN1.jpg" style="no-repeat left top; background-repeat: no-repeat"

---水平居中,底部对齐
 style="background-position: center bottom; background-repeat: no-repeat"

--底部对齐,横向重复
style="background: url(images/bj.gif) no-repeat bottom; background-repeat: repeat-x"

 style="no-repeat bottom; background-repeat: repeat-x"


--横向重复
<td background="images/ny_bj.jpg" style="background-repeat: repeat-x;">


背景不重复:background-repeat: no-repeat;
---------------------------------------------------------------------------------------


----javascript 调用样式
<style>
.normal {color:#ff0000;font-weight:600}
.start2 {color:#000000;} 
</style>
<td onmouseover="this.className='normal'" onmouseout="this.className='start2'">


--鼠标移上去改变背景图片
<td background="ny01.gif" onmouseover="this.background='ny01.gif'" onmouseout="this.background='ny02.gif'">


--鼠标移上去改变图片
<img border="0" src="images/about_more.jpg" onmouseover="javascript:src='wwwdoc/images/about_more_2.gif'" onmouseout="javascript:src='wwwdoc/images/about_more.jpg'">
-----------------------------------------------------------------------------------


设置 DIV 背景
<div style="BACKGROUND-ATTACHMENT: fixed; BACKGROUND-IMAGE: url(WebImage/logo.gif); BACKGROUND-REPEAT: no-repeat"></div>


----div 水平、垂直居中
<div style="width:300px; height:300px;text-align: center;vertical-align: middle;padding-top: 150px;border:1px;border-color:#0099CC;border-style:solid;">水平、垂直居中</div>


---div属性---
相对对齐:position:relative; 
绝对对齐:position:absolute;
隐藏多余的:overflow:hidden;

背景颜色:background-color:#004F79;

背景图片:BACKGROUND-IMAGE: url(WebImage/logo.gif);
边框颜色:border:1px;border-color:#0099CC;border-style:solid;
背景右下对齐:background-position: right bottom;
背景 不 重复:background-repeat: no-repeat;
边框设为虚线:border-style:dashed; border-color:#000000; border-width:1px;
边框: border-color:Red; border-width:1px; border-style:solid;
段前缩进:text-indent: 26px;

字间距:letter-spacing: 5px




.

你可能感兴趣的:(超实用的样式写法)