-
学校官网首页 2页网页设计(HTML+CSS+JavaScript)
⛵ 源码获取 文末联系 ✈
Web前端开发技术
描述 网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 校园班级网页设计 | 我的班级网页 | 我的学校 | 校园社团 | 校园运动会 | 等网站的设计与制作 | HTML期末大学生网页设计作业，Web大学生网页-
HTML：结构
-
CSS：样式
在操作方面上运用了html5和css3，
采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识 -
JavaScript：做与用户的交互行为
前端学习路线
（1）html文件：其中index.html是首页、其他html为二级页面；
（2）css文件：css全部页面样式,文字滚动, 图片放大等；
（3）js文件：js实现动态轮播特效, 表单提交, 点击事件等等（网页中运用到js代码）网页基本结构
(1)首页：进入网页中看到的第一个页面(LOGO、公司名称、导航、banner、新闻、相关信息、底部信息、banner一般是5个
(2)二级页面：从首页点击进入之后的页面叫做二级页面
(3)三级页面：从二级页面点击进入的页面网页html：网页是构成网站的基本元素，是承载各种网站应用的平台。通俗地说，网站就是由网页组成的
首页网站：首页是一个网站的入口网页，故往往会被编辑得易于了解该网站多数作为首页的文件名是index加上扩展名
导航菜单：是指位于页面顶部或者侧边区域的，也称之为导航栏，它起着链接站点或者软件内的各个页面的作用.
网页页脚：是网页中每个页面的底部的区域。常用于显示附加信息。如作者、备案号等。
网页演示
HTML结构代码
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/style.css"> <title>广西科技大学title> head> <body> <div class="bigbox"> <div class="bg_color"> div> <div class="little_box"> <header> <div class="heard_top"> <img src="picture/logo.png" alt=""> <div class="heard_right"> <div class="right_top"> <p>领导信箱p> <p>Englishp> <p>快速登录p> <input type="text" placeholder="全文检索"> <img src="picture/tubiao.png" alt=""> div> <img class="text" src="picture/txt.png" alt=""> div> div> <div class="clear"> div> <div class="heard_list"> <a href="">学校首页a> <a href="school.html">学校概况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> div> header> <div class="banner"> <img src="picture/banner.jpeg" alt=""> div> <div class="mian_box"> <div class="main"> <div class="main_left"> <div class="main_heard"> <img src="picture/download.png" alt=""> <h2> 科大要闻 h2> <p>more+p> div> <div class="neirong1"> <div class="banner2"> <img src="picture/banner2.jpeg" alt=""> <p>我校党史学习教育情景党课《心中明灯》成功首演p> div> <ul class="neirong1_right"> <li> <span>我校举办深圳盐田区“梧桐人才”赴外引才专场招聘会span> <span>12-03span> li> <li> <span>南宁学院李栋学校长一行到我校调研交流span> <span>12-02span> li> <li> <span>2021年广西高职院校“双师型”教师认定评审会在我校...span> <span>12-02span> li> <li> <span>学校党委常委会（扩大）会议专题学习自治区第十二...span> <span>12-02span> li> <li> <span>自治区教育厅2021年全区高校思想政治理论课教学巡...span> <span>12-01span> li> <li> <span>我校农工党党员陆桂喜荣获农工党中央2021年理论研...span> <span>12-01span> li> <li> <span>我校觉史学习教育情景觉课《心中明灯》成功首演span> <span>12-01span> li> <li> <span>学校组织参加“全国普通高校本科教育教学质量评估监...span> <span>12-01span> li> <li> <span>广西科技大学留学人员联谊会成立大会顺利召开span> <span>11-30span> li> <li> <span>自治区检查组到我校检查2022年全国硕士研究生招生...span> <span>11-30span> li> ul> div> div> <div class="main_right"> <div class="main_heard"> <img src="picture/download-1.png" alt=""> <h2> 通知公告 h2> <p>more+p> div> <ul class="left_ul"> <li> <span>生物与化学工程学院科研设备招标公告span> li> <li> <span>广西科技大学2021届毕业生申请基层就业奖励名单公示span> li> <li> <span>广西科技大学2020—2021学年普通本专科学生先进班级、“三好...span> li> <li> <span>广西科技大学第一附属医院2020年度公开招聘拟聘用人员名单span> li> <li> <span>广西鼎策工程顾问有限责任公司关于车用功率芯片与气体传感器...span> li> <li> <span>微电子与材料工程学院设备招标公告span> li> <li> <span>微电子与材料工程学院设备招标公告span> li> <li> <span>广西科技大学2021年度公开招聘非实名人员控制数工作人员公告span> li> ul> div> div> <div class="clear3"> div> div> <div class="mian_box"> <div class="main"> <div class="main_left"> <div class="main_heard"> <img src="picture/k.png" alt=""> <h2> 科教动态 h2> <h2 style="margin-left: 30px;color: #939498;"> 校园快讯 h2> <h2 style="margin-left: 30px;color: #939498;"> 办学思想大讨论 h2> <p>more+p> div> <div class="neirong1"> <ul class="neirong2_right"> <li> <span>我校硕士研究生在国际学术期刊发表SCI封面论文span> <span>12-03span> li> <li> <span>华东理工大学严怀成教授应邀作国家自然科学基金项目申报讲座span> <span>12-02span> li> <li> <span>土建学院举办首届课程思政说课比赛span> <span>12-02span> li> <li> <span>华东理工大学博士生导师严怀成教授应邀为我校作线上学术报告span> <span>12-02span> li> <li> <span>不忘初心，勇担使命——医学部举办首届“课程思政”示范课说课培训span> <span>12-01span> li> <li> <span>2021年广西光学学会学术交流大会顺利召开span> <span>12-01span> li> ul> div> div> <div class="main_right"> <div class="main_heard"> <img src="picture/m.png" alt=""> <h2> 媒体科大 h2> <p>more+p> div> <ul id="list2"> <li> <span>【人民网】广西科技大学情景党课《心中明灯》成功首演span> li> <li> <span>【中新网】广西科技大学情景党课《心中明灯》首演span> li> <li> <span>【广西教育厅】广西科技大学党史学习教育情景党课《心中...span> li> <li> <span>【人民网】广西科技大学机器人教研室团队探寻科技创新助...span> li> <li> <span>【南国今报】20万人次观看！广西科大音乐歌舞剧《心中明...span> li> <li> <span>【柳州日报】上万名师生线上线下同步观看情景党课《心中...span> li> ul> div> div> <div class="clear3"> div> div> <div class="mian_box"> <div class="main"> <div class="main_left2"> <div class="neirong_lis"> <div class="main_heard"> <img src="picture/js.png" alt=""> <h2> 教师风范 h2> <p>more+p> div> <ul id="list3"> <li> <span>奋斗耕耘半世纪，科技创新谱...span> li> <li> <span>一盏“灯”照亮500学子前程一...span> li> <li> <span>学无止境攀高峰 丹心热血育桃...span> li> <li> <span>累并幸福着-记我校“优秀...span> li> <li> <span>三尺讲台勤耕耘 潜心教学育英...span> li> <li> <span>【身怀父母心 真诚为患者...span> li> ul> div> <div class="neirong_lis"> <div class="main_heard"> <img src="picture/xz.png" alt=""> <h2> 学子风貌 h2> <p>more+p> div> <ul id="list3"> <li> <span>王涛：跑出一片新天地...span> li> <li> <span>吴端秀：用行动诠释孝顺...span> li> <li> <span>张雅慧：直播带货，她立志做螺蛳粉...span> li> <li> <span>王立颖：不负青春志，奋斗统芳华！span> li> <li> <span>马臻：唱出梦想舞动人生span> li> <li> <span>孙浩祥：砥砺前行，逐梦电子科大span> li> ul> div> <div class="neirong_lis"> <div class="main_heard"> <img src="picture/xy.png" alt=""> <h2> 校友风采 h2> <p>more+p> div> <ul id="list3"> <li> <span>歷丽要，一砖一瓦筑世界...span> li> <li> <span>马莹莹：用沙画记录柳州抗疫点滴...span> li> <li> <span>唐勇军：不负韶华，拼搏成就人生span> li> <li> <span>刘焘：不甘心平凡，潜心科研的博...span> li> <li> <span>黄晓旭：从硕博连读到担任大学教师...span> li> <li> <span>周磊：从科大走出的“全国技术能手”span> li> ul> div> div> <div class="main_right"> <div class="main_heard"> <img src="picture/ks.png" alt=""> <h2> 快速通道 h2> <p>p> div> <div class="kuaisu"> <div> <img src="picture/1.png" alt=""> <p>OA系统p> div> <div> <img src="picture/2.png" alt=""> <p>教务系统p> div> <div> <img src="picture/3.png" alt=""> <p>缴费系统p> div> <div> <img src="picture/4.png" alt=""> <p>邮箱系统p> div> div> <div class="kuaisu"> <div> <img src="picture/5.png" alt=""> <p>专题网站p> div> <div> <img src="picture/6.png" alt=""> <p>信息公开p> div> <div> <img src="picture/7.png" alt=""> <p>图书馆p> div> <div> <img src="picture/8.png" alt=""> <p>网路服务p> div> div> <div class="kuaisu"> <div> <img src="picture/9.png" alt=""> <p>中外合作办学p> div> <div> <img src="picture/10.png" alt=""> <p>校友之家p> div> <div> <img src="picture/11.png" alt=""> <p>VR校园p> div> <div> <img src="picture/12.png" alt=""> <p>举报方式p> div> div> div> div> <div class="lunbotu"> <div class="lunbo_list"> <img src="picture/111.png" alt=""> <p>快闪《庆建党百年 谱科大新篇》p> div> <div class="lunbo_list"> <img src="picture/ban1.png" alt=""> <p>广西科技大学艺术学院音乐171班：毕业MV《拾p> div> <div class="lunbo_list"> <img src="picture/ban2.png" alt=""> <p>国务院“互联网 督查”平台海报p> div> <div class="lunbo_list"> <img src="picture/ban3.png" alt=""> <p>“忠诚担当 大爱无疆”援湖北抗疫医疗队先进p> div> div> div> <div class="mian_box"> <div class="main" style="position: relative;"> <div class="bodder"> div> <div class="main_left "> <div class="main_heard " style="width: 100%;"> <img src="picture/download.png" alt=" "> <h2> 友情链接 h2> div> <div class="yoqing "> <div class="yoqing_list "> <p>国家机关p> <img src="picture/xia.png" alt=" "> div> <div class="yoqing_list "> <p>区直机关p> <img src="picture/xia.png" alt=" "> div> <div class="yoqing_list "> <p>教育资源p> <img src="picture/xia.png" alt=" "> div> <div class="yoqing_list "> <p>学术研究p> <img src="picture/xia.png" alt=" "> div> <div class="yoqing_list "> <p>新闻媒体p> <img src="picture/xia.png" alt=" "> div> <div class="yoqing_list "> <p>兄弟院校p> <img src="picture/xia.png" alt=" "> div> div> div> -