用css+html完成学校官网

最新推荐文章于 2024-04-11 01:35:48 发布
最新推荐文章于 2024-04-11 01:35:48 发布
阅读量1k 收藏 12
点赞数 2
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_63357593/article/details/128278271
版权

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>成都文理学院</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
 
			.container {
				text-align: center;
			}
 
			.nav {
				height: 43px;
				background-image: url("im/1.jpg");
				background-repeat: repeat-x;
			}
 
			.nav>ul {
				width: 1200px;
				margin: auto;
				list-style: none;
			}
 
			.nav li {
				float: left;
				line-height: 43px;
				padding: 0 20px;
				background-image: url("im/nav-g.jpg");
				background-repeat: no-repeat;
				background-position: right;
			}
 
			.nav li:last-child {
				background-image: none;
			}
 
			.nav a {
				color: white;
				text-decoration: none;
			}
 
			.nav li:hover>a {
				color: red;
			}
 
			.menu {
				position: absolute;
				/* display: none; */
				background-color: #eee;
				/* padding: 0 10px; */
				margin-left: -10px;
				display: none;
			}
 
			.menu>div {
				border-bottom: 1px solid #ccc;
				padding: 0 10px;
				line-height: 30px;
			}
 
			.nav li:hover .menu {
				display: block;
			}
 
			.image-content {
				width: 1170px;
				height: 500px;
				background-image: url("im/2.jpg");
				margin: 0 auto;
			}
 
			.text-content {
				width: 1170px;
				margin: 0 auto;
			}
 
			.second-nav {
				width: 810px;
				height: 25px;
				background-image: url("img/nav-2-bg.png");
			}
 
			.second-nav>div {
				float: left;
				width: 132px;
				font-size: 13px;
				color: white;
				line-height: 25px;
			}
 
			.second-nav>div::after {
				content: "|";
				margin-left: 15px;
			}
 
			.second-nav>div:last-child::after {
				content: "";
			}
 
			.left {
				width: 810px;
				/* border: 1px solid rebeccapurple; */
			}
 
			.left-text,
			.right-text {
				float: left;
				width: 48%;
			}
 
			.right-text {
				float: right;
			}
 
			.text-news>div {
				padding: 4px 0;
				font-size: 12px;
				text-align: left;
				border-bottom: 1px dashed #ccc;
				font-weight: 300;
			}
 
			.text-news>div::before {
				content: "";
				display: inline-block;
				background-image: url("img/ico_001.gif");
				width: 6px;
				height: 7px;
			}
 
			.text-news a {
				color: black;
				text-decoration: none;
			}
 
			.text-news img {
				vertical-align: middle;
			}
 
			.text-news span {
				float: right;
			}
 
			.text-news>div:first-child::before {
				background: none;
				width: 0;
			}
 
			.text-news>div:first-child>a {
				line-height: 30px;
				color: darkred;
				font-size: 13px;
				float: right;
			}
 
			.text-news>div:first-child>a:hover {
				color: orange;
			}
 
			.left {
				height: 800px;
				/* border: 4px solid red; */
			}
 
			.right {
				width: 320px;
				/* height: 300px; */
				border: 4px solid bluse;
				float: right;
			}
 
			.video{
				background: url("im/28289pe9gb.jpg	");
				background-repeat: no-repeat;
				background-size: 100%;
				width: 320px;
				height: 240px;
				float: left;
				position: relative;
			}
			.video-con{
				position: absolute;
				bottom:0px;
				right: 0px;
			}
			.video-con > a{
				display: inline-block;
				background-color: #ccc;
				width: 35px;
				height: 35px;
				text-align: center;
				line-height: 35px;
			}
			.xizong {
				background-image: url("im/xizong.jpg");
				width: 100%;
				height: 65px;
				margin-top: 455px;
			}
			.ten_pic {
				margin-top: 15px;
				float: left;
			}
			.ten_pic > a > img {
				width: 157px;
			}
			.bottom_text {
				height: 30px;
				width: 810px;
				margin-top: 110px;
			}
			.leftbottom_text > span {
				color: brown;
				width: 13.7%;
				font-size: 12px;
				display: inline-block;
			}
			.right_pic {
				margin-top: 280px;
			}
			.right_pic > img:first-child {
				float: left;
			}
			.right_pic > img:last-child {
				width: 100%;
			}
			.bottom_bg {
				height: 130px;
				background-image: url("im/foot.jpg");
				margin-top: 800px;
				background-repeat: repeat-x;
			}
			.bottom_text {
				margin: auto;
				width: 1500px;
				height: 25px;
				font-size: 18px;
				line-height: 25px;
				font-size: 15px;
			}
			.bottom {
				height: 60px;
				background-color: #485c7c;
				line-height: 60px;
				color: gray;
				font-size: 15px;
			}
			.bottom > a {
				text-decoration: none;
				color: black;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<img class="logo" src="im/logo.png" alt="">
			<div class="nav">
				<ul>
					<li><a href="#">首页</a></li>
					<li>
						<a href="#">学院概况</a>
						<div class="menu">
							<div>简介</div>
							<div>风光</div>
							<div>服务</div>
							<div>表示</div>
						</div>
					</li>
					<li>
						<a href="#">教学科研</a>
						<div class="menu">
							<div>教务管理</div>
							<div>科研管理</div>
							<div>素质教育</div>
							<div>优质课程</div>
						</div>
					</li>
					<li><a href="#">综改评建</a></li>
					<li><a href="#">国际交流</a></li>
					<li>
						<a href="#">招生</a>
						<div class="menu">
							<div>本专科招生</div>
						</div>
					</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>
			<div class="image-content"></div>
				<hr size="5px" color="#787799" style="margin-top: 0px;" />

			<div class="text-content">
				<div class="second-nav" style="float: left;">
					<div>学生工作部</div>
					<div>团委 学联 社团</div>
					<div>教务管理系统</div>
					<div>校长书记信箱</div>
					<div>高校网络理政平台</div>
					<div>2022本专科招生</div>
				</div>
				<div class="search-bar" style="text-align: right;">
					<form action="#" method="get" enctype="text/plain">
						搜索:
						<input type="text" name="search">
						<button>提交</button>
					</form>
				</div>
				<div class="left" style="float: left">
					<div class="left-text">
						<div class="text-news">
							<div><img src="im/title-news.jpg" alt=""><a href="#">更多>></a></div>
							<div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="im/imgbz.gif"
									alt=""><span>2022/09/22</span></div>
							<div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="im/imgbz.gif"
									alt=""><span>2022/09/22</span></div>
							<div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="im/imgbz.gif"
									alt=""><span>2022/09/22</span></div>
							<div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="im/imgbz.gif"
									alt=""><span>2022/09/22</span></div>
							<div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="im/imgbz.gif"
									alt=""><span>2022/09/22</span></div>
							<div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="im/imgbz.gif"
									alt=""><span>2022/09/22</span></div>
							<div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="im/imgbz.gif"
									alt=""><span>2022/09/22</span></div>
						</div>
						<div class="text-news">
							<div><img src="im/title-news.jpg" alt=""><a href="#">更多>></a></div>
							<div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="im/imgbz.gif"
									alt=""><span>2022/09/22</span></div>
							<div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="im/imgbz.gif"
									alt=""><span>2022/09/22</span></div>
							<div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="im/imgbz.gif"
									alt=""><span>2022/09/22</span></div>
							<div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="im/imgbz.gif"
									alt=""><span>2022/09/22</span></div>
							<div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="im/imgbz.gif"
									alt=""><span>2022/09/22</span></div>
							<div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="im/imgbz.gif"
									alt=""><span>2022/09/22</span></div>
							<div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="im/imgbz.gif"
									alt=""><span>2022/09/22</span></div>
						</div>
					</div>
					<div class="right-text">
						<div class="text-news">
							<div><img src="im/title-news.jpg" alt=""><a href="#">更多>></a></div>
							<div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="im/imgbz.gif"
									alt=""><span>2022/09/22</span></div>
							<div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="im/imgbz.gif"
									alt=""><span>2022/09/22</span></div>
							<div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="im/imgbz.gif"
									alt=""><span>2022/09/22</span></div>
							<div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="im/imgbz.gif"
									alt=""><span>2022/09/22</span></div>
							<div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="im/imgbz.gif"
									alt=""><span>2022/09/22</span></div>
							<div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="im/imgbz.gif"
									alt=""><span>2022/09/22</span></div>
							<div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="im/imgbz.gif"
									alt=""><span>2022/09/22</span></div>
						</div>
						<div class="text-news">
							<div><img src="im/title-news.jpg" alt=""><a href="#">更多>></a></div>
							<div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="im/imgbz.gif"
									alt=""><span>2022/09/22</span></div>
							<div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="im/imgbz.gif"
									alt=""><span>2022/09/22</span></div>
							<div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="im/imgbz.gif"
									alt=""><span>2022/09/22</span></div>
							<div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="im/imgbz.gif"
									alt=""><span>2022/09/22</span></div>
							<div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="im/imgbz.gif"
									alt=""><span>2022/09/22</span></div>
							<div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="im/imgbz.gif"
									alt=""><span>2022/09/22</span></div>
							<div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="im/imgbz.gif"
									alt=""><span>2022/09/22</span></div>
						</div>
					</div>
					<div class="xizong"></div>
					<div class="ten_pic">
						<a href="#"><img src="im/1 (1).jpg"></a>
						<a href="#"><img src="im/2 (1).jpg"></a>
						<a href="#"><img src="im/3.jpg"></a>
						<a href="#"><img src="im/4.jpg"></a>
						<a href="#"><img src="im/5.jpg"></a>
						<a href="#"><img src="im/6.jpg"></a>
						<a href="#"><img src="im/7.jpg"></a>
						<a href="#"><img src="im/8.jpg"></a>
						<a href="#"><img src="im/9.jpg"></a>
						<a href="#"><img src="im/10.jpg"></a>
					</div>
					<div class="leftbottom_text">
						<span>教育部网站</span>
						<span>四川省教育厅</span>
						<span>中国教研网</span>
						<span>中国教育新闻网</span>
						<span>中国大学生在线</span>
						<span>图书管理系统</span>
						<span>校内网</span>
					</div>
				</div>
				<div class="right">
					<div style="float: left;"><img src="im/title-news.jpg" alt=""></div>
					<div class="video">
						<div class="video-con">
							<a href="">1</a>
							<a href="">2</a>
							<a href="">3</a>
							<a href="">4</a>
							<a href="">5</a>
						</div>
					</div>
					<div class="right_pic">
						<img src="im/title-news.jpg" alt="">
						<a href="#"><img src="im/zt_zf.jpg" alt=""></a>
						<a href="#"><img src="im/zt_8.jpg" alt=""></a>
						<a href="#"><img src="im/zt_7.jpg" alt=""></a>
						<a href="#"><img src="im/zt_4.jpg" alt=""></a>
						<a href="#"><img src="im/zt_22.png" alt=""></a>
						<img src="im/g_f_e_w_m_.png" alt="">
					</div>
				</div>
			</div>
			<div class="bottom_bg"></div>
			<div class="bottom_text">
				&nbsp;&nbsp;&nbsp;联系电话：61565000（校办）
				&nbsp;&nbsp;&nbsp;61566000（校办）
				&nbsp;&nbsp;&nbsp;028-61560112（招办）
				&nbsp;&nbsp;&nbsp;&nbsp;61560113（招办）
				&nbsp;&nbsp;&nbsp;61565148
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;传真：028-61565128
			</div>
			<div class="bottom">
				学校地址：成都市金堂县学府大道278号（邮编610401） 成都文理学院版权所有&nbsp;
				<a href="#">蜀ICP备11012699号</a>&nbsp;
				<img src="im/13flxkue78.png" alt="">
				<a href="#">川公网安备 51012102000211号</a>
			</div>
		</div>
	</body>
</html>
效果

请添加图片描述

独来独往631
关注
  • 2
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
制作一个简单HTML校园网页（HTML+CSS）学校网站制作 校园网站设计.md
08-10
HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞 蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 摄影、 文化、 家 乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计作业需求, 喜欢的可以下载! 原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、 Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js，有的视频+音乐+flash的等 元素的插入。 【查看更多源码地址】：https://blog.csdn.net/VX_WJ88950106?type=blog
HTML+CSS模仿大学网站主页
07-23
用HTML+CSS模仿的大学主页 无JS 无FLASH 没有添加超链接
【web网页制作】html+css网页制作学校网站主题校园网页（5页面）【附源码】
最新发布
赏樱看雪撸代码
04-11 1605
学校网站主题网页制作，学校仿站，校园主题web开发，期末网页大作业，网页作业成品，web前端源码实例，如何制作网页，网页设计思路，如何从零开始制作web页面。
HTML+CSS仿大学官网
qq_44829421的博客
03-24 2333
html+css仿大学官网模块
用html和css制作学校官网
yfy0308的博客
04-02 178
【代码】用html和css制作学校官网。
仅使用HTML和CSS一个校园官网该如何制作
weixin_35749545的博客
02-13 246
如果只使用HTML和CSS制作校园官网，您可以这样做： 设计网站结构：先确定您网站的页面，比如主页、关于我们、新闻动态、联系我们等等，再决定每个页面的布局。 编写HTML代码：为每个页面写好HTML代码，使用标题、段落、图像、表格、链接等HTML元素，构建出网站的内容结构。 编写CSS代码：接着，使用CSS代码为网站添加样式，如字体、颜色、布局、动画等。 测试：最后，请确保您的网站在不同的...
HTML做一个学校网站（纯html代码）
网页设计与制作
03-26 891
🎉精彩专栏推荐 💭文末获取联系 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 💂 作者主页: 【主页——🚀获取更多优质源码】 🎓 web前端期末大作业： 【📚毕设项目精品实战案例 (1000套) 】 🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】 🌎超炫酷的Echarts大屏可视化源码：【🔰 Echarts大屏展示大数据平台可视化(150套) 】 🔖 HTML+CSS+JS实例代码： 【🗂️HTML+CSS+JS实例代码 (炫酷特效网页代码) 继续更新
制作一个简单HTML校园网页（HTML+CSS）学校网站制作 校园网站设计与实现
网页设计与制作
01-11 780
🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板 、等网站的设计与制作。⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大
【网页期末作业】用HTML+CSS做一个漂亮简单的学校官网
网页设计与制作
01-09 1434
🏫 校园网页设计 、学校班级网页制作、学校官网、小说书籍、等网站的设计与制作。🏷️HTML静态网页设计作业使用dreamweaver制作，采用DIV+CSS布局，共有多个页面，首页使用CSS排版比较丰富，色彩鲜明有活力。顶部导航及底部区域背景色为100%宽度，主体内容区域宽度🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语
【HTML+CSS】小兔鲜儿网站首页（静态网页）
m0_63179877的博客
06-30 2325
小兔鲜儿网站首页是利用HTML+CSS进行开发，网站首页包括四部分内容，分别是快捷导航、banner图区域、新鲜好物、生鲜、尾部版权。
html+css网页练习二
qq_52108058的博客
02-04 1630
这是某茶叶公司的官网，以下效果图是商品展示页。 该项目包含prolist.html、css文件夹、img文件夹，其中，css文件夹包含include.css文件；img文件夹包含所用到的图片。分析： 4、include.css 二、电商网站页面 1、要求 这是某电商网页其中的页面，以下效果图是购物车模块。 该项目包含index.html、css文件夹、img文件夹，其中，css文件夹包含index.css文件；img文件夹包含所用到的图片。分析： 4、index.css 三、顶部信息栏页面 1、要求 项
大学生静态HTML网页源码 我的校园网页设计成品 学校班级网页制作模板 web课程设计 dreamweaver网页作业
HTML网页设计
08-05 2037
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；...
大学生网页制作 大学校园简介5页作业 html网页设计 dw期末成品代码下载
07-12
页面精美小清新，包含div+css、图片、轮播图、JS滚动、Table布局、登录框，比较简单容易上手。 【大学生DW网页设计成品 大学校园简介静态HTML网页作业制作 dreamweaver网页作业代码下载】
html实现学校网站
06-22
用html实现的简单的学校代码。主页里面的对应的附属页。相应有附属页用一个文件夹保存
html学校网站
10-30
简单的第一次网站，非常适合第一次做网站的同学下载
学校部门网站html源码
06-15
学校整站源码 ，学校部门网站html源码，学校静态网站源码。
网页期末作业+html+css+js（大鱼海棠）
06-07
10个页面，学校让做的网站作业，虽然是比较基础的网页静态页面，不过我也希望你能做的规范一些，我们专业制作学生网页作业，div css js 等通过dreamwear的工具实现规范化，比如文件夹的规范，代码写作的规范，虽然...
基于HTML电商购物项目的设计与实现——html+css+javascript+jquery+bootstarp响应式图书商城
08-10
HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞 蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 ...
学校网页设计成品 基于HTML+CSS+JavaScript仿山东财经大学官网 学校班级网页制作模板 校园网页设计成品
08-10
HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞 蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 ...
thinkphp 学校官网
05-14
ThinkPHP是一款基于PHP语言开发的开源框架，它被广泛应用于Web应用程序开发中。在学校官网开发中，使用ThinkPHP框架可以快速搭建一个高效、安全、稳定的网站。 ThinkPHP提供了强大的MVC模式，使得程序模块化、结构清晰，易于维护和扩展。此外，它还支持模板引擎、数据库操作、文件操作、缓存机制等功能，使得开发者可以快速实现各种项目需求。 在学校官网中，用户体验是至关重要的。ThinkPHP框架可以按需加载各种资源，减少页面加载时间，提升用户体验。此外，框架还提供了丰富的表单验证和安全措施，保证网站运行的安全性和稳定性。 总之，ThinkPHP框架是学校官网开发的理想选择，它具有丰富的功能和便利的使用性，能够快速实现各种需求，提升用户体验，使得学校官网能够更好地服务于用户。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值