Web前端学习——第四次作业(学校官网)

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>27i>
										<em>2023.03em>
									div>
									<div class="nr">
										<h3>华珠“数字经济产业学院”与“智能会计产业学院”揭牌仪式隆重举行h3>
										<p>p>
									div>
								a>
							li>
							<li>
								<a href="#">
									<div class="time">
										<i>27i>
										<em>2023.03em>
									div>
									<div class="nr">
										<h3>关注!华南农业大学珠江学院2023年专升本校考考场安排出炉h3>
										<p>p>
									div>
								a>
							li>
							<li>
								<a href="#">
									<div class="time">
										<i>26i>
										<em>2023.03em>
									div>
									<div class="nr">
										<h3>华珠人文学院在吕田镇三村村开展义教活动h3>
										<p>p>
									div>
								a>
							li>
							<li>
								<a href="#">
									<div class="time">
										<i>25i>
										<em>2023.03em>
									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 SHOWspan>
					<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>


**效果展示:**



Web前端学习——第四次作业(学校官网)_第1张图片

你可能感兴趣的:(前端,学习,css)