web前端作业3

最新推荐文章于 2024-07-04 00:59:27 发布
Healer。。
最新推荐文章于 2024-07-04 00:59:27 发布
阅读量73
点赞数
文章标签：前端 css css3
本文链接：https://blog.csdn.net/m0_66993332/article/details/128106411
版权
成都文理校园官网制作：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			.logo{
				text-align: center;
			}
			.container {
				text-align: center;
			}

			.nav {
				height: 43px;
				background-image: url("nav-bg.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("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 {}

			.image-content {
				width: 1170px;
				height: 500px;
				background-image: url("z.jpg");
				margin: 0 auto;
			}

			.text-content {
				width: 1170px;
				margin: 0 auto;
			}

			.second-nav {
				width: 810px;
				height: 25px;
				background-image: url("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%;
				position: relative;
			}

			.right-text {
				float: right;
			}

			.text-news>div {
				padding: 5px 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("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 {
				/* border: 4px solid red; */
			}

			.right {
				width: 330px;
				/* height: 300px; */
				/* border: 4px solid blue; */
				float: right;
			}

			.video{
				background: url("28289pe9gb.jpg");
				background-repeat: no-repeat;
				width: 330px;
				height: 330px;
				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;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<img class="logo" src="logo.jpg" 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>
			<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" value="坤坤">
						<button>提交</button>
					</form>
				</div>
				<div class="left" style="float: left;">
					<div class="left-text">
						<div class="text-news">
							<div><img src="../pic/title-news.jpg" alt=""><a href="#">更多>></a></div>
							<div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="../pic/imgbz.gif"
									alt=""><span>2022/09/22</span></div>
							<div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="../pic/imgbz.gif"
									alt=""><span>2022/09/22</span></div>
							<div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="../pic/imgbz.gif"
									alt=""><span>2022/09/22</span></div>
							<div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="../pic/imgbz.gif"
									alt=""><span>2022/09/22</span></div>
							<div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="../pic/imgbz.gif"
									alt=""><span>2022/09/22</span></div>
							<div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="../pic/imgbz.gif"
									alt=""><span>2022/09/22</span></div>
							<div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="../pic/imgbz.gif"
									alt=""><span>2022/09/22</span></div>
							<div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="../pic/imgbz.gif"
									alt=""><span>2022/09/22</span></div>
						</div>
						<div class="text-news">
							<div><img src="../pic/title-news.jpg" alt=""><a href="#">更多>></a></div>
							<div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="../pic/imgbz.gif"
									alt=""><span>2022/09/22</span></div>
							<div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="../pic/imgbz.gif"
									alt=""><span>2022/09/22</span></div>
							<div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="../pic/imgbz.gif"
									alt=""><span>2022/09/22</span></div>
							<div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="../pic/imgbz.gif"
									alt=""><span>2022/09/22</span></div>
							<div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="../pic/imgbz.gif"
									alt=""><span>2022/09/22</span></div>
							<div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="../pic/imgbz.gif"
									alt=""><span>2022/09/22</span></div>
							<div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="../pic/imgbz.gif"
									alt=""><span>2022/09/22</span></div>
							<div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="../pic/imgbz.gif"
									alt=""><span>2022/09/22</span></div>
						</div>
					</div>
					<div class="right-text">
						<div class="text-news">
							<div><img src="../pic/title-news.jpg" alt=""><a href="#">更多>></a></div>
							<div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="../pic/imgbz.gif"
									alt=""><span>2022/09/22</span></div>
							<div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="../pic/imgbz.gif"
									alt=""><span>2022/09/22</span></div>
							<div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="../pic/imgbz.gif"
									alt=""><span>2022/09/22</span></div>
							<div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="../pic/imgbz.gif"
									alt=""><span>2022/09/22</span></div>
							<div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="../pic/imgbz.gif"
									alt=""><span>2022/09/22</span></div>
							<div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="../pic/imgbz.gif"
									alt=""><span>2022/09/22</span></div>
							<div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="../pic/imgbz.gif"
									alt=""><span>2022/09/22</span></div>
							<div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="../pic/imgbz.gif"
									alt=""><span>2022/09/22</span></div>
						</div>
						<div class="text-news">
							<div><img src="../pic/title-news.jpg" alt=""><a href="#">更多>></a></div>
							<div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="../pic/imgbz.gif"
									alt=""><span>2022/09/22</span></div>
							<div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="../pic/imgbz.gif"
									alt=""><span>2022/09/22</span></div>
							<div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="../pic/imgbz.gif"
									alt=""><span>2022/09/22</span></div>
							<div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="../pic/imgbz.gif"
									alt=""><span>2022/09/22</span></div>
							<div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="../pic/imgbz.gif"
									alt=""><span>2022/09/22</span></div>
							<div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="../pic/imgbz.gif"
									alt=""><span>2022/09/22</span></div>
							<div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="../pic/imgbz.gif"
									alt=""><span>2022/09/22</span></div>
							<div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="../pic/imgbz.gif"
									alt=""><span>2022/09/22</span></div>
						</div>
					</div>
				</div>
				<div class="right">
					<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>
			</div>

		</div>
	</body>
</html>