HTML学习之制作导航网页

最新推荐文章于 2023-06-29 15:32:53 发布
最新推荐文章于 2023-06-29 15:32:53 发布
阅读量6.8k 收藏 21
点赞数 2
分类专栏： 网站建设 文章标签： 网址导航 html 导航
本文来自荒原之梦网（zhaokaifeng.com），转载请注明原文链接，合作或投稿请联系：[email protected]
本文链接：https://blog.csdn.net/wy_bk/article/details/78369366
版权

前言

今天用HTML写了一个网址导航，源代码如下：

<html>

<head>
    <title>网址导航</title>
</head>

<meta charset="utf-8">

<body bgcolor="#F0E68C">

<form>
  <fieldset>
    <legend></legend>
  </fieldset>
</form>

<center>
    <legend><font size="6" color="green">网址导航</font>

    <br>

</center>

<form>
  <fieldset>
    <legend>英语学习</legend>

<nav>
    <font size="3">
        <a href="http://www.ftchinese.com/channel/ce.html">FT中文网 双语阅读</a>   |
        <a href="http://www.ftchinese.com/channel/speedread.html">FT中文网 FT英语速读</a>  |
        <a href="http://www.ftchinese.com/channel/ev.html">FT中文网 原声视频</a>   |
        <a href="http://www.ftchinese.com/channel/radio.html">FT中文网 FT英语电台</a>  |
        <a href="http://www.npr.org/">美国国家公共广播电台</a>    |
        <a href="http://edition.cnn.com/">美国有线电视新闻网CNN</a>  |
        <a href="http://www.bbc.com/news">BBC新闻</a> |
        <a href="https://www.ted.com/">TED</a>  |
        <a href="http://www.iciba.com/">金山词霸</a>    |
        <a href="http://fanyi.baidu.com/">百度翻译</a>  |
        <a href="http://fanyi.youdao.com/">有道翻译</a> |
        <a href="https://translate.google.cn/">Google翻译</a> |
        <a href="http://dict.cn/">海词词典</a>  |
    </font>
</nav>

  </fieldset>
</form>

    <br>

<form>
  <fieldset>
    <legend>计算机资源镜像站</legend>

<nav>
    <font size="3">
        <a href="http://mirrors.aliyun.com/">阿里云开源镜像站</a>   |
        <a href="http://mirrors.163.com/">网易开源镜像站</a>   |
        <a href="http://mirrors.ustc.edu.cn/">中国科学技术大学开源镜像站</a> |
        <a href="https://mirrors.tuna.tsinghua.edu.cn/">清华大学开源软件镜像站</a> |
        <a href="http://ftp.sjtu.edu.cn/">上海交通大学开源镜像站</a>   |
        <a href="http://mirrors.zju.edu.cn/">浙江大学开源镜像站</a>  |
        <a href="http://mirror.neu.edu.cn/">东北大学开源镜像站</a>   |
        <a href="http://www.debian.org/mirror/list">Debian全球镜像站</a> |

    </font>
</nav>

  </fieldset>
</form>

    <br>

<form>
  <fieldset>
    <legend>Linux</legend>

<nav>
    <font size="3">
        <a href="https://www.linux.org/">Linux</a>
        <a href="https://www.kali.org/">Kali Linux</a>  |
        <a href="http://www.kali.org.cn/">Kali Linux中文网</a> |
        <a href="https://www.ubuntu.com/index_kylin">Ubuntu Linux</a>   |
        <a href="https://www.centos.org/">CentOS Linux</a>  |
        <a href="https://access.redhat.com/">RedHat Linux</a>   |
        <a href="http://www.chinaunix.net/">ChinaUnix</a>   |
        <a href="http://www.linuxidc.com/">Linux公社</a>  |
        <a href="http://linux.vbird.org/">鸟哥的Linux私房菜</a>   |
        <a href="https://linux.cn/">Linux中国开源社区</a> |
        <a href="http://www.linuxdiyf.com/">红联Linux</a> |
        <a href="http://www.linuxeden.com/">Linuxeden开源社区</a>   |
        <a href="https://www.linuxfoundation.org/">The Linux Foundation</a> |
    </font>
</nav>

  </fieldset>
</form>

    <br>

<form>
  <fieldset>
    <legend>计算机程序设计</legend>

<nav>
    <font size="3">
        <a href="https://www.python.org/">Python</a>    |
        <a href="http://www.oracle.com/technetwork/java/javase/downloads/index.html">Java SE</a>    |
        <a href="http://www.runoob.com/">RUNOOB</a> |
        <a href="http://www.w3school.com.cn/">W3school</a>  |
        <a href="https://www.eclipse.org/">Eclipse</a>  |
    </font>
</nav>

  </fieldset>
</form>

    <br>

<form>
  <fieldset>
    <legend>资料查询</legend>

<nav>
    <font size="3">
        <a href="https://www.wikipedia.org/">维基百科</a>   |
        <a href="https://www.baidu.com/">百度</a> |
        <a href="https://www.bing.com/?intlF=">Bing</a> |
        <a href="https://www.zhihu.com/">知乎</a> |
        <a href="https://www.quora.com/">Quora</a>  |
        <a href="https://stackoverflow.com/">StackOverflow</a>  |
        <a href="http://www.chongbuluo.com/">虫部落</a>    |
    </font>
</nav>

  </fieldset>
</form>

    <br>

<form>
  <fieldset>
    <legend>技术参考</legend>

<nav>
    <font size="3">
        <a href="http://www.williamlong.info/">月光博客</a> |
        <a href="http://www.freebuf.com/">FreeBuf</a>   |
        <a href="http://www.iplaysoft.com/">异次元软件</a>   |
        <a href="https://bbs.pediy.com/">看雪安全论坛</a> |
        <a href="https://www.2cto.com/">红黑联盟</a>    |
        <a href="http://bobao.360.cn/index/index">安全客</a>   |
        <a href="https://technet.microsoft.com/en-us/">Microsoft TechNet</a>    |
    </font>
</nav>

  </fieldset>
</form>

    <br>

<form>
  <fieldset>
    <legend>代码维护</legend>

<nav>
    <font size="3">
        <a href="https://github.com/">GitHub</a>    |
        <a href="https://www.openshift.com/">OpenShift</a>  |
        <a href="https://about.gitlab.com/">GitLab</a>  |
        <a href="https://gitee.com/">码云</a> |
    </font>
</nav>

  </fieldset>
</form>

    <br>

<form>
  <fieldset>
    <legend>站长工具</legend>

<nav>
    <font size="3">
        <a href="http://zhanzhang.baidu.com/">百度站长平台</a>    |
        <a href="http://tool.chinaz.com/">站长之家 站长工具</a> |
        <a href="https://thepaperwall.com/">The Paper Wall</a>  |
    </font>
</nav>

  </fieldset>
</form>

    <br>

<form>
  <fieldset>
    <legend>放松一下</legend>

<nav>
    <font size="3">
        <a href="https://daily.zhihu.com/">知乎日报</a> |
        <a href="http://jandan.net/">煎蛋</a> |
        <a href="http://www.guokr.com/">果壳</a>  |
        <a href="http://songshuhui.net/">科学松鼠会</a>  |
        <a href="http://www.sfw.com.cn/">科幻世界</a>   |
        <a href="https://what-if.xkcd.com/">What If</a> |
        <a href="https://www.bilibili.com/">哔哩哔哩</a>    |
    </font>
</nav>

  </fieldset>
</form>

    <br>

<form>
  <fieldset>
    <legend></legend>
  </fieldset>
</form>

</body>

</html>

end
更多内容请访问我的个人网站荒原之梦

荒原之梦网
关注
  • 2
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
好看的导航主页html,推荐|各种漂亮的网页导航，让浏览器靓起来
weixin_39527487的博客
06-10 18万+
最近刚买了电脑，蹲了半个月，实在是蹲不到荣耀magicbook14的16G版。忍不住加钱买了小新PRO13，真的是万幸的是目前还没有遇到较大的品控问题，新电脑入手肯定得一番折腾。强迫症的我为了个网页导航折腾了一下午，真的是太闲了我。至于我为什么这么闲，那一切就要从一只小小的蝙蝠说起了。言归正传，今天我就来给大家分享一下几个好看又好用的浏览器主页。一、简法主页这个就是我挑选了几个之后选用的导航，说实...
网址导航网站模板源码,自适应HTML5响应式,帝国CMS分类目录全站静态页面
weixin_45892228的博客
03-10 1430
源码介绍本源码经过本人亲自测试，源码显示正常，收录给力！1.本源码基于帝国CMS新内核，2.图片本地化，相较于其他导航站调用图片，更加稳定3.标签拼音化，生成完美4.网站地址加NOF属性，防止权重导出5.内容页面增加30天访问量功能并以图表形式展示，让运营更真实高效！6.整站安装改下LOGO和栏目即可快速运营！7.首页无需懂得代码直接填入要显示的分类就可以展示你要展示的分类8.内容详细介绍支持图文和HTML排版源码运行环境。
仿Chinaz首页菜单导航特效代码
03-20
(html+css)入门网页制作.rar
05-19
这是一个关于（html+css）网页主页布局：logo+导航+banner+新闻列表的入门级网页制作文件，里面包括.html和三个.css，分别是reset,public,index三个样式表，以及一些我切的图（images），是作者小白的努力历程记录档案，如果有同样热爱web前端的，可以关注我一起学习哦
CSS 制作网页导航条(下)
12-01
上节课我们将导航条做成了下面的效果但是此时的导航条还没有链接，还不能点击，这节课我们就要做一个完整的导航条【第四步】 我们需要将上面的导航条做以下几个修改 1）给上面的导航加上链接； 2）链接文字大小修改为12px; 3）并且规定链接样式，鼠标移上去和拿开的效果 修改方法如下 1）导航加链接，HTML代码如下： 复制代码代码如下: <div id=”nav”> <ul> <li><a>CSS学习</a></li> <li><a>学前准备</a></li> <li><a>入门教程下载</a></li> <li><a>提高
站长工具查询源码仿chinaz
03-25
这个是我以前作cnzzd的时候搞的，界面功能都是模仿原chinaz的 不作站很久了，现在拿出来研究下，现在可能部分功能用不了.再修改下过滤就可以用了 /Ip/Whois.aspWhois查询 /Seo/Spider.asp模拟抓取 /PopKiller/Index.aspPOP弹窗测试 /Seo/Key_Density.asp关键词密度 /LinkIn/Index.asp链接查询 /Trans/Encode.aspJS/VBS加密 /PageColor/Index.asp颜色选择器 /ShouLu/Index.asp收录查询 /Trans/Escape.aspESCAPE加密 /Rank/Index.aspPR查询 /Seo/Check_Meta.aspMETA检测 /alexa/index.asp排名查询 /Trans/Word_Spell.asp汉字转拼音 /Speed/Index.asp反应速度测试 /Trans/Html_Js.aspHTML/JS互转 /Trans/Gb_big.asp简繁转换 /Ip/Index.aspIp定位查询 /Seo/Google_Key.asp关键词排名 /Sogou_Rank/Index.aspSogou_Rank
html实现好看的导航主页(附源码)
xcLeigh
11-25 1万+
html实现好看的导航主页(附源码) html实现好看的导航主页，html导航博客，html导航界面，通过头部主菜单，中部搜索导航，尾部悬浮出现底部菜单，右侧音乐播放按钮，背景酷炫的动态效果，实现好看的导航主页。用作自己的常用辅助导航界面，还有屏幕保护界面，全屏(F12)查阅效果更加。
HTML网页入门练习——导航栏布局设计
m0_53156691的博客
01-28 2万+
导航栏布局 首先进行页面需求分析，如图所示导航栏分为三部分，包括标志、导航、用户按钮。为了使结构看起来明显，我们使用色块表示，确保结构正确之后再往里面填充内容。 具体步骤如下：
html实现好看的多种风格导航菜单(附源码)
最新发布
xcLeigh
06-29 3万+
html实现好看的多种风格导航菜单(附源码)，导航菜单，源码下载，分为顶部导航菜单,悬浮按钮菜单,右键功能菜单,左侧导航菜单四种导航菜单。每种导航菜单有至少三种风格，总共23种风格，各种风格都有，代码上手简单，代码独立，可以直接使用，效果酷炫，总有一款你喜欢的。也可直接预览效果。
HTML网站导航栏的制作
wuwei_19981001的博客
10-17 3万+
浮动特性
html页面左侧导航
07-19
html左侧导航，而且可以用鼠标拖动到任意的地方。美观、简介、大方
苏州园林景区网页设计 学生家乡网页设计作品静态HTML网页模板源码 DW大学生家乡主题网站制作 简单家乡介绍网页设计成品
08-10
HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js，有的视频+音乐+...
纯HTML+CSS3制作导航菜单(附源码)
09-25
纯HTML+CSS3制作的导航菜单支持浏览器IE9/GoogleChrome/FireFox/Safari 等等，感兴趣的朋友可以下载试用，希望对你学习css3有所帮助
网站制作的切图技巧 网页设计中的切图技巧介绍(图文)
01-19
一般的网站制作步骤大体上为：设计效果图–》...就会极大提高网站的运行效率，我最早开始学习制作网站时，就想当然的认为怎么样能加快制作速度就怎么来，于是把一个导航条的背景直接切成图片，后来老板看到我写的 ht
百度SEO站群html好看团队新介绍页网页模板源码
百度SEO工具
01-23 334
简介： html好看团队新介绍页网页模板源码 最新介绍页面模板，html网页模板分享 右键记事本打开可修改内容， 上传到服务器就可以打开使用! 下载地址： http://www.bytepan.com/0MfvZ5oJiiz
原生HTML+CSS+JS制作自己的导航主页
一步一个脚印，踏实努力，向着目标前进
06-23 3180
你可以将以上代码保存为一个HTML文件，然后在浏览器中打开该文件，即可看到一个简单的导航主页。你可以根据自己的需求和创意，修改和扩展这个基本的示例代码，来实现更复杂和个性化的导航主页。另外，你也可以参考一些在线教程和示例代码，以获取更多关于原生HTML、CSS和JS制作导航主页的技巧和灵感。美化导航主页：使用CSS样式来美化导航主页，例如添加背景图像、调整字体样式、添加鼠标悬停效果等。创建HTML文件：首先，创建一个新的HTML文件，并在文件中添加基本的HTML结构。标签创建导航栏的菜单项，并使用。
原生HTML+CSS+JS制作自己的导航主页（前端大作业，源码+步骤详解）
热门推荐
weixin_44009656的博客
05-11 3万+
文章目录前言插入背景一、头部1.导航栏2. 优化导航栏3 时间 前言 插入背景 首先设置我们的背景。 在body中插入背景即可。 index.html <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Designer" content="LiWei"> <meta name="Description" cont
HTML：1分钟实现简单网站导航栏
有意栽花花不发，无心插柳柳成荫。
03-28 3876
hello，大家好，我是wangzirui32，今天我们来学习如何实现简单网站首页。 开始学习吧！ 网站首页代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>wangzirui32的首页</title> <!-- CSS层叠样式表导入 --> <link rel="stylesheet" hr
如何利用html制作网页水平导航菜单？
weichushun的专栏
02-10 8041
LoRa网关需要一个简单的web配置，参考网上的，这个比较清楚。 https://jingyan.baidu.com/article/0a52e3f4dcec4abf62ed720c.htmlhttps://jingyan.baidu.com/article/0a52e3f4dcec4abf62ed720c.html 1 2 3 4 5 6 分步阅读 我们在利用html进行网站制作时，网站头部的水平导航菜
HTML制作一个学习生活的网页
06-12
好的，以下是一个简单的 HTML 学习生活网页示例，你可以根据自己的需求进行修改和完善： ```html <!DOCTYPE html> <html> <head> <title>学习生活</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 0; } header { background-color: #333; color: #fff; padding: 20px; text-align: center; } nav { background-color: #f2f2f2; border: 1px solid #ccc; overflow: hidden; padding: 10px; text-align: center; } nav a { display: inline-block; margin: 0 10px; padding: 10px; text-decoration: none; color: #333; } nav a:hover { background-color: #333; color: #fff; } section { margin: 20px; } h2 { color: #333; font-size: 24px; margin: 0 0 10px; } p { line-height: 1.5; margin: 0 0 10px; } img { max-width: 100%; height: auto; } footer { background-color: #333; color: #fff; padding: 20px; text-align: center; } </style> </head> <body> <header> <h1>学习生活</h1> </header> <nav> <a href="#">首页</a> <a href="#">学习资料</a> <a href="#">社区讨论</a> <a href="#">个人中心</a> </nav> <section> <h2>学习资料</h2> <p>这里提供丰富的学习资料，包括视频、文档、练习题等，帮助你更好地学习。</p> <img src="https://picsum.photos/640/360" alt="学习资料"> </section> <section> <h2>社区讨论</h2> <p>在这里你可以与其他学习者互动交流，共同进步。</p> <img src="https://picsum.photos/640/360" alt="社区讨论"> </section> <section> <h2>个人中心</h2> <p>这里是你的个人中心，你可以查看自己的学习记录、成绩等，也可以修改个人信息。</p> <img src="https://picsum.photos/640/360" alt="个人中心"> </section> <footer> <p>版权所有 © 学习生活</p> </footer> </body> </html> ``` 以上代码中，包含了一个简单的网页头部、导航栏、三个内容区域和网页底部。其中，头部和底部采用了相同的样式，实现了网页整体的统一性。导航栏使用了水平排列的链接，方便用户快速切换页面。内容区域包括了学习资料、社区讨论和个人中心三个板块，每个板块都包含了一个标题、一段简介和一张图片。你可以根据自己的需求进行修改和添加内容。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值