个人练习-学成在线网案例（带个人注释）

最新推荐文章于 2024-04-29 15:45:38 发布
最新推荐文章于 2024-04-29 15:45:38 发布
阅读量127 收藏
点赞数
文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wiser111111/article/details/127213761
版权

HTML代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>学成在线首页</title>
		<link rel="stylesheet" href="style.css">
	</head>
	<body>
		<div class="header w">
			<!-- log部分 -->
			<div class="log">
				<img src="logo.png" alt="">
			</div>
			<!-- 导航栏部分 nav -->
			<div class="nav">
				<ul>
					<li><a href="#">首页</a></li>
					<li><a href="#">课程</a></li>
					<li><a href="#">职业规划</a></li>
				</ul>
			</div>
			<!-- 搜索模块search -->
			<div class="search">
				<input type="text" value="输入关键词">
				<button></button>
			</div>
			<!-- 用户模块 -->
			<div class="user">
				<img src="user.png" alt="">
				qq-lilei
			</div>
		</div>
		<div class="banner">
			<div class="w">
				<div class="subnav">
					<ul>
						<li><a href="#">前端开发 <span> &gt; </span></a></li>
						<li><a href="#">前端开发<span> &gt; </span></a></li>
						<li><a href="#">前端开发<span> &gt; </span></a></li>
						<li><a href="#">前端开发<span> &gt; </span></a></li>
						<li><a href="#">前端开发<span> &gt; </span></a></li>
						<li><a href="#">前端开发<span> &gt; </span></a></li>
						<li><a href="#">前端开发<span> &gt; </span></a></li>
						<li><a href="#">前端开发<span> &gt; </span></a></li>
						<li><a href="#">前端开发<span> &gt; </span></a></li>
					</ul>
				</div>
			<!-- 课程表模块 -->
			<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="#">Spark</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="pic.png" alt="#">
						<h4>Think PHP 5.0 博客系统实战项目演练</h4>
						<div class="info">
							<span>高级</span>  •  1125人在学习
						</div>
					</li>
					<li>
						<img src="pic-1.png" alt="#">
						<h4>Android 网络图片加载框架详解111111111</h4>
						<div class="info">
							<span>高级</span>  •  1125人在学习
						</div>
					</li>					
					<li>
						<img src="pic-2.png" alt="#">
						<h4>Angular 2 最新框架+主流技术+项目实战 </h4>
						<div class="info">
							<span>高级</span>  •  1125人在学习
						</div>
					</li>					
					<li>
						<img src="pic-3.png" alt="#">
						<h4>Android Hybrid APP开发实战 H5+原生！</h4>
						<div class="info">
							<span>高级</span>  •  1125人在学习
						</div>
					</li>					
					<li>
						<img src="pic-3.png" alt="#">
						<h4>Android Hybrid APP开发实战 H5+原生！</h4>
						<div class="info">
							<span>高级</span>  •  1125人在学习
						</div>
					</li>				
					<li>
						<img src="pic.png" alt="#">
						<h4>Think PHP 5.0 博客系统实战项目演练</h4>
						<div class="info">
							<span>高级</span>  •  1125人在学习
						</div>
					</li>
					<li>
						<img src="pic-1.png" alt="#">
						<h4>Android 网络图片加载框架详解 111111111</h4>
						<div class="info">
							<span>高级</span>  •  1125人在学习
						</div>
					</li>					
					<li>
						<img src="pic-2.png" alt="#">
						<h4>Angular 2 最新框架+主流技术+项目实战 </h4>
						<div class="info">
							<span>高级</span>  •  1125人在学习
						</div>
					</li>					
					<li>
						<img src="pic-3.png" alt="#">
						<h4>Android Hybrid APP开发实战 H5+原生！</h4>
						<div class="info">
							<span>高级</span>  •  1125人在学习
						</div>
					</li>					
					<li>
						<img src="pic-3.png" alt="#">
						<h4>Android Hybrid APP开发实战 H5+原生！</h4>
						<div class="info">
							<span>高级</span>  •  1125人在学习
						</div>
					</li>	
				</ul>
			</div>
		</div>
		<!-- footer模块制作 -->
		<div class="footer">
			<div class="w">
				<div class="copyright">
					<img src="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>
					</dl>
				</div>
			</div>
		</div>
	</body>
</html>

CSS：

* {
	margin: 0;
	padding: 0;
}
.w {
	width: 1200px;
	margin: auto;
}
body {
	background-color: #f3f5f7;
	/* 高度最后要扔掉 */
	/* height: 3000px; */
}
li {
	/* 清除页面所有li的样式 */
	list-style: none;
}
a {
	/* 所有链接取消下划线 */
	text-decoration: none;
}
.clearfix:before,
			.clearfix:after {
				content: "";
				display: table;
			}
			.clearfix::after {
				clear: both;
			}
			.clearfix{
				*zoom: 1;
			}
.header {
	height: 42px;
	/* background-color: pink; */
	/* 注意此地方会层叠 w 里面的margin */
	margin: 30px auto;
}
.log {
	float: left;
	width: 198px;
	height: 42px;
	/* background-color: purple; */
}
.nav {
	float: left;
	margin-left: 60px;
}
.nav ul li {
	float: left;
	margin: 0 15px;
}
.nav ul li a {
	display: block;
	height: 42px;
	/* 因为导航栏里面文字不一样,所以给a左右padding撑开盒子,而不是指定宽度 */
	padding: 0 10px;
	line-height: 42px;
	font-style: 18px;
	color: #050505;
}
.nav ul li a:hover {
	border-bottom: 2px solid #00a4ff;
	color: #00a4ff;
}
.search {
	float: left;
	width: 412px;
	height: 42px;
	margin-left: 70px;
}
.search input {
	float: left;
	/* width: 360px; */
	/* 由于padding-left会撑大盒子,所以宽度需要减去相应px */
	width: 345px;
	height: 40px;
	/* 给搜索框一个边框 */
	border: 1px solid #00a4ff;
	/* 清除右侧边框 */
	border-right: 0;
	color: #bfbfbf;
	font-style: 14px;
	/* 输入框内文字距离左侧的距离 */
	padding-left: 15px;
}
.search button {
	float: left;
	width: 50px;
	height: 42px;
	/* 手动去掉按钮默认边框 */
	border: 0;
	background: url(btn.png);
}
.user {
	float: right;
	line-height: 42px;
	margin-right: 30px;
	font-style: 14px;
	color: #666;
}
.banner {
	height: 421px;
	background-color: #1c036c;
}
.banner .w {
	height: 421px;
	background: url(banner2.png) no-repeat top center;
}
.subnav {
	float: left;
	width: 190px;
	height: 421px;
	background: rgba(0,0,0,.3);
}
.subnav ul li {
	height: 45px;
	line-height: 45px;
	padding: 0 20px;
}
.subnav ul li a {
	font-style: 14px;
	color: #fff;
}
.subnav ul li a span {
	float: right;
}
.subnav ul li a:hover {
	color: #00a4ff;
}
.course {
	float: right;
	width: 230px;
	height: 300px;
	background-color: #fff;
	/* 浮动的盒子不会有外边距合并的问题 */
	margin-top: 50px;
}
.course h2 {
	height: 48px;
	background-color: #9bceea;
	/* 水平居中 */
	text-align: center;
	/* 垂直居中 */
	line-height: 48px;
	font-style: 18px;
	color: #fff;
}
.bd {
	padding: 0 20px;
}
.bd ul li {
	padding: 14px 0;
	border-bottom: 1px solid #ccc;
}
.bd ul li h4 {
	font-style: 16px;
	color: #4e4e4e;
}
.bd ul li p {
	font-style: 12px;
	color: #a5a5a5;
}
.bd .more {
	/* 将a转化为块级元素 */
	display: block;
	height: 38px;
	border: 1px solid #00a4ff;
	margin-top: 5px;
	text-align: center;
	/* 行高line-height的值要用px */
	line-height: 38px;
	color: #00a4ff;
	font-style: 16px;
	/* font-weight的值不用px */
	font-weight: 700;
	
}
/* 精品推荐模块 */
.goods {
	height: 60px;
	background-color: #fff;
	margin-top: 10px;
	/* 添加阴影 */
	box-shadow: 0 2px 3px 3px rgba(0,0,0,.1);
	/* 行高会继承给三个孩子 */
	line-height: 60px;
}
.goods h3 {
	float: left;
	margin-left: 30px;
	font-style: 16px;
	color: #00a4ff;
}
.goods ul {
	float: left;
	margin-left: 30px;
}
.goods ul li {
	float: left;
}
.goods ul li a {
	padding: 0 30px;
	font-style: 16px;
	color: #050505;
	border-left: 1px solid #ccc;
}
.mod {
	float: right;
	margin-right: 30px;
	font-style: 14px;
	color: #00a4ff;
}
.box {
	margin-top: 30px;
}
.box-hd {
	height: 45px;
}
.box-hd h3 {
	float: left;
	font-style: 20px;
	color: #494949;
}
.box-hd a {
	float: right;
	margin-top: 10px;
	margin-right: 30px;
	font-style: 12px;
	color: #a5a5a5;
}
.box-bd ul {
	width: 1225px;
}
.box-bd ul li {
	/* 把li的父亲ul修改得足够宽,一行能装开5个盒子就不会换行了 */
	/* li 230+15=245   245*5=1225 */
	float: left;
	width: 228px;
	height: 270px;
	margin-right: 15px;
	margin-bottom: 15px;
	background-color: #fff;
}
.box-bd ul li img {
	/* 防止图片超出li大小 */
	width: 100%;
}
.box-bd ul li h4 {
	margin: 20px 20px 20px 25px;
	font-style: 14px;
	color: #050505;
	font-weight: 400;
}
.box-bd .info {
	margin: 0 20px 0 25px;
	font-style: 12px;
	color: #999;
}
.box-bd .info span {
	color: #ff7c2d;
}
.footer {
	height: 415px;
	background-color: #fff;
}
.footer .w {
	padding-top: 35px;
}
.copyright {
	float: left;
}
.copyright p {
	font-style: 12px;
	color: #666;
	margin: 20px 0 15px 0;
}
.copyright .app {
	display: block; 
	width: 118px;
	height: 33px;
	border: 1px solid #00a4ff;
	text-align: center;
	line-height: 33px;
	color: #00a4ff;
	font-style: 16px;
}
.links {
	float: right;
}
.links dl {
	float: left;
	margin-left: 100px;
}
.links dl dt {
	font-style: 16px;
	color: #333;
	margin-bottom: 5px;
}
.links dl dd a {
	font-style: 12px;
	color: #333;
}

wiser个人练习
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
《R语言实战》识记练习及注释手册2018年1月18日版1
08-03
《R语言实战》识记练习及注释手册是一份由李浩宇编写的R语言学习资料，基于《R 语言实战》教材并结合作者个人的学习笔记。这份手册旨在帮助学习者更好地理解和记忆R语言的命令，同时提供练习机会，特别适合初学者。...
学成在线案例练习
weixin_53317758的博客
03-30 313
跟着视频学了一下午还有晚上的网页案例练习，太不容易了真的，分了好四个板块写了284行样式标签 总结一下学成在线的案例把，结合以前学的知识，明天再练习一遍 学成在线案例 案例准备工作 我们本次采取结构与样式相分离的思想 1.创建study目录文件夹(用于存放我们我们这个页面的相关内容) 2.用vscode打开这个目录文件夹 3.study目录内新建images文件夹，用于保存图片 4.新建首页文件index.html(以后我们的网站首页同意规定为index.html) 5.新建style.
微服务实战项目-学成在线-认证授权模块（有项目实战实现）
爪蛙毁一生的博客
07-22 3585
截至目前，项目已经完成了课程发布功能，课程发布后用户通过在线学习页面点播视频进行学习。如何去记录学生的学习过程呢？要想掌握学生的学习情况就需要知道用户的身份信息，记录哪个用户在什么时间学习什么课程，如果用户要购买课程也需要知道用户的身份信息。所以，去管理学生的学习过程最基本的要实现用户的身份认证。认证授权模块实现平台所有用户的身份认证与用户授权功能。什么是用户身份认证？用户身份认证即用户去访问系统资源时系统要求验证用户的身份信息，身份合法方可继续访问。常见的用户身份认证的表现形式有：用户名密码登录，微信扫码
学成在线06day
最新发布
weixin_45894909的博客
04-29 111
2.3 使用线程池实现。
第四章--学成在线--课程发布
Kaka_csdn14的博客
07-02 800
模板引擎 分布式事务技术方案 ES 熔断降级等
关于学成在线中在线学习模块视频无法正确播放的问题
weixin_45744265的博客
03-10 796
1、火狐和谷歌都无法正常播放，返回的是200状态码，可能是播放器的问题。用ie就可以。 2、前端页面测试的时候无法正常显示页面，是因为www.xuecheng.com已经被外部域名注册了，我改成了www.xuechengzaixian.com，那么前端代码、nginx的配置文件中全部要对应上，不然js和css就无法跨域访问并显示。 以下为测试成功界面： ...
基于Python绘制圣诞树源码(学习练习).zip
07-04
在Python编程语言中，绘制图形是一项有趣的练习，可以用来学习和熟悉编程概念。"基于Python绘制圣诞树源码(学习练习)"是一个项目，旨在帮助初学者通过实践来掌握Python的基本绘图技巧。这个项目可能包括使用Python的...
golang-episodes：golang的各个学习阶段
02-18
每个阶段都可能包括详细的注释、解释和相关的练习，鼓励学习者动手实践，加深对Go语言的理解。 总之，`golang-episodes`项目是学习Go语言的一个宝贵资源，它将理论知识与实践案例相结合，帮助开发者从零基础到精通...
UG时尚创作一百例--学习资料
09-13
这份学习资料可能是由一系列教程或案例组成，每个案例都代表一个独特的时尚设计挑战，涵盖了UG软件的不同模块和功能。对于初学者来说，这样的资源极具价值，因为它提供了一个逐步学习和实践UG软件的机会。通过一百个...
练习.zip
03-03
本案例中的文件"练习.zip"是一个压缩包，它可能包含多个文件或文件夹，通过压缩技术将它们整合在一起。下面我们将详细讨论压缩包、ZIP格式以及如何在Windows或Linux等操作系统中处理它们。 首先，我们来看"练习.zip...
学成在线【最全】链接更新于2019/04/23
04-23
学成在线 在线学习网站项目【最全】链接更新于2019/04/23，
学成在线案例.zip
07-14
学习一个星期HTML&CSS后做的项目，内含学成在线网站首页PSD、制作静态页面的HTML代码及CSS代码。
学成网PSD.rar
07-02
前端css切图练习素材包，包含4个psd文件（学成网职业规划.psd 学成网首页.psd 学成网课程列表页.psd 学成网课程介绍页.psd）
学成网案例.rar
05-09
网页开发实例，html5,自己跟着视频做的，超过500行代码，一个完整的网页实例，有很大的参考价值。
案例：学成在线案例（html+css）
a_xia_o的博客
01-29 2675
典型的企业级网站案例：附加HTML代码和CSS样式，适合新手练手
学成在线(案例)
独特的懒人
08-13 1604
学成在线 2. CSS属性书写顺序（重点） 生活中衡量一个人有气质： ​ 穿着打扮 举止言行 等等 编程中如何衡量一个人的代码能力： ​ 规范标准 优雅高质量 等等 一个词形容 专业 从代码中看出是否有经验… 建议遵循以下顺序： 布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式） 自身属性：width / height / margin / padding
【案例】wordPress 案例-干燥综合症网
weixin_33734785的博客
11-04 113
2019独角兽企业重金招聘Python工程师标准>>> ...
学成在线案例
一夜奈何梁山
02-04 2524
一：psd文件云盘保存永久有效 链接：https://pan.baidu.com/s/1ItFk6ELen6WGW1-xy_fC4Q 提取码：lnke 二：代码： style.css /* 清除内外边距 */ *{ margin: 0; padding: 0; } /* 确定版心 */ .w{ width: 1200px; margin: auto; } /* 清除...
mybatis-generator-core1.3.6 带注释下载
01-24
在下载页面上会有相应的注释说明，比如“带注释版本”、“包含注释”等，确保选择了正确的带注释版本，然后点击下载即可。 另外，也可以在开源社区或者其他资源网站上搜索 mybatis-generator-core1.3.6，可能会有...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值