HTML 是用来描述网页的一种语言。HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。
此网页是我对html有了一个简单，初步的认识后制作的一个学校官网首界面的网页，主要目的是练习html的一些简单操作。
以下是代码和效果图：
效果图：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>南宁理工首页面</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/index.css">
<style>
ul,ol{
list-style: none;
}
table, td, tr, ul, ol, li, dl, dd, dt, p, input, form, em, p, img, h2, h3, h4, h5 {
margin: 0;
padding: 0;
list-style: none;
}
a{
text-decoration: none;
font-size: 16px;
color: black;
}
h2{
font-size: 16px;
}
li{
display: list-item;
text-align: -webkit-match-parent;
}
</style>
</head>
<body>
<header class="top">
<div class="top-logo">
<div>
<img src="img/logo.png" class="logo" alt="">
<div class="logo-right">
<input type="search" id="search" value="请输入要搜索内容">
<button id="go"><b>搜索</b></button>
</div>
</div>
</div>
<nav class="menu">
<ul>
<li><a href="#">首页</a></li>
<li>
<a href="#">学校概况</a>
<!-- <div class="two-list"> -->
<ul>
<li><a href="#">学校简介</a></li>
<li><a href="#">学校领导</a></li>
<li><a href="#">学校标识</a></li>
<li><a href="#">校园风光</a></li>
</ul>
<!-- </div> -->
</li>
<li>
<a href="#">机构设置</a>
<!-- <div class="two-list-1"> -->
<ul>
<li><a href="#">教学单位</a></li>
<li><a href="#">职能部门</a></li>
</ul>
<!-- </div> -->
</li>
<li>
<a href="#">教育教学</a>
</li>
<li>
<a href="#">招生就业</a>
<!-- <div class="two-list-2"> -->
<ul>
<li><a href="#">招生</a></li>
<li><a href="#">就业</a></li>
</ul>
<!-- </div> -->
</li>
<li>
<a href="#">人才建设</a>
<!-- <div class="two-list-3"> -->
<ul>
<li><a href="#">人才引进</a></li>
<li><a href="#">人才培训</a></li>
<li><a href="#">干部学院</a></li>
</ul>
<!-- </div> -->
</li>
<li>
<a href="#">国际交流</a>
<!-- <div class="two-list-4"> -->
<ul>
<li><a href="#">本硕直通</a></li>
<li><a href="#">友好往来</a></li>
</ul>
<!-- </div> -->
</li>
<li>
<a href="#">数字南理</a>
<!-- <div class="two-list-5"> -->
<ul>
<li><a href="#">智慧校园（教师端）</a></li>
<li><a href="#">在线教学平台</a></li>
<li><a href="#">图书检索</a></li>
<li><a href="#">办公自动化系统（OA）</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>
<li><a href="#">资产系统</a></li>
<li><a href="#">数字化实习实训平台</a></li>
</ul>
<!-- </div> -->
</li>
<li>
<a href="#">原门户</a>
<!-- <div class="two-list-6"> -->
<ul>
<li><a href="#">学校简介</a></li>
<li><a href="#">学校领导</a></li>
<li><a href="#">学校标识</a></li>
<li><a href="#">校园风光</a></li>
</ul>
<!-- </div> -->
</li>
</ul>
</nav>
<div class="banner">
<img src="img/item.png" alt="">
</div>
</header>
<div class="content">
<div class="left">
<div class="index_title">
<div class="topnav">
<ul id="index_news_left">
<li class="active" data-num="1"><a target="_blank" href="https://www.bwgl.cn/syxw/syxw_xxxw/">学校新闻</a></li>
<li data-num="2" class=""><a target="_blank" href="https://www.bwgl.cn/syxw/syxw_xydt/">校园动态</a></li>
<li data-num="3" class=""><a target="_blank" href="https://www.bwgl.cn/syxw/syxw_mtnl/">媒体南理</a></li>
</ul>
</div>
<div class="more tabmorel active">
<a target="_blank" href="https://www.bwgl.cn/syxw/syxw_xxxw/">READ MORE</a>
<i>
<img src="https://www.bwgl.cn/wp-content/themes/nnlg/static/picture/jtl.svg" alt="">
</i>
</div>
<div class="more tabmorel">
<a target="_blank" href="https://www.bwgl.cn/syxw/syxw_xydt/">READ MORE</a>
<i>
<img src="https://www.bwgl.cn/wp-content/themes/nnlg/static/picture/jtl.svg" alt="">
</i>
</div>
<div class="more tabmorel">
<a target="_blank" href="https://www.bwgl.cn/syxw/syxw_mtnl/">READ MORE</a>
<i>
<img src="https://www.bwgl.cn/wp-content/themes/nnlg/static/picture/jtl.svg" alt="">
</i>
</div>
<div class="list index_news_left_list active" data-num="3">
<div class="list_l">
<a target="_blank" href="https://guangxi.eol.cn/gxgd/202210/t20221024_2251637.shtml">
<div class="img"><img src="https://www.bwgl.cn/wp-content/uploads/sites/21/2022/10/微信图片_20221024102853-scaled.jpg" alt=""></div>
<div class="nr">
<h2>暖心！南宁理工学院后勤保卫处温暖相助走失老人</h2>
<div class="info">
<span>来源：中国教育在线广西分站</span>
<span>发布日期：2022-10-24</span>
</div>
<p></p>
</div>
</a>
</div>
<div class="list_r" style="margin-top: -21px;">
<ul>
<li>
<a target="_blank" href="https://www.bwgl.cn/syxw/34139/">
<div class="nr">
<h2>【中国青年网】唐莉琼：青年教师要刻苦钻研，紧跟时代，引领行业</h2>
<div class="info">
<span>来源：教学科研管理处</span>
<span>发布日期：2022-10-21</span>
</div>
<p></p>
</div>
</a>
</li>
<li>
<a target="_blank" href="https://xiaoyuan.cycnet.com.cn/s?uid=692024&app_version=1.4.5&sid=1401193&time=1662340652&signature=xZry0KPXd5RYDQVznvq4v9EnKugJnM1GlE6go9mAJkeON2wjWB&sign=b63e6509603854f029a9988567f54ecd">
<div class="nr">
<h2>南理学子三下乡：保护潜经村文化风情，培育特色潜经乡村，我们在路上</h2>
<div class="info">
<span>来源：中青网</span>
<span>发布日期：2022-09-04</span>
</div>
<p></p>
</div>
</a>
</li>
<li>
<a target="_blank" href="https://xiaoyuan.cycnet.com.cn/s?uid=692024&app_version=1.4.5&sid=1398268&time=1662340611&signature=WnG63ezAQDowMB0vlYg4kgn08sDeBy4L8KN5yR9XpjPOxrbdE2&sign=94252076227a00c12f5b14ed02b2a621">
<div class="nr">
<h2>广西大学生三下乡：党旗领航聚合力，乡村振兴谱新篇</h2>
<div class="info">
<span>来源：中青网</span>
<span>发布日期：2022-09-03</span>
</div>
<p></p>
</div>
</a>
</li>
<li>
<a target="_blank" href="https://xiaoyuan.cycnet.com.cn/s?uid=692024&app_version=1.4.5&sid=1398270&time=1662340603&signature=e6y30XlmbkL9oxwAjJd1P6ZR2UK6ny7gMQE2nZKW8RNpvPrqzB&sign=e6411cdf2da2404c1824752ad53363f2">
<div class="nr">
<h2>广西大学生三下乡： 做瑶族文化锦绣，体瑶族文化风味</h2>
<div class="info">
<span>来源：中青网</span>
<span>发布日期：2022-09-03</span>
</div>
<p></p>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="right">
<div class="index_title">
<div class="topnav2">
<ul id="index_news_right">
<li class="active" data-num="1"><a target="_blank" href="https://www.bwgl.cn/syxw/tongzhiyuhuodong/syxw_tzgg/">通知公告</a></li>
<li data-num="2"><a target="_blank" href="https://www.bwgl.cn/syxw/tongzhiyuhuodong/syxw_hdyg/">活动预告</a></li>
</ul>
</div>
<div class="more tabmore active">
<a target="_blank" href="https://www.bwgl.cn/syxw/tongzhiyuhuodong/syxw_tzgg/">READ MORE</a><i><img src="https://www.bwgl.cn/wp-content/themes/nnlg/static/picture/jtl.svg" alt=""></i>
</div>
<div class="more tabmore">
<a target="_blank" href="https://www.bwgl.cn/syxw/tongzhiyuhuodong/syxw_hdyg/">READ MORE</a><i><img src="https://www.bwgl.cn/wp-content/themes/nnlg/static/picture/jtl.svg" alt=""></i>
</div>
</div>
<ul class="index_news_right_list" data-num="1" style="margin-top: 51px; height: 100%; display: block;">
<li>
<a target="_blank" href="https://www.bwgl.cn/syxw/tongzhiyuhuodong/syxw_tzgg/35846/">
<div class="list">
<div class="time">
<em>07</em>
<i>2022-11</i>
</div>
<div class="nr">
<h2>关于组织申报2022年广西哲学社会科学规划研究课题“外语学科专项”工作的通知</h2>
<p>
校属各单位、各部门：为进一步提高广西外语科研人员积极性和外向型人才培养质量，广西哲学社会科学……
</p>
</div>
</div>
</a>
</li>
<li>
<a target="_blank" href="https://www.bwgl.cn/syxw/tongzhiyuhuodong/syxw_tzgg/35667/">
<div class="list">
<div class="time">
<em>04</em>
<i>2022-11</i>
</div>
<div class="nr">
<h2>
关于2022-2023学年第一学期期中教学检查具体安排的通知
</h2>
<p>
校属各教学单位： 根据《关于2022-2023学年第一学期期中教学检查安排的通知》文件要求，学校……
</p>
</div>
</div>
</a>
</li>
<li>
<a target="_blank" href="https://www.bwgl.cn/syxw/tongzhiyuhuodong/syxw_tzgg/35680/">
<div class="list">
<div class="time">
<em>04</em>
<i>2022-11</i>
</div>
<div class="nr">
<h2>关于组织申报2023年度广西高校中青年教师基础能力提升项目的通知
</h2>
<p>校属各部门、各单位：2023年度广西高校中青年教师基础能力提升项目申报工作现已启动，根据广西教育……
</p>
</div>
</div>
</a>
</li>
<li>
<a target="_blank" href="https://www.bwgl.cn/syxw/tongzhiyuhuodong/syxw_tzgg/35668/">
<div class="list">
<div class="time">
<em>04</em>
<i>2022-11</i>
</div>
<div class="nr">
<h2>
关于南宁东盟校区开展应急综合演练的通知
</h2>
<p>
校属各单位、部门及师生员工： 为了加强南宁东盟校区应对突发事故的能……
</p>
</div>
</div>
</a>
</li>
<li>
<a target="_blank" href="https://www.bwgl.cn/syxw/tongzhiyuhuodong/syxw_tzgg/35643/">
<div class="list">
<div class="time">
<em>04</em>
<i>2022-11</i>
</div>
<div class="nr">
<h2>
关于开展2022年度校级一流课程认定工作的通知
</h2>
<p>
各二级学院：为贯彻落实全国教育大会精神和新时代全国高等学校本科教育工作会议要求，进一步深化教……
</p>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
<footer class="footer">
<div class="footer-1">
<div class="footer-index">
<ul>
<li>
<a target="_blank" href="https://www.vrzhan.com/v/6031666">
<img src="https://www.bwgl.cn/wp-content/uploads/sites/21/2022/09/ico1.png" alt="">
<p>VR实景</p>
</a>
</li>
<li>
<a target="_blank" href="https://www.bwgl.cn/gjjyxy/gjjyxy_bszt/1710/">
<img src="https://www.bwgl.cn/wp-content/uploads/sites/21/2022/09/ico2.png" alt="">
<p>本硕直通</p>
</a>
</li>
<li>
<a target="_blank" href="https://web.bwgl.cn/site/9PfZGdmWQQweP2Uu">
<img src="https://www.bwgl.cn/wp-content/uploads/sites/21/2022/09/ico3.png" alt="">
<p>党团建设</p>
</a>
</li>
<li>
<a target="_blank" href="https://www.bwgl.cn/twxxzx">
<img src="https://www.bwgl.cn/wp-content/uploads/sites/21/2022/09/ico4.png" alt="">
<p>图书馆</p>
</a>
</li>
</ul>
</div>
</div>
<div class="footer-2">
<div class="foot">
<div class="foot_l">
<div class="foot_logo">
<img src="img/foot_logo.png" alt="">
</div>
<ul>
<li>
<img src="/static_new/nanning/img/weibo.png" alt="">
<p>官方微博</p>
<div class="block active"><img src="https://www.bwgl.cn/wp-content/uploads/sites/21/2022/01/wx_.png" alt=""></div>
</li>
<li>
<img src="/static_new/nanning/img/weixin.png" alt="">
<p>官方微信</p>
<div class="block"><img src="https://www.bwgl.cn/wp-content/uploads/sites/21/2022/01/xxwx.png" alt=""></div>
</li>
<li>
<img src="/static_new/nanning/img/zhaosheng.png" alt="">
<p>招生就业</p>
<div class="block"><img src="https://www.bwgl.cn/wp-content/uploads/sites/21/2022/01/zsjy.jpg" alt=""></div>
</li>
<li>
<a href="https://www.vrzhan.com/v/6031666">
<img src="/static_new/nanning/img/vrshijing.png" alt="">
<p>VR实景</p>
<div class="block"><img src="https://www.bwgl.cn/wp-content/uploads/sites/21/2022/04/32_842568987bc3fd607a808dbfea467efd.png" alt=""></div>
</a>
</li>
<li>
<img src="/static_new/nanning/img/ipv6_ico.png" alt="">
<p>IPv6</p>
<div class="block"><img src="https://www.bwgl.cn/wp-content/uploads/sites/21/2022/01/ipv6.png" alt=""></div>
</li>
</ul>
</div>
<div class="foot_r">
<div class="top">
<ul id="footer_ul">
<li>
<p>校内链接</p>
<div class="jt"><img src="/img/foot_logo.png" alt=""></div>
<div class="dr">
<a href="https://oa.bwgl.cn/">办公自动化系统（OA）</a>
<a href="https://mooc.bwgl.cn/">在线教学平台</a>
<a href="http://zc.bwgl.cn/">资产系统</a>
<a href="https://lib.bwgl.cn/opac/BWXY/refineResults">图书检索</a>
<a href="http://zfjw.bwgl.cn/">正方教务系统</a>
<a href="http://jw.bwgl.cn/gllgdxbwglxy">教务系统</a>
<a href="https://eepay.bwgl.cn/wac/pc/login/login.html#/">缴费系统</a>
<a href="https://xgxt.bwgl.cn/xgxt/">学工系统</a>
<a href="https://yxxt.bwgl.cn/yxxt/zzyx/xsLogin_index.do">迎新系统</a>
<a href="https://cnki-image.bwgl.cn/">知网镜像（内网）</a>
<a href="http://w.bwgl.cn/">上网认证</a>
<a href="http://172.30.1.14:8007/">心理普测（内网）</a>
<a href="http://bcxl.bwgl.cn/">北辰心理普测系统</a>
</div>
</li>
<li>
<p>专题网站</p>
<div class="jt"><img src="/static_new/nanning/img/jt.png" alt=""></div>
<div class="dr">
<a href="https://www.bwgl.cn/gbxy/web.bwgl.cn/section/SYpXZSpnWDj56gPH/QsFqHpibYZ2tNMM8/1">两学一做</a>
<a href="https://www.bwgl.cn/gbxy/www.bwgl.cn/gbxy/">干部学院</a>
<a href="http://zt.bwgl.cn/fzjy/">法治教育</a>
<a href="https://web.bwgl.cn//site/7D9YM2baWWd6LdM4">网络安全宣传周</a>
<a href="http://zt.bwgl.cn/hw/">海外课堂</a>
<a href="http://zt.bwgl.cn/cxzy/ywjj.html">创先争优</a>
<a href="http://zt.bwgl.cn/pjw/">评建网</a>
<a href="http://zt.bwgl.cn/wm/">安全文明校园</a>
<a href="http://zt.bwgl.cn/xf/">学风建设</a>
<a href="http://zt.bwgl.cn/qzlx/">党的群众路线教育实践活动</a>
<a href="http://zt.bwgl.cn/mlgx/">美丽广西 清洁乡村</a>
<a href="http://zt.bwgl.cn/tmgc/">土木工程省级特色专业</a>
<a href="https://www.bwgl.cn/xyw/">校友网</a>
<a href="http://web.bwgl.cn/site/BA6HiKsstPHhgM4F">十五周年校庆</a>
</div>
</li>
<li>
<p>友情链接</p>
<div class="jt"><img src="/static_new/nanning/img/jt.png" alt=""></div>
<div class="dr">
<a href="http://www.enetedu.com/">高校教师网络培训中心</a>
<a href="http://gxttc.gxnu.edu.cn">广西高等学校师资培训中心</a>
</div>
</li>
</ul>
</div>
<div class="contact">
<p>南宁东盟校区：广西南宁市广西-东盟经济技术开发区发展大道16号</p>
<p>桂林雁山校区：广西桂林市雁山区雁山镇雁山街317号</p>
<span>招生咨询热线（东盟）：0771-6031555 6031666 6031777 </span>
<span>招生咨询热线（桂林）：0773-8998009 8998018 8998088 </span>
<div class="prin">
<a href="mailto:yz@nnct.edu.cn">< 校长信箱</a>
<a href="/static_new/nanning/img/jdjbp.jpg">< 监督举报</a>
<a href="https://www-en.bwgl.cn/" style="margin-left: 40px;">EN</a>
</div>
</div>
</div>
</div>
</div>
</footer>
</html>本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
