超实用的样式写法

时间：2016-05-12 18:04:19 阅读：160 评论：0 收藏：0 [点我收藏+]

标签：

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

//去表格间距
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&Site=用心教师&Menu=yes><img class="leftimg" border="0" SRC=http://wpa.qq.com/pa?p=1:503854412:6></a>

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

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

超实用的样式写法

标签：

原文地址：http://blog.csdn.net/jsm8523/article/details/51352916

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行