学成在线静态页面（全）

最新推荐文章于 2024-05-22 20:30:11 发布
最新推荐文章于 2024-05-22 20:30:11 发布
阅读量145 收藏
点赞数 1
分类专栏： 书本 文章标签： html css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53912756/article/details/127784434
版权

html代码

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="utf-8">
	<title>学成在线</title>
	<link rel="stylesheet" href="idex.css">
</head>
<body>
	<!-- 头部盒子 -->
	<div class="header w">
		<!-- logo部分 -->
		<div class="logo">
			<img src="imges/logo.png" alt="">
		</div>
		<!-- 导航栏部分 -->
		<div class="nav">
			<ul>
				<li><a href="#">首页</a></li>
				<li><a href="#">课程</a></li>
				<li><a href="#">职业规划</a></li>
			</ul>
		</div>
		<!-- 搜索 -->
		<div class="search">
			<input type="text" value="输入关键词">
			<button></button>
		</div>
		<!-- 用户模块 -->
		<div class="user">
			<img src="imges/头像.png" alt="">
			<div>qq-lilei</div>
		</div>
	</div>
	<!-- banner部分 -->
	<div class="banner">
		<!-- 版心 -->
		<div class="w">
			<div class="subnav">
				<ul>
					<li><a href="#">前端开发<span>></span></a></li>
					<li><a href="#">后端开发<span>></span></a></li>
					<li><a href="#">移动开发<span>></span></a></li>
					<li><a href="#">人工智能<span>></span></a></li>
					<li><a href="#">商业预测<span>></span></a></li>
					<li><a href="#">云计算&大数据<span>></span></a></li>
					<li><a href="#">运维&从测试<span>></span></a></li>
					<li><a href="#">UI设计<span>></span></a></li>
					<li><a href="#">产品<span>></span></a></li>
				</ul>
			</div>
			<!-- course课程表模块 -->
			<div class="course">
				<h2>我的课程表</h2>
				<div class="bd">
					<ul>
						<li>
							<h4>继续学习 程序语言设计</h4>
							<p>正在学习-使用对象</p>
						</li>
						<li>
							<h4>继续学习 程序语言设计</h4>
							<p>正在学习-使用对象</p>
						</li>
						<li>
							<h4>继续学习 程序语言设计</h4>
							<p>正在学习-使用对象</p>
						</li>
					</ul>
					<a href="#" class="more">全部课程</a>
				</div>
			</div>
		</div>

	</div>

	<!-- 精品推荐小模块 -->
	<div class="goods w">
		<h3>精品推荐</h3>
		<ul>
			<li><a href="#">JQuery</a></li>
			<li><a href="#">Spart</a></li>
			<li><a href="#">MySQL</a></li>
			<li><a href="#">JavaWeb</a></li>
			<li><a href="#">MySQL</a></li>
			<li><a href="#">JavaWeb</a></li>
		</ul>
		<a href="#" class="mod">修改兴趣</a>
	</div>
	
	<!-- box核心内容其余开始 -->
	<div class="box w">
		<div class="box-hd">
			<h3>精品推荐</h3>
			<a href="#">查看全部</a>
		</div>
		<div class="box-bd">
			<ul class="clearfix">
				<li>
					<img src="imges/share.png" alt="">
					<h4>
						Think PHP 5.0 博客系统实战项目演练
					</h4>
					<div class="info">
						<span>高级</span> • 1125人在学习
					</div>
				</li>
				<li>
					<img src="imges/share.png" alt="">
					<h4>
						Think PHP 5.0 博客系统实战项目演练
					</h4>
					<div class="info">
						<span>高级</span> • 1125人在学习
					</div>
				</li>
				<li>
					<img src="imges/share.png" alt="">
					<h4>
						Think PHP 5.0 博客系统实战项目演练
					</h4>
					<div class="info">
						<span>高级</span> • 1125人在学习
					</div>
				</li>
				<li>
					<img src="imges/share.png" alt="">
					<h4>
						Think PHP 5.0 博客系统实战项目演练
					</h4>
					<div class="info">
						<span>高级</span> • 1125人在学习
					</div>
				</li>
				<li>
					<img src="imges/share.png" alt="">
					<h4>
						Think PHP 5.0 博客系统实战项目演练
					</h4>
					<div class="info">
						<span>高级</span> • 1125人在学习
					</div>
				</li>
				<li>
					<img src="imges/share.png" alt="">
					<h4>
						Think PHP 5.0 博客系统实战项目演练
					</h4>
					<div class="info">
						<span>高级</span> • 1125人在学习
					</div>
				</li>
				<li>
					<img src="imges/share.png" alt="">
					<h4>
						Think PHP 5.0 博客系统实战项目演练
					</h4>
					<div class="info">
						<span>高级</span> • 1125人在学习
					</div>
				</li>
				<li>
					<img src="imges/share.png" alt="">
					<h4>
						Think PHP 5.0 博客系统实战项目演练
					</h4>
					<div class="info">
						<span>高级</span> • 1125人在学习
					</div>
				</li>
				<li>
					<img src="imges/share.png" alt="">
					<h4>
						Think PHP 5.0 博客系统实战项目演练
					</h4>
					<div class="info">
						<span>高级</span> • 1125人在学习
					</div>
				</li>
				<li>
					<img src="imges/share.png" alt="">
					<h4>
						Think PHP 5.0 博客系统实战项目演练
					</h4>
					<div class="info">
						<span>高级</span> • 1125人在学习
					</div>
				</li>
				
			</ul>
		</div>

	</div>
	
	<!-- 底部模块 -->
	<div class="footer">
		<div class="w">
			<div class="copyright">
				<img src="imges/logo.png" alt="">
				<p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。<br>© 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</p>
				<a href="#" class="app">下载APP</a>
			</div>
			<div class="links">
				<dl>
					<dt>关于学成网</dt>
					<dd><a href="#">关于</a></dd>
					<dd><a href="#">管理团队</a></dd>
					<dd><a href="#">工作机会</a></dd>
					<dd><a href="#">客户服务</a></dd>
					<dd><a href="#">帮助</a></dd>
				</dl>
				<dl>
					<dt>关于学成网</dt>
					<dd><a href="#">关于</a></dd>
					<dd><a href="#">管理团队</a></dd>
					<dd><a href="#">工作机会</a></dd>
					<dd><a href="#">客户服务</a></dd>
					<dd><a href="#">帮助</a></dd>
				</dl>
				<dl>
					<dt>关于学成网</dt>
					<dd><a href="#">关于</a></dd>
					<dd><a href="#">管理团队</a></dd>
					<dd><a href="#">工作机会</a></dd>
					<dd><a href="#">客户服务</a></dd>
					<dd><a href="#">帮助</a></dd>
				</dl>
			</div>
		</div>
	</div>


</body>
</html>

 css代码

@charset "UTF-8";
/**
 * 
 * @authors Your Name (you@example.org)
 * @date    2022-11-07 15:23:02
 * @version $Id$
 */
/* 清除浮动 */
.clearfix:after{
			content: "";
			display: block;
			height: 0;
			clear: both;
			visibility: hidden;
		}
		.clearfix{
			/* IE6、7专用 */
			*zoom: 1;
		}
*{
	padding: 0;
	margin: 0;
}
body{
	background-color: #f3f5f7;
}
li,a{
	text-decoration: none;
	list-style: none;
}
.w{
	width: 1200px;
	margin: 0 auto;
}
body{
	background-color: #f3f5f7;
}
/* header */
.header{
	margin:30px auto ;
	height: 42px;
	/* background-color: pink; */
}
.logo{
	width: 198px;
	height: 42px;
	float: left;	
}
.logo img{
	width: 198px;
	height: 42px;
}
.nav{
	margin-left: 60px;
	float: left;
}
.nav ul li{
	float: left;
	margin: 0 15px;
}
.nav ul li a{
	display: block;
	padding: 0 10px;
	text-decoration: none;
	height: 42px;
	line-height: 42px;
	font-size: 18px;
	color: #050505;
}
.nav ul li a:hover{
	border-bottom: 2px solid #00a4ff;
}
/* 搜索框 */
.search{
	float: left;
	width: 412px;
	height: 42px;
	background-color: #0099ff ;
	border-radius: 2px;
	margin-left: 50px;
}
.search input{
	float: left;
	width: 345px;
	height: 40px;
	border:1px solid #00a4ff ;
	border-right: none;
	color: #bfbfbf;
	font-size: 14px;
	padding-left: 15px;
}
.search button{
	float: left;
	width: 50px;
	height: 42px;
	background-color:#0099ff ;
	/* 按钮默认有个边框需要手动去掉 */
	border: 0;
	background: url(imges/btn.png);
	background-repeat: no-repeat;
	background-position: center center;
}
.header .user{
	float: right;
	line-height: 42px;
	margin-right: 30px;
	font-size: 14px;
	color: #666;
	text-align: center;
	overflow: hidden;

}
.header .user img{
	float: left;
}
.header .user div{
	float: right;
	text-align: center;
}
/* banner部分 */
.banner{
	height: 421px;
	background-color: #1c036c;
}
.banner .w{
	height: 421px;
	background: url(imges/banner.png) no-repeat top center;
}
.subnav{
	float: left;
	width: 190px;
	height: 421px;
	background: rgba(0, 0, 0, 0.3);
}
.subnav ul li{
	padding: 0 20px;
	height: 45px;
	line-height: 45px;

}
.subnav ul li a{
	font-size: 14px;
	color: #fff;
}
.subnav ul li a span{
	float: right;
}
.subnav ul li a:hover{
	color: #00a4ff;
}
.course{
	float: right;
	width: 230px;
	height: 300px;
	border-radius: 10px;
	background-color: #fff;
	/* 浮动的盒子不会有外边距合并的问题 */
	margin-top: 50px;
	box-shadow: 15px 15px 15px rgba(0, 0, 0, 0.2)
}
.course h2{
	border-radius: 10px 10px 0 0;
	height: 48px;
	background-color: #9bceea;
	text-align: center;
	line-height: 48px;
	color: #fff;
	font-size: 18px;
}
.course .bd{
	padding: 0 20px;
}
.course .bd li{
	padding: 14px 0;
	border-bottom:1px solid #ccc ;
}
.course .bd ul li h4{
	font-size: 16px;
	color: #4e4e4e;
}
.course .bd ul li p{
	font-size: 12px;
	color: #a5a5a5;
}
.course .bd .more{
	display: block;
	height: 38px;
	border: 1px solid #00a4ff;
	margin-top: 5px;
	color: #00a4ff;
	text-align: center;
	line-height: 38px;
	font-size: 16px;
	font-weight: 700;
}


/* <!-- 精品推荐小模块 --> */
.goods{
	margin-top: 10px;
	height: 60px;
	background-color: #fff;
	box-shadow: 0 2px 3px 3px rgba(0, 0, 0, 0.1);
	/* 行高会继承 */
	line-height: 60px;
}
.goods h3{
	float: left;
	margin-left: 30px;
	font-size: 16px;
	color:#00a4ff ;
}
.goods ul{
	float: left;
	margin-left: 30px;
}
.goods ul li{
	float: left;

}
.goods ul li a{
	padding: 0 30px;
	font-size: 16px;
	color: #050505;
	border-left: 1px solid #ccc;
}
.goods .mod{
	margin-right: 30px;
	float: right;
	font-size: 14px;
	color:#00a4ff ;
}

/* <!-- box核心内容其余开始 --> */
.box{
	margin-top: 30px;

}
.box-hd{
	height: 45px;
}
.box-hd h3{
	float: left;
	font-size: 20px;
	color: #494949;
}
.box-hd a{
	margin-right: 30px;
	margin-top: 10px;
	float: right;
	font-size: 12px;
	color: #a5a5a5;
}
/* 把li 的父亲ul 修改的足够款一行就能装开5个盒子就不会换行了 */
.box-bd ul{
	width: 1225px;
}
.box-bd ul li{
	margin-right: 15px;
	margin-bottom: 15px;
	float: left;
	width: 228px;
	height: 270px;
	background-color: #fff;
}
.box-bd ul li img{
	width: 100%;

}
.box-bd ul li h4{
	margin: 20px 20px 20px 25px;
	font-size: 14px;
	color: #050505;
	font-weight: 400;
}
.box-bd ul li .info{
	margin: 0 20px 0 25px;
	font-size: 12px;
	color: #9999;
}
.box-bd ul li .info span{
	color: #ff7c2d;
}

/* <!-- 底部模块 --> */
.footer{
	height: 415px;
	background-color: #fff;
}
.footer .w{
	padding-top: 35px;
}
.footer .w .copyright{
	float: left;
}
.footer .w .copyright p{
	margin: 20px 0 15px 0;
	font-size: 12px;
	color: #666;
}
.footer .w .copyright .app{
	display: block;
	width: 118px;
	height: 33px;
	border: 1px solid #00a4ff;
	text-align: center;
	line-height: 33px;
	color: #00a4ff;
	font-size: 16px;
}
.footer .w .links{
	float: right;
}
.footer .w .links dl{
	float: left;
	margin-left: 100px;
}
.footer .w .links dl dt{
	margin-bottom: 5px;
	font-size: 16px;
	color: #333;
}
.footer .w .links dl dd a{
	color: #333;
	font-size: 12px;

}

asnone0
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
学成在线img.zip
04-22
学成在线首页的各个图片，从photoshop处切片而出。仅仅只有首页的图片，内附学成在线首页的jpg图片，
学成在线--25.课程图片管理（图片查询）
fanxindong0620的博客
06-17 219
文章目录一. 需求分析二. API三. 服务端开发1. Dao2. Service3. Controller四. 前端开发1. API方法2. 页面 一. 需求分析 课程图片上传成功，再次进入课程上传页面应该显示出来已上传的图片。 二. API 在课程管理服务定义查询方法 文件位置：xcEduService01\xc-service-api\src\main\java\com\xuecheng\api\course\CourseControllerApi.java @ApiOperation("获取课程基础
学成在线--24.课程图片管理（保存课程图片）
fanxindong0620的博客
06-16 864
文章目录一. 需求分析二. 服务端开发1. API2. Dao3. Service4. Controller三. 前端开发1. API2. 页面1). 小标题2). 小标题 一. 需求分析 图片上传到文件系统后，其它子系统如果想使用图片可以引用图片的地址，课程管理模块使用图片的方式是将图片 地址保存到课程数据库中。业务流程如下： 1、上传图片到文件系统服务 2、保存图片地址到课程管理服务，在课程管理服务创建保存课程与图片对应关系的表 course_pic。 3、在course_pic保存图片成功后方可查询
学成在线--26.课程图片管理（图片删除）
fanxindong0620的博客
06-17 244
文章目录一. 需求分析二. API三. 服务端开发1. Dao2. Service3. Controller四. 前端开发1. API方法2. 页面1.before-remove钩子方法2.handleRemove钩子方法 一. 需求分析 课程图片上传成功后，可以重新上传，方法是先删除现有图片再上传新图片； 注意：此删除只删除课程数据库的课程图片信息，不去删除文件数据库的文件信息及文件系统服务器上的文件； 由于课程图片来源于该用户的文件数据库，所以此图片可能存在多个地方共用的情况，所以要删除文件系统中的文件
刚学完的学成在线
qq_54036704的博客
04-13 63
HTML代码段 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <.
html+css学成在线静态页面
03-23
html+css学成在线静态页面适用初学者
学成在线案例.zip
07-14
学习一个星期HTML&CSS后做的项目，内含学成在线网站首页PSD、制作静态页面的HTML代码及CSS代码。
前端页面练习：学成在线首页
11-12
个人练习的一个静态页面，只有HTML和CSS，内容和逻辑较为简单，素材来源于黑马的pink老师，算是自己跟着做好的第一个项目
学成在线-第4天-讲义-页面静态化v1.21
08-03
1、为什么要进行页面管理 2、如何修改页面的内容 3、如何对页面进行静态化 4、页面静态化及页面发布流程图如下： 1、获取模型数据 2、制作模板 3、对页面进行
学成在线Learn to Succeed Online
01-21
学成在线是一个在线教育网站,其资源结构如下: 1. images文件夹:用于存储网站所需的图片资源。 2. index.html:网站的首页文件,用于渲染网站首页内容。 3. styles.css:网页样式表文件,用于控制网站样式与布局。 4....
学成在线PSD素材及代码
10-23
学成在线素材（PSD文件）及代码 学成在线素材（PSD文件）及代码 学成在线素材（PSD文件）及代码
学成在线官网首页完整版（含psd源文件）
热门推荐
weixin_53446914的博客
08-11 3万+
文章目录 前言 一，案例展示 1.源代码 总结 前言 按照psd图片一点点代码敲出来的，开始的时候是跟着老师做的后来就是自己自由发挥了。 psd的文件可以去直接下载这位老师的，源代码和照片都放在这里可以去查看，希望对你有用。 一、案例展示 1.源代码 html代码： ​ <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> ...
学成在线案例制作
qq_52992057的博客
04-03 1108
系列文章目录 提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加 提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档 学成在线案例系列文章目录前言一、准备素材和工具二、案例准备工作三、CSS属性书写顺序四、页面布局分析五、确定版心六、头部制作七、banner 制作总结 前言 提示：这里可以添加本文要记录的大概内容： 本文档是个人对 Pink 老师课程的总结归纳及补充，以及！ 提示：以下是本篇文章正文内容，下面案例可供参考 一、准备素材和工具 学成在线 PSD 源文件 开
学成在线首页制作——学习记录18
weixin_45019830的博客
08-05 977
1. 最终效果 2. 全部代码 次采取结构与样式相分离思想： style.css文件： * { margin: 0; padding: 0; } body { background-color: #f3f5f7; } li { list-style:none; } .w { width: 120
HTML静态网页作业(HTML+CSS+JS)——动漫蜡笔小新网页设计制作(4个页面)
weixin_42283461的博客
05-20 731
HTML静态网页作业(HTML+CSS+JS)——动漫蜡笔小新网页设计制作(4个页面)
前端基础入门三大核心之HTML篇 —— 深入解析从URL请求到页面加载的艺术
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-21 656
前端技术的博大精深，远不止于此。从HTML的简单解析到复杂的SPA应用，每一步都蕴含着开发者对极致体验的追求。本文旨在为你铺就一条坚实的基础之路，鼓励你不断深入学习，探索新技术，实践新理念。前端的世界日新月异，保持好奇心，勇于实践，你将在这条道路上走得更远。最后，我们期待你在评论区分享你的学习心得、实战经验或是对未来前端发展的独到见解，让我们一起推动Web技术的车轮滚滚向前。欢迎来到我的博客，很高兴能够在这里和您见面！
【SpringMVC】_SpringMVC项目返回HTML与JSON
最新发布
m0_63299495的博客
05-22 697
本专栏已介绍：返回静态页面：【Spring MVC】_SpringMVC项目返回静态页面_mvc 返回当前页面-CSDN博客返回数据：【Spring MVC】_SpringMVC项目返回数据-CSDN博客本篇介绍返回HTML与返回JSON；
/audio~ 前端音浪来袭：HTML音频&视频标签的深度探索
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-19 734
想要音频自动播放、循环播放，甚至静默加载？小菜一碟：< audio controls autoplay loop preload = " auto " > < source src = " ambient.mp3 " type = " audio/mpeg " > 准备好享受氛围音乐了吗？
前端基础入门三大核心之HTML篇：构建网页世界的基石与HTML5的魔力
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-18 925
HTML是一种标记语言，它使用一系列标签来描述网页内容的结构和表现形式。这些标签告诉浏览器如何处理和显示文本、图片、视频等网页元素。从最基础的段落、标题到复杂的表格、表单，HTML都能轻松应对。
学成在线项目页面静态化
07-10
学成在线项目页面静态化是一种将动态生成的网页内容转化为静态页面的技术。通过静态化处理，可以减少服务器的负载，提高网页的加载速度，并且可以减少数据库的访问次数。 实现页面静态化的方式有多种，常见的方法...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值