第五次 作业使用h5+c3制作本校官网（web）

已于 2023-01-10 13:56:25 修改
阅读量224 收藏
点赞数
文章标签： 前端 css html
于 2023-01-10 13:55:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_61739597/article/details/128628861
版权 
<!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("./img/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("./img/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("./img/233ngea9mg.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("img/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("img/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("img/bottom-bg.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="./img/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">
						<button>提交</button>
					</form>
				</div>
				<div class="left" style="float: left">
					<div class="left-text">
						<div class="text-news">
							<div><img src="img/title-news.jpg" alt=""><a href="#">更多>></a></div>
							<div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="./img/imgbz.gif"
									alt=""><span>2022/09/22</span></div>
							<div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="./img/imgbz.gif"
									alt=""><span>2022/09/22</span></div>
							<div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="./img/imgbz.gif"
									alt=""><span>2022/09/22</span></div>
							<div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="./img/imgbz.gif"
									alt=""><span>2022/09/22</span></div>
							<div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="./img/imgbz.gif"
									alt=""><span>2022/09/22</span></div>
							<div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="./img/imgbz.gif"
									alt=""><span>2022/09/22</span></div>
							<div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="./img/imgbz.gif"
									alt=""><span>2022/09/22</span></div>
						</div>
						<div class="text-news">
							<div><img src="img/title-news.jpg" alt=""><a href="#">更多>></a></div>
							<div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="./img/imgbz.gif"
									alt=""><span>2022/09/22</span></div>
							<div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="./img/imgbz.gif"
									alt=""><span>2022/09/22</span></div>
							<div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="./img/imgbz.gif"
									alt=""><span>2022/09/22</span></div>
							<div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="./img/imgbz.gif"
									alt=""><span>2022/09/22</span></div>
							<div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="./img/imgbz.gif"
									alt=""><span>2022/09/22</span></div>
							<div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="./img/imgbz.gif"
									alt=""><span>2022/09/22</span></div>
							<div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="./img/imgbz.gif"
									alt=""><span>2022/09/22</span></div>
						</div>
					</div>
					<div class="right-text">
						<div class="text-news">
							<div><img src="img/title-news.jpg" alt=""><a href="#">更多>></a></div>
							<div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="./img/imgbz.gif"
									alt=""><span>2022/09/22</span></div>
							<div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="./img/imgbz.gif"
									alt=""><span>2022/09/22</span></div>
							<div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="./img/imgbz.gif"
									alt=""><span>2022/09/22</span></div>
							<div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="./img/imgbz.gif"
									alt=""><span>2022/09/22</span></div>
							<div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="./img/imgbz.gif"
									alt=""><span>2022/09/22</span></div>
							<div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="./img/imgbz.gif"
									alt=""><span>2022/09/22</span></div>
							<div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="./img/imgbz.gif"
									alt=""><span>2022/09/22</span></div>
						</div>
						<div class="text-news">
							<div><img src="img/title-news.jpg" alt=""><a href="#">更多>></a></div>
							<div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="./img/imgbz.gif"
									alt=""><span>2022/09/22</span></div>
							<div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="./img/imgbz.gif"
									alt=""><span>2022/09/22</span></div>
							<div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="./img/imgbz.gif"
									alt=""><span>2022/09/22</span></div>
							<div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="./img/imgbz.gif"
									alt=""><span>2022/09/22</span></div>
							<div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="./img/imgbz.gif"
									alt=""><span>2022/09/22</span></div>
							<div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="./img/imgbz.gif"
									alt=""><span>2022/09/22</span></div>
							<div><a href="#">外国语学院两支队伍获“亿学杯”大赛高职组...</a><img src="./img/imgbz.gif"
									alt=""><span>2022/09/22</span></div>
						</div>
					</div>
					<div class="xizong"></div>
					<div class="ten_pic">
						<a href="#"><img src="img/6.jpg"></a>
						<a href="#"><img src="img/6.jpg"></a>
						<a href="#"><img src="img/6.jpg"></a>
						<a href="#"><img src="img/6.jpg"></a>
						<a href="#"><img src="img/6.jpg"></a>
						<a href="#"><img src="img/6.jpg"></a>
						<a href="#"><img src="img/6.jpg"></a>
						<a href="#"><img src="img/6.jpg"></a>
						<a href="#"><img src="img/6.jpg"></a>
						<a href="#"><img src="img/6.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="img/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="img/title-news.jpg" alt="">
						<a href="#"><img src="./img/zt_zf.jpg" alt=""></a>
						<a href="#"><img src="./img/zt_8.jpg" alt=""></a>
						<a href="#"><img src="./img/zt_7.jpg" alt=""></a>
						<a href="#"><img src="./img/zt_4.jpg" alt=""></a>
						<a href="#"><img src="./img/zt_22.png" alt=""></a>
						<img src="./img/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="img/13flxkue78.png" alt="">
				<a href="#">川公网安备 51012102000211号</a>
			</div>
		</div>
	</body>
</html>

V先生137
关注
HTML5期末大作业：设计网站设计——动漫设计响应式(10页) HTML+CSS+JavaScript 动漫设计制作 简单静态HTML网页作品 动漫设计作业成品 学生个人网站模板
11-25 263
HTML5期末大作业：设计网站设计——动漫设计响应式(10页) HTML+CSS+JavaScript 动漫设计制作 简单静态HTML网页作品 动漫设计作业成品 学生个人网站模板 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足
html5plus官方网址
weixin_34273046的博客
02-18 2923
http://www.html5plus.org/doc/h5p.html
基于H5和C3的静态电商网站
w1404273025的博客
05-09 965
基于C3的静态电商网站
H5+Vue3编写官网，并打包发布到同一个域名下
qq_45634989的博客
10-17 966
H5+Vue3编写官网，并打包发布到同一个域名下
h5作业5
博客
02-25 814
页面搭建 代码展示： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;wcx's homework5&lt;/title&gt; &lt;style type="text/css"&gt; *{
H5+C3.docx
02-19
HTML5 (H5)是HTML的第五次重大修订，它引入了许多新的特性和改进，旨在提升用户体验和开发者的工作效率。C3可能是指CSS3，这是CSS的第三个主要版本，带来了更多的样式控制和动画效果。 在HTML5中，媒体元素如`...
白色大气清新H5+C3模板
06-01
【标题】"白色大气清新H5+C3模板"所涉及的知识点主要集中在前端开发领域，尤其是HTML5和CSS3的应用。HTML5是超文本标记语言的最新版本，它强化了网页的表现性能，提供了更好的离线存储功能，以及增强了多媒体元素的...
学习c3和h5第一天
qq_44388393的博客
02-26 143
E::first-letter文本的第一个单词或字（如中文、日文、韩文等） E::first-line 文本第一行； E::selection 可改变选中文本的样式； E::before和E::after 在E元素内部的开始位置和结束位创建一个元素，该元素为行内元素，且必须要结合content属性使用 translate 移动平移的意思 translate(x,y)水平方向和垂直方向同时移动（也就...
H5+C3开发指南
01-24
【H5+C3开发指南】 在当今的互联网世界中，HTML5和CSS3是构建现代网页和移动应用不可或缺的技术。这两个强大的工具极大地扩展了Web开发的可能性，提供了丰富的交互性、更好的性能以及更美观的设计。 首先，让我们...
复习H5 + C3
海棠的博客
02-07 716
【尚硅谷前端入门html+css零基础教程，零基础前端开发html5+css3视频】
H5作业3
博客
02-21 474
2月21: 1，代码如下： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;wcx's homework&lt;/title&gt; &lt;style type="text/css"&gt;
h5作业4
博客
02-22 826
2月22日 这是学习的第四天 来晒晒我的作业,因为只学到了table，td，tr，ul等所以只能用table搭建，可能相对于div来说不那么好搭建 今天的作业是搭建百度页面  代码：命名不规范，后期会改过来的 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;t...
h5作业2
博客
02-21 626
2月20日 今日学习内容： 1，css：Cascading Style Sheets层叠样式表 2，css三大选择器： 标签选择器：p，tr，td等标签 id选择器：id属性（唯一属性） 类选择器：class属性 3， css属性：      font-family:定义字体的类型 font-size：字体的大小 font-style:字体的样式 text-align:字...
HTML5+ API
真是6的不行的博客
05-21 4062
HTML5+ API：http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.getLaunchWebview
一个简单的网页设计HTML5作业
热门推荐
好好读书
06-26 9万+
简单的html设计作业，初次学习，希望指正！
大二网页设计作业_基于前端H5+C3+jquery和后端mysql+node.js开发的图书管理系统源码.zip
最新发布
10-10
大二网页设计作业_基于前端H5+C3+jquery和后端mysql+node.js开发的图书管理系统源码.zip
web学习之路—H5（五）
小埋的喵喵
02-22 690
               今天就继续html的学习，把最后一点学习掉，就可以开始H5的学习了。有一天打算敲一个demo，但是发现居然好多都记得不清楚，所以后续会敲两个demo的，建议大家一边学习一边练习，这样效果会特别好。 Html的多媒体 视频格式   MP4 格式是一种新的即将普及的因特网视频格式。HTML5 、Flash 播放器以及优酷等视频网站均支持它。 格式 文件 ...
h5学习作业1
博客
02-20 628
2月19日家庭作业： 学习内容： 1，bgcolor：背景颜色 2，cellpadding：单元格之间的距离 3，cellspacing：框与单元格之间的距离 4，ul,ol,li序号 5，form：表单 6，checkbox：复选框，都是input标签，通过type控制不同的类型，同一范围的name值要一样，也可以为空 7，select：下拉菜单 8，fieldset框，bor...
HTML5期末大作业：关于题介绍的网页作业——我的家乡新密 (15页) 含课程设计论文HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计
HTML5学生网页设计作业成品模板
10-22 1万+
HTML5期末大作业：关于家乡介绍的网页设计——我的家乡新密 (15页) 含课程设计论文HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设
HTML-W3school首页制作
weixin_30387339的博客
08-03 3361
链接：https://pan.baidu.com/s/1DFy4JmxakQ_jsnSeNqJ2dw 提取码：k76t 制作思路 1. 先分析网页，对网页进行划分，再对每个小区域填充内容 2. 建CSS、img文件夹分别存放所需要的css和图片 3. 清除系统标签默认样式 4. 建页面跳转文件 头部header <div class="header"> <h1...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值