Web前端学习——第四次作业（学校官网）

最新推荐文章于 2024-05-31 10:04:55 发布
最新推荐文章于 2024-05-31 10:04:55 发布
阅读量465 收藏 1
点赞数 2
文章标签： 前端 学习 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Han_nashi/article/details/129870499
版权

Web前端学习——第四次作业（学校官网）

作业要求：仿造学校官网


代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}
			h2{
				font-size: 26px;
			}
			h3{
				font-size: 24px;
			}
			body{
				font-family: 'siyuan_Normal', sans-serif;
				font-size: 18px;
			}
			ul, li{
			    margin: 0;
			    padding: 0;
			    list-style: none;
			}
			a {
			    text-decoration: none;
			    color: white;
			}
			.nav {
				width: 100%;
				height: 100px;
				background: #3D3BB8;
			}
			.nav-container{
				width: 80%;
				height: 100px;
				margin: auto;
			}
			#logo{
				float: left;
				width: 30%;
			}
			.nav-content{
				float: left;
				width:69.5%;
				height: 100px;
			}
			.nav-top{
				border-color: 1px solid red;
				height:50px;
				line-height: 50px;
				vertical-align: middle;
			}
			.nav-top>form>input{
				background-color: white;
				border-radius: 23px;
				height: 38px;
				padding: 16px 70px 16px 40px;
				box-sizing: border-box;
				border: none;
				width: 300px;
				outline: none;
				margin-top: 10px;
				margin-left: 70%;
			}
			.nav-bottom{
				height: 50px;
			}
			.nav-bottom>div{
				display: inline-block;
				width: auto;
				height: auto;
				float: left;
				color: white;
				margin-left: 3%;
				line-height: 40px;
				text-align: center;
				position: relative;
			}
			.nav-bottom>div>a:first-child:hover{
				opacity:0.7;
			}
			.menu>li>a:hover{
				color: #007aff;
			}
			.drop_down>li>a:hover{
				color: #007aff;
			}
			
			.nav-bottom>div:hover>.menu{
				display: block;
			}
			#drop>li:hover>.drop_down{
				display: block;
				position: relative;
			}
			.menu>li>a{
				color: black;
			}
			.menu{
				background-color: white;
				position: absolute;
				display: none;
				top: 40px;
				width: 180px;
				left: -54px
			}
			.drop_down>li>a{
   				color: black;
			}
			#drop>li{
				height: 40px;
				width: 180px;
			}
			.drop_down{
				background-color: white;
				position: absolute;
				display: none;
				width: 180px;
				left: 180px;
				top: -40px;
			}
			.banner_content{
				width: 100%;
			}
			.img{
				width: 100%;
				margin-top: -11px;
				border-color: 1px solid red;
				object-fit: cover;
			}
			.news{
				width: 100%;
				height: 790px;
			}
			.inner_news{
				width: 77%;
				margin: 0 auto;
				padding: 88px 0;
			}
			.news_pub>li{
				font-size: 26px;
				font-family: pf_Medium;
				color: #999999;
				margin-left: 48px;
				cursor: pointer;
				display: inline-block;
				float: right;
			}
			.news_pub>li:hover{
				color: black;
			}
			.news_content{
				margin-top: 52px;
			}
			.news_left{
				width: 593px;
				float: left;
			}
			
			.news_left>a>img{
				width: 100%;
				height: 400px;
				object-fit: cover;
			}
			.pub_main{
				align-items: center;
				text-align: center;
				margin-top: 50px;
			}
			.news_right{
				width: 593px;
				margin-left: 40px;
				float: left;
			}
			.right_list{
				height: 100%;
			}
			.right_list>li{
				display: block;
				margin-bottom: 26px;
				height: 88px;
			}
			.time{
				background-color: #3D3BB8;
				width: 64px;
				height: 88px;
				text-align: center;
				float: left;
			}
			.time>i{
				font-size: 36px;
				color: #FFFFFF;
				font-style: normal;
			}
			.time>em{
				font-size: 14px;
				color: #FFFFFF;
				font-style: normal;
			}
			.nr{
				margin-left: 24px;
				width: 489px;
				float: left;
			}
			.nr>h3{
				font-size: 20px;
				color: black;
				white-space: nowrap;
				word-wrap: break-word;
			}
			.movie{
				width: 100%;
				height: 942px;
				margin: 0 auto;
				background-image: url(https://www.scauzj.edu.cn/wp-content/themes/hnny/img/home_index2_bg.png);
				background-size: cover;
				background-repeat: no-repeat;
			}
			.inner_movie{
				width: 77%;
				padding: 50px 0;
				margin: 0 auto;
			}
			.movie_title{
				align-content: center;
				width: 100%;
			}
			.movie_title>span{
				display: block;
				font-size: 32px;
				color: #e9e9f9;
				font-family: pf_Medium;
				text-align: center;
			}
			.movie_title>div>h2{
				display: block;
				font-size: 30px;
				color: black;
				padding-bottom: 20px;
				font-family: pf_Medium;
				text-align: center;
			}
			.movie_content{
				margin-top: 68px;
				height: 688px;
			}
			.movie_content>video{
				object-fit: fill;
				width: 100%;
				height: 688px;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="nav">
				<div class="nav-container">
					<img id="logo" src="https://www.scauzj.edu.cn/wp-content/uploads/sites/20/2022/11/%E4%B8%BB%E9%A1%B5logo.png" alt="">
					<div class="nav-content">
						<div class="nav-top">
							<form action="#">
								<input type="text" placeholder="请输入搜索内容" style="border-radius:17px;">
							</form>
						</div>
						<div class="nav-bottom">
							<div>
								<a href="#">首页</a>
							</div>
							<div>
								<a href="#">学校概况</a>
								<ul class="menu">
									<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>
									<li><a href="#">华珠荣誉</a></li>
									<li><a href="#">专业介绍</a></li>
								</ul>
							</div>
							<div>
								<a href="#">信息公开专栏</a>
							</div>
							<div>
								<a href="#">机构设置</a>
								<ul class="menu" id="drop">
									<li>
										<a href="#">行政部门</a>
										<ul class="drop_down">
											<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>
											<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>
									</li>
									<li>
										<a href="#">二级学院</a>
										<ul class="drop_down">
											<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>
											<li><a href="#">马克思主义学院</a></li>
											<li><a href="#">继续教育学院</a></li>
											<li><a href="#">国际教育学院</a></li>
											<li><a href="#">乡村振兴学院</a></li>
										</ul>
									</li>
								</ul>
							</div>
							<div>
								<a href="#">党建网</a>
							</div>
							<div>
								<a href="#">教务管理</a>
							</div>
							<div>
								<a href="#">招生就业</a>
								<ul class="menu">
									<li><a href="#">招生网</a></li>
									<li><a href="#">小北就业</a></li>
								</ul>
							</div>
							<div><a href="#">OA管理</a></div>
							<div>
								<a href="#">数字资源</a>
								<ul class="menu">
									<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>
									<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>
								<a href="#">加入我们</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="img">
			<img src="https://www.scauzj.edu.cn/wp-content/uploads/sites/20/2022/11/111-1-scaled.jpg" alt="" class="img"/>
		</div>
		<div class="news">
			<div class="inner_news">
				<ul class="news_pub">
					<li>学院通告</li>
					<li>部门动态</li>
					<li>新闻头条</li>
				</ul>
				<div class="news_content">
					<div class="news_left">
						<a href="#"><img src="	https://www.scauzj.edu.cn/wp-content/uploads/sites/20/2023/03/%E5%85%AC%E7%A4%BA.jpg"></a>
						<div class="pub_main">
							<h2>部门动态</h2>
						</div>
					</div>
					<div class="news_right">
						<ul class="right_list">
							<li>
								<a href="#">
									<div class="time">
										<i>27</i>
										<em>2023.03</em>
									</div>
									<div class="nr">
										<h3>华珠“数字经济产业学院”与“智能会计产业学院”揭牌仪式隆重举行</h3>
										<p></p>
									</div>
								</a>
							</li>
							<li>
								<a href="#">
									<div class="time">
										<i>27</i>
										<em>2023.03</em>
									</div>
									<div class="nr">
										<h3>关注！华南农业大学珠江学院2023年专升本校考考场安排出炉</h3>
										<p></p>
									</div>
								</a>
							</li>
							<li>
								<a href="#">
									<div class="time">
										<i>26</i>
										<em>2023.03</em>
									</div>
									<div class="nr">
										<h3>华珠人文学院在吕田镇三村村开展义教活动</h3>
										<p></p>
									</div>
								</a>
							</li>
							<li>
								<a href="#">
									<div class="time">
										<i>25</i>
										<em>2023.03</em>
									</div>
									<div class="nr">
										<h3>喜讯|华珠人文学院教工第一党支部入选广东省第四批党建工作“样板支部”</h3>
										<p></p>
									</div>
								</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<div class="movie">
			<div class="inner_movie">
				<div class="movie_title">
					<span>VIDEO SHOW</span>
					<div>
						<h2>视频展播</h2>
					</div>
				</div>
				<div class="movie_content">
					<video src="https://www.scauzj.edu.cn/wp-content/uploads/sites/20/2022/11/2022迎新花絮-1.mp4" poster="https://www.scauzj.edu.cn/wp-content/uploads/sites/20/2022/10/2y11.jpg" controls="controls">
				</div>
			</div>
		</div>
	</body>
</html>

**效果展示：**

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

昵称能吃吗？
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
学校主页实例-WEB作业
10-31
web选修课程作业，内容仅供参考！
app下载页面html模板_大学生校园班级网页设计成品 学校网站作业模板下载 静态HTML校园班级网页制作 dreamweaver网页作业下载...
weixin_39522103的博客
11-29 868
本期为大家展示STU网页设计原创校园班级类网页作品，作品可使用任意HTML软件编辑修改网页中的文字信息，图片可直接覆盖替换。原创校园班级网页作品专区链接：www.lilixing.com/html/xiaoyuan/原创作品记录去向，不重复！此作品采用div css布局制作，作品主题为西京学院-传媒学院网站(作品下载后可自己更改学校)作品共6页：学院首页、学院简介、校徽介绍、学院风采、师...
【网页期末作业】用HTML+CSS做一个漂亮简单的学校官网
qq_38512570的博客
03-26 186
🏫 校园网页设计 、学校班级网页制作、学校官网、小说书籍、等网站的设计与制作。🏷️HTML静态网页设计作业使用dreamweaver制作，采用DIV+CSS布局，共有多个页面，首页使用CSS排版比较丰富，色彩鲜明有活力。顶部导航及底部区域背景色为100%宽度，主体内容区域宽度🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语
web前端html期末大作业实例 (1500套)
热门推荐
HTML网页设计
10-03 8万+
临近期末，大一新生的各种考试和专业结课作业纷至沓来。web实训大作业、网页期末作业、web课程与设计、网页设计等，简直让人头大。你还在为网页设计老师的作业要求感到头大？网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求, 废话不多说，直接看效果。📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确
web作业—学校主页二级菜单制作
ZYQ_37210462的博客
10-26 516
web作业—学校主页二级菜单制作 HTML部分 <div class="menuClass"> <div id="nav" class="widtH80"> <div class="color3 hover"> <a href="#" title="岗位设置" class="color2">首页</a> <div class="hover-
web前端—学校官网制作（部分）
txtxla的博客
03-28 2452
【代码】web前端—学校官网制作（部分）
vue菜单点击html,基于vue.js实现侧边菜单栏
weixin_42355399的博客
06-30 423
侧边菜单栏应该是很多项目里必不可少的 自己手写了一个下面是效果图下面就说一下实现的过程 还是比较简单的首先导入一下需要的文件接下来就是我的html主页系统用户管理权限设置操作日志设备运行日志防区 防区管理警报 历史报警曲线报表统计警情处理设备然后是css* {margin: 0;padding: 0;}body {font-family:microsoft yahei;font-size:14px...
《Web前端设计基础——HTML5、CSS3、JavaScript》课后答案整理.pdf
06-10
《Web前端设计基础——HTML5、CSS3、JavaScript》张树明版前十章课后习题答案
HTML5及CSS3web前端开发技术习题答案解析.pdf
01-07
HTML5及CSS3web前端开发技术习题答案解析
Web前端开发技术——HTML、CSS、JavaScript
07-15
第4章列表； 第5章超链接； 第6章图片与多媒体文件； 第7章CSS+DIV基础； 第8章CSS+DIV高级应用； 第9章表格； 第10章框架； 第11章表单； 第12章JavaScript基础； 第13章JavaScript事件分析； 第14章DOM和BOM； 第...
Web前端开发基础：制作江湖游网页.ppt
06-06
--*-- --*-- * * 第四单元 HTML部分 前端开发基础精品课程》 《Web 1 单元目标 2 教学内容 3 动手实践 4 课堂小结 单元目标 能够在网页中应用表格和表单 能力目标 表格和表单的设置方法 知识目标 HTML教程 参考资料 ...
Vue3实战笔记（52）—Vue 3封装持仓分析饼图
山花的博客
05-30 528
接上文，封装持仓分析饼图。封装好几个组件，用于后续开发。把忧愁煮成茶，让它在心间慢慢沉淀，剩下的，便是清甜的回味。
前端开发记录
最新发布
qq_25806839的博客
05-31 165
【代码】前端开发记录。
记录一次前端页面崩溃的产生及处理
weixin_51123079的博客
05-30 512
记录一次前端页面崩溃的产生及处理
vue 笔记03
m0_47045804的博客
05-30 872
vue挂载以后把所有内容手抄一份就叫做虚拟dom 假设你要操作dom 等一下先不要操作真实dom, 先修改我这个手抄的虚拟的DOM 改完了么？如果我们需要一个变量 这个变量的值是根据data里面某个值或者某几个值的变化而变化的时候,那么我们就需要用到vue里面的computed计算属性。data里面定义的数据无法直接互相访问 因为加载到data的时候还没有产生当前的vue对象。return 返回的结果就是当前计算属性的值。回调函数的参数就是过滤原本的值return 返回过滤的新值。
web前端三大主流框架
低调做人，低调编码，神码都是浮云
05-30 941
Web前端三大主流框架介绍：Angular、React、Vue
Flutter 中的 SizeChangedLayoutNotifier 小部件：全面指南
smileKH的博客
05-28 546
是一个混合了和行为的布局小部件。它允许子组件在尺寸变化时发送通知，而其他组件可以订阅这些通知来响应尺寸变化。
前端使用el-table自带排序功能注意
m0_60594323的博客
05-29 272
前端排序如果不考虑分页数据，则不用处理。如果需要考虑到分页后的数据也要排序，那么要考虑调用后端重新排序了。那就要使用到在 Table 上监听sort-change事件进行处理了
web期末作业——千与千寻
12-22
以下是一个关于电影主题的HTML网页设计作业的示例，以千与千寻为例： ```html <!DOCTYPE html> 千与千寻 /* CSS样式 */ body { font-family: Arial, sans-serif; background-color: #f2f2f2; } h1 { ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值