黑马程序员 学成在线案例代码

于 2025-05-06 08:00:51 发布
阅读量279 收藏 7
点赞数 4
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_62052414/article/details/147033489
版权

1效果图展示

2源代码

2.1html代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>学成在线</title>
		<link rel="stylesheet" href="css/base.css">
		<link rel="stylesheet" href="css/index.css">
	</head>
	<body>
		<!-- 头部区域 -->
		<div class="header">
			<div class="wrapper">
				<!-- logo -->
				<div class="logo">
					<h1><a href="#">学成在线</a></h1>
				</div>

				<!-- 导航 -->
				<div class="nav">
					<ul>
						<li><a href="#" class="active">首页</a></li>
						<li><a href="#">课程</a></li>
						<li><a href="#">职业规划</a></li>
					</ul>
				</div>

				<!-- 搜索 -->
				<div class="search">
					<input type="text" placeholder="请输入关键字">
					<a href="#"></a>
				</div>

				<!-- 用户 -->
				<div class="user">
					<a href="#">
						<img src="./uploads/user.png" alt="">
						<span>洛白white</span>
					</a>
				</div>
			</div>
		</div>

		<!--banner 区域-->
		<div class="banner">
			<div class="wrapper">
				<div class="left">
					<ul>
						<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="#">UI设计</a></li>
						<li><a href="#">产品</a></li>
					</ul>
				</div>
				<div class="right">
					<h3>我的课程表</h3>
					<div class="content">
						<dl>
							<dt>数据可视化课程</dt>
							<dd><span>正在学习</span>-<strong>echarts使用步骤</strong></dd>
						</dl>
						<dl>
							<dt>Vue3医疗项目课程</dt>
							<dd><span>正在学习</span>-<strong>认识组合式API</strong></dd>
						</dl>
						<dl>
							<dt>React核心技术课程</dt>
							<dd><span>正在学习</span>-<strong>rudex配合TS使用</strong></dd>
						</dl>
						<a href="#">全部课程</a>
					</div>
				</div>
			</div>
		</div>

		<!--精品推荐-->
		<div class="recommend wrapper">
			<h3>精品推荐</h3>
			<ul>
				<li><a href="#">HTML</a></li>
				<li><a href="#">CSS</a></li>
				<li><a href="#">JavaScript</a></li>
				<li><a href="#">Node.js</a></li>
				<li><a href="#">Ajax</a></li>
				<li><a href="#">Vue2.0</a></1i>
				<li><a href="#">Vue3.0</a></li>
				<li><a href="#">TypeScript</a></li>
				<li><a href="#">React</a></li>
			</ul>
			<a href="#" class="modify">修改兴趣</a>
		</div>

		<!-- 精品课程 -->
		<div class="course wrapper">
			<!-- 标题 -->
			<div class="hd">
				<h3>精品推荐</h3>
				<a href="#" class="more">查看全部</a>
			</div>
			<!-- 内容 -->
			<div class="bd">
				<ul>
					<li>
						<a href="#">
							<div class="pic"><img src="./uploads/course01.png" alt=""></div>
							<div class="text">
								<h4>JavaScript数据看板项目实战JavaScript数据看板项目实战</h4>
								<p><span>高级</span> · <i>1125</i>人在学习</p>
							</div>
						</a>
					</li>
					<li>
						<a href="#">
							<div class="pic"><img src="./uploads/course01.png" alt=""></div>
							<div class="text">
								<h4>JavaScript数据看板项目实战</h4>
								<p><span>高级</span> · <i>1125</i>人在学习</p>
							</div>
						</a>
					</li>
					<li>
						<a href="#">
							<div class="pic"><img src="./uploads/course01.png" alt=""></div>
							<div class="text">
								<h4>JavaScript数据看板项目实战</h4>
								<p><span>高级</span> · <i>1125</i>人在学习</p>
							</div>
						</a>
					</li>
					<li>
						<a href="#">
							<div class="pic"><img src="./uploads/course01.png" alt=""></div>
							<div class="text">
								<h4>JavaScript数据看板项目实战</h4>
								<p><span>高级</span> · <i>1125</i>人在学习</p>
							</div>
						</a>
					</li>
					<li>
						<a href="#">
							<div class="pic"><img src="./uploads/course01.png" alt=""></div>
							<div class="text">
								<h4>JavaScript数据看板项目实战</h4>
								<p><span>高级</span> · <i>1125</i>人在学习</p>
							</div>
						</a>
					</li>
					<li>
						<a href="#">
							<div class="pic"><img src="./uploads/course01.png" alt=""></div>
							<div class="text">
								<h4>JavaScript数据看板项目实战</h4>
								<p><span>高级</span> · <i>1125</i>人在学习</p>
							</div>
						</a>
					</li>
					<li>
						<a href="#">
							<div class="pic"><img src="./uploads/course01.png" alt=""></div>
							<div class="text">
								<h4>JavaScript数据看板项目实战</h4>
								<p><span>高级</span> · <i>1125</i>人在学习</p>
							</div>
						</a>
					</li>
					<li>
						<a href="#">
							<div class="pic"><img src="./uploads/course01.png" alt=""></div>
							<div class="text">
								<h4>JavaScript数据看板项目实战</h4>
								<p><span>高级</span> · <i>1125</i>人在学习</p>
							</div>
						</a>
					</li>
					<li>
						<a href="#">
							<div class="pic"><img src="./uploads/course01.png" alt=""></div>
							<div class="text">
								<h4>JavaScript数据看板项目实战</h4>
								<p><span>高级</span> · <i>1125</i>人在学习</p>
							</div>
						</a>
					</li>
					<li>
						<a href="#">
							<div class="pic"><img src="./uploads/course01.png" alt=""></div>
							<div class="text">
								<h4>JavaScript数据看板项目实战</h4>
								<p><span>高级</span> · <i>1125</i>人在学习</p>
							</div>
						</a>
					</li>
				</ul>
			</div>
		</div>

		<!-- 前端 -->
		<div class="wrapper">
			<!-- 标题 -->
			<div class="hd">
				<h3>前端开发工程师</h3>
				<ul>
					<li><a href="#" class="active">热门</a></li>
					<li><a href="#">初级</a></li>
					<li><a href="#">中级</a></li>
					<li><a href="#">高级</a></li>
				</ul>
				<a href="#" class="more">查看全部</a>
			</div>
			<div class="bd">
				<div class="left">
					<img src="./uploads/left.png" alt="" />
				</div>
				<div class="right">
					<div class="top">
						<img src="./uploads/top.png" alt="" />
					</div>
					<div class="bottom">
						<ul>
							<li>
								<a href="#">
									<div class="pic"><img src="./uploads/course01.png" alt=""></div>
									<div class="text">
										<h4>JavaScript数据看板项目实战</h4>
										<p><span>高级</span> · <i>1125</i>人在学习</p>
									</div>
								</a>
							</li>
							<li>
								<a href="#">
									<div class="pic"><img src="./uploads/course01.png" alt=""></div>
									<div class="text">
										<h4>JavaScript数据看板项目实战</h4>
										<p><span>高级</span> · <i>1125</i>人在学习</p>
									</div>
								</a>
							</li>
							<li>
								<a href="#">
									<div class="pic"><img src="./uploads/course01.png" alt=""></div>
									<div class="text">
										<h4>JavaScript数据看板项目实战</h4>
										<p><span>高级</span> · <i>1125</i>人在学习</p>
									</div>
								</a>
							</li>
							<li>
								<a href="#">
									<div class="pic"><img src="./uploads/course01.png" alt=""></div>
									<div class="text">
										<h4>JavaScript数据看板项目实战</h4>
										<p><span>高级</span> · <i>1125</i>人在学习</p>
									</div>
								</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>

		<!-- 版权 -->
		<div class="footer">
			<div class="wrapper">
				<div class="left">
					<a href="#"><img src="./images/logo.png" alt=""></a>
					<p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。
						@2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</p>
					<a href="#" class="download">下载APP</a>
				</div>
				<div class="right">
					<dl>
						<dt>合作伙伴</dt>
						<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>

2.2css代码

2.2.1base.css

/* 基础公共样式：清除默认样式+设置通用样式 */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/* 去掉列表的项目符号 */
li {
	list-style: none;
}

body {
	font: 14px/1.5 "Microsoft Yahei", "Hiragino Sans GB", "Heiti Sc", "WenQuanYi Micro Hei", sans-serif;
	color: #333;
}

a {
	color: #333;
	text-decoration: none;
}

2.2.2index.css

/* 首页样式 */
/* 版心居中 */
.wrapper {
	margin: 0 auto;
	width: 1200px;
}

body {
	background-color: #f3f5f7;
}

/*头部区域 */
.header {
	height: 100px;
	background-color: #fff;
}

.header .wrapper {
	padding-top: 29px;
	display: flex;
}

/* logo */
.logo a {
	display: block;
	width: 195px;
	height: 41px;
	background-image: url(../images/logo.png);
	/* 隐藏文字 */
	font-size: 0;
}

/* 导航 */
.nav {
	margin-left: 100px;
}

.nav ul {
	display: flex;
}

.nav li {
	margin-right: 24px;
}

.nav li a {
	display: block;
	padding: 6px 8px;
	line-height: 27px;
	font-size: 19px;
}

/* actvie 类选择器，表示默认选中的a */
.nav li .active,
.nav li a:hover {
	border-bottom: 2px solid #00a4ff;
}

/* 搜索 */
.search {
	display: flex;
	margin-left: 64px;
	padding-left: 19px;
	padding-right: 12px;
	width: 412px;
	height: 40px;
	background-color: #f3f5f7;
	border-radius: 20px;
}

.search input {
	flex: 1;
	border: 0;
	/* transparent透明 */
	background-color: transparent;
	/*去掉表单控件的焦点框*/
	outline: none;
}

/*::placeholder 选中就是 placeholder 属性文字样式*/
.search input::placeholder {
	font-size: 14px;
	color: #999;
}

/*父级是flex布局，子级变弹性盒子:加宽高生效*/
.search a {
	align-self: center;
	width: 16px;
	height: 16px;
	background: url(../images/search.png) no-repeat left top/contain;
}

/* 用户 */
.user {
	margin-left: 32px;
}

.user img {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	margin-right: 7px;
	/*vertical-align 行内块和行内垂直方向对齐方式 */
	vertical-align: middle;
}

.user span {
	font-size: 16px;
	color: #666;
}

/* banner区域 */
.banner {
	height: 420px;
	/* background-color: #0092cb; */
	background-color: #1c036c;
}

.banner .wrapper {
	display: flex;
	justify-content: space-between;
	height: 420px;
	background-image: url(../uploads/banner.png);
}


/*侧导航 */
.banner .left {
	width: 200px;
	height: 420px;
	background-color: rgba(0, 0, 0, 0.42);
}

.banner .left a {
	/* 优化a标签点击范围，是一整行 */
	padding: 0 20px;
	/*块级:宽度是父级的100%*/
	display: block;
	height: 46px;
	line-height: 46px;
	font-size: 16px;
	color: #fff;
	background: url(../images/right.png) no-repeat right center;
	/* 设置背景图片大小 */
	background-size: 15%;
	/* 让行内块和块水平居中 */
	vertical-align: middle;
}

.banner .left a:hover {
	background-image: url(../images/right-hover.png);
	color: #00a4ff;
}

/* 课程表 */
.banner .right {
	margin-top: 60px;
	width: 218px;
	height: 305px;
	background-color: #209dd5;
	border-radius: 10px;
}

.banner .right h3 {
	margin: 0 14px;
	height: 48px;
	line-height: 48px;
	font-size: 15px;
	color: #fff;
	font-weight: 400;
}

.banner .right .content {
	padding: 14px;
	height: 257px;
	background-color: #fff;
	border-radius: 10px;
}

.banner .right dl {
	margin-bottom: 12px;
	border-bottom: 1px solid #e0e0e0;
}

.banner .right dt {
	margin-bottom: 8px;
	line-height: 20px;
	font-size: 14px;
	font-weight: 700;
}

.banner .right dd {
	margin-bottom: 8px;
	line-height: 16px;
	font-size: 12px;
}

.banner .right dd span {
	color: #00a4ff;
}

.banner .right dd strong {
	color: #7d7d7d;
	font-weight: 400;
}

.banner .right a {
	display: block;
	height: 32px;
	line-height: 32px;
	text-align: center;
	color: #fff;
	background-color: #00a4ff;
	border-radius: 15px;
}

/*精品推荐*/
.recommend {
	display: flex;
	margin-top: 10px;
	padding: 0 20px;
	height: 60px;
	line-height: 60px;
	background-color: #fff;
	box-shadow: 0px 1px 2px 0px rgba(211, 211, 211, 0.5);
}

.recommend h3 {
	color: #00a4ff;
	font-size: 18px;
	font-weight: 400;
}

.recommend ul {
	/*除去标题和修改兴趣的尺寸，父级剩余尺寸都给u1，实现把修改兴趣挤到最右侧*/
	flex: 1;
	display: flex;
}

.recommend ul li a {
	padding: 0 24px;
	font-size: 18px;
	border-right: 1px solid #e0e0e0;
}

.recommend ul li:last-child a {
	border-right: 0;
}

.recommend .modify {
	color: #00a4ff;
	font-size: 16px;
}

/*推荐课程 */
.course {
	margin-top: 15px;
}

.hd {
	display: flex;
	justify-content: space-between;
	height: 60px;
	line-height: 60px;
}

.hd h3 {
	font-size: 21px;
	font-weight: 400;
}

.hd .more {
	padding-right: 20px;
	color: #999;
	font-size: 14px;
	background: url(../images/more.png) no-repeat right center;
	background-size: 25%;
}

/*课程内容-公共类*/
.bd ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.bd li {
	margin-bottom: 14px;
	width: 228px;
	height: 270px;
	background-color: pink;
	overflow: hidden;
}

.bd li .pic {
	height: 156px;
}

.bd li .text {
	padding: 20px;
	height: 115px;
	background-color: #fff;
}

.bd li .text h4 {
	margin-bottom: 13px;
	height: 40px;
	line-height: 20px;
	font-size: 14px;
	font-weight: 400;
}

.bd li .text p {
	line-height: 20px;
	color: #999;
	font-size: 14px;
}

.bd li .text p span {
	color: #fa6400;
}

.bd li .text p i {
	font-style: normal;
}

/* 前端 */
.hd ul {
	display: flex;
}

.hd li {
	margin-right: 60px;
	font-size: 16px;
}

.hd li .active {
	color: #00a4ff;
}

.bd {
	display: flex;
	justify-content: space-between;
}

.bd .left {
	width: 228px;
	/* background-color: pink; */
}

.bd .right {
	width: 957px;
	/* background-color: pink; */
}

.bd .right .top {
	margin-bottom: 15px;
	height: 100px;
}

/* 版权 */
.footer {
	margin-top: 60px;
	padding-top: 60px;
	height: 273px;
	background-color: #fff;
}

.footer .wrapper {
	display: flex;
	justify-content: space-between;
}

.footer .left {
	width: 440px;
	/* background-color: pink; */
}

.footer .left p {
	margin-top: 24px;
	margin-bottom: 14px;
	line-height: 17px;
	color: #666;
	font-size: 12px;
}

.footer .left .download {
	display: block;
	width: 120px;
	height: 36px;
	line-height: 34px;
	border: 1px solid #00a4ff;
	color: #00a4ff;
	font-size: 16px;
	text-align: center;
}

.footer .right {
	display: flex;
}

.footer .right dl {
	margin-left: 130px;
}

.footer .right dt {
	margin-bottom: 12px;
	line-height: 24px;
	font-size: 16px;
}

.footer .right a {
	line-height: 30px;
	color: #666;
	font-size: 14px;
}

2.3线上地址

3重点总结

3.1网页制作思路

3.2版心

 代码要写在 index.css文件中。谁需要版心居中效果就添加该类。

3.2logo

3.3input搜索框

.search input {
    flex: 1;
    border: 0;
    /* transparent透明 */
    background-color: transparent;
    /*去掉表单控件的焦点框*/
    outline: none;
}

/*::placeholder 选中就是 placeholder 属性文字样式*/
.search input::placeholder {
    font-size: 14px;
    color: #999;
}

3.4父flex子a不需要display:block;

父级是flex布局，子级变弹性盒子:加宽高生效

3.5背景图大小

盒子+背景图：素材中放大镜的大小是200*200，而设计稿需要16*16，如果只写图片路径就会导致图片不显示，只是因为位置不够显示不完整。所以当图片素材大小  大于  盒子大小时，需要设置背景图位置和缩放模式，background: url(../images/search.png) no-repeat left top/contain;}。因为是等比例，所以contain和cover效果一样。

文字+背景图：/* 设置背景图片大小 */ background-size: 15%;

3.6vertical-align

/*vertical-align 行内块和行内垂直方向对齐方式 */  vertical-align: middle;

 

洛白white
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值