★HTML代码技巧全包括
作为一名网页设计师，就要从最低做起，熟练的运用html语句和Css结构是最基本的功底。这里收集的是我工作一年多的一些心得和设计技巧。
· (1.1)关键字
· (1.2)加入小logo
· (1.3)隐藏单行文本边框
· (1.4)弹出窗口
· (1.5)页面进入和退出的特效
· (2.1)屏蔽右键和状态栏
· (2.2)添加库项目
· (2.3)插入框架代码
· (2.4)浮动图标
· (2.5)页面两边广告
· (2.6)流量统计
· (2.7)锚记的使用方法
· (2.8)flash透明法
· (2.9)隐藏链接
· (2.10)图片隐藏链接法
· 9. 随机背景音乐
· 10. 防止被人frame
· 11. 回到Top
· 12. 提交按钮的css
· 13. Flash加载进度条
· 14. 空白栏点击变空
· 15. 字体加边框
· 16. 链接下沉
· 17. 首页链接样式及侧面底部滚动条样式css
· 18. 点击弹出窗口
· 19. 鼠标选中文本框时，边框css颜色改变，按钮变手势
· 20. 链接样式与文本框和表单样式
· 21. Html显示时间
2005-12-31
1、<head></head>里
（1）关键字
<META content="" name=keywords>
<META content="" name=description>
（2）在<title></title>下，加入小logo，icon为16*16
<LINK href="css/style.css" type=text/css rel=stylesheet>
<LINK href="icon.Ico" rel="shortcut icon">
<LINK href="icon.Ico" rel=bookmark>
（3）隐藏单行文本边框
<STYLE type=text/css>
<!--
.line{
BORDER-LEFT-STYLE: none;
BORDER-RIGHT-STYLE: none;
BORDER-TOP-STYLE: none;
BORDER-bottom-STYLE: none;
}
-->
</STYLE>
<body><input type="text" name="name" class=line></body>
*隐藏右侧滚动条
<textarea name="name" rows=8 flow=79 class="line" overflow=hidden></
textarea>
*表框为1，颜色为黑色
<input type=text style="border:1 solid #000000">
（4）打开首页时，预先加载的页面
<!--(弹出窗口)-->
<SCRIPT language=JavaScript>
var gt = unescape('%3e');
var popup = null;
var over = "Launch Pop-up Navigator";
popup = window.open('ad/spring2.htm', 'popupnav', 'width=377,height=
535,top=0,left=0,resizable=1,scrollbars=auto');
if (popup != null) {
if (popup.opener == null) {
popup.opener = self;
}
popup.location.href = 'ad/spring2.htm';
}
</SCRIPT>
<!--（弹出窗口结束） -->
(5)页面进入和退出的特效
淡入淡出效果
<meta http-equiv=Page-Enter content=blendTrans(Duration=0.5)>
<meta http-equiv=Page-Exit content=blendTrans(Duration=0.5)>
马赛克效果
<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Pixelate Duration=1)">
进入页面<meta http-equiv="Page-Enter" content="revealTrans(duration=x, transition=y)">
推出页面<meta http-equiv="Page-Exit" content="revealTrans(duration=x, transition=y)">
这个是页面被载入和调出时的一些特效。duration表示特效的持续时间，以秒为单位。transition表示使用哪种特效，取值为1-23:
0 矩形缩小
1 矩形扩大
2 圆形缩小
3 圆形扩大
4 下到上刷新
5 上到下刷新
6 左到右刷新
7 右到左刷新
8 竖百叶窗
9 横百叶窗
10 错位横百叶窗
11 错位竖百叶窗
12 点扩散
13 左右到中间刷新
14 中间到左右刷新
15 中间到上下
16 上下到中间
17 右下到左上
18 右上到左下
19 左上到右下
20 左下到右上
21 横条
22 竖条
23 以上22种随机选择一种
2、<body></body>里
（1）屏蔽右键和状态栏
<body oncontextmenu=self.event.returnValue=false onselectstart="return
false"
onpaste="return false" onmouseover="self.status='快乐工作网';return
true"
background="images/di.gif" leftmargin="0" topmargin="0" marginwidth="
0" marginheight="0">
（2）添加库项目
<!-- #BeginLibraryItem "/Library/index_top.lbi" --> <body>
<!-- #EndLibraryItem -->
（3）插入框架代码
<iframe width= height= scrolling=yes src=""></iframe> 一般预宽60px
（4）浮动图标
<!-- 浮动图标 -->
<!--
</div>
<DIV id=img1
style="HEIGHT: 178px; LEFT: 509px; POSITION: absolute; TOP: 138px;
VISIBILITY: visible; WIDTH: 100px; z-index: 10;">
<A href="javascript:ShowAd();"><IMG
src="caifu.gif" alt="快乐工作网欢迎您" border=0 onmouseover="
javascript:stopMove();" onmouseout="javascript:startMove();"></A> </
DIV>
<SCRIPT language=JavaScript>
var xPos = 20;
var yPos = document.body.clientHeight;
var step = 1;
var delay = 30;
var height = 0;
var Hoffset = 0;
var Woffset = 0;
var yon = 0;
var xon = 0;
var pause = true;
var interval;
img1.style.top = yPos;
function changePos() {
width = document.body.clientWidth;
height = document.body.clientHeight;
Hoffset = img1.offsetHeight;
Woffset = img1.offsetWidth;
img1.style.left = xPos + document.body.scrollLeft;
img1.style.top = yPos + document.body.scrollTop;
if (yon) {
yPos = yPos + step;
}
else {
yPos = yPos - step;
}
if (yPos < 0) {
yon = 1;
yPos = 0;
}
if (yPos >= (height - Hoffset)) {
yon = 0;
yPos = (height - Hoffset);
}
if (xon) {
xPos = xPos + step;
}
else {
xPos = xPos - step;
}
if (xPos < 0) {
xon = 1;
xPos = 0;
}
if (xPos >= (width - Woffset)) {
xon = 0;
xPos = (width - Woffset);
}
}
function startMove() {
img1.visibility = "visible";
interval = setInterval('changePos()', delay);
}
startMove();
function stopMove()
{
window.clearInterval(interval);
}
</SCRIPT>--><!-- 浮动图标结束 -->
（5）页面两边广告
<!--两边浮动广告-->
<script language="javascript">
var delta=0.15
var collection;
function floaters() {
this.items = [];
this.addItem = function(id,x,y,content)
{
document.write('<DIV id='+id+' style="Z-INDEX: 10;
POSITION: absolute; width:80px; height:60px;left:'+(typeof(x)==
'string'?eval(x):x)+';top:'+(typeof(y)=='string'?eval(y):y)+'">'+
content+'</DIV>');
var newItem = {};
newItem.object = document.
getElementById(id);
newItem.x = x;
newItem.y = y;
this.items[this.items.length] = newItem;
}
this.play = function()
{
collection = this.items
setInterval('play()',10);
}
}
function play()
{
if(screen.width<=800)
{
for(var i=0;i<collection.length;i++)
{
collection[i].object.style.display = 'none';
}
return;
}
for(var i=0;i<collection.length;i++)
{
var followObj = collection[i].object;
var followObj_x = (typeof(collection[i].x)==
'string'?eval(collection[i].x):collection[i].x);
var followObj_y = (typeof(collection[i].y)==
'string'?eval(collection[i].y):collection[i].y);
if(followObj.offsetLeft!=(document.body.scrollLeft+
followObj_x)) {
var dx=(document.body.scrollLeft+followObj_x-
followObj.offsetLeft)*delta;
dx=(dx>0?1:-1)*Math.ceil(Math.abs(dx));
followObj.style.left=followObj.offsetLeft+dx;
}
if(followObj.offsetTop!=(document.body.scrollTop+
followObj_y)) {
var dy=(document.body.scrollTop+followObj_y-
followObj.offsetTop)*delta;
dy=(dy>0?1:-1)*Math.ceil(Math.abs(dy));
followObj.style.top=followObj.offsetTop+dy;
}
followObj.style.display = '';
}
}
var theFloaters = new floaters();
theFloaters.addItem('followDiv1','document.body.clientWidth-
106',80,'<a href="gcdf/gcdfAd.htm" target=_blank><img src=gcdfLogo.
gif border=0></a><br><br><a href=http://joyjob.cn/ target=_blank>');
theFloaters.addItem('followDiv2',6,80,'<a href="gcdf/gcdfAd.htm"
target=_blank><img src=gcdfLogo.gif border=0></a><br><br><a href="
gcdf/gcdfAd.htm" target=_blank><br>');
theFloaters.play();
</script>
<!--两边浮动广告结束-->
（6）流量统计（itsun）
<a name="itsun"></a>
<script language="JavaScript" type="text/javascript" src="http://
www1.itsun.com/counter.php?uuid=1537152&style=icon"></script>
（7）锚记的使用方法
<a href="#??"></a>
<a name="??"></a>
（8）flash去除背景
<param name="wmode" value="transparent" />
（9）隐藏链接
<a href="#"; OnMouseOver="window.status=''; return ture"><img src=""></a>
（10）图片隐藏链接法
<IMG SRC="" ALT="" WIDTH= HEIGHT= border="0" style="cursor:hand;" onclick="javascript:?();">
2006-01-07
9.随机背景音乐:
<%randomize%>
<bgsound src="mids/<%=(int(rnd()*60)+1)%>.mid" loop="-1">
10. 防止被人frame
<SCRIPT LANGUAGE=javascript><!--
if (top.location != self.location)top.location=self.location;
// --></SCRIPT>
11、<a href="javascript:window.scroll(0,0);">
12、提交按钮css
<INPUT type=submit value=" 提 交 " name=Submit style="background-image: url(http://joyjob.cn/images/mail_bt_bg02.gif);FONT-WEIGHT: bold; FONT-SIZE: 14px; WIDTH: 145px; COLOR: #015756; HEIGHT: 36px; BACKGROUND-COLOR: #019e9c">
<font color="#cccccc"> </font>
13、Flash加载进度条：
层1第一帧：
total = _root.getBytesTotal();
loaded = _root.getBytesLoaded();
baifenshu = int(loaded / total * 100);
baifenbi = baifenshu + "%";
setProperty("jindutiao", _xscale, baifenshu);
第二帧：
if (baifenshu == 100)
{
gotoAndPlay(3);
}
else
{
gotoAndPlay(1);
} // end if
最后一帧：
stop();
层2第一帧：
动态文本(Microsoft Sans Serif)
层3第三帧：
播放开始
14、空白栏点击变空
<table width="90%" border="0" align="center" cellpadding="5" cellspacing="0" class="gs">
<form name="form1" method="post" action="products.asp?action=search">
<tr>
<td align="center"><input name="keyword" type="text" id="keyword" value="请输入关键字" size="18" onClick="this.value=''">
</td>
</tr>
<tr><td><input name="kw" class="uli" type="text" size="14" maxlength="100" value="帖子关键字" defaultValue="帖子关键字" onfocus="javascript:if(this.value == this.defaultValue) this.value='';" onblur="javascript:if(this.value == '') this.value=this.defaultValue;">
</td><tr></table>
15、字体加边框
<FONT style="FILTER: glow(color=#ffffff ,strength=3); COLOR: #cc3299; HEIGHT: 10px">
16、链接下沉
<style>
A:link,A:visited ,A:active {TEXT-DECORATION: none}
A:hover {text-decoration : none; position : relative; top : 1px; left : 1px}
</style>
17、链接样式及滚动条样式css
<style type="text/css">
<!--
a:link { text-decoration: none;color: blue}
a:active { text-decoration:blink}
a:hover { text-decoration:underline;color: red}
a:visited { text-decoration: none;color: green}
-->
<!--
body {
SCROLLBAR-FACE-COLOR: #ff99cc ;
SCROLLBAR-HIGHLIGHT-COLOR: #FFFFFF;
SCROLLBAR-SHADOW-COLOR: #ff0000;
SCROLLBAR-3DLIGHT-COLOR: #ff0000;
SCROLLBAR-ARROW-COLOR: #ff0000;
SCROLLBAR-TRACK-COLOR: #ffcccc;
SCROLLBAR-DARKSHADOW-COLOR: #ffffff
}
-->
</STYLE>
1.让浏览器窗口永远都不出现滚动条
没有水平滚动条
<body style="overflow-x:hidden">
没有垂直滚动条
<body style="overflow-y:hidden">
没有滚动条
<body style="overflow-x:hidden;overflow-y:hidden">或<body
style="overflow:hidden">
2.设定多行文本框的滚动条
没有水平滚动条
<textarea style="overflow-x:hidden"></textarea>
没有垂直滚动条
<textarea style="overflow-y:hidden"></textarea>
没有滚动条
<textarea style="overflow-x:hidden;overflow-y:hidden"></textarea>
或<textarea style="overflow:hidden"></textarea>
3.设定窗口滚动条的颜色
设置窗口滚动条的颜色为红色<body style="scrollbar-base-color:red">
scrollbar-base-color设定的是基本色，一般情况下只需要设置这一个属性就可以达到改变滚动条颜色的目的。
加上一点特别的效果：
<body style="scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon">
4.在样式表文件中定义好一个类，调用样式表
<style>
.coolscrollbar{scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon;}
</style>
这样调用：
<textarea class="coolscrollbar"></textarea>
CSS属性属性说明
scrollbar-3dlight-color滚动条亮边框颜色
scrollbar-arrow-color滚动条方向箭头的颜色
scrollbar-darkshadow-color滚动条下边和右边的边沿颜色
scrollbar-face-color滚动条3D表面的颜色
scrollbar-highlight-color滚动条斜面和左面颜色
scrollbar-shadow-color滚动条下斜面和右面颜色
scrollbar-track-color滚动条底版颜色
scrollbar-base-color滚动条基准颜色。
-->
18. 点击弹出窗口
<script language="JavaScript1.2" type="text/JavaScript1.2">
var popUpWin=0;
function popUpWindow()
{
//判断该窗口(popUpWin)是否已经存在，如果已经存在，则先关闭窗口，然后再打开新窗口
if(popUpWin)
{
if(!popUpWin.closed) popUpWin.close();
}
//根据参数定位弹出窗口的展示位置
popUpWin = window.open("ad/guide.htm","ad","height=500, width=500, top=100, left=200, toolbar=no, menubar=no, scrollbars=no,resizable=no,location=no, status=no, location=no");
}
</script>
<a href="#" onclick="javascript:popUpWindow();" ></a>
19. 鼠标选中文本框时，边框css颜色改变，按钮变手势
<style>
<!--
.input
{
width:300px;
background:#ffffff;
COLOR: #000000;
HEIGHT: 24px;
FONT-SIZE: 12px;
position: absolute;
border: 1px solid #cccccc;
line-height: 150%;
text-align: left;
}
.button{
cursor: hand;
background-image: url(http://joyjob.cn/images/mail_bt_bg02.gif);
FONT-WEIGHT: bold; FONT-SIZE: 14px; WIDTH: 150px; COLOR: #000000; HEIGHT: 36px; BACKGROUND-COLOR: #019e9c
}
-->
</style>
<body>
<input class=input
onfocus="this.style.borderColor='#003399'" onBlur="this.style.borderColor=''"><p><br>
<input name="" value="提交" type="button" class=button>
</body>
20.链接样式与文本框和表单样式
.input
{
border:1 solid #006F9A;FONT-SIZE: 9pt; FONT-STYLE: normal; FONT-VARIANT: normal; FONT-WEIGHT: normal; HEIGHT: 18px; LINE-HEIGHT: normal
}
.label{
float: left;
width: 80px;
}
.form{margin:0px}
a.white:link {color: #FFFFFF;text-decoration: none;}
a.white:active { text-decoration:none}
a.white:hover { text-decoration:underline; color: #FFFFFF}
a.white:visited { text-decoration:underline; color: #FFFFFF}
.white
{font-family: "Verdana", "Arial", "Helvetica", "sans-serif";
font-size: 12px;
line-height: 12px;
color: #FFFFFF; }
用法：<a href="" class=white>
class类要加在每一个对象后面。
21. Html显示时间
<script>
function show(){
var date = new Date(); //日期对象
var now = "";
now = date.getFullYear()+"年"; //读英文就行了
now = now + (date.getMonth()+1)+"月"; //取月的时候取的是当前月-1如果想取当前月+1就可以了
now = now + date.getDate()+"日";
now = now + date.getHours()+"时";
now = now + date.getMinutes()+"分";
now = now + date.getSeconds()+"秒";
document.getElementById("nowDiv").innerHTML = now; //div的html是now这个字符串
setTimeout("show()",1000); //设置过1000毫秒就是1秒，调用show方法
}
</script>
<body onload="show()"> <!-- 网页加载时调用一次 以后就自动调用了-->
<div id="nowDiv"></div>
</body>
| 
