看看就会的html网址导航

简单的网址导航就是一些超链接，唯一的好处可能就是可以把自己常用的网站放在一起，有能力的可以做的美观一些，类似于hao123一样的网址导航。
如果不计较美观，代码其实一看就会，txt都可以写。

简单效果图

代码见最后。

核心代码

核心代码就是超链接

<form action="https://www.baidu.com" method="get" target="_blank"><input type="submit" value="百度一下,你就完蛋" id="button-button" />
</form>

form--------表单
action ------后面加网页链接
method-----无所谓,提交信息时保密可以改成post
target-------不写的话是点击直接跳转链接,"_blank"表示打开新窗口
input--------提交,用户输入相关的标签,有很多属性
type---------type属性中,submit是有提交功能的按钮
value-------按钮上的文字,随便写
id------------type 的标签,自己随便定

背景和格式相关(这个不能一看就会)

这个方面比较多,只介绍我用的一点点,主要是css
1.基本格式,没什么好说的,复制就行,想了解可以自己看看,上面的核心代码直接放在body中间就能用

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body></body>
</html>

2.css格式,跟body中的每个id对应,算是模板样式.

         <style type="text/css">/*背景属性依次是{背景图片地址绝对定位图片全屏宽高透明度}*/#background-jpg{background: url(./1.jpg);position: absolute;background-size:cover;width: 100%;height: 100%;opacity: 0.3;}/*标题属性依次是{绝对定位颜色距离左边框百分比距离上边框百分比}*/#title-color{position: absolute;color: gold;left: 45%;top: 10%;}/*网址容器，为了摆放按钮什么的，固定在屏幕中间左右*/#wedsite{position: absolute;left: 43%;top: 25%;width: 20%;height: 50%;}/*按钮*/#button-button{width:200px;height: 30px;}/*图片按钮*/#img-jpg{width: 60px;height: 35px;}</style>

3.表格相关,创建一个4*2的表格,center是指存数据时,数据居中

<table align="center"><tr><td></td><td></td></tr><tr><td></td><td></td></tr><tr><td></td><td></td></tr><tr><td></td><td></td></tr>
</table>

完整代码

注意:需要图片才能正常运行,图片随便百度就有,没有图片删除图片的src也行

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>个人网页导航2</title>
<style type="text/css">#background-jpg{background: url(./1.jpg);position: absolute;background-size:cover;width: 100%;height: 100%;opacity: 0.3;}#title-color{position: absolute;color: gold;left: 45%;top: 10%;}#wedsite{position: absolute;left: 43%;top: 25%;width: 20%;height: 50%;}#button-button{width:200px;height: 30px;}#img-jpg{width: 60px;height: 35px;margin-top: 1px;}</style></head><body ><div id="background-jpg"></div><div id="title-color"><h1>个人网址导航</h1></div><div id="wedsite"><table align="center"><tr><td><form action="https://www.baidu.com" method="get" target="_blank"><input type="submit" value="百度一下,你就完蛋" id="button-button" /></form></td><td>&nbsp;&nbsp;&nbsp;<a href="https://www.baidu.com/" target="_blank"><img src="./百度.png" id="img-jpg" ></a><!-- src 为文件地址，把文件放在html文件同一个目录下就行  --></td></tr><tr><td><form action="https://www.bilibili.com" method="get" target="_blank"><input type="submit" value="哔哩哔哩" id="button-button" /></form></td><td>&nbsp;&nbsp;&nbsp;<a href="https://www.bilibili.com/" target="_blank"><img src="./blbl.jpg" id="img-jpg"></a></td></tr><tr><td><form action="https://mail.qq.com/" method="get" target="_blank"><input type="submit" value="QQ邮箱" id="button-button" /></form></td><td>&nbsp;&nbsp;&nbsp;<a href="https://mail.qq.com/" target="_blank"><img src="./qq邮箱.png" id="img-jpg"></a></td></tr><tr><td><form action="https://www.4399.com/" method="get" target="_blank"><input type="submit" value="4399" id="button-button" /></form></td><td>&nbsp;&nbsp;&nbsp;<a href="https://www.4399.com/" target="_blank"><img src="./4399.png" id="img-jpg"></a></td></tr></table></div></body>
</html>

总结和后记

这个自学一会应该就能学会,没什么难度,感觉说的太详细了.
写这个是做一次尝试,以后看到好玩的也会分享分享,尽量都是一看就会的那种.学习还是需要兴趣的.

最简单的个人网址导航相关推荐

一个简单漂亮的网址导航HTML5源码
正文: 一个简单漂亮的网址导航HTML5源码页面自适应,手机电脑都自动适应大小. 纯HTML代码,然后一个CSS一个JS文件,根据设备自适应,更多信息自行研究,修改index.html内容. 字节网盘 ...
3个简单实用的网址导航网站
在我们使用电脑上网的时候经常会访问某些常用的网站,每一次都去通过搜索访问就比较浪费时间,添加在浏览器收藏夹不方便在其他电脑使用.找一个好用的网址导航网站就可以帮我们把所有常用的网址集合在一个页面,方便 ...
1155网址大全：打造简单实用的网址导航
网址导航的出现绝非偶然. 当互联网刚在国内兴起的时候,网吧成为大众接触网络的重要场所之一.第一批网民初次接触电脑及网络时,整个人犹如来到另一处世界当中,茫然不知所措,更不知何去何从.所以,hao123 ...
简单的网址导航，何以长盛不衰？
网址导航,这个与浏览器天生一对的产品,历史几乎与互联网相当.在移动互联网时代,浏览器被Native App挤压,只得寄望于HTML5夺回失地,网址导航更是悄无声息,几乎要被遗忘了.这个古老的产品还有人 ...
114啦网址导航1.13版如何修改LOGO大小-【超级简单】。
114啦网址导航如何修改LOGO大小,这个是很多导航站长比较关心的问题.其实很简单.只是你找错位置了.LOGO的大小有两个地方控制了,第一个是模板文件的LOGO图片位置控制了大小.这个就改了,就会出现 ...
网址导航html单文件,GitHub - pizzasheep/OneHtmlNav: 单文件html的网络导航页面，简约并不简单...
OneHtmlNav 这是基于小呆导航的超级精简版本,之所以投入了不少精力折腾这个导航,是之前自己网站的导航有点功能不足,看到了小呆导航有我需要的功能,但是确是基于CMS的,有点复杂我又不想再搭建一个 ...
WPJAM网址导航：最轻便快捷的WordPress网址导航插件
简介: 现在网址导航站点可能已经不再那么重要了,但是一些独立垂直的网址导航站点还是有它的独特魅力. 这是一款WordPress果酱和 XinTheme 一起联合做的一个网址导航插件,让你通过最简单的方 ...
知名的网址导航网站及好用的网址导航分享
有些同学要找一个好用的网址导航网站,来方便自己访问网站,提高效率.但是不知道有哪些知名的导航网站,下面小编就为大家分享比较知名网址导航网站以及好用的网址导航网站. 1.hao123网址导航 https ...
范冰冰戛纳再惊艳搜狗网址导航带你重温女神经典作品
近日,第70届戛纳国际电影节正式闭幕,作为和柏林国际电影节.威尼斯国际电影节齐名的欧洲最知名三大影展之一,戛纳国际电影节在全球影坛上有举足轻重的地位,是电影人心中的至高殿堂,那么今年的各项大奖花落谁家 ...

最简单的个人网址导航

超简单又有点用的html—简单的个人网址导航