学校官网网页

最新推荐文章于 2023-03-26 12:14:28 发布
最新推荐文章于 2023-03-26 12:14:28 发布
阅读量103 收藏 1
点赞数 1
文章标签： 前端 html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_65629327/article/details/127749146
版权

 1.html代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>南宁理工学院官网页面</title>
		<link rel="stylesheet" href="css/reset5.css">
		<link rel="stylesheet" href="css/官网.css">
	</head>
	<body>
		<header class="top">
			<div class="top-logo">
				<div>
					<img src="img/logo.png" class="logo" alt="">
					<div class="logo-right">
						<input class="search" id="search">
						<button id="go">搜索</button>
					</div>
				</div>
			</div>
			<nav class="menu">
				<ul>
					<li><a href="#">首页</a></li>
					<li>
						<a href="#">学校概况</a>
						<ul>
							<li><a href="#">学校简介</a></li>
							<li><a href="#">学校领导</a></li>
							<li><a href="#">学校标识</a></li>
							<li><a href="#">校园风光</a></li>
						</ul>
					</li>
					<li>
						<a href="#">机构设置</a>
						<ul>
							<li><a href="#">教学单位</a></li>
							<li><a href="#">职能部门</a></li>
						</ul>
					</li>
					<li>
						<a href="#">教育教学</a>
					</li>
					<li>
						<a href="#">招生就业</a>
						<ul>
							<li><a href="#">招生</a></li>
							<li><a href="#">就业</a></li>
						</ul>
					</li>
					<li>
						<a href="#">人才建设</a>
						<ul>
							<li><a href="#">人才引进</a></li>
							<li><a href="#">人才培训</a></li>
							<li><a href="#">干部学院</a></li>
						</ul>
					</li>
					<li>
						<a href="#">国际交流</a>
						<ul>
							<li><a href="#">本硕直通</a></li>
							<li><a href="#">友好往来</a></li>							
						</ul>
					</li>
					<li>
						<a href="#">数字南理</a>
						<ul>
							<li><a href="#">智慧校园（老师端）</a></li>
							<li><a href="#">智慧校园（学生端）</a></li>
							<li><a href="#">在线教学平台</a></li>
							<li><a href="#">图书检索</a></li>
						</ul>
					</li>
					<li><a href="#">原门户</a></li>
				</ul>
			</nav>
			<div class="banner">
				<img src="img/党史学习教育官网.jpeg" alt="">
			</div>
		</header>
		<div class="content">
			<div class="content-box">
				<div class="content-lefl">
					<div class="index_title">
						<div class="topnav">
							<ul id="index-new-lefl">
								<li class="active" data-num="1">
									<a target="_blank">学校新闻</a>
								</li>
								<li data-num="2">
									<a target="_blank">校园动态</a>
								</li>
								<li data-num="3">
									<a target="_blank">媒体南理</a>
								</li>
							</ul>
						</div>
						<div class="more tabmorel active">
							<a target="_blank">READ MORE</a>
							<i>
								<img src="img/jtl.svg" alt="">
							</i>
						</div>
					</div>
				<div class="list index_new_left_list active">
					<div class="list_l"></div>
						<div class="img">
							<img src="img/荣誉.png" alt="">
						</div>
						<div class="nr">
							<a href="#">
							<h2>精准施策，助力就业--我校与深圳市龙岗区坂田街道</h2>
							<div class="info">
								<span>来源：招生就业处</span>
								<span>发布日期：2022-11-04</span>
							</div>
							<p>11月3日下午，深圳市龙岗区坂田街道人力资源服务中心主任廖建波携辖区25家重点企业代表到访我校开展</p>
						</a>
						</div>
					</div>	
				</div>
				<div class="list_r">
					<ul>
						<li>
							<a href="#">
								<div class="nr">
									<h2>喜讯 |  我校团队在2022年“七彩假期”志愿者服务活动中荣获证书</h2>
									<div class="info">
										<span>来源：南理团情</span>
										<span>发布日期：2022-10-31</span>
									</div>
									<p></p>
								</div>
							</a>
						</li>
						<li>
							<a href="#">
								<div class="nr">
									<h2>我校召开消防安全专题会议</h2>
									<div class="info">
										<span>来源：后勤保卫处</span>
										<span>发布日期：2022-10-28</span>
									</div>
									<p></p>
								</div>
							</a>
						</li>
						<li>
							<a href="">
								<div class="nr">
									<h2>校开展教学信息化大赛决赛培训指导会议</h2>
									<div class="info">
										<span>来源：南理团情</span>
										<span>发布时间：2022-11-04</span>
									</div>
									<p></p>
								</div>
							</a>
						</li>
						<li>
							<a href="">
								<div class="nr">
									<h2>校区在基建办公室召开教师公寓楼建设工作座谈会</h6>
									<div class="info">
										<span>来源:党政事务所</span>
										<span>发布时间：2022-11-07</span>
									</div>
								</div>
							</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<footer class="footer">
			<div class="footer1">
				<ul>
					<li>
						<img src="img/ico1.png" alt="">
						<p>VR实景</p>
					</li>
					<li>
						<img src="img/ico2.png" alt="">
						<p> 本硕直通</p>
					</li>
					<li>
						<img src="img/ico3.png" alt="">
						<p>党团建设</p>
					</li>
					<li>
						<img src="img/ico4.png" alt="">
						<p>图书馆</p>
					</li>
				</ul>
				
			</div>
			
		</footer>
		
	</body>
</html>

2.css代码。 

/* 顶部开始 */
header.top {
	width: 100%;
	height: 437px;
	/*border: 1px solid red;*/
}
.top-logo {
	width: 100%;
	height: 140px;
	/* border: 1px solid red; */
	background-image: url(../img/top-logo.png);
	background-size: cover;
}
.top-logo>div {
	width: 1300px;
	height: 140px;
	margin: auto;
	line-height: 140px;
	/* border: 1px solid red; */
}
.logo {
	margin-top: 18px;
}
.logo-right {
	width: 600px;
	height: 140px;
	/*border: 1px solid red;*/
	float: right;
	text-align: right;
}
#search {
	width: 300px;
	height: 40px;
	border: none;
	border-radius: 40px;
}
#search:focus {
	border-left: 20px solid white;
	outline: none;
}
#go {
	width: 120px;
	height: 40px;
	text-align: center;
	line-height: 40px;
	border-radius: 40px;
	border: none;
	background-color: white;
	color: darkblue;
	cursor: pointer;
	background-image: linear-gradient(90deg, #55557f, #FF0000, transparent);
}

nav.menu {
	width: 100%;
	height: 60px;
	background-color: #0C2374;
}
.menu>ul {
	width: 1300px;
	height: 60px;
	margin: auto;
	/* border: 1px solid red; */
}
.menu>ul>li {
	position: relative;
}
.menu>ul li {
	width: 140px;
	height: 60px;
	/* border: 1px solid red; */
	float: left;
	cursor: pointer;
	text-align: center;
	line-height: 60px;
	background-color: #0C2374;
}
.menu>ul li:hover {
	background-color: lightsteelblue;
}
.menu>ul li>a {
	color: white;
	font-size: 18px;
	/* font-weight: bold; */
	text-decoration: none;
}
.menu>ul>li>ul {
	display: none;
	position: absolute;
}
.menu>ul>li:hover >ul {
	display: block;
}
div.banner {
	width: 100%;
	height: 900px;
	/* border: 1px solid red; */
}
.banner > img {
	width: 100%;
}


/* 顶部结束 */
/* 中间内容部分开始 */
.content {
	width: 100%;
	height: 1400px;	
	background-image: url(../img/3-1.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	/*background-color: #FFFFFF;*/
	/*border: 1px solid red;*/
	padding-top: 383px;
	margin:0 auto;
}
.div{
	display: block;
}
.content-box{
	background-color: aliceblue;
	width: 1402px;
	padding: 90px 0;
	opacity: 0.8;
	min-width: 1402px;
	margin:0 auto;
	
}
.content-lefl{
	width: 925px;
	float: left;
}
.index_title{
	height: 33px;
}
.index_title .topnav{
	position: relative;
	float: left;
}
.index_title .topnav::before{
	width: 8px;
	height: 100%;
	background-color: #1E4C8A;
	content: '';
	position: absolute;
	display: block;
	
}
.index_title .topnav>ul{
	float: left;
}
ul,li{
	margin:0;
	padding:0;
	list-style: none;
}
.topnav>ul {
	display: block;
	margin-block-start: 1em;
	margin-block-end: 1em;
	margin-inline-start: 0px;
	/*margin-inline-start: 40px;*/
	
}
li {
	display: list-item;
	text-align: -webkit-match-parent;
}
.index_title .topnav>ul li {
	margin-left: 24px;
	float: left;
}
.index_title .topnav>ul li.active a {
	color: #000000;
}
.index_title .topnav>ul li a{
	color: #999999;
	font-size: 24px;
	font-family: 'pf-Medium', sans-serif;
}
a {
	text-decoration: none;
}
a:-webkit-any-link{
	cursor: pointer;
}
.index_title .more.active {
	float: right;
	display: block;
}
.index_title .more {
	align-items: center;
	display: none;
}
.index_title .more a {
	font-size: 14px;
	color:#999999:
}
a {
	text-decoration: none;
}
.index_title .more img{
	width: 13px;
	height: 13: 11ppx;
	margin-leftx;
}
.index_title{
	height: 33px;
}
.index_new .left .list .img img {
    width: 100%;
    height: 338px;
    object-fit: cover;
}
.index_new .left .list .nr{
	background-color: #ffffff;
	padding: 23px;
}
.nr h2 {
	margin-left: 16px;
	color: #000000;
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.nr{
	height: 157px;
	border: 1px solid #F6F6F6;
	border-top: none;
	box-sizing: border-box;
}
.info{
	padding-top: 16px;
}
.info span{
	margin-left:11px;
	
}
.index_new .left .list .info span{
	font-size: 16px;
	color: #000;
}
 p {
	margin-block-start: 1em;
	margin-block-end: 1em;
    font-size: 18px;
    color: #000;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-top: 16px;
}
.list_r li .nr1{
	padding: 16px 24px;
	background-color:lavenderblush;
}
.nr1 h2{
	font-size: 16px;
	color: #000000;
	white-space: hidden;
	text-overflow: ellipsis;
}
.nr1 info {
	padding-top: 2px;
	margin-right: 11px;
	font-size: 14px;
}





body{
	margin: 0;
	padding: 0;
	font-family: 微软雅黑,sans-serif;
	font-size: 20px;
	min-width: 1402px;
	width: 100%;
}
/* 中间内容部分结束 */
/* 底部开始 */
footer.footer {
	width: 100%;
	height: 660px;
	background-repeat: no-repeat;
	background-size: cover;
	opacity: 0.8;
	background-image: url(../img/index_bg.png);
	/*border: 1px solid red;*/ 
}
.footer1{
	min-width: 1481px;
	margin: 0 auto;
	/*border: 1px solid red;*/
	width: 1402px;
}
.footer1>ul{
	padding: 88px 0;
	
}
.footer1>ul li{
	height: 160px;
	width: 295px;
	background-color: rgba(255, 255,225, 0.38);
	border-radius: 4px;
	border: 1px solid rgba(225,225,225,0.38);
	float: left;
	margin-right: 63px;
	text-align: center;
}

/* 底部结束 */

 O(∩_∩)O哈哈~终于做出来啦，遇到的问题就是中间的文字在放大缩小老是往上移，改了很多次都没弄好，可能是我哪里的代码写错了，等下节课问一下老师吧。虽然 效果不怎么好看，但是第一次做带不容易了〒▽〒，下次我会再接再厉的，加油把它做得更好！！！ 

橘迹女孩
关注
【Web前端大作业】基于HTML+CSS+JavaScript制作西北大学新闻网站（7页）
QQ_____365392777的博客
08-08 684
🏫 校园网页设计 、学校班级网页制作、学校官网、小说书籍、等网站的设计与制作。🏷️HTML静态网页设计作业使用dreamweaver制作，采用DIV+CSS布局，共有多个页面，首页使用CSS排版比较丰富，色彩鲜明有活力。顶部导航及底部区域背景色为100%宽度，主体内容区域宽度🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语......
学校官网首页 2页网页设计(HTML+CSS+JavaScript)
11-18 4731
HTML+CSS个人主页设计 HTML网页设计制作大作业 采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为（1）html文件：其中index.html是首页、其他html为二级页面； （2）css文件：css全部页面样式,文字滚动, 图片放大等； （3）js文件：js实现动态轮播特效, 表单提交, 点击事件等等（网页中运用到js代码）(1)首页：进入网页中看到的第一个页面(LOGO、公司名称、导航、banner
学校网页
Gpa的专栏
04-27 1859
 2002-04-27学校网页又是网页，前一阵子才搞完个比赛网页，现在又来学校网页。不过这次的任务都算几有面子（FACE）哈~~~不然我都不会接受这个请求啦！其实事实是不能接受都不行。任务不用说一定是落我在身上的了！（我不是说自己强）只是………（你知我知就好了）第一个任务就是把首页搞定它，好！就用回蓝色做整个网页的基色吧！我基本上全部网页都是用蓝色做的，可能我对蓝色特别有好感吧！嗯！应
Bootstrap 学校首页
weixin_46128831的博客
07-26 664
学校网页
学校系统web网页设计
05-19
学校网页的HTML文件，实现了主页，导航栏，分页跳转的功能
html网页设计作业-基于html+css，制作的学校官网网页
12-29
【标签】“学校官网网页”指出了这个网页设计的主题，即模拟一个学校的官方网站。这样的网站通常包含关于学校历史、课程信息、教职员工介绍、新闻公告、学生生活以及联系方式等模块。 【压缩包子文件的文件名称列表...
制作一个简单HTML校园网页（HTML+CSS）学校网站制作 校园网站设计.md
08-10
例如，在校园网页上加入一段视频介绍学校的风景，或者使用背景音乐营造轻松愉快的氛围，都能给访客留下深刻的印象。 #### 实现方法 - **视频**：可以使用HTML5中的`<video>`标签来嵌入视频，支持多种格式（如MP4、...
校园网页设计成品 学校班级网页制作模板 dreamweaver网页作业 简单网页课程成品 大学生静态HTML网页源码
08-10
本项目涉及的主题多样，包括但不限于个人网页、美食、公司、学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、动漫、服装、体育、化妆品、物流、环保、书籍、婚纱、游戏、节日、戒烟、电影、摄影、文化、家乡...
学校网页设计成品 基于HTML+CSS+JavaScript仿山东财经大学官网 学校班级网页制作模板 校园网页设计成品
08-10
- 示例：`<header><h1>山东财经大学官网</h1></header>`。 4. **多媒体元素**： - `<video>`标签用于在网页中嵌入视频。 - 示例：`<video controls="controls" width="320" height="240"><source src="movie.mp4...
一个学校主页HTML代码
11-21
一个简洁的学院主页代码，html+css编写，有需要的朋友可以省下自己设计了。
学校主页静态页面
06-22
静态页面在网上找了很久哦了。终于找到了。拿来分享一下
学校服务器网页400,windows系统网页400 Bad Request报错解决方法介绍
weixin_39542043的博客
08-06 1914
我们在使用windows电脑的时候经常会遇到一些问题，就比如我们有的时候在打开浏览器的时候网页有提示400 Bad Request报错，那么遇到这种我们该怎么去处理呢？下面就给大家介绍下网页报错：400 Bad Request的解决方法，一起来看看吧。>>>windows10系统使用教程大全 windows系统网页400 Bad Request报错解决方法介绍 方法一...
HTML做一个学校网站（纯html代码）
qq_38514094的博客
03-20 708
🏫 校园网页设计 、学校班级网页制作、学校官网、小说书籍、等网站的设计与制作。🏷️HTML静态网页设计作业使用dreamweaver制作，采用DIV+CSS布局，共有多个页面，首页使用CSS排版比较丰富，色彩鲜明有活力。顶部导航及底部区域背景色为100%宽度，主体内容区域宽度🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语
【网页期末作业】用HTML+CSS做一个漂亮简单的学校官网
qq_38512570的博客
03-26 256
🏫 校园网页设计 、学校班级网页制作、学校官网、小说书籍、等网站的设计与制作。🏷️HTML静态网页设计作业使用dreamweaver制作，采用DIV+CSS布局，共有多个页面，首页使用CSS排版比较丰富，色彩鲜明有活力。顶部导航及底部区域背景色为100%宽度，主体内容区域宽度🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语
我的大学期末网页作业 仿学校网站制作实现 HTML+CSS西北大学新闻网带psd带js
dreamweaver网页设计
10-03 534
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件
大一新生HTML期末作业,实现登录页面
HTML网页设计 专注大学生网页设计
09-15 277
🏷️HTML静态网页设计作业使用dreamweaver制作，采用DIV+CSS布局，共有多个页面，首页使用CSS排版比较丰富，色彩鲜明有活力。带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等!「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！🏫 校园网页设计 、学校班级网页制作、学校官网、小说书籍、等网站的设计与制作。1.如果我的博客对你有帮助、如果你喜欢我的博客内容，
校园网页设计成品 学校班级网页制作模板 大学生静态HTML网页源码 dreamweaver网页作业 简单网页课程成品
STU网页设计
11-12 277
🏫 校园班级网页设计 、👨‍🎓我的班级网页、我的学校、👩‍🎓校园社团、校园运动会、等网站的设计与制作。🏷️HTML我的班级网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用CSS排版比较丰富，色彩鲜明有活力，导航与正文字体分别设置不同字号大小。导航区域设置了背景图。子页面有纯文字页面和图文并茂页面。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站
大学生个人网页设计 HTML个人网页制作 web个人网站模板 简单静态HTML个人网页作品
热门推荐
HTML网页设计
07-31 6万+
🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板 、等网站的设计与制作。⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大...
学校官网网页制作代码
最新发布
06-19
学校官网的网页制作通常涉及到前端和后端技术。前端代码主要是HTML、CSS和JavaScript，它们用于构建网站的结构、样式和交互功能。以下是一些基本步骤： 1. **HTML**（超文本标记语言）: 是网页的基础，用于定义页面的内容，如标题、段落、链接等。 ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>学校官网</title> </head> <body> <header> <h1>学校名称</h1> </header> <!-- 其他内容 --> </body> </html> ``` 2. **CSS** (层叠样式表): 用来控制网页的布局和样式。 ```css header { background-color: #f00; /* 颜色 */ text-align: center; padding: 20px; } ``` 3. **JavaScript** 或者 **jQuery**: 可以添加交互元素，比如动态加载内容、响应用户输入等。 ```javascript document.getElementById('searchBtn').addEventListener('click', function() { // 处理搜索事件 }); ``` 4. **后端技术（如PHP, Python的Django/Flask, Node.js的Express, Ruby的Ruby on Rails等)**: 如果需要服务器端的功能，如数据库操作、身份验证、API接口等。这部分代码通常位于服务器上。 ```php <?php // 使用PHP连接数据库 $db = new mysqli('localhost', 'username', 'password', 'dbname'); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值