自定义HTML导航页
2015-09-30 15:11
701 查看
多媒体课上老师让做一个自己的个人网站，遂下了一个Microsoft Expression Studio鼓捣了一会儿，觉得还挺有意思
又想起前几天上课，见老师用的自己编写的网页导航感觉挺有逼格的，所以突发奇想做一个自己的导航页。但想想容易做起来就没那么简单了，以前根本没有怎么接触过HTML语言，现在只好现学现用了；好在折腾了一个晚上之后总算是把自己心中的效果都给实现了，也算是没有白忙活，目前只是做出了最简单的样式，其他的以后看情况再更改吧。
<html>
<head>
<title>导航</title>
<script type = "text/javascript">
function sch(form)
{
e=document.sel.sq.selectedIndex; //取选定选项的编号
e=document.sel.sq[e].value; //取选定选项的"value"特征值
k=document.sel.k.value; //取搜索关键字
if(document.sel.k.value=="")
{ //如果没有填入关键字
alert("请输入关键词！"); //则给出提示
document.sel.k.focus(); //将光标移到输入框
return
}
if(e=="Baidu"){window.open("http://www.baidu.com/s?wd="+k);}
if(e=="Google"){window.open("https://www.google.com.hk/search?q="+k);}
if(e=="Bing"){window.open("https://cn.bing.com/search?q="+k);}
if(e=="Code"){window.open("https://searchcode.com/?q="+k);}
}
</script>
</head>
<body bgcolor="#e0e0e0">
<p> </p>
<p> </p>
<p> </p>
<h1 align="center" style="font-family:Microsoft YaHei; color:blue; font-size:250%">Allen Lee</h1>
<div align="center">
<form action=javascript:sch(this.form) method=get name=sel>
<select name=sq size=1 style="width: 75px; height: 28px" class="auto-style1">
<option value ="Baidu" selected="selected">Baidu</option>
<option value ="Google">Google</option>
<option value ="Bing">Bing</option>
<option value ="Code">Code</option>
</select>
<input type="text" name=k size=40 maxlength=255 style="width: 300px; height: 28px">
<input type="submit" name=search value="GO" style="width: 50px; height: 28px">
</form>
</div>
<p> </p>
<table align="center" border="0">
<tr>
<td style="width: 80px; height: 40px; text-align:center"></td>
<td style="width: 80px; height: 40px; text-align:center"><a href="https://www.baidu.com" target="_blank">Baidu</a></td>
<td style="width: 80px; height: 40px; text-align:center"><a href="https://www.google.com.hk" target="_blank">Google</a></td>
<td style="width: 80px; height: 40px; t
9fb8
ext-align:center"></td>
</tr>
<tr>
<td style="width: 80px; height: 40px; text-align:center"><a href="https://github.com/AllenLee7c9" target="_blank">GitHub</a></td>
<td style="width: 80px; height: 40px; text-align:center"><a href="http://blog.csdn.net/allenlee7c9" target="_blank">Bolg</a></td>
<td style="width: 80px; height: 40px; text-align:center"><a href="http://www.wooyun.org/index.php" target="_blank">WooYun</a></td>
<td style="width: 80px; height: 40px; text-align:center"><a href="https://leetcode.com/" target="_blank">LeetCode</a></td>
</tr>
</table>
</body>
</html>
目前的效果图如下
现在实现了Baidu、Google、Bing及 SearchCode四个搜索引擎，后续可以继续添加；当时在搜索引擎切换这里花了最多时间，在网上查了挺多资料才成功的用JavaScript解决了这一问题，再增加新的搜索只需加入少量代码即可，十分方便。当时还有一个想法是把本地应用也做成超链接的形式直接通过浏览器打开，后来查阅相关资料后发现可能会涉及到安全问题，虽然实现起来也不是十分麻烦但还是放弃了。在这里推荐一个网站W3school，绝大部分HTML相关的知识我都是在这里看的，上面还有许多其他的Web相关的东西，以后有机会再继续研究吧。
嗯，大概就是这个样子的，虽然在别人眼里可能做得十分粗糙，但也是我花了几个小时的心血吧，做好的那一刻还是蛮有成就感的
以后继续努力啦！
又想起前几天上课，见老师用的自己编写的网页导航感觉挺有逼格的，所以突发奇想做一个自己的导航页。但想想容易做起来就没那么简单了，以前根本没有怎么接触过HTML语言，现在只好现学现用了；好在折腾了一个晚上之后总算是把自己心中的效果都给实现了，也算是没有白忙活，目前只是做出了最简单的样式，其他的以后看情况再更改吧。
<html>
<head>
<title>导航</title>
<script type = "text/javascript">
function sch(form)
{
e=document.sel.sq.selectedIndex; //取选定选项的编号
e=document.sel.sq[e].value; //取选定选项的"value"特征值
k=document.sel.k.value; //取搜索关键字
if(document.sel.k.value=="")
{ //如果没有填入关键字
alert("请输入关键词！"); //则给出提示
document.sel.k.focus(); //将光标移到输入框
return
}
if(e=="Baidu"){window.open("http://www.baidu.com/s?wd="+k);}
if(e=="Google"){window.open("https://www.google.com.hk/search?q="+k);}
if(e=="Bing"){window.open("https://cn.bing.com/search?q="+k);}
if(e=="Code"){window.open("https://searchcode.com/?q="+k);}
}
</script>
</head>
<body bgcolor="#e0e0e0">
<p> </p>
<p> </p>
<p> </p>
<h1 align="center" style="font-family:Microsoft YaHei; color:blue; font-size:250%">Allen Lee</h1>
<div align="center">
<form action=javascript:sch(this.form) method=get name=sel>
<select name=sq size=1 style="width: 75px; height: 28px" class="auto-style1">
<option value ="Baidu" selected="selected">Baidu</option>
<option value ="Google">Google</option>
<option value ="Bing">Bing</option>
<option value ="Code">Code</option>
</select>
<input type="text" name=k size=40 maxlength=255 style="width: 300px; height: 28px">
<input type="submit" name=search value="GO" style="width: 50px; height: 28px">
</form>
</div>
<p> </p>
<table align="center" border="0">
<tr>
<td style="width: 80px; height: 40px; text-align:center"></td>
<td style="width: 80px; height: 40px; text-align:center"><a href="https://www.baidu.com" target="_blank">Baidu</a></td>
<td style="width: 80px; height: 40px; text-align:center"><a href="https://www.google.com.hk" target="_blank">Google</a></td>
<td style="width: 80px; height: 40px; t
9fb8
ext-align:center"></td>
</tr>
<tr>
<td style="width: 80px; height: 40px; text-align:center"><a href="https://github.com/AllenLee7c9" target="_blank">GitHub</a></td>
<td style="width: 80px; height: 40px; text-align:center"><a href="http://blog.csdn.net/allenlee7c9" target="_blank">Bolg</a></td>
<td style="width: 80px; height: 40px; text-align:center"><a href="http://www.wooyun.org/index.php" target="_blank">WooYun</a></td>
<td style="width: 80px; height: 40px; text-align:center"><a href="https://leetcode.com/" target="_blank">LeetCode</a></td>
</tr>
</table>
</body>
</html>
目前的效果图如下
现在实现了Baidu、Google、Bing及 SearchCode四个搜索引擎，后续可以继续添加；当时在搜索引擎切换这里花了最多时间，在网上查了挺多资料才成功的用JavaScript解决了这一问题，再增加新的搜索只需加入少量代码即可，十分方便。当时还有一个想法是把本地应用也做成超链接的形式直接通过浏览器打开，后来查阅相关资料后发现可能会涉及到安全问题，虽然实现起来也不是十分麻烦但还是放弃了。在这里推荐一个网站W3school，绝大部分HTML相关的知识我都是在这里看的，上面还有许多其他的Web相关的东西，以后有机会再继续研究吧。
嗯，大概就是这个样子的，虽然在别人眼里可能做得十分粗糙，但也是我花了几个小时的心血吧，做好的那一刻还是蛮有成就感的
以后继续努力啦！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JQuery1——基础（$对象，选择器，对象转换）
- Android学习笔记（二九）：嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 在Windows 8.1的IE 11中屏蔽双击放大功能
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制：7 行代码学会 co 模块
- ES6 走马观花（ECMAScript2015 新特性）
- JavaScript拆分字符串时产生空字符的原因
- Canvas 在高清屏下绘制图片变模糊的解决方法
- IE8开发人员工具教程（二）
- 通过Mootools 1.2来操纵HTML DOM元素
- WEB标准网页布局中尽量不要使用的HTML标签
- 在flex中执行一个javascript方法的简单方式
- Flex结合JavaScript读取本地路径的方法