网页设计技巧大全（摘抄）

原文出处: http://www.blogcn.com/user59/leafdesign/index.html


2006-10-9
无级缩放图片大小

改变图片大小
function resizepic(thispic)
{
if(thispic.width>550){thispic.height=thispic.height*550/thispic.width;thispic.width=550;}
}


无级缩放图片大小
function bbimg(o)
{
var zoom=parseInt(o.style.zoom, 10)||100;
zoom+=event.wheelDelta/12;
if (zoom>0) o.style.zoom=zoom+'%';
return false;
}
图片链接处加入:



双击鼠标滚动屏幕的代码
var currentpos,timer;
function initialize()
{
timer=setInterval ("scrollwindow ()",30);
}
function sc()
{
clearInterval(timer);
}
function scrollwindow()
{
currentpos=document.body.scrollTop;
window.scroll(0,++currentpos);
if (currentpos !=document.body.scrollTop)
sc();
}
document.οnmοusedοwn=sc
document.οndblclick=initialize

更改字体大小
var status0='';
var curfontsize=10;
var curlineheight=18;
function fontZoomA(){
if(curfontsize>8){
document.getElementById('fontzoom').style.fontSize=(--curfontsize)+'pt';
document.getElementById('fontzoom').style.lineHeight=(--curlineheight)+'pt';
}
}
function fontZoomB(){
if(curfontsize<64){
document.getElementById('fontzoom').style.fontSize=(++curfontsize)+'pt';
document.getElementById('fontzoom').style.lineHeight=(++curlineheight)+'pt';
}
}
----------------------------------------------------------------------------------------



leafdesign 发表于 >2006-10-9 11:58:07 保存该日志到本地 [全文] [评论] [引用] [推荐] [档案] [推给好友] [收藏到网摘]

2006-10-8
CSS样式命名规则(仅供参考)

1.样式命名
外　套：　　wrap
主导航：　　mainnav
子导航：　　subnav
页　脚：　　footer
整个页面：　content
页　眉：　　header
页　脚：　　footer
商　标：　　label
标　题：　　title
主导航：　　mainbav（globalnav）
顶导航：　　topnav
边导航：　　sidebar
左导航：　　leftsidebar
右导航：　　rightsidebar
旗　志：　　logo
标　语：　　banner
菜单内容1： menu1 content
菜单容量：　menu container
子菜单：　　submenu
边导航图标：sidebarIcon
注释：　　　note
面包屑：　　breadcrumb(即页面所处位置导航提示）
容器：　　　container
内容：　　　content
搜索：　　　search
登陆：　　　Login
功能区：　　shop(如购物车，收银台)
当前的　　　current

2.另外在编辑样式表时可用的注释可这样写：
<-- Footer -->
内容区
<-- End Footer -->

3.样式文件命名
主要的 master.css
布局，版面 layout.css
专栏 columns.css
文字 font.css
打印样式 print.css
主题 themes.css


leafdesign 发表于 >2006-10-8 9:19:13 保存该日志到本地 [全文] [评论] [引用] [推荐] [档案] [推给好友] [收藏到网摘]

2006-9-30
常用的代码集合

表格变色
οnmοuseοut="this.style.backgroundColor=''"
style="CURSOR: hand">

禁止复制，鼠标拖动选取


普通iframe页面


iframe自适应高度


IE地址栏前换成自己的图标&可以在收藏夹中显示出你的图标



字号缩放
越来越多的人长时间的泡网，眼镜的普及率也越来越高，让文字大点，让更多的用户看的更清楚。

需要指定大小的文字
大 中 小

select挡住div的解决方法
在div里加入下面的代码，根据需要调整就可以了。


iframe(嵌入式帧)自适应高度
填写的嵌入地址一定要和本页面在同一个站点上，否则会提示“拒绝访问！”。对跨域引用有权限问题，请查阅其他资料。


跳转菜单新窗口

Internet Explorer
Microsoft Home
Developer Network


flash透明选项


添加到收藏夹和设为首页
设为首页

收藏本站

记录并显示网页的最后修改时间


节日倒计时


加在HEAD里
禁止缓存




让IFRAME框架内的文档的背景透明


打开窗口即最大化


加入背景音乐
只适用于IE
对Netscape ,IE 都适用

防止点击空链接时，页面往往重置到页首端
代码“javascript:void(null)”代替原来的“#”标记

文字或图片弹出指定大小的窗口
在body中加入

弹出代码
图片或文字

flash按钮加链接
on (press) {
getURL("http://www.makewing.com","_blank");
}

跳转页面代码


细线分隔线

---

网页中的自动换行
就搞定了。
完整的是
style="table-layout: fixed;WORD-BREAK: break-all; WORD-WRAP: break-word"

消除ie6自动出现的图像工具栏，设置 GALLERYIMG属性为false或no .


禁止页面正文内容被选取


不能点右键，不用CTRL+A，不能复制作!
οnkeypress="window.event.returnValue=false"
οnkeydοwn="window.event.returnValue=false"
οnkeyup="window.event.returnValue=false"
οndragstart="window.event.returnValue=false"
onselectstart="event.returnValue=false">


IE浏览器支持一个 Body 属性 bgproperties，它可以让背景不滚动:


随机变换背景图象（一个可以刷新心情的特效）


flash载入影片
on (release)
{
loadMovie("1-01.swf", "_root.loaderclip");
}

图片表单按钮

左右阴影背景的CSS定义方法
body {
text-align:center;
background-repeat: repeat-y;
background-position: center;
background-image: url(../images/bg.jpg);
}

划过链接 手型鼠标
style="cursor:hand"

如何关闭层

关闭层

关闭窗口的脚本
[关闭窗口]

如果文字过长,则将过长的部分变成省略号显示

就是比如有一行文字，很长，表格内一行显示不下.

进入主页后自动最大化


凹陷文字

怎么样，我凹下去了吧？

你不想试试吗？

www.lenvo.cn

运行代码框




运行

给表格做链接






让弹出窗口总是在最上面


CSS文字阴影
.shadowfont{FILTER: dropshadow(color=#666666, offx=1, offy=1, positive=1); FONT-FAMILY: "宋体"; FONT-SIZE: 9pt;COLOR: #ffffff;}

后退&关闭窗口
后退：javascript:history.back(1)
关闭：javascript:window.close();

表格透明
style="FILTER: alpha(opacity=72)"

如何避免别人把你的网页放在框架中


链接到
response.redirect"login.asp"
location.href="xx.asp"

onClick="window.location='login.asp'"
onClick="window.open('')"

基本链接样式
a:link 表示链接的样式
a:active 表示当前活动连接的样式
a:hover 表示鼠标划过时的样式
a:visited 表示已经访问过的连接的样式

"link-visited-hover-active" 简记为 "lvha" 即 "love"+"hate"

在同一页面设置不同文字链接效果的样式

文字


leafdesign 发表于 >2006-9-30 10:30:27 保存该日志到本地 [全文] [评论] [引用] [推荐] [档案] [推给好友] [收藏到网摘]

2006-9-26
一些常用的特殊字符

·ˉˇ¨ 〃々—～‖「」『』〖〗【】±＋－×÷∧∨∑∏∪∩∈√⊥∥∠⌒⊙∫∮≡≌≈∽∝≠≮≯≤≥∞∶∵∴∷♂♀°′″℃＄¤￠￡‰§№☆★〇○●◎◇◆ 回□■△▽⊿▲▼◣◤◢◥ ▁ ▂ ▃ ▄ ▅ ▆ ▇ █ ▉ ▊ ▋▌▍▎▏▓※→←↑↓↖↗↘↙〓ⅰⅱⅲⅳⅴⅵⅶⅷⅸⅹ①②③④⑤⑥⑦⑧⑨⑩⒈⒉⒊⒋ ︵︶︹︺︿﹀︽︾﹁﹂﹃﹄︻︼︷︸︴﹏﹋﹌─━│┃┄┅┆┇┈┉┊┋┌┍┎┏┐┑┒┓└┕┖┗┘┙┚┛├┝┞┟┠┡┢┣┤┥┦┧┨┩┪┫┬┭┮┯┰┱┲┳┴┵┶┷┸┹┺┻┼┽┾┿╀╁╂╃╄╅╆╇╈╉╊╋⊕ ㊣㈱曱甴囍∟┅﹊﹍╭ ╮╰ ╯ _ ^︵^﹕﹗/\ " < > `,·。{}~～() -√ ＄ @ * & # 卐℡ ぁ〝〞ミ灬№＊ㄨ≮≯﹢﹣／∝≌∽≦≧≒﹤﹥じぷ┗┛￥￡§я-―‥…‰′″℅℉№ ℡∕∝∣═║╒╓╔╕╖╗╘╙╚╛╜╝╞╟╠╡╢╣╤╥╦╧╨╩╪╫╬╱╲╳▔▕〆〒〡〢〣〤〥〦〧〨兀♂ ♀ ♥ ♡ ☜ ☞ ☎ ☏ ⊙ ஐﻬ◎ ♂ ﻬஐ♀ ♥ ♡ ☜ ☞ ☎ ☏ ⊙ ◎ ☺ ☻ ► ◄ ▧ ▨ ♨ ◐ ◑ ↔↕ ▪ ▫ ☼ ♦ ▀ ▄ █ ▌ ▐ ░ ▒ ▬ ♦ ◊ ◦ ☼ ♠ ♣ ▣ ▤ ▥ ▦ ▩ ◘ ◙ ◈ ♫ ♬ ♪ ♩ ♭ ♪ の ☆→ あ ぃ ￡ ☺ ☻ ► ◄ ▧ ▨ ♨ ◐ ◑ ↔ ↕ ♥ ♡ ▪ ▫ ☼ ♦ ▀ ๑ღoO○☻ ☼ ♠ ♡ ♣ ஜ ஒ ண இ ஆ ௰ ௫ ♩ 〠 〄 ㍿ ㊚ ㊛ ㊀ ㊁ ㊂ ㊃ ㊄ ㊅ ㊆ ㊇ ㊈㊉ ㊊ のo (‧'''‧)o●•● ☜♡☞ ⓛⓞⓥⓔ


leafdesign 发表于 >2006-9-26 11:29:08 保存该日志到本地 [全文] [评论] [引用] [推荐] [档案] [推给好友] [收藏到网摘]

2006-9-21
滚动条特效代码

1、 控制横向和纵向滚动条的显隐

去掉滚动条 x 轴
去掉滚动条 y 轴
滚动条 x/y 轴全部去掉


2、滚动条颜色



代码说明：
SCROLLBAR-FACE-COLOR 滚动条凸出部分的颜色
SCROLLBAR-HIGHLIGHT-COLOR 滚动条空白部分的颜色
SCROLLBAR-SHADOW-COLOR 立体滚动条阴影的颜色
SCROLLBAR-3DLIGHT-COLOR 滚动条亮边的颜色
SCROLLBAR-ARROW-COLOR 上下按钮上三角箭头的颜色
SCROLLBAR-TRACK-COLOR 滚动条的背景颜色
SCROLLBAR-DARKSHADOW-COLOR 滚动条强阴影的颜色
SCROLLBAR-BASE-COLOR 滚动条的基本颜色


3、 箭行符号滚动条代码




4、 一侧滚动条代码




5、 朴素型滚动条代码



6、一侧滚动条代码



7、 立体型滚动条代码




leafdesign 发表于 >2006-9-21 16:34:23 保存该日志到本地 [全文] [评论] [引用] [推荐] [档案] [推给好友] [收藏到网摘]

2006-9-21
滚动字代码

滚动字代码（左右）：

MoMo的BLOG

滚动字幕代码（上下）：

οnmοuseοut="this.start()" οnmοuseοver="this.stop()">我不想擁有愛你的 每一夜

我也不想要對不起 全世界

所以不需要解釋誰

所以可以溫柔不退

一切就看你心裡要不要勇敢些


带颜色的阴影效果文字代码:

MoMo的BLOG

渐变效果文字代码：

MoMo的BLOG

代码说明：

opacity属性：设置透明度，取值0至100之间的任意数值，100表示完全不透明；
style属性：设置渐变风格，0表示均匀渐变，1表示线性渐变，2表示放射渐变，3表示直角渐变。
width：100%则表示参与渐变的对象的宽度，通常都设置为100%。


阴影文字效果代码：

MoMo的BLOG


阴影的文字效果代码2：


MoMo的BLOG



光晕效果文字代码：

MoMo的BLOG