网页开发技巧与优化策略-优快云博客

本文链接：https://blog.youkuaiyun.com/apache6/article/details/2578776

1、控制横向和纵向滚动条的显隐？ <body style="overflow-y:hidden"> 去掉x轴 <body style="overflow-x:hidden"> 去掉y轴 <body scroll="no">不显 2、表格变色 <TD οnmοuseοver="this.style.backgroundColor='#FFFFFF'" οnmοuseοut="this.style.backgroundColor=''" style="CURSOR: hand"> 3、禁止复制，鼠标拖动选取 <body οndragstart=window.event.returnValue=false οncοntextmenu=window.event.returnValue=false onselectstart=event.returnValue=false> 4、普通iframe页面 <iframe name="name" src="main.htm" width="450" height="287" scrolling="Auto" frameborder="0"></iframe> 5、iframe自适应高度 <iframe name="pindex" src="index.asp" frameborder=false scrolling="auto" width="100%" height="100%" frameborder=no οnlοad="document.all['pindex'].style.height=pindex.document.body.scrollHeight" ></iframe> 6、IE地址栏前换成自己的图标&可以在收藏夹中显示出你的图标 <link rel="Shortcut Icon" href="favicon.ico"> <link rel="Bookmark" href="favicon.ico"> 7、字号缩放 越来越多的人长时间的泡网，眼镜的普及率也越来越高，让文字大点，让更多的用户看的更清楚。 <script type="text/javascript"> function doZoom(size) {document.getElementById('zoom').style.fontSize=size+'px';} </script> <span id="zoom">需要指定大小的文字</span> <a href="javascript:doZoom(16)">大</a> <a href="javascript:doZoom(14)">中</a> <a href="javascript:doZoom(12)">小</a> 8、select挡住div的解决方法 在div里加入下面的代码，根据需要调整就可以了。 <iframe src="javascript:false" scrolling="no" frameborder="0" style="z-index:-1;position:absolute; top:5px; left:2px;width:168;height:100px;"> </iframe> 9、iframe(嵌入式帧)自适应高度 填写的嵌入地址一定要和本页面在同一个站点上，否则会提示“拒绝访问！”。对跨域引用有权限问题，请查阅其他资料。 <iframe name="guestbook" src="gbook/index.asp" scrolling=no width="100%" height="100%" frameborder=no οnlοad="document.all['guestbook'].style.height=guestbook.document.body.scrollHeight"></iframe> 10、跳转菜单新窗口 <select name="select" οnchange="window.open(this.options[this.selectedIndex].value)"> <option value="http://www.microsoft.com/ie"> Internet Explorer</option> <option value="http://www.microsoft.com"> Microsoft Home</option> <option value="http://msdn.microsoft.com"> Developer Network</option> </select> 11、flash透明选项 <param name="wmode" value="transparent"> 12、添加到收藏夹和设为首页 <a href=# οnclick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.makewing.com/lanren/');">设为首页</a> <a href="javascript:window.external.AddFavorite('http://www.makewing.com/lanren/','懒人图库')">收藏本站</a> 13、记录并显示网页的最后修改时间 <script language=JavaScript> document.write("最后更新时间: " + document.lastModified + "") </script> 14、节日倒计时 <Script Language="JavaScript"> 　　 var timedate= new Date("October 1,2002"); 　　 var times= "国庆节"; 　　 var now = new Date(); 　　 var date = timedate.getTime() - now.getTime(); 　　 var time = Math.floor(date / (1000 * 60 * 60 * 24)); 　　 if (time >= 0) 　　 document.write( "现在离"+times+"还有: "+time +"天") </Script> 15、加在HEAD里 禁止缓存 <meta http-equiv="Expires" CONTENT="0"> <meta http-equiv="Cache-Control" CONTENT="no-cache"> <meta http-equiv="Pragma" CONTENT="no-cache"> 16、让IFRAME框架内的文档的背景透明 <iframe src="about:<body style='background:transparent'>" allowtransparency></iframe> 17、打开窗口即最大化 <script language="JavaScript">  </script> 18、加入背景音乐 <bgsound src="mid/windblue[1].mid" loop="-1"> 只适用于IE <embed src="music.mid" autostart="true" loop="true" hidden="true"> 对Netscape ,IE 都适用 19、滚动 <marquee direction=up height=146 οnmοuseοut=start() οnmοuseοver=stop() scrollAmount=2>滚动信息 </marquee> 20、防止点击空链接时，页面往往重置到页首端 代码“javascript:void(null)”代替原来的“#”标记 21、文字或图片弹出指定大小的窗口 在body中加入 <script language="JavaScript" type="text/JavaScript"> function MM_openBrWindow(theURL,winName,features) {window.open(theURL,winName,features);} </script> 弹出代码 <a href="#" target="_self" onClick="MM_openBrWindow('windows01.htm','','width=550,height=380')" width="550" height="380" border="0">图片或文字</a> 22、 flash按钮加链接 on (press) { getURL("http://www.makewing.com","_blank"); } 23、跳转页面代码 <meta http-equiv="refresh" content="5;url=http://www.makewing.com"> 24、细线分隔线 <hr noshade size=0 color=#C0C0C0> 25、网页中的自动换行 <td style="word-break:break-all">就搞定了。完整的是 style="table-layout: fixed;WORD-BREAK: break-all; WORD-WRAP: break-word" 26、消除ie6自动出现的图像工具栏，设置 GALLERYIMG属性为false或no . <IMG SRC="mypicture.jpg" HEIGHT="100px" WIDTH="100px" GALLERYIMG="no"> 27、禁止页面正文内容被选取 <body οncοntextmenu="return false" οndragstart="return false" onselectstart ="return false" οnselect="document.selection.empty()" οncοpy="document.selection.empty()" onbeforecopy="return false"οnmοuseup="document.selection.empty()"> 28、不能点右键，不用CTRL+A，不能复制作! <body οncοntextmenu="window.event.returnValue=false" ο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"> </body> 29、IE浏览器支持一个 Body 属性 bgproperties，它可以让背景不滚动: <Body Background="图片文件" bgproperties="fixed"> 30、随机变换背景图象（一个可以刷新心情的特效） <Script Language="JavaScript"> 　　 image = new Array(4); //定义image为图片数量的数组　　 image [0] = 'tu0.gif' //背景图象的路径　　 image [1] = 'tu1.gif' 　　 image [2] = 'tu2.gif' 　　 image [3] = 'tu3.gif' 　　 image [4] = 'tu4.gif' 　　 number = Math.floor(Math.random() * image.length); 　　 document.write("<BODY BACKGROUND="+image[number]+">"); </Script> 31、flash载入影片 on (release) { loadMovie("1-01.swf", "_root.loaderclip"); } 32、图片表单按钮 <form id="form1" name="form1" method="post" action=""> <img src="login.gif" width="62" height="22" οnclick="document.form1.submit()" /> </form> 33、左右阴影背景的CSS定义方法 body { text-align:center; background-repeat: repeat-y; background-position: center; background-image: url(../images/bg.jpg); } 34、划过链接手型鼠标 style="cursor:hand" 35、如何关闭层 <div id="Layer1"></div> <a href="#" onClick="Layer1.style.display='none'">关闭层</a> 36、关闭窗口的脚本 <a href=javascript:close()>[关闭窗口]</a> 37、如果文字过长,则将过长的部分变成省略号显示 <DIV STYLE="width: 120px; height: 50px; border: 1px solid blue;overflow: hidden; text-overflow:ellipsis"> <NOBR>就是比如有一行文字，很长，表格内一行显示不下.</NOBR> </DIV> 38、进入主页后自动最大化 <script> self.moveTo(0,0) self.resizeTo(screen.availWidth,screen.availHeight) </script> 39、凹陷文字 <div style="width:300px;padding:20px;overflow:hidden;word-wrap:break-word;word-break:break:all; font-size:12px; line-height:18px; background-color:#eeeeee;"> <font disabled> 怎么样，我凹下去了吧？<br> 你不想试试吗？<br> <a href="http://www.lenvo.cn/">www.lenvo.cn</a></font> </div> 40、运行代码框 <script> function Preview() {var TestWin=open(''); TestWin.document.write(code.value);} </script> <textarea id=code cols=60 rows=15></textarea> <br> <button οnclick=Preview() >运行</button> 41、给表格做链接 <table width="100%" οnclick="window.open('http://www.makewing.com/', '_blank')" style="CURSOR:hand"> <tr> <td height="100" bgcolor="f4f4f4"> </td> </tr> </table> 42、让弹出窗口总是在最上面 <body οnblur="this.focus();"> 43、CSS文字阴影 .shadowfont{FILTER: dropshadow(color=#666666, offx=1, offy=1, positive=1); FONT-FAMILY: "宋体"; FONT-SIZE: 9pt;COLOR: #ffffff;} 44、后退&关闭窗口 后退：javascript:history.back(1) 关闭：javascript:window.close(); 45、表格透明 style="FILTER: alpha(opacity=72)" 46、如何避免别人把你的网页放在框架中 <script language=“javascript”>< /script> 47、Alt和Title的区别 alt 用来给图片来提示的。Title用来给链接文字或普通文字提示的。 <a href="#" Title="给链接文字提示">文字</a> <p Title="给链接文字提示">文字</p> <img src="图片链接" alt="给图片提示"> 48、所有的javascript的调用尽量采取外部调用 <SCRIPT LANGUAGE="javascript" SRC="js/xxxxx.js"></SCRIPT> 49、链接到 response.redirect"login.asp" location.href="xx.asp"

onClick="window.location='login.asp'" onClick="window.open('')" 50、基本链接样式 a:link 表示链接的样式 a:active 表示当前活动连接的样式 a:hover 表示鼠标划过时的样式 a:visited 表示已经访问过的连接的样式

网页中样式50例