静态网页制作方法_如何制作简单的静态网页
这是仿照中国高等教育学生信息网写的一个静态网页（参考2020年3月份的）
这也是我当时辛辛苦苦写了几天的劳动成果，希望大家可以尊重。
截图如下
在这里插入图片描述
下面是主要的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <!--国际通用码-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
<!--网页自适应-->
<title>中国高等教育学生信息网(学信网)</title> <!--网站标题-->
<link rel="stylesheet" href="mycss.css" type="text/css"> <!--引用外部css文件-->
<!--下面属于内部引用css-->
<style type="text/css"> a:link{
text-decoration: underline;} a:visited{
text-decoration: underline;} a:hover{
text-decoration: underline;} a:active{
text-decoration: underline;} </style>
</head>
<body>
<!--第一部分 顶部-->
<table >
<tr id="t0">
<td width="1536px"></td>
</tr>
<tr id="t1">
<td width="1536px"><p1>为落实肺炎疫情防控工作要求，2月3日-21日停止办理现场咨询和电话咨询，请至学信网微信公众号(chsi_chesicc)在线咨询或<a href="#">发邮件</a>。</p1>
<p2><a href="#">首页</a> | <a href="#">网址导航</a> | <a href="#">教育网</a> | <a href="#">English</a></p2></td>
</tr>
<!--第二部分 上部-->
<tr id="t2">
<td width="360px"><img src="images/02.png" alt="pc1" width="90px" height="65px" class="pc1"></td> <!--PC指图片-->
<td width="640px"><img src="images/03.png" alt="pc2" class="pc2" height="32px" width="346px"><br><p2>教育部学历查询网站、教育部高校招生阳光工程指定网站、全国硕士研究生招生报名和调剂指定网站</p2></td>
<td width="536px"></td>
</tr>
<!--第三部分 导航部-->
<tr id="t3">
<td width="1536px"><p><a href="#" >首页</a><a href="#" >学籍查询</a><a href="#" >学历查询</a><a href="#" >在线验证</a>
<a href="#">出国教育背景服务</a><a href="#">图像校对</a><a href="#">学信档案</a><a href="#">高考考研</a>
<a href="#" >政法招生</a><a href="#" >港澳台招生</a><a href="#" >四六级查分</a><a href="#" >征兵</a>
<a href="#" >就业</a><a href="#" >学职平台</a><a href="#" >日本频道</a></p>
</td>
</tr>
<!--第四部分 内容部-->
<tr id="t4">
<td width="1536px">
<div id="div1">
<div class="div1a"> <!--div1a,b,c,d,e指覆盖在div1,2,3,4上的图块-->
<div id="A1">
<img src="images/04.png" alt="" width="310px" height="250px" > <!--引用图片-->
</div>
<div id="A2"> <!--A2a1之类是A2块中的上中下-->
<div id="A2a1"> <!--在A2a1里面分块a1a，a1b...-->
<div id="A2a1a">
<p>要闻</p>
</div>
<div id="A2a1b">
<ul>
<li>更多新闻 </li>
<li>|</li>
<li> 专题汇总</li>
</ul>
</div>
</div>
<div id="A2a2">
<ul>
<li><a class="A2a2c1" target="_blank" href="">2020年考研分数查询及复试分数线汇总</a></li>
<li><a href="">教育部：合理调整研究生考试招生近期工作安排</a></li>
<li><a href="">考研复试、高考是否会推迟？教育部官方回应</a></li>
<li class="A2a2l1">..........................................................................................................................................................</li>
</ul>
</div>
<div id="A2a3">
<ul>
<li><a class="A2a3c1" target="_blank" href="">应对新冠肺炎疫情 调整招考政策 教育系统在行动</a></li>
<li><a href="">公告：取消高等教育学历认证收费及调整认证受理范围</a></li>
<li class="A2a3l1"><a href="">学信网招聘 | 新媒体矩阵 | <span>特别提醒</span> | 【新闻】</a></li>
</ul>
</div>
</div>
<div id="A3">
<div id="A3a1">
<h4>快速入口</h4>
</div>
<div id="A3a2">
<ul>
<li><a href="#">学籍学历信息管理平台</a></li>
<li><a href="#">来华留学生学籍学历管理平台</a></li>
<li><a href="#">阳光高考信息平台</a></li>
<li><a href="#">中国研究生招生信息网</a></li>
<li><a href="#">全国征兵网</a></li>
<li><a href="#">全国万名优秀创新创业导师库</a></li>
<li><a href="#">电子成绩单验证</a></li>
<li><a href="#">教育部大学生就业网</a></li>
<li><a href="#">学信就业</a></li>
</ul>
</div>
</div>
</div>
</div>
<div id="div2">
<div class="div1b">
<div id="A1">
<div id="A1a1">
<h4>学籍学历信息查询与认证服务</h4>
</div>
<div id="A1b1">
<p><a href="#" >学籍学历查询</a></p>
<p class="A1b1c1">教育部学历查询网站，可查询国家承认的</p>
<p class="A1b1c3">高等教育学籍学历信息。</p>
<p class="A1b1c2">...............................................................................</p>
<ul>
<li><b>学籍查询</b> <b>学历查询</b></li>
<li>新生学籍 本人查询</b></li>
<li>在校学籍 零散查询</b></li>
<li>图像校对 会员查询</b></li>
</ul>
</div>
<!--图片固定-->
<div id="A1b1pt">
<img src="images/t1.png" width="47px" height="47px">
</div>
<div id="A1b2">
<p><a href="#" >学籍学历认证</a></p>
<p class="A1b2c1">申请高等教育学籍/学历电子认证、学历</p>
<p class="A1b2c3">书面认证。</p>
<p class="A1b2c2">...............................................................................</p>
<p class="A1b2c4"><a href="#" >教育部学历证书电子注册备案表</a></p>
<p class="A1b2c4"><a href="#" >教育部学籍在线验证报告</a></p>
<ul>
<li>报告介绍 </li>
<li>| </li>
<li>特点 </li>
<li>|</li>
<li> 如何申请</li>
</ul>
<p class="A1b2c4"><a href="#" >中国高等教育学历认证报告</a></p>
<ul>
<li>代理机构 </li>
<li> | </li>
<li> 如何申请</li>
</ul>
<!--图片固定-->
<div id="A1b2pt">
<img src="images/t2.png" width="47px" height="47px">
</div>
</div>
<div id="A1b3">
<p><a href="#" >出国教育背景信息服务</a></p>
<p class="A1b3c1">针对境外高校招生和学生申请出国留学而</p>
<p class="A1b3c3">提供的国内教育背景调查信息服务。</p>
<p class="A1b3c2">...................................................................................</p>
<ul>
<li><a href="#" >中等教育学历</a></li>
<li><a href="#" >高等学校学生成绩</a></li>
<li><a href="#" >普通高等学校招生全国统一考试成绩</a></li>
<li><a href="#" >中等学校学生成绩</a></li>
<li><a href="#" >普通高中学业水平考试（会考）成绩</a></li>
<li><a href="#" ><span>如何申请</span></a></li>
</ul>
<!--图片固定-->
<div id="A1b3pt">
<img src="images/t3.png" width="47px" height="47px">
</div>
</div>
</div>
<div id="A2">
<div id="A2a1">
<h4>学信档案</h4>
</div>
<div id="A2b1">
<p>免费查询本人学籍学历信息</p>
<p>申请在线验证报告</p>
<p>应届毕业生可校对本人学历照片</p>
</div>
<div id="A2c1">
<h4>在线验证报告</h4>
</div>
<div id="A2d1">
<input type="text" value="请输入在线验证码" size="15" maxlength="15" class="A2d1c1"><span>查询</span>
</div>
<!--登录注册框的块-->
<div id="A2b1c1">
<a href="#">登录</a>
</div>
<div id="A2b1c2">
<a href="#">注册</a>
</div>
<!--如何申请，报告特点的块-->
<div id="A2d1c1">
<a href="#">如何申请</a>
</div>
<div id="A2d1c2">
<a href="#">报告特点</a>
</div>
</div>
</div>
</div>
<div id="div3">
<div class="div1c">
<div id="A1">
<div id="A1a1">
<h4>高校招生信息服务</h4>
</div>
<div id="A1b1">
<p id="a1"><a href="#">阳光高考</a></p>
<p id="p1">教育部高校招生阳光工程指定平台</p>
<p id="p2">...............................................................................................</p>
<ul id="l1">
<li><b>满意度</b></li>
<li><a href="#">高校满意度</a></li>
<li><a href="#">专业满意度</a></li>
<li><b>公示</b></li>
<li><a href="#">招生章程</a></li>
<li><a href="#">名单公示</a></li>
</ul>
<ul id="l2">
<li><b>高校</b></li>
<li><a href="#">院校库</a></li>
<li><a href="#">在线咨询</a></li>
<li><b>专业</b></li>
<li><a href="#">专业推荐</a></li>
<li><a href="#">专业知识库</a></li>
</ul>
</div>
<div id="A1b2">
<p id="a1"><a href="#">研招网</a></p>
<p id="p1">全国硕士研究生报名和调剂指定网站</p>
<p id="p2">...............................................................................................</p>
<ul id="l1">
<li><b>专业目录</b></li>
<li><a href="#">硕士</a></li>
<li><a href="#">博士</a></li>
<li><b>高校/专业</b></li>
<li><a href="#">院校库</a></li>
<li><a href="#">在线咨询</a></li>
<li><a href="#">专业知识库</a></li>
</ul>
<ul id="l2">
<li><b>报名/调剂</b></li>
<li><a href="#">统考网报</a></li>
<li><a href="#">网报公告</a></li>
<li><a href="#">网上调剂</a></li>
<li><a href="#">推免服务</a></li>
</ul>
</div>
<div id="A1b3">
<p id="a1"><a href="#">政法招生</a></p>
<p id="p1">政法干警招录培养体制改革试点招生网</p>
<p id="p2">...................................................................................................</p>
<ul id="l1">
<li><p><a href="#">招生院校</a></p></li>
<li>|</li>
<li><p><a href="#">专业目录</a></p></li>
</ul>
</div>
<div id="A1b4">
<p id="a1"><a href="#">港澳台招生</a></p>
<p id="p1">内地高校面向港澳台招生信息网</p>
<p id="p2">...................................................................................................</p>
<ul id="l1">
<li><p><a href="#">本科生招生</a></p></li>
<li>|</li>
<li><p><a href="#">研究生招生</a></p></li>
</ul>
</div>
</div>
<div id="A2">
<div id="A2a1">
<h4>官方微博</h4>
</div>
<div id="A2a2">
<p id="A2a2c1">阳光高考信息</p>
<p id="A2a2c2">平台</p>
<p id="A2a2c3"><a href="#">官方微博</a></p>
</div>
<div id="A2a3">
<p id="A2a3c1">中国研究生招生</p>
<p id="A2a3c2">信息网</p>
<p id="A2a3c3"><a href="#">官方微博</a></p>
</div>
<!--微博图片固定-->
<div id="A2pt1">
<img src="files\gkweibo.png" alt="" >
</div>
<div id="A2pt2">
<img src="files\yzweibo.png" alt="">
</div>
</div>
</div>
</div>
<div id="div4">
<div class="div1d">
<div id="A1">
<div id="A1a1">
<h4>其他信息服务</h4>
</div>
<div id="A1b1">
<p id="a1"><a href="#">全国征兵网</a></p>
<p id="p1">全国征兵报名唯一官方网站</p>
<p id="p2">...............................................................................................</p>
<ul id="l1">
<li><b>兵役登记</b></li>
<li><a href="#">男兵</a></li>
<li><b>应征报名</b></li>
<li><a href="#">男兵</a></li>
<li><a href="#">女兵</a></li>
<li><a href="#">直招士官</a></li>
</ul>
<ul id="l2">
<li><a href="#">政策法规</a></li>
<li><a href="#">工作动态</a></li>
<li><a href="#">国防知识</a></li>
<li><a href="#">在线咨询</a></li>
<li><a href="#">廉洁举报</a></li>
</ul>
</div>
<div id="A1b2">
<p id="a1"><a href="#">学职平台</a></p>
<p id="p1">链接学生、高校和企业的纽带</p>
<p id="p2">.............................................................................................</p>
<ul id="l1">
<li><p><a href="#">名单查询</a></p></li>
<li>|</li>
<li><p><a href="#">证书查询</a></p></li>
</ul>
</div>
<div id="A1b3">
<p id="a1"><a href="#">新职业</a></p>
<p id="p1">教育部大学生就业网</p>
<p id="p2">.............................................................................................</p>
<ul id="l1">
<li><p><a href="#">推荐职位</a></p></li>
<li>|</li>
<li><p><a href="#">招聘会</a></p></li>
</ul>
</div>
<div id="A1b4">
<p id="a1"><a href="#">导师名单证书查询</a></p>
<p id="p1">全国万名优秀创新创业导师人才库</p>
<p id="p2">...................................................................................................</p>
<ul id="l1">
<li><p><a href="#">名单查询</a></p></li>
<li>|</li>
<li><p><a href="#">证书查询</a></p></li>
</ul>
</div>
<div id="A1b5">
<p id="a1"><a href="#">四六级成绩查询</a></p>
<p id="p1">英语四六级考试官方成绩查询网站</p>
</div>
<div id="A1b6">
<div id="A1b6pt"><!--图片插入-->
<img src="files\picixy.jpg" alt="">
</div>
</div>
<div id="A1f1">
<ul id="l1">
<li><p><a href="#">专业百科</a></p></li>
<li>|</li>
<li><p><a href="#">职业微视频</a></p></li>
</ul>
</div>
<div id="A1f2">
<ul id="l1">
<li><p><a href="#">名企热招</a></p></li>
<li>|</li>
<li><p><a href="#">应聘指导</a></p></li>
</ul>
</div>
</div>
<div id="A2">
<div id="A2a1">
<h4>微信公众号</h4>
</div>
<!--微博图片固定-->
<div id="A2a2">
<div id="A2a2pt">
<img src="files\wxgzh.png" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
<!--第五部分 底部-->
<tr id="t5">
<td width="768px"><br><p1>关于我们</p1><p2>————————————————————————————————————</p2>
<li class="bottom1"> <!--底部第一个表单-->
<p>主办单位：<a href="http://chesicc.moe.edu.cn/" target="_blank">全国高等学校学生信息咨询与就业指导中心</a>
<a href="http://chesicc.moe.edu.cn/zxgw/zxjs/201604/20160418/1529506207.html" target="_blank" class="b1">中心简介</a>
<a href="https://www.chsi.com.cn/zhaopin/index.jsp" target="_blank" class="b1">招聘信息</a></p>
<p>客服热线：010-82199588
<a href="https://www.chsi.com.cn/about/about_site.shtml" target="_blank" class="b1">网站简介</a>
<a href="https://www.chsi.com.cn/help" target="_blank" class="b1">帮助中心</a>
</p>
<p>客服邮箱：kefu#chsi.com.cn(将#替换为@)
<a href="https://www.chsi.com.cn/about/copyright.shtml" target="_blank" class="b1">版权声明</a>
<a href="https://www.chsi.com.cn/help/wzdh.jsp" target="_blank" class="b1">网站导航</a>
</p>
<p>Copyright © 2003-2020 <a href="https://www.chsi.com.cn/" target="_blank">学信网</a>All
Rights Reserved
<a href="https://www.chsi.com.cn/ad/index.shtml" target="_blank" class="b1">网站广告</a>
<a href="https://www.chsi.com.cn/z/tenyears/index.jsp" target="_blank" class="b1">学信十周年</a>
</p>
<p>京ICP备19004913号
<a href="https://www.chsi.com.cn/about/contact.shtml" target="_blank" class="b1">联系我们</a>
</p>
<p>京公网安备110402430099号</p>
</li>
</td>
<td width="768px">
<div id="botr">
<p3>友情链接</p3><br>
<p4>——————————————————————————————————————</p4>
<p><a href="http://www.moe.gov.cn/" target="_blank">中华人民共和国教育部</a>
<a href="http://edu.people.com.cn/" target="_blank">人民网教育</a>
<a href="http://admission.bit.edu.cn/" target="_blank">北京理工大学</a>
<a href="http://www.hsehome.org/" target="_blank">安全家-安全知识社区</a>
</p>
<p><a href="http://www.moe.gov.cn/s78/A15/" target="_blank">教育部高校学生司</a>
<a href="http://www.gotopku.cn/" target="_blank">北京大学</a>
<a href="http://www.buct.edu.cn/" target="_blank">北京化工大学</a>
<a href="http://www.gaes.gov.mo/chinaenroll/gb/home.html" target="_blank">澳门高校招收内地学生</a>
</p>
<p><a href="http://www.cedf.org.cn/" target="_blank">中国教育发展基金会</a>
<a href="https://www.ruc.edu.cn/" target="_blank">中国人民大学</a>
<a href="http://www.buaa.edu.cn/" target="_blank">北京航空航天大学</a>
</p>
<p>
<a href="http://www.jsjjh.org.cn/" target="_blank">中国教师发展基金会</a>
<a href="http://join-tsinghua.edu.cn/bkzsw/index.html" target="_blank">清华大学</a>
<a href="http://www.neu.edu.cn/" target="_blank">东北大学</a>
</p>
<p>
<a href="http://www.xszz.cee.edu.cn/" target="_blank">全国学生资助管理中心</a>
<a href="http://zhaosheng.ustb.edu.cn/" target="_blank">北京科技大学</a>
<a href="http://zsb.nwpu.edu.cn/" target="_blank">西北工业大学</a>
</p>
<br>
</div>
</td>
</tr>
</table>
</body>
</html>这里只展示了核心的html代码。 一些css样式表，静态资源（图片）没有展示，如果大家有想象力的话自己可以在此基础上进行深层次的打造，结合js，打造出属于你的网站。 需要在此基础上进行学习的新人们可以在百度网盘下载资源进行学习即可。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022年9月5日 下，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
