CSS+JavaScript打造超酷右键菜单
其实在网页上实现右键菜单的风格化已经是一个老话题了，正常情况下，网页上的右键菜单是默认IE右键选项，包括了一些常用的功能。
但有时候我们会遇到这样的问题，我们希望禁止访问者使用右键菜单或者希望屏蔽右键菜单的某些功能，比如，为了保护网页内容我们不希望访问者通过右键菜单来查看网页源代码，也不希望其通过右键来对网页内容进行选取、复制等，很多网页设计者在考虑这个问题的时候都是简单地对右键进行屏蔽，与其这样我们还不如用脚本来实现一个风格右键菜单，并在这个右键菜单中装上我们自己的内容。下面我们来尝试一下这个设想。
我们首先要考虑的问题是通过鼠标右键单击事件来调用一个函数，这个函数用来显示新的右键菜单的内容。我们知道鼠标的右键单击事件是通过document.oncontextmenu来调用的，如果我们自行定义document.oncontextmenu=某个函数，这样就可以实现新右键菜单的调用了，关键问题是如何通过这个函数来控制菜单的显示，同时，还要通过窗体的单击事件document.body.onclick（一般指左键单击）来隐藏菜单，这样一个过程就完成了鼠标右键菜单的弹出和隐藏。
首先来看看这段脚本代码：
/*初始化*/
一般情况下页面装载完毕后才发生鼠标右键事件，所以为了不影响页面的装载速度我们可以把这段代码放在页面的最后面。这段代码很简单，首先检验是不是IE浏览器，如果是那么下面的定义就应该有效。也就是说当检查到客户端使用的浏览器是IE的时候那么当用户产生右键事件时就调用函数showmenuie5，当用户产生左键事件时就调用函数hidemenuie5。
解决了上面这个问题，现在我们要考虑如何通过函数showmenuie5和函数hidemenuie5来实现菜单的显示和隐藏。当然，这里的菜单并不是真正意义的右键菜单，而是我们自己做的一个div，在这个div中装上我们想要装的东西。通过鼠标事件调用函数来控制它的显隐，这就达到了使用鼠标右键一样的效果了。
下面我们来设计一个div，请看代码：
后退
前进
--------------------------------------------------------------------------------
网页教学
网页制作
动画制作
网络编程
--------------------------------------------------------------------------------
视频教程
业界新闻
--------------------------------------------------------------------------------
关于本站
与我联系
这一块的最外层是一个id为ie5menu的div，我们定义了它的样式为skin0，当这个div 处于显示状态时可能产生onMouseover事件和onMouseout事件以及onClick事件，就像我们在使用右键菜单时要对其中的选项进行操作一样，这里的onMouseover事件、onMouseout 事件和onClick事件能够模拟整个鼠标右键事件。这里，我在右键菜单中定义了这么几个选项：页面操作功能、栏目导航功能、站点导航功能以及其它信息，能够起到良好的用户体验效果。
这里使用了div的url属性，其值可以是事件也可以是页面地址，当然，这个地址包括绝对地址和相对地址，上面的事件也很简单这里就不需要我多说了。
下面我们来分析几个函数：showmenuie5()函数（显示菜单）hidemenuie5()函数（隐藏菜单）以及jumptoie5()函数（右键菜单选项跳转）
showmenuie5()函数：
/*显示菜单*/
function showmenuie5() {
searchform.k.value=window.document.selection.createRange().text;
/*获取当前鼠标右键按下后的位置，据此定义菜单显示的位置*/
var rightedge = document.body.clientWidth-event.clientX;
var bottomedge = document.body.clientHeight-event.clientY;
/*如果从鼠标位置到窗口右边的空间小于菜单的宽度，就定位菜单的左坐标（Left）为当前鼠标位置向左一个菜单宽度*/
if (rightedge ie5menu.style.left = document.body.scrollLeft + event.clientX - ie5menu.offsetWidth;
else
/*否则，就定位菜单的左坐标为当前鼠标位置*/
ie5menu.style.left = document.body.scrollLeft + event.clientX;
/*如果从鼠标位置到窗口下边的空间小于菜单的高度，就定位菜单的上坐标（Top）为当前鼠标位置向上一个菜单高度*/
if (bottomedge ie5menu.style.top = document.body.scrollTop + event.clientY - ie5menu.offsetHeight;
else
/*否则，就定位菜单的上坐标为当前鼠标位置*/
ie5menu.style.top = document.body.scrollTop + event.clientY;
/*设置菜单可见*/
ie5menu.style.visibility = "visible";
return false;
}
hidemenuie5()函数:
/*隐藏菜单*/
function hidemenuie5() {
/*很简单，设置visibility为hidden就OK！*/
ie5menu.style.visibility = "hidden";
}
jumptoie5()函数：
/*转到新的链接位置*/
function jumptoie5() {
var seltext=window.document.selection.createRange().text
if (event.srcElement.className == "menuitems") {
/*如果存在打开链接的目标窗口，就在那个窗口中打开链接*/
if (event.srcElement.getAttribute("target") != null)
window.open(event.srcElement.url, event.srcElement.getAttribute("target"));
else
/*否则，在当前窗口打开链接*/
window.location = event.srcElement.url;
}
}
这三个函数可以说实现右键菜单功能的关键函数，showmenuie5()函数定义了id为ie5menu的div在document.oncontextmenu的基本属性,包括其显示的位置，其位置由鼠标位置决定，也就是说鼠标在何处点击那么该div就在何处显示，并且有非常重要的一点，那就是此时该div的样式的visibility属性值一定是visible，即是可见的，否则前面定义其显示位置也就没有什么意义了。hidemenuie5()函数简单地定义了ie5menu的visibiliy属性为隐藏。jumptoie5()函数实现鼠标点击右键菜单中的层时发生的事情，也就是执行选项，包括打开窗口链接或者执行脚本语句，有一点需要提醒的是不管是窗口链接或者脚本语句，它们都等于url的值，例如：url="https://www.wendangku.net/doc/6010250223.html,",url="javascript:window.location='https://www.wendangku.net/doc/6010250223.html,';"或者url="javascript:history.back();"这些东西在jumptoie5函数中都可以执行。
既然本文讲的是用css+javascript实现右键菜单，前面讲到的都是javascript，好像还没有涉及到css，不用着急，下面就要用css来定义右键菜单的样式，否则这所谓的右键菜单就乱成一踏糊涂了。
首先看看ie5menu的样式skin0和skin1(根据不同的浏览器调用不同的皮肤)，为了使“弹出”的右键菜单更具真实性，这里我们要模拟真实右键菜单的样式，请看下面的样式代码：
body {
font-family: "宋体";
font-size: 12px;
}
/*定义菜单方框的样式1*/
.skin0 {
position:absolute;
padding-top:4px;
text-align:left;
width:100px; /*宽度，可以根据实际的菜单项目名称的长度进行适当地调整*/
border:2px solid black;
background-color:menu; /*菜单的背景颜色方案，这里选择了系统默认的菜单颜色*/
font-family:"宋体";
line-height:20px;
cursor:default;
visibility:hidden; /*初始时，设置为不可见*/
}
/*定义菜单方框的样式2*/
.skin1 {
padding-top:4px;
cursor:default;
font:menutext;
position:absolute;
text-align:left;
font-family: "宋体";
font-size: 10pt;
width:100px; /*宽度，可以根据实际的菜单项目名称的长度进行适当地调整*/ background-color:menu; /*菜单的背景颜色方案，这里选择了系统默认的菜单颜色*/ border:1 solid buttonface;
visibility:hidden; /*初始时，设置为不可见*/
border:2 outset buttonhighlight;
}
/*定义菜单条的显示样式*/
.menuitems {
padding:2px 1px 2px 10px;
}
-->
上面的样式定义非常简单，但其属性值则是经过仔细调试而得到的，使其显示的结果尽量接近真实的右键菜单。
ok，所有的工作都做得差不多了，现在我们把上面讲的东西赶快组合起来看看实实在在的效果吧
文章转载自网管之家：https://www.wendangku.net/doc/6010250223.html,/school/HTMLCSS/200609/60879.html
HTML及网页制作练习题-完整版
1、在HTML中，（）标记不可出现在
和标记符之间。（C） （Ａ）
（Ｂ）
（Ｃ）
（Ｄ） 2、<table>属性中，rowspan定义的内容是（D） （A）单元格所跨的列数 （B）行的宽度 （C）列的高度 （D）单元格所跨的行数 3、在HTML中，正确的嵌套方式是（B）。 （Ａ）<table><td><tr></tr></td></table> （Ｂ）<table><tr><td></td></tr></table> （Ｃ）<table><tr><td></tr></td></table> （Ｄ）<table><td><tr></td></tr></table> 4、最大的标题是:（D） （A)<h7> （B)<h6> （C)<h2> （D)<h1> 5、HTML样式格式文件的后缀名是：（C） （A).asp （B).js （C).css （D).ss 6、下面哪一个标记是用于插入背景音乐的：（D） （A)<MUSIC> （B)<SWF> （C)<A> （D)<BGSOUND> 7、请指出下面正确的说法是：（C） （A)背景音乐标记符号通常插入在<body>…</body>之间 （B)可以在JavaScript语句之间插入背景音乐 （C)背景音乐最好使用MP3格式 （D)用SRC属性指明声音文件地址 8、下列哪些是视频文件。（BD） （Ａ）jpg文件 （Ｂ）avi文件 （Ｃ）mov文件 （Ｄ）mpg文件 9、HTML是一种专门用来设计网站的计算机标记语言(T F) 10、网站模版是指网站内容的总体结构和(A) A.页面格式总体规划 B.网页制作规划</p><h2>如何抓取网页数据,以抓取安居客举例</h2><p>如何抓取网页数据，以抓取安居客举例 互联网时代，网页上有丰富的数据资源。我们在工作项目、学习过程或者学术研究等情况下，往往需要大量数据的支持。那么，该如何抓取这些所需的网页数据呢？ 对于有编程基础的同学而言，可以写个爬虫程序，抓取网页数据。对于没有编程基础的同学而言，可以选择一款合适的爬虫工具，来抓取网页数据。 高度增长的抓取网页数据需求，推动了爬虫工具这一市场的成型与繁荣。目前，市面上有诸多爬虫工具可供选择（八爪鱼、集搜客、火车头、神箭手、造数等）。每个爬虫工具功能、定位、适宜人群不尽相同，大家可按需选择。本文使用的是操作简单、功能强大的八爪鱼采集器。以下是一个使用八爪鱼抓取网页数据的完整示例。示例中采集的是安居客-深圳-新房-全部楼盘的数据。 采集网站：https://https://www.wendangku.net/doc/6010250223.html,/loupan/all/p2/ 步骤1：创建采集任务 1）进入主界面，选择“自定义模式”</p><p>如何抓取网页数据，以抓取安居客举例图1 2）将要采集的网址复制粘贴到网站输入框中，点击“保存网址”</p><p>如何抓取网页数据，以抓取安居客举例图2 步骤2：创建翻页循环 1）在页面右上角，打开“流程”，以展现出“流程设计器”和“定制当前操作”两个板块。将页面下拉到底部，点击“下一页”按钮，在右侧的操作提示框中，选择“循环点击下一页”，以建立一个翻页循环</p><p>如何抓取网页数据，以抓取安居客举例图3 步骤3：创建列表循环并提取数据 1）移动鼠标，选中页面里的第一个楼盘信息区块。系统会识别此区块中的子元素，在操作提示框中，选择“选中子元素”</p><p>如何抓取网页数据，以抓取安居客举例图4 2）系统会自动识别出页面中的其他同类元素，在操作提示框中，选择“选中全部”，以建立一个列表循环</p><h2>实现phpldapadmin 网页WEB管理用户</h2><p>实现phpldapadmin网页WEB管理用户 [root@openvpn ~]#yum install httpd -y [root@openvpn ~]#vi /etc/httpd/conf/httpd.conf 添加：ServerName 192.168.X.X:80/276 修改为： <Directory "/var/www/html/phpldapadmin"> //317 DirectoryIndex index.html index.html.varindex.php //402 [root@openvpnconfig]#service httpd restart Stopping httpd: [ OK ] Starting httpd: [ OK ] [root@openvpn ~]#cd /var/www/html/ 先通过winscp上传phpldapadmin-1.2.3.zip到apache网页目录 [root@openvpn html]# unzip phpldapadmin-1.2.3.zip [root@openvpn html]# mv phpldapadmin-1.2.3 phpldapadmin [root@openvpn html]# cdphpldapadmin/config/ [root@openvpnconfig]# cpconfig.php.exampleconfig.php [root@openvpnconfig]#viconfig.php $servers->newServer('ldap_pla'); $servers->setValue('server','name','LDAPServer'); $servers->setValue('server','host','192.168.X.X'); //532 $servers->setValue('server','port',389); $servers->setValue('server','base',array('dc=e,dc=net')); //535 ervers->setValue('login','auth_type','cookie'); $servers->setValue('login','bind_id','cn=admin,dc=e,dc=net'); //538 $servers->setValue('login','bind_pass','wxsemico'); //539 $servers->setValue('server','tls',false); /修改以上内容 [root@openvpnconfig]# yum install -y php-ldapphp ie网页访问http://192.168.4.178/phpldapadmin报错无法正常访问，是由于php,php-ldap依赖包没有安装 [root@openvpnconfig]#service httpd restart Stopping httpd: [ OK ] Starting httpd: [ OK ] 再次ie访问：</p><h2>网页正文提取</h2><p>我为开源做贡献，网页正文提取——Html2Article 2014-1-7 14:38|发布者: 红黑魂|查看: 16722|评论: 4|原作者: StanZhai|来自: 博客园 摘要: 为什么要做正文提取一般做舆情分析，都会涉及到网页正文内容提取。对于分析而言，有价值的信息是正文部分，大多数情况下，为了便于分析，需要将网页中和正文不相干的部分给剔除。可以说正文提取的好坏，直接影响了分 ... 为什么要做正文提取 一般做舆情分析，都会涉及到网页正文内容提取。对于分析而言，有价值的信息是正文部分，大多数情况下，为了便于分析，需要将网页中和正文不相干的部分给剔除。可以说正文提取的好坏，直接影响了分析结果的好坏。 对于特定的网站，我们可以分析其html结构，根据其结构来获取正文信息。先看一下下面这张图： 正文部分，不同的网站，正文所在的位置不同，并且Html的结构也不同，对于 爬虫而言，抓取的页面是各种各样的，不可能针对所有的页面去写抓取规则来提取正文内容，因此需要一种通用的算法将正文提取出来。</p><p>现有的网页正文提取算法 ?基于标签用途的正文提取算法（比如title或h1,h2标签一般用作标题，p一 般表示正文段落，根据标签的含义去提取正文） ?基于标签密度判定（这个简单，说白了就是字符统计，正文部分html标签的密度比较低，确定一个阈值，按照标签密度提取正文部分） ?基于数据挖掘思想的网页正文抽取方法（这里会涉及到统计学和概率论的一些知识，在高深点就成了机器学习了，没有深入研究） ?基于视觉网页块分析技术的正文抽取（CV这种高端大气上档次的东西，岂是 我等这么容易就能研究明白的。虽然实现上复杂，但就提取效果而言，这种方法提取的精度还是不错的） 前2中方法还是比较容易实现的，主要是处理简单，先前我把标签密度的提取算法实现了，但实际用起来错误率还是蛮高的；后2种方法在实现上就略复杂了，从算法效率上讲应该也高不了哪去。 我们需要的是一种简单易实现的，既能保证处理速度，提取的准确率也不错的算法。于是结合前两种算法，研究网页html页面结构，有了一种比较好的处理思 路，权且叫做基于文本密度的正文提取算法吧。后来从网上找了一下类似的算法，发现也有使用类似的处理方法来处理正文提取的，不过还是有些不同。接下来跟大家分享一下这个算法的一些处理思想。 网页分析 我任意取了百度，搜狐，网易的一篇新闻类网页，拿来作分析。 先看一篇百度的文章 任正非为什么主动与我合影，https://www.wendangku.net/doc/6010250223.html,/article/2011 首先请求这个页面，然后过滤到所有的html标签，只保留文本信息，我们可以 看到正文信息集中在一下位置：</p><h2>使用HTML制作网页(精)</h2><p>使用HTML制作网页 台州电大工程技术系钱莹 HTML（Hyper Text Mark-up Language ）即超文本标记语言，是 WWW 的描述语言。HTML语言是由 HTML标记组成的描述性文本，HTML 标记可以说明文字、图形、动画、声音、表格、链接等。 HTML的结构包括头部 (Head)、主体 (Body) 两大部分。头部描述浏览器所需的信息，主体包含所要说明的具体内容。 通过使用HTML，我们可以制作出精美的页面，同时，它也是设计功能更强大的电子商务网站的基础。 通过本章节的学习，要求同学掌握Tab标签，字标题标签，文本，链接，图片，表格等各类HTML标记的使用规则，熟悉标记中各类属性的含义及使用方法。 在本章节的学习中，我们将围绕HTML标记学习，通过一个实际案例制作（台州旅游网主页），依次学习Tab标签，字标题标签，文本，链接，图片，表格等各类HTML标记；在对以上标签进行介绍同时，辅以实际案例制作，使学习过程中能够理论与实际相结合，提高教学效果。 台州旅游网 Tab标签 < html>< /html>其间为所有的页面元素代码 < head>< /head> 放置页面的一些属性，如meta等 < title>< /title>设定网页的标题 < body>< /body>整个页面的主体部分，可设定背景色，文本等 例:< body bgcolor="颜色代码" background="图片地址" onload="" text=""</p><p>link="" vlink="已访问后的颜色" alink="单击时的颜色"> HTML标记示例 <html> <head> <title>台州旅游信息网 台州旅游信息网制作步骤一：熟悉（HTML,HEAD,TITLE,BODY）标记
