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&amp;app_version=1.4.5&amp;sid=1401193&amp;time=1662340652&amp;signature=xZry0KPXd5RYDQVznvq4v9EnKugJnM1GlE6go9mAJkeON2wjWB&amp;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&amp;app_version=1.4.5&amp;sid=1398268&amp;time=1662340611&amp;signature=WnG63ezAQDowMB0vlYg4kgn08sDeBy4L8KN5yR9XpjPOxrbdE2&amp;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&amp;app_version=1.4.5&amp;sid=1398270&amp;time=1662340603&amp;signature=e6y30XlmbkL9oxwAjJd1P6ZR2UK6ny7gMQE2nZKW8RNpvPrqzB&amp;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>校属各教学单位:&nbsp;根据《关于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>校属各单位、部门及师生员工:&nbsp; &nbsp; &nbsp; &nbsp;为了加强南宁东盟校区应对突发事故的能……</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>&nbsp;<span>招生咨询热线(桂林):0773-8998009  8998018  8998088    </span>&nbsp;<div class="prin"><a href="mailto:yz@nnct.edu.cn">&lt; 校长信箱</a><a href="/static_new/nanning/img/jdjbp.jpg">&lt; 监督举报</a><a href="https://www-en.bwgl.cn/" style="margin-left: 40px;">EN</a></div></div></div></div></div></footer>
</html>

学校官网首界面 html相关推荐

  1. HTML+CSS实现学校官网页面

    1.作业要求:实现学校官网页面 2.实现代码: <!DOCTYPE html> <html><head><meta charset="utf-8&q ...

  2. Python 数据采集-爬取学校官网新闻标题与链接(进阶)

    Python 爬虫爬取学校官网新闻标题与链接(进阶) 前言 一.拼接路径 二.存储 三.读取翻页数据 四.完整代码展示 五.小结 前言 ⭐ 本文基于学校的课程内容进行总结,所爬取的数据均为学习使用,请 ...

  3. “23岁本科生发14篇SCI”,文章被学校官网悄悄删了,你怎么看?

    点击上方"视学算法",选择加"星标" 重磅干货,第一时间送达 本文转载自:科研大匠 前段时间,南通大学杏林学院的95后本科毕业生王子恒火了: 本科期间发表14篇 ...

  4. java计算机毕业设计黑格伯爵国际英语贵族学校官网源码+mysql数据库+系统+lw文档+部署

    java计算机毕业设计黑格伯爵国际英语贵族学校官网源码+mysql数据库+系统+lw文档+部署 java计算机毕业设计黑格伯爵国际英语贵族学校官网源码+mysql数据库+系统+lw文档+部署 本源码技 ...

  5. Python 数据采集-爬取学校官网新闻标题与链接(基础)

    Python 爬虫爬取学校官网新闻标题与链接 一.前言 二.扩展库简要介绍 01 urllib 库 (1)urllib.request.urlopen() 02 BeautifulSoup 库 (1) ...

  6. java计算机毕业设计黑格伯爵国际英语贵族学校官网MyBatis+系统+LW文档+源码+调试部署

    java计算机毕业设计黑格伯爵国际英语贵族学校官网MyBatis+系统+LW文档+源码+调试部署 java计算机毕业设计黑格伯爵国际英语贵族学校官网MyBatis+系统+LW文档+源码+调试部署 本源 ...

  7. 学校官网项目banner设计

    学校官网项目banner设计 (撰写时间:2019年6月15日 作者:李梦熙) 由于学校官网项目组时间很紧急,需要赶稿也缺乏人手:老师就把我们拉入到项目组去帮助原本在项目组的学长学姐还有本班几个同学一 ...

  8. 学校官网和后台网页及心得

    关于学校方面的知识讲了一些,但是目前结课了.都不知道写什么:下面讲解学校官网的制作和注意点,学校也就是有老师传授知识,学生学习的一个最佳地方,学校也分很多种,有小学.高中.大学.这次主要讲解大学的高校 ...

  9. 爬取学校官网信息公告并存入数据库

    前段时间做了爬取学校信息并展示的小软件,爬取内容包括学校官网.教学管理系统.招生就业信息等,其中用到了QueryList库.翻页爬虫,定时爬虫,插入数据库等 不熟系QueryList的可以看一下我的这 ...

  10. ps制作学校官网总结

    广东信息科技职业培训学院 广信IT学院 技术文献总结装订册 年级18级 姓名:王浩 性别:男 籍贯:湖南 毕业中学:仁和中心校 入学时间:2017.07.12 身份证号码:43112620031007 ...

最新文章

  1. R语言基于线性回归(Linear Regression)进行特征筛选(feature selection)
  2. 常见BIOS设置解析
  3. 认识Linux 、安装虚拟机 、 安装centos7
  4. Java就业前景怎么样?值得学吗?
  5. Fiori Launchpad Tile点击后跳转的调试技巧
  6. NGINX api网关(mark 有空填坑)
  7. 阿里云计算新增ODPS、SLS两款云产品
  8. 在Linux上运行procmem和procrank
  9. SQL 数据对比(case when in)
  10. H264 encode and decode
  11. 西门子PLC编程软件step7 v5.5 和仿真软件S7-Plcsim安装与授权
  12. bugkuctf 游戏通关玄学式速通
  13. 阿里拍卖 捡漏 一元起拍
  14. MapGuide HTTP API
  15. t检验自由度的意义_两独立t检验的自由度为n-2()
  16. 关于Linux的应用层定时器
  17. INT_MAX INT_MIN及其运算
  18. ffmpeg开发 av_init_packet()和av_new_packet()
  19. 吴穹:金融行业已来到全面推行数字化研发管理的时点
  20. 11月03日解题报告

热门文章

  1. 最新版MySQL 8.0.22(Windows 64位)下载安装详细方法
  2. oracle toad 价格,Toad for oracle 软件产品模块对比,方便大家选型。
  3. 数据结构课程设计(银行叫号机)
  4. 计算机没有鼠标用英语怎么说,鼠标用英语怎么说
  5. python框架知乎_知乎网站构架变迁
  6. 系统自带测试软件,无需鲁大师检测!Windows自带工具检查系统健康度
  7. Delphi开发工具的使用
  8. 硅钢片铁芯、坡莫合金、非晶及纳米晶软磁合金
  9. 【Proteus仿真】自动量程(范围<10V)切换数字电压表
  10. 【132天】尚学堂高淇Java300集视频精华笔记(67-70)