学校官网首页 2页网页设计(HTML+CSS+JavaScript)

这篇具有很好参考价值的文章主要介绍了学校官网首页 2页网页设计(HTML+CSS+JavaScript)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

源码获取 文末联系

Web前端开发技术
描述 网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 校园班级网页设计 | 我的班级网页 | 我的学校 | 校园社团 | 校园运动会 | 等网站的设计与制作 | HTML期末大学生网页设计作业,Web大学生网页

  1. HTML:结构

  2. CSS:样式
    在操作方面上运用了html5和css3,
    采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识

  3. JavaScript:做与用户的交互行为


前端学习路线

(1)html文件:其中index.html是首页、其他html为二级页面;
(2)css文件:css全部页面样式,文字滚动, 图片放大等;
(3)js文件:js实现动态轮播特效, 表单提交, 点击事件等等(网页中运用到js代码)

网页基本结构

(1)首页:进入网页中看到的第一个页面(LOGO、公司名称、导航、banner、新闻、相关信息、底部信息、banner一般是5个  
(2)二级页面:从首页点击进入之后的页面叫做二级页面
(3)三级页面:从二级页面点击进入的页面

网页html:网页是构成网站的基本元素,是承载各种网站应用的平台。通俗地说,网站就是由网页组成的
首页网站:首页是一个网站的入口网页,故往往会被编辑得易于了解该网站多数作为首页的文件名是index加上扩展名
导航菜单:是指位于页面顶部或者侧边区域的,也称之为导航栏,它起着链接站点或者软件内的各个页面的作用.
网页页脚:是网页中每个页面的底部的区域。常用于显示附加信息。如作者、备案号等。


网页演示

学校官网首页 2页网页设计(HTML+CSS+JavaScript)

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>English</p>
                            <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-03</span>
                                </li>
                                <li>
                                    <span>南宁学院李栋学校长一行到我校调研交流</span>
                                    <span>12-02</span>
                                </li>
                                <li>
                                    <span>2021年广西高职院校“双师型”教师认定评审会在我校...</span>
                                    <span>12-02</span>
                                </li>
                                <li>
                                    <span>学校党委常委会(扩大)会议专题学习自治区第十二...</span>
                                    <span>12-02</span>
                                </li>
                                <li>
                                    <span>自治区教育厅2021年全区高校思想政治理论课教学巡...</span>
                                    <span>12-01</span>
                                </li>
                                <li>
                                    <span>我校农工党党员陆桂喜荣获农工党中央2021年理论研...</span>
                                    <span>12-01</span>
                                </li>
                                <li>
                                    <span>我校觉史学习教育情景觉课《心中明灯》成功首演</span>
                                    <span>12-01</span>
                                </li>
                                <li>
                                    <span>学校组织参加“全国普通高校本科教育教学质量评估监...</span>
                                    <span>12-01</span>
                                </li>
                                <li>
                                    <span>广西科技大学留学人员联谊会成立大会顺利召开</span>
                                    <span>11-30</span>
                                </li>
                                <li>
                                    <span>自治区检查组到我校检查2022年全国硕士研究生招生...</span>
                                    <span>11-30</span>
                                </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-03</span>
                                </li>
                                <li>
                                    <span>华东理工大学严怀成教授应邀作国家自然科学基金项目申报讲座</span>
                                    <span>12-02</span>
                                </li>
                                <li>
                                    <span>土建学院举办首届课程思政说课比赛</span>
                                    <span>12-02</span>
                                </li>
                                <li>
                                    <span>华东理工大学博士生导师严怀成教授应邀为我校作线上学术报告</span>
                                    <span>12-02</span>
                                </li>
                                <li>
                                    <span>不忘初心,勇担使命——医学部举办首届“课程思政”示范课说课培训</span>
                                    <span>12-01</span>
                                </li>
                                <li>
                                    <span>2021年广西光学学会学术交流大会顺利召开</span>
                                    <span>12-01</span>
                                </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>

                </div>
                <div class="clear3 " style="background-color: #364895; ">

                </div>

            </div>

        </div>
        <div class="bgimg ">
            <img src="picture/bg.png" alt=" ">
        </div>
    </div>
    <div class="footer ">
        <div class="footer_box ">
            <div>
                <h4>东环校区</h4>
                <p>地址:广西柳州市城中区东环大道268号</p>
                <p>邮编:545006</p>
            </div>
            <div>
                <h4>柳石校区</h4>
                <p>地址:广西柳州市鱼峰区柳石路257号</p>
                <p>邮编:545005</p>
            </div>
            <div>
                <h4>柳东校区</h4>
                <p>地址:广西柳州市鱼峰区官塘大道19号</p>
                <p>邮编:545616</p>
            </div>
            <div>
                <p>电话:0772-2685979(校办) 0772-2687698(传真)</p>
                <p>本专科招生:0772—2686186 研究生招生:0772—2685375</p>
                <p>继续教育招生:0772—2686688</p>
            </div>
        </div>
        <p class="last_p "> 备案号:桂ICP备17000546号-1前置审核编号: 桂JS200601-10信息管理: 广西科技大学党委宣传部
        </p>
    </div>
</body>

</html>



学的反而越迷茫

有这种感觉很正常,因为你还没有真正去公司里面待过,也不清楚自己到底要学多少东西才能胜任公司里面给你分配的活。我从你的表述来看,你的基础应该还是很扎实的。跟着网上那种全套的视频教程学肯定没有问题。

当你以后真正进入公司,发现工作的难度和量大约只有你学习时期的大约20%,你可能就会发出一声叹息:原来工作也不过如此嘛。

这是很正常的,因为大部分公司是招你进去去干活的,写业务的,不是让你一个新人去研发公司架构的。都是现成的东西,你要做的就是在别人的教导下,手把手的指挥下去添砖加瓦。到时候你恐怕要惊呼:就这?

所以,放松心态吧,好好享受大学时光
—————————————————


学习更多

关注我 | 点赞博文 | 每天带你涨知识


学校官网首页 2页网页设计(HTML+CSS+JavaScript)文章来源地址https://www.toymoban.com/news/detail-463892.html

到了这里,关于学校官网首页 2页网页设计(HTML+CSS+JavaScript)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包