值得收藏的东东 50条网页制作小技巧集锦

 更新时间:2016年9月20日 19:05  点击:1226
控制横向和纵向滚动条的显隐?
<body style="overflow-y:hidden"> 去掉x轴
<body style="overflow-x:hidden"> 去掉y轴
<body scroll="no">不显

--------------------------------------------------------------------------------
 表格变色
<TD onmouseover="this.style.backgroundColor='#FFFFFF'" 
onmouseout="this.style.backgroundColor=''"
style="CURSOR: hand"> 
--------------------------------------------------------------------------------
 禁止复制,鼠标拖动选取
<body ondragstart=window.event.returnValue=false oncontextmenu=window.event.returnValue=false onselectstart=event.returnValue=false> 
--------------------------------------------------------------------------------
 普通iframe页面
<iframe name="name" src="main.htm" width="450" height="287" scrolling="Auto" frameborder="0"></iframe>

--------------------------------------------------------------------------------
 iframe自适应高度
<iframe name="pindex" src="index.asp" frameborder=false scrolling="auto" width="100%" height="100%" frameborder=no onload="document.all['pindex'].style.height=pindex.document.body.scrollHeight" ></iframe> 
--------------------------------------------------------------------------------
 IE地址栏前换成自己的图标&可以在收藏夹中显示出你的图标
<link rel="Shortcut Icon" href="favicon.ico">
<link rel="Bookmark" href="favicon.ico"> 
--------------------------------------------------------------------------------
 字号缩放
越来越多的人长时间的泡网,眼镜的普及率也越来越高,让文字大点,让更多的用户看的更清楚。
<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> 
--------------------------------------------------------------------------------
 select挡住div的解决方法 
在div里加入下面的代码,根据需要调整就可以了。 经常听到网友苦述自己的网页中有许多图片不能正常显示,究竟为什么不能正常显示呢?总结其原因绝大部分都是因为使用了错误路径所致。网页中的图像、动画等素材都有自己固定的存放位置,网页只是通过路径使用HTML语言来调用它们,然后把它们显示在网页中。在网页中的路径大体可分为相对路径和绝对路径,大家(尤其是初学网页设计的朋友)往往对它们不够认识,在应该使用相对路径的地方使用了绝对路径,从而导致浏览器无法在指定的位置打开指定的文件,使素材不能正常显示。

  那什么是相对路径?什么是绝对路径呢?为什么使用了绝对路径有时就不能显示呢?让我们一起来认识一下它们吧。

  比如C盘的My Pictures目录下有一个tp.jpg图像,那么它的路径就是c:My picturestp.jpg,其实这种完整地描述文件位置的路径就是绝对路径。如网页index.htm中有一张图片tp.jpg,它们的绝对路径是:

  c:My picturesindex.htm

  c:My picturestp.jpg

  如果你使用了绝对路径c:My picturestp.jpg进行图片链接,那么在本地电脑中将一切正常,因为在c:My pictures下的确存在tp.jpg这个图片。但你将它们上传到网站服务器上后,就不会正常了,因为服务器给你划分的存放空间可能在C盘其他目录中,也可能在D盘其他目录中,总之不会那么巧的就是c:My pictures。那么图片路径应该如何设置呢?这里就必须使用相对路径了,所谓相对路径,顾名思义就是自己相对与目标位置。在上例中index.htm中连接的tp.jpg就可以使用My picturestp.jpg来定位文件,这样不论将这些文件放到哪里,只要它们的相对关系没有变,就不会出错。具体的链接方式是这样的:“..My picturesimg.jpg”,其中使用“..”来表示上一级目录,“....”表示上上级的目录,以此类推。

  我们一起来看看初学的朋友可能犯的几个路径错误:

例1

  c:mywedwedindex.htm

  c:mywedimgtp.jpg

  在此例中,index.htm网页中有tp.jpg这个图片,因为两个文件同在Mywed目录下,所以初学者可能把图片链接写为imgtp.jpg,那么这样实际的链接就变为了C:mywedwedimgtp.jpg,显然这是不正确的。正确的路径应该是相对路径..imgtp.jpg。

例2

  c:mywedwedwed1index.htm

  c:mywedimgimg1tp.jpg

  在此例中,index.htm网页中有tp.jpg这个图片,初学者可能错误的把图片链接写为..imgimg1tp.jpg,那么这样转为绝对路径就是C:mywedwedimgimg1tp.jpg了,因为在该目录下并没有此文件,所以显然这种链接是错误的。正确的应该是....imgimg1tp.jpg。

例3

  c:mywedwedwedindex.htm

  c:mywedwedimgtp.jpg

  在此例中,index.htm网页中有tp.jpg这个图片,初学者可能错误地把图片链接写为....imgtp.jpg,那么这样转为绝对路径就是C:mywedimgtp.jpg了,因为在该目录下并没有此文件,所以显然这种链接是错误的。正确的应该是..imgtp.jpg。

  通过上面三个例子,我们可以看到网页与图片所在目录相同的部分都可以使用“..”进行代替。

  有的读者可能会有这样的疑惑:一个网站有许多的链接,我怎么能保证它们的连接都正确,如果我调整了一下图片或网页的存储路径,那不是全乱了么?为了提高工作效率,我们推荐大家使用Dreamweaver进行网站编辑,因为它有个站点管理功能,使用该功能绝对路径可以自动地转化为相对路径,并且当你在站点中改动文件路径时,与这些文件关联的连接路径都会自动更改,实在是方便极了!


  部分站长可能有体会.做一些联盟广告时.由于联盟广告的加载慢.严重影响了整体页面的显示速度.所以我把下面这段代码贴出.希望对大家有所帮助.

  第一步:把这段代码放在你要放广告的网页位置:

<SPAN id=ad_01>广告载入中...</SPAN>

  第二步:把这段代码放到页底:

 <SPAN class=spanclass id=span_ad_01>

这里放广告的JS代码或其他加载速度比较慢的内容都可以.
</SPAN>
<SCRIPT>ad_01.innerHTML=span_ad_01.innerHTML;span_ad_01.innerHTML="";</SCRIPT>

  这段代码的原理就是: 由于网页是由上往下执行代码.所以前面会暂时显示 "广告载入中..."

  等到执行完整个页面后, 前面才会调用出来. 所以我们把广告的代码这些放到最后执行让前面调用, 就不会影响站点页面中正常的内容输出的速度了.

  注意:可以增加多个调用,修改"id=ad_01 " 对应的几个就可以了。




  为了联系方便,用mailto标签把自己的电子邮件贴在网站上,结果直接造成该邮箱成为垃圾邮件桶,到现在为止该邮箱邮件收到各种垃圾邮件上千封,这个邮箱就算是这样被废掉了。

  究其原因,还是使用了mailto标签,一些诸如“mail-robot”的自动搜索程序把自己的电子邮件地址搜索到,然后添加到他们的数据库中了,以后自己的邮箱就成为众的之矢,当然是被炸的对象了.

  暂时还没有找到解决的办法,只是不使用mailto标签,改为其它方式.

  附:“mailto”的六则应用技巧

    大家知道,mailto是网页设计制作中的一个非常实用的html标签,许多拥有个人网页的朋友都喜欢在网站的醒目位置处写上自己的电子邮件地址,这样网页浏览者一旦用鼠标单击一下由mailto组成的超级连接后,就能自动打开当前计算机系统中默认的电子邮件客户端软件,例如OutLook Express以及Foxmail等。当然有关mailto标签的使用,并不仅仅就象上面所说的那样简单,它还有其他方面的应用。为了能帮助各位用户对mailto标签有一个全面的认识,笔者在此就对mailto标签的使用做一个详细的总结,希望能与大家共享交流!

    1、如果我们在网页中创建一个形如“mailto: webmaster@eway51.com”这样的超级连接时,用鼠标单击一下该超级连接的话,浏览器会自动调用系统默认的邮件客户端程序,同时在邮件编辑窗口的收件人设置栏中自动写上收件人的地址,而其他的内容都是空白,留给访问者自行填写;

    2、要是大家在单击电子邮件超级连接时,希望系统自动打开的电子邮件编辑窗口中,除了在收件人地址栏中自动填写上内容外,在抄送地址栏中也能自动填写上自己需要的电子邮件地址的话,就可以直接在网页的html源代码中插入形如“mailto: webmaster@eway51.com?eway51@hotmail.com”这样的语句,其中webmaster@eway51.com将会自动出现在收件人地址栏中,eway51@hotmail.com则会自动出现在抄送地址栏中;

    3、如果大家希望在弹出的邮件编辑窗口中能自动将邮件的主题内容填上的话,可以使用形如“mailto: webmaster@eway51.com?subject=给网的意见”这样的html语句,当浏览者用鼠标单击由该语句组成的电子邮件超级连接时,在随后打开的邮件编辑窗口的收件人地址栏中自动出现webmaster@eway51.com,主题设置栏中将自动出现“给网的意见”这样的内容;

    4、如果想在收件人地址栏中同时输入多个电子邮件地址时,那么就可以使用形如“mailto: webmaster@eway51.com;eway51@hotmail.com”这样的语句,记住每个电子邮件之间用“;”隔开,这样当浏览者单击由该语句创建的电子邮件超级连接时,在弹出的邮件编辑窗口的收件人地址栏中同时会出现webmaster@eway51.com、eway51@hotmail.com这样的收件人地址,浏览者就能同时向这些人发送电子邮件;

    5、在网页中出现的邮件地址经常会被一些诸如“mail-robot”的自动搜索程序搜索到,这样其他人很容易利用搜索到的邮件地址来向你发送各种各样的垃圾邮件,为了能将这些垃圾邮件拒之于千里之外,我们可以将在网页上公开的邮件地址写成ASCII码形式,同时要记住每一个ASCII码前面都必须添加“&#”,例如我们在网页中使用“mailto: webmaster@eway51.com”这样的语句来创建电子邮件超级连接的话,单击该超级连接后,我们发现在随后打开的邮件收发窗口中,收件人地址栏中仍然会显示webmaster@eway51.com这样的内容,而其他的各种邮件自动搜索工具都不能正确识别这样的ASCII代码,因此用户收到的各种来历不明的垃圾邮件就会大大减少;

    6、一般情况下,浏览者单击电子邮件超级连接时,系统在默认打开的邮件客户端软件中,只是自动在收件人地址栏处填上内容,而其他设置栏处仍然显示为空白,如果大家还希望自动把主题、抄送、暗送甚至内容都填写上的话,就可以使用形如“mailto: webmaster@eway51.com?cc=eway51@hotmail.com&bcc=web@eway51.com&subject=给网的建议&body=希望贵站越办越好!”这样的语句,在这个语句中第一个功能以“?”开头,后面的每一个功能以“&”开头;当用鼠标单击这个邮件地址时,在随后打开的邮件编辑窗口中,我们将看到在收件人地址栏中自动填写上了webmaster@eway51.com,在抄送地址栏中自动填写上了eway51@hotmail.com,在暗送地址栏中自动填写上了web@eway51.com,在主题栏中自动填写上了“给网的建议”,

<

HTML在线编辑器相信大家见得多了,有些流行的在线编辑器具有很丰富的功能。但美中不足的是,现有的HTML在线编辑器设置字号大小通常只限于1-7号字而已,不能更好地满足人们的需要。能不能实现像Word那样任意地设置字号大小呢?经过长时间的攻关,Bound0终于可以肯定地回答这个问题了,呵呵呵!请大家共同分享此“Eureka之喜悦”吧!

我们通常所见的内嵌在网页中的HTML在线编辑器,其核心本质是一个IFRAME

例如:

<IFRAME id="Editor" Name="Editor" style="WIDTH: 550; HEIGHT: 480"></IFRAME>

令 Editor.document.designMode="ON";

此时这个IFRAME就是一个设计模式的HTML编辑器了,可以通过脚本

Editor.document.selection.createRange().execCommand(command)

对选中的内容执行command,进行编辑操作。

由于浏览器本身提供的编辑功能非常有限,因此现在流行的HTML在线编辑器大都进行了一些扩展。

在本文发表之前,HTML在线编辑器在设计模式下的字号(字体大小)任意设定功能尚无成功实现,本文所述技术不仅在此方面实现了零的突破,还对HTML在线编辑器的其他扩展功能的实现作出了广泛的启示。

现在流行的HTML在线编辑器的功能可以说已经很丰富了,为什么唯独任意设置字体大小这个看起来并不华丽的功能没有被做出来呢?让我们先来了解一下其中的原因好了:

假设编辑区的HTML内容(Editor.document.body.innerHTML)是:

<H1>逍遥主义者的宣言</H1>

<H3>十个小老头
<BR>朱氵太子
</H3>

<P>我们不是败家浪子,我们从不游手好闲;我们不是无用书生,我们从不怨天忧地;我们不是嬉皮士,我们从不玩世不恭;我们不是妄想家,我们从不脱离实际;我们不是阿Q,我们从不麻木颓废;我们不是狂人,我们从不争风吃醋。我们是创造者,我们是改变者,我们是革命者。我们不是在不幸中去幻想幸福的人,我们甚至不是去追求、寻找幸福的人,我们是自己制造幸福的人,我们是快乐的发源者。首先,在我们经历必当经历的经历时,我们不允许自己不快乐!这就是,逍遥主义的真谛。</P>

<P><BIG>将你的梦打开,填进我的希望。谁都不必介怀,一点点的分量。面对别人述说,命运烛转轮回,世间天空海阔,种种因缘寂晦……</BIG></P>

假设选中的是红色的部分,则Editor.document.selection.createRange().htmlText的内容是:

<P>者。我们不是在不幸中去幻想幸福的人,我们甚至不是去追求、寻找幸福的人,我们是自己制造幸福的人,我们是快乐的发源者。首先,在我们经历必当经历的经历时,我们不允许自己不快乐!这就是,逍遥主义的真谛。</P>

<P><BIG>将你的梦打开,填进我</BIG></P>

看见多出来几个蓝色的标签了吧?产生这种现象是因为:“任何时候,document.selection.createRange().htmlText取出来的html代码都是完整成对的,即使当前选中的内容横跨了几个不同的标签”(卖坏梨语),所以IE会自作主张地把不完整的标签补齐。

就是因为这个原因,当选中的内容在Editor.document.body.innerHTML中对应的代码包含不完整的标签时,在Editor.document.selection.createRange()上做pasteHTML可能会吃不进去(有不完整的<table>等时),或者出现明显的BUG。

而现在的HTML在线编辑器所提供的除了基本的Editor.document.selection.createRange().execCommand(command)之外的各种功能几乎都是通过在Editor.document.selection.createRange()上做pasteHTML来实现的。所以字号的自由设定才始终没能实现。

一切关于“问题的解决之道”的方法论都不外乎是“变通”二字的某种讲法。 SyntaxHighlighter.highlight();

[!--infotagslink--]

相关文章

  • photoshop打开很慢怎么办 ps打开慢的设置技巧

    photoshop软件是一款专业的图像设计软件了,但对电脑的要求也是越高越好的,如果配置一般打开ps会比较慢了,那么photoshop打开很慢怎么办呢,下面来看问题解决办法。 1、...2016-09-14
  • Jquery Ajax Error 调试错误的技巧

    JQuery使我们在开发Ajax应用程序的时候提高了效率,减少了许多兼容性问题,我们在Ajax项目中,遇到ajax异步获取数据出错怎么办,我们可以通过捕捉error事件来获取出错的信息。在没给大家介绍正文之前先给分享Jquery中AJAX参...2015-11-24
  • php语言中使用json的技巧及json的实现代码详解

    目前,JSON已经成为最流行的数据交换格式之一,各大网站的API几乎都支持它。我写过一篇《数据类型和JSON格式》,探讨它的设计思想。今天,我想总结一下PHP语言对它的支持,这是开发互联网应用程序(特别是编写API)必须了解的知识...2015-10-30
  • 图解Sublime Text3使用技巧

    通过本篇文章给大家介绍Sublime Text3使用技巧的相关知识,对sublime text3技巧相关知识感兴趣的朋友一起学习吧...2015-12-24
  • 基于PHP给大家讲解防刷票的一些技巧

    刷票行为,一直以来都是个难题,无法从根本上防止。但是我们可以尽量减少刷票的伤害,比如:通过人为增加的逻辑限制。基于 PHP,下面介绍防刷票的一些技巧:1、使用CURL进行信息伪造$ch = curl_init(); curl_setopt($ch, CURLOP...2015-11-24
  • 分享12个非常实用的JavaScript小技巧

    这篇文章主要介绍了分享12个非常实用的JavaScript小技巧,这些小技巧可能在你的实际工作中或许能帮助你解决一些问题,需要的朋友可以参考下...2016-05-14
  • Python爬虫必备技巧详细总结

    本篇文章介绍了我在爬虫过程中总结的几个必备技巧,都是经过实验的,通读本篇对大家的学习或工作具有一定的价值,需要的朋友可以参考下...2021-10-22
  • Illustrator像素级完美绘制经验技巧分享

    今天小编在这里就来给Illustrator的这一款软件的使用者们来说一说像素级完美绘制的经验技巧,各位想知道具体信息的使用者们,那么下面就快来跟着小编一起看一看。 给...2016-09-14
  • springboot +redis 实现点赞、浏览、收藏、评论等数量的增减操作

    这篇文章主要介绍了springboot +redis 实现点赞、浏览、收藏、评论等数量的增减操作,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-01-15
  • 前端开发必知的15个jQuery小技巧

    本文主要介绍了前端开发必知的15个jQuery小技巧。具有很好的参考价值,下面跟着小编一起来看下吧...2017-01-26
  • MySQL中的binlog相关命令和恢复技巧

    操作命令:复制代码 代码如下:show binlog events in 'mysql-bin.000016' limit 10;reset master 删除所有的二进制日志flush logs 产生一个新的binlog日志文件show master logs; 或者 show binary logs; 查看二进制文...2014-05-31
  • MySQL编程中的6个实用技巧

    每一行命令都是用分号(;)作为结束对于MySQL,第一件你必须牢记的是它的每一行命令都是用分号(;)作为结束的,但当一行MySQL被插入在PHP代码中时,最好把后面的分号省略掉,例如: 复制代码 代码如下: mysql_query("INSERT INTO...2015-03-15
  • 每日十条JavaScript经验技巧(二)

    本文是每日十条JavaScript经验技巧系列文章的第二篇,同样给大家汇总介绍10条个人在项目中的一些经验,分享给大家,希望大家能够喜欢...2016-06-24
  • mysql中coalesce()的使用技巧小结

    在mysql中,其实有不少方法和函数是很有用的,这次介绍一个叫coalesce的,拼写十分麻烦,但其实作用是将返回传入的参数中第一个非null的值,下面这篇文章主要给大家介绍了在mysql中coalesce()使用技巧的相关资料,需要的朋友可以参考下。...2017-06-21
  • Vue+Bootstrap收藏(点赞)功能逻辑与具体实现

    这篇文章主要为大家详细介绍了Vue+Bootstrap收藏(点赞)功能逻辑与具体实现,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-10-22
  • c# Linq常用的小技巧

    这篇文章主要介绍了c# Linq常用的小技巧,文中讲解非常详细,示例代码帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-11-03
  • CSS不得不掌握的技巧【清除float浮动】

    本文我们来讲讲CSS必备掌握的重点:清除float浮动clear,掌握此内容,可以让你在css+div布局中,一些浮动问题得心应手。 一、浮动产生原因 一般浮动是什么情况呢?一般是...2016-09-14
  • 每日十条JavaScript经验技巧(一)

    本文是每日十条JavaScript经验技巧系列文章的第一篇,给大家汇总介绍一些在JavaScript使用过程中的注意事项,非常的简单,都是个人在平时项目中的一点小小的总结,希望对大家能够有所帮助...2016-06-24
  • javascript实现网站加入收藏功能

    这篇文章主要介绍了javascript实现网站加入收藏功能的相关资料,需要的朋友可以参考下...2015-12-18
  • 如何写软文?软文写法技巧

    我们很多人都感觉软文的力量强大,如春风化雨,润物细无声!等你发现这是一篇软文的时候,已经完了,因为你至少脑海中有这种印象了!对于软文来说,这是一种成功! 很多人写软...2016-10-10