自学内容网 自学内容网
自学内容网 > 正文

仿校园官网

🕗 发布于 2025-01-21 12:24 前端  

一、运行效果：

image-20250120180401126

二、源码设计

1、html

（1）index.html
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/index.css">
<title>岭南师范</title>
</head>

<body>

<div class="title_menu" id="title">
<div class="menu_li1"><img width="1200" src="images/logo.png" alt=""></div>
<a href="../index.html">
<div class="menu_li  active">岭南师院简介</div>
</a>
<a href="xuexiao/fengjing.html">
<div class="menu_li">校园风光</div>
</a>
<a href="xuexiao/yanjiu.html">
<div class="menu_li">学术研究</div>
</a>
<a href="xuexiao/xiaoxun.html">
<div class="menu_li">校训阐述</div>
</a>
<a href="xuexiao/liuyan.html">
<div class="menu_li">留言区</div>
</a>
</div>
<div class="title_img"></div>
<div class="info">
<div class="left">
<div class="about">>>关于岭南师院</div>
<div class="left-text">
<p>岭南师范学院（Lingnan Normal
University），简称“岭南师院”，位于广东省湛江市，是一所全日制普通本科高等院校，是广东省新增硕士学位授权立项建设单位、广东首批普通本科转型试点高校、省市共建高校、数据中国“百校工程”建设院校、广东省特殊教育教师发展联盟理事长单位、首批民政部社会工作专业人才培训基地。</p>
<p>
[1-2]
岭南师范学院办学历史可追溯到1636年创办的雷阳书院，1903年，学校改建为雷阳中学堂
[20]，1904年始设师范科教育，1935年改名为广东省立雷州师范学校，1978年正式改建为雷州师范专科学校，1991年升格并更名为湛江师范学院，2014年更为岭南师范学院。 [3]</p>
<p>
截至2023年10月，学校校园占地面积2580亩（包括寸金校区、湖光校区和椹川校区等3个校区），建筑面积近70万平方米，教学科研仪器设备总值近3亿元，馆藏纸质藏书300多万册，电子图书330多万册；设有32个二级学院（含挂靠），开设本科专业76个（其中师范类专业34个）；有教职员工2200余人，全日制在校本专科生28000多人</p>
</div>
</div>
<div class="right">
<div class="log">
<div class="daylog">&nbsp;&nbsp;>>校园历史</div>

<ul>
<li><img src="images/ico4.gif" /><span>&nbsp;&nbsp;雷阳书院成立</span><span class="ri-li">
1636年</span></li>
<li><img src="images/ico4.gif" /><span>&nbsp;&nbsp;开始设立师范科教育</span><span class="ri-li">
1904年</span></li>
<li><img src="images/ico4.gif" /><span>&nbsp;&nbsp;改称广东省立雷州师范学校</span><span class="ri-li">1935年
</span></li>
<li><img src="images/ico4.gif" /><span>&nbsp;&nbsp;学校升格更名为湛江师范学院</span><span class="ri-li">
1991年</span></li>
<li><img src="images/ico4.gif" /><span>&nbsp;&nbsp;学校再次更名为岭南师范学院</span><span class="ri-li">2014年
</span></li>
<li><img src="images/ico4.gif" /><span>&nbsp;&nbsp;学校入选2017年博士硕士学位点
</span><span class="ri-li">2017年
</span></li>
</ul>
</div>
<div class="pic">
<div class="daylog">&nbsp;&nbsp;>>美景概览</div>
<div style="padding:10px;margin-left:0px;">
<ul>
<li><img src="images/mj1.png" width="130" height="160" /></li>
<li><img src="images/mj2.png" width="130" height="160" /></li>
<li><img src="images/mj3.png" width="130" height="160" /></li>
</ul>
</div>
</div>
</div>
</div>
<div class="bott">岭南师范学院 学校 所有 2024-2025</div>
</body>

</html>
（2）xiaoxun.html
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="../css/style.css">
<link rel="stylesheet" href="../css/xiaoxun.css">
<title>岭南师范</title>
</head>

<body>

<div class="title_menu" id="title">
<div class="menu_li1"><img width="1200" src="../images/logo.png" alt=""></div>
<a href="../index.html">
<div class="menu_li">岭南师院简介</div>
</a>
<a href="fengjing.html">
<div class="menu_li">校园风光</div>
</a>
<a href="yanjiu.html">
<div class="menu_li">学术研究</div>
</a>
<a href="xiaoxun.html">
<div class="menu_li  active">校训阐述</div>
</a>
<a href="liuyan.html">
<div class="menu_li">留言区</div>
</a>

</div>
<div class="title_img"></div>
<div class="info">
<div class="xiaoxun">
<h3>崇德　 博雅　　弘志　　信勇</h3>
<p>校训是学校规定的对学生有指导意义的语辞，它是一个学校人才培养规格简明而又极具概括性的表述。校训内容的确定既与学校的性质、地位有关，更与校长的办学思想关系密切，它常常是校长办学理念的集中体现。人们从校训中，可以清楚地了解到校长的办学思想和对人才培养的规格与要求，也能在一定程度上把握学校所追求的办学特色。因而许多学校的校长都非常重视校训。</p>
<p>校领导在对我校的办学现状进行深入调查研究的基础上，基于形成我校鲜明的办学特色，提升我校的办学地位，乃至成为师范大学的远大理想，提出“崇德、博雅、弘志、信勇”八个字作为校训，从而既把办学理念转变成了具体的可操作的评价标准，又使广大学生明确了做人与做学问的要求和规范。</p>
<p>师范院校是教师的摇篮，教师最重要的是为人师表，为人师表的核心是教师能以高尚的品德成为学生的楷模。因而校领导在校训中把“崇德”放在首位。对于品德的崇尚是中华民族的优良传统，早在《尚书·武成》篇中就有“崇德报功”的提法，即尊崇有德和报答有功的人。其后孔子既以德行等四科教授弟子，又以忠诚信实、仰慕道义的具体解说来回答子张怎样才能“崇德”的疑惑。崇德，就是崇尚、重视道德，进而提高自己的道德品质。德，从层次来说，有基本道德和高尚道德之分。从范畴来说，有公共道德和职业道德之分。作为一个接受高等教育的大学生来说，既要具备基本的道德素质，也要朝着高尚的道德努力进取。既要遵守公共道德，也要有高尚的职业道德。对于师范院校的学生来说，职业道德就是师德。师德的基本内容包括爱岗敬业，乐于奉献，对学生严而不暴，爱而不流，举止大方而文雅。教师德行的高低，是其能否成为一名合格教师的首要前提。古人云：“教人治人，宜皆以正直为先”，说的就是这个意思。而“经师易求，人师难得”，更是从反面说明品德高尚是一个教师最为重要的素质。</p>
<p>“崇德”“弘志”，要求学生重视品德修炼，恢宏志气，临大节而不苟，搴帅旗而志有余，讲的是做人的品格志气问题。“博雅”“信勇”，要求学生追求知广情雅，信而有勇；学富五车而风流俊赏，信诚毕具而又勇为人先，讲的是成才所需要的学识和创新精神等素质问题。前后相应，而又有着内在的紧密联系，德才兼重，内美外修，循此以行，俊才名师，可期而见。</p>
</div>
</div>
<div class="bott">岭南师范学院 学校 所有 2024-2025</div>
</body>

</html>
（3）fengjing.html
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="../css/style.css">
<link rel="stylesheet" href="../css/fengjing.css">
<title>岭南师范</title>
</head>

<body>
<div class="title_menu" id="title">
<div class="menu_li1"><img width="1200" src="../images/logo.png" alt=""></div>
<a href="../index.html">
<div class="menu_li">岭南师院简介</div>
</a>
<a href="fengjing.html">
<div class="menu_li  active">校园风光</div>
</a>
<a href="yanjiu.html">
<div class="menu_li">学术研究</div>
</a>
<a href="xiaoxun.html">
<div class="menu_li">校训阐述</div>
</a>
<a href="liuyan.html">
<div class="menu_li">留言区</div>
</a>

</div>
<div class="title_img"></div>
<div class="info">
<div class="ms_title">
<h3>校园风光</h3>
<hr>
<div class="part_all">
<div class="part">
<img width="310" height="200" src="../images/fg-1.jpg" alt="">
<div class="part_text">
<p>雷阳书院棂星门</p>
</div>
</div>
<div class="part">
<img width="310" height="200" src="../images/fg-2.jpg" alt="">
<div class="part_text">
<p>学校东大门</p>

</div>
</div>
<div class="part">
<img width="310" height="200" src="../images/fg-3.jpg" alt="">
<div class="part_text">
<p>榕亭
</p>
</div>
</div>
<div class="part">
<img width="310" height="200" src="../images/fg-4.jpg" alt="">
<div class="part_text">
<p>陶壁《问渠》</p>
</div>
</div>
<div class="part">
<img width="310" height="200" src="../images/fg-5.jpg" alt="">
<div class="part_text">
<p>博学园</p>
</div>
</div>

<div class="part">
<img width="310" height="200" src="../images/fg-6.jpg" alt="">
<div class="part_text">
<p>日晷</p>
</div>
</div>

</div>
</div>
</div>
<div class="bott">岭南师范学院 学校 所有 2024-2025</div>
</body>

</html>
（4）yanjiu.html
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="../css/style.css">
<link rel="stylesheet" href="../css/yanjiu.css">
<title>岭南师范</title>
</head>

<body>
<div class="title_menu" id="title">
<div class="menu_li1"><img width="1200" src="../images/logo.png" alt=""></div>
<a href="../index.html">
<div class="menu_li">岭南师院简介</div>
</a>
<a href="fengjing.html">
<div class="menu_li">校园风光</div>
</a>
<a href="yanjiu.html">
<div class="menu_li  active">学术研究</div>
</a>
<a href="xiaoxun.html">
<div class="menu_li">校训阐述</div>
</a>
<a href="liuyan.html">
<div class="menu_li">留言区</div>
</a>

</div>
<div class="title_img"></div>
<div class="info">
<div class="yanj-main">
<h3>科研平台</h3>
<p>截至2016年11月，岭南师范学院建有省级协同创新培育平台1个，省
级工程技术开发中心3个，省级重点提升平台1个，广东高校人文社科重点研究基地1个，广东省实践科学发展观研究基地1个。</p>
<p>省级协同创新培育平台：粤台教师教育协同创新发展中心</p>
<p>省级工程技术开发中心：广东高校新材料工程技术开发中心、广东高校植物工程技术开发中心、广东高校数字化学习工程技术开发中心</p>
<p>
省级重点提升平台：广东高校新型光电功能材料研究开发中心</p>
<p>
广东高校人文社科重点研究基地：粤西教师教育研究中心</p>
<p>
广东省实践科学发展观研究基地：城乡协调发展研究基地</p>
<h3>科研成果</h3>
<p>2012年，岭南师范学院共有21个项目获省级以上科研项目立项资助，总经费377.5万元；其中国家自然科学基金项目立项6项，资助经费总额141万元。有14项成果获湛江市第八次哲学社会科学优秀成果奖。 [16] </p>
<p>
2014年，岭南师范学院共有7个项目获国家自然科学基金项目立项，其中面上项目1项，青年科学基金项目6项，共获资助经费215万元；另有1个项目获国家社科基金重点项目。全校共有15项科研成果获湛江市哲学社会科学优秀成果奖。 [17]
2015年，岭南师范学院共有20个项目获广东省教育厅重点科研项目立项。 [18] </p>
<p>
2016年，岭南师范学院共有24个项目获广东省科技厅立项资助，累计获资助金额360万元；其中，基础与应用基础研究专项16项、公益研究与能力建设专项5项、协同创新与平台建设专项3项。 [19]
年内共有16项成果获湛江市2014-2015年度哲学社会科学优秀成果奖，其中一等奖1项、二等奖6项、三等奖9项共16项。</p>
</div>
</div>
<div class="bott">岭南师范学院 学校 所有 2024-2025</div>
</body>

</html>
（5）liuyan.html
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="../css/style.css">
<link rel="stylesheet" href="../css/liuyan.css">
<title>岭南师范</title>
</head>

<body>
<div class="title_menu" id="title">
<div class="menu_li1"><img width="1200" src="../images/logo.png" alt=""></div>
<a href="../index.html">
<div class="menu_li">岭南师院简介</div>
</a>
<a href="fengjing.html">
<div class="menu_li ">校园风光</div>
</a>
<a href="yanjiu.html">
<div class="menu_li">学术研究</div>
</a>
<a href="xiaoxun.html">
<div class="menu_li">校训阐述</div>
</a>
<a href="liuyan.html">
<div class="menu_li active">留言区</div>
</a>

</div>
<div class="title_img"></div>
<div class="info">
<div class="input_part">
<h2>欢迎您的到来，请留言</h2>
<div class="part">
<span>用户名：</span> <input type="text" name="" id="" placeholder="请输入用户名">

</div>
<div class="part">
<span>网络昵称：</span> <input type="text" name="" id="" placeholder="请输入网络昵称">

</div>
<div class="part">
<span>手机号：</span> <input type="text" name="" id="" placeholder="请输入手机号">
</div>
<div class="part">
<span>邮箱：</span> <input type="text" name="" id="" placeholder="请输入邮箱">
</div>
<div class="part">
<button>留言</button>
</div>


</div>
</div>
<div class="bott">岭南师范学院 学校 所有 2024-2025</div>
</body>

</html>

2、CSS

（1）index.css
.infotitle {
    width: 100%;
    text-align: center;
    margin-top: 0px;
    padding-top: 10px;
}

.left {
    width: 520px;
    height: 620px;
    margin-top: 36px;
    margin-left: 40px;
    padding: 5px;
    box-shadow: 1px 2px 12px #333;
    float: left;
}

.about {
    border-bottom: 2px solid #A92929;
    font-size: 18px;
    font-weight: bold;
    color: #A92929;
    width: 520px;
    height: 40px;
    line-height: 40px;
}

.left-text p {
    line-height: 35px;
    color: #444;
    font-size: 13px;
    padding: 5px 10px;
}

.right {
    width: 550px;
    margin-top: 15px;
    float: right;
    padding: 20px;
}

.log {
    width: 500px;
    height: 280px;
    padding: 5px;
    box-shadow: 1px 2px 12px #333;
}

.daylog {
    width: 500px;
    margin: 10px 0;
    height: 30px;
    line-height: 30px;
    font-weight: bold;
    color: #A92929;
    font-size: 18px;
    border-bottom: 2px solid #A92929;
}

ul {
    list-style: none;
    width: 450px;
    padding: 5px 10px;
}

ul li {
    border-bottom: 1px solid #666;
    margin-top: 10px;
}

.ri-li {
    display: inline-block;
    margin-right: 0px;
    float: right;
}

.pic {
    margin-top: 30px;
    width: 500px;
    height: 300px;
    padding: 5px;
    box-shadow: 1px 2px 12px #333;
}

.pic ul li {
    width: 130px;
    height: 130px;
    float: left;
    font-size: 14px;
    line-height: 30px;
    color: #333;
    margin: 0px 10px;
    border: none;
}

.pic td {
    margin: 0px 10px;
}

td {
    margin-top: 10px;
}
（2）fengjing.css
.ms_title {
    width: 100%;
    height: 690px;
}

.part {
    width: 30%;
    height: 250px;
    border: 1px solid #eee;
    float: left;
    margin: 10px;
}

.part img {
    float: left;
    margin: 5px 25px;
}

.part_text {
    width: 100%;
    float: left;
}

.part_text p {
    width: 100% !important;
    text-align: center !important;
    font-size: 13px;
    color: #666;
}

h3 {
    margin-left: 20px;
    text-indent: 10px;
    font-size: 20px;
    color: #111;
    font-weight: bold;
    border-left: 2px solid blue;
}

.info {
    width: 1200px;
    height: 760px;
    margin: 0 auto;
    margin-top: 0px;
    border: 1px solid #FDF2CB;
}
（3）liuyan.css
h2 {
    width: 100%;
    text-align: center;
    height: 40px;
    margin: 30px auto;
    line-height: 40px;
}

.info {
    width: 1200px;
    height: 790px;
    margin: 0 auto;
    margin-top: 0px;
    border: 1px solid #FDF2CB;
}

.input_part {
    background-color: #F0F8FF;
    width: 100%;
    height: 800px;
}

.input_part h2 {
    padding: 30px 0;
    color: #198DBE;
}

.part {
    width: 80%;
    float: left;
    margin-left: 200px;
    height: 80px;
}

.part span {
    display: inline-block;
    width: 100px;
}

.part input {
    width: 600px;
    height: 30px;
}

button {
    width: 260px;
    height: 40px;
    color: #fff;
    display: block;
    margin: 0 auto;
    background-color: #FF7F27;
}
（4）style.css
body, html {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    background-color: #DCF3FC;
}

#title {
    width: 1200px;
    height: 205px;
    background-color: #4F94CD;
    margin: 0 auto;
}

.menu_li1 {
    width: 1200px;
    height: 145px;
    background-color: #4F94CD;
}

#title .menu_li {
    font-size: 14px;
    float: left;
    line-height: 60px;
    margin: 0px 10px;
    width: 100px;
    height: 60px;
    color: #fff;
    font-weight: bold;
    text-align: center;
}

.title_img {
    font-size: 9px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 1200px;
    height: 240px;
    margin: 0 auto;
    background-image: url(../images/banner.jpg);
}

.title_img img {
    margin-left: 60px;
    margin-top: 80px;
    float: left;
}

.menu_li1 {
    float: right;
}

h2 {
    font-size: 39px;
    float: left;
    line-height: 40px;
    color: #000;
}

.active, #title .menu_li:hover {
    background-color: #87CEEB;
}

.info {
    width: 1200px;
    height: 700px;
    background-color: #fff;
    margin: 0 auto;
    margin-top: 0px;
    border: 1px solid #FDF2CB;
}

.bott {
    width: 1200px;
    height: 76px;
    margin: 0px auto;
    text-align: center;
    line-height: 80px;
    background-color: #4B6D97;
    color: #fff;
}

input {
    border-color: #016941;
    width: 100px;
}

button {
    background-color: #016941;
    color: #fff;
}
（5）yanjiu.css
.yanj-main {
    width: 90%;
    height: auto;
    padding: 20px;
}

.yanj-main h3 {
    width: 80%;
    height: 40px;
    line-height: 40px;
    padding-left: 20px;
    border-left: 2px solid #8470FF;
}

.yanj-main p {
    width: 98%;
    margin: 0 auto;
    line-height: 30px;
    color: #444;
    padding: 0px 20px;
}
（6）xiaoxun.css
h3 {
    width: 100%;
    text-align: center;
    height: 50px;
    color: #FF7F27;
    line-height: 50px;
}

.info {
    width: 1200px;
    height: auto;
    margin: 0 auto;
    margin-top: 0px;
    border: 1px solid #FDF2CB;
}

.xiaoxun p {
    width: 98%;
    padding: 0 20px;
    line-height: 30px;
    text-indent: 25px;
}

.zn_part img {
    margin: 30px;
}

.zn_part p {
    width: 95%;
    margin: 0 auto;
    font-size: 13px;
    line-height: 25px;
    text-indent: 26px;
}

原文地址：https://blog.csdn.net/qq_45830728/article/details/145267419

免责声明：本站文章内容转载自网络资源，如侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

相关文章

自学内容网
Copyright © 2015-2025