学成在线项目源码

于 2022-10-04 18:00:02 发布
阅读量220 收藏
点赞数
分类专栏： 前端 文章标签： html5 javascript css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_47698498/article/details/127164386
版权
本文详细探讨了HTML5和CSS3在实际项目中的应用，重点讲解了如何确定并管理各个模块的CSS样式。同时，强调了在处理相互嵌套的HTML标签时应注意的细节，并提倡在源码中添加注释以提高代码可读性。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >



*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}


li{
	list-style: none;
}



a{
	text-decoration: none;
}
.clearfix:before,clearfix:after{
	content:"";
	display: table;
}
.clearfix:after{
	clear:both
}

body{
	background-color: #f3f5f7;
}

/*版心*/
.wrapper{
	width: 1200px;
	margin: 0 auto;
	
}

/*头部*/
.header{
	height: 42px;
	/*background-color: pink;*/
	/*margin-top: 30px;
	margin-bottom: 30px;*/
	margin:30px auto;
	
}
h1{
	float:left;
}
/*导航*/
.nav{
	float:left;
	margin-left: 70px;
	height: 42px;
		
}
.nav li{
	
	float: left;
	margin-right: 26px;
}
.nav li a{
	display: block;
	padding: 0 9px;
	height:42px ;
	line-height: 42px;
	/*border-bottom:2px solid #00a4ff;*/
	font-size: 18px;
	color: #050505;
}
.nav li a:hover{
	border-bottom:2px solid #00a4ff;
}
/*搜索区*/
.search{
	float:left;
	margin-left: 59px;
	width: 412px;
	height: 40px;
	border:1px solid #00A4FF;
	
}
.search input{
	float:left;
	padding-left: 20px;
	width: 360px;
	height: 38px;
	border: 0;
}
/*控制placeholder的样式*/
.search input::placeholder{
	font-size: 14px;
	color: #bfbfbf;
}
.search button{
	float: left;
	width: 50px;
	height: 40px;
	background-image: url(../images/btn.png);
	border:0 ;
}
.user{
	float: right;
	margin-right:35px ;
	height: 42px;
	line-height: 42px;
}
.user img{/*调节图片垂直对齐方式,middle是居中*/
	vertical-align: middle;
}



/*第二个模块*/
.banner{
	height: 420px;
	background-color:#1c036c;
}

.banner .wrapper{
	height: 420px;
	background-image:url(../images/banner2.png) ;
}

.banner .left{
	float:left;
	padding: 0 20px;
	width: 190px;
	height: 420px;
	background-color: rgb(0,0,0,0.3);
	
	line-height: 44px;
}

.banner .left span{
	float: right;
}

.banner .left a{
	font-size: 14px;
	color: #fff;
	
}
.banner .left a:hover{
	color: #00b4ff;
}

.banner .right{
	float:right;
	width: 228px;
	margin-top: 50px;
	height: 300px;
	background-color: #fff;
}

.banner .right h2{
	height: 48px;
	background-color: #9bceea;
	text-align: center;
	line-height: 48px;
	font-size: 18px;
	color: #FFFFFF;
}
.banner .right comment{
	padding: 0 18px;
}
.banner .right .content dl{
	padding: 12px 0;
	border-bottom: 2px solid #e5e5e5;
	
}

.banner .right .content dd{
	font-size: 14px;
	color:#4e4e4e;
}
.banner .right .more{
	display: block;
	width: 200px;
	height: 40px;
	border:1px solid #00a4ff;
	margin: 4px auto 0;
	
	font-size: 16px;
	color:#00a4ff;
	font-weight: 700;
	text-align: center;
	line-height: 40px;
}
.goods{
	margin-top: 8px;
	padding-left:34px ;
	padding-right:26px ;
	height: 60px;
	background-color: #fff;
	box-shadow: 0px 2px 3px 0px;
		rgb(118,118,118,0.2);
		
	line-height: 60px;
}
.goods h2{
	float:left;
	font-size: 16px;
	color: #00a4ff;
	font-weight: 400;
}
.goods ul{
	float:left;
	margin-left: 30px;
	
}
.goods ul li{
	float:left;
	
	
}
.goods li a{
	float:left;
	boder-left:1px solid #bfbfbf;
	padding: 0 30px;
	font-size: 16px;
	color: #050505;
}
.goods .xingqu{
	float:right;
	font-size: 14px;
	color:#00a4ff;
}
/*精品课程*/
.box{
	margin-top:35px ;
	
}
.box .title{
	height: 40px;
	
}
.box .title h2{
	float:left;
	font-size: 20px;
	color: #494949;
	font-weight: 400;
}

.box .title a{
	float:right;
	margin-right: 30px;
	font-size: 12px;
	color: #a5a5a5;
	
}

.box .content li{
	float:left;
	margin-right: 15px;
	margin-bottom: 15px;
	width: 228px;
	height: 270px;
	background-color: #fff;
	
}

.box .content li:nth-child(5n){
	margin-right: 0;
	
}

.box .content li h3{
	padding: 20px;
	font-size: 14px;
	color: #050505;
	font-weight: 400;
}

.box .content li p{
	padding:0 20px;
	font-size: 12px;
	color:#999;
	
}

.box .content li span{
	color: #ff7c2d;
	
}

.footer{
	height: 417px;
	background-color: #fff;
}

.footer .left{
	float:left;
	
}
.footer .left p{
	margin: 20px 0 10px;
	font-size: 12px;
	color:#666;
}
.footer .right{
	float:right
}

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

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

每个部分的CSS样式,每个模块的样式要确定好

相互嵌套的标签需要注意,有空闲时间添加注释看起来会更方便

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>学成在线网站首页</title>
		<link rel="stylesheet" href="css/index.css" />
	</head>
	<body>
		<!--网站首页-->
		<!--布局-->
		<!--css-->
		
		<!--头部,负责头部区域样式-->
		<div class="header wrapper">
			<h1>
				<a href="#"> <img src="images/logo.png" alt=""></a>
			</h1>
		<!--导航-->
			<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" placeholder="请输入关键词"><button></button>
			</div>
			
			<!--用户登录-->
			<div class="user">
				<img src="images/user.png" alt="">
				<span>lilei</span>
			</div>
		</div>
		</div>
		
		<!--轮插图-->
		<div class="banner">
			<div class="wrapper">
				<div class="left">
					<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>
						<li><a href="#">后端开发<span>></span></a></li>
					</ul>
				</div>
						
				<div class="right">
					<h2>我的课程表</h2>
					<div class="content">
						<dl>
							<dt>继续学习&nbsp程序语言设计</dt>
							<dd>正在学习使用对象</dd>
						</dl>
						<dl>
							<dt>继续学习&nbsp程序语言设计</dt>
							<dd>正在学习使用对象</dd>
						</dl>
						<dl>
							<dt>继续学习&nbsp程序语言设计</dt>
							<dd>正在学习使用对象</dd>
						</dl>		
				</div>
				<a href="#" class="more">全部课程</a>
				</div>
			
			</div>
		</div>
		<!--精品推荐-->
		<div class="goods wrapper">
			<h2>精品推荐</h2>
			<ul>
				<li><a href="#">JQuery</a></li>
				<li><a href="#">Spark</a></li>
				<li><a href="#">Mysql</a></li>
				<li><a href="#">Spark</a></li>
				<li><a href="#">Mysql</a></li>
				<li><a href="#">Mysql</a></li>
			</ul>
			<a href="#" class="xingqu">修改兴趣</a>
		</div>
			
		<!--精品推荐-->
		<div class="box wrapper">
			<div class="title">
				<h2>精品推荐</h2>
				<a href="#">查看全部</a>
			</div>
			<div class="content clearfix">
				<ul>
					<li>
						<a href="#">
							<img src="images/course01.png" alt="">
							<h3>THink PHP 5.0 博客系统实战项目演练</h3>
							<p><span>高级</span> . 1125人在学习</p>
						</a> 
					</li>
				
					<li>
						<a href="#">
							<img src="images/course02.png" alt="">
							<h3>THink PHP 5.0 博客系统实战项目演练</h3>
							<p><span>高级</span> . 1125人在学习</p>
						</a> 
					</li>
				
					<li>
						<a href="#">
							<img src="images/course03.png" alt="">
							<h3>THink PHP 5.0 博客系统实战项目演练</h3>
							<p><span>高级</span> . 1125人在学习</p>
						</a> 
					</li>
				
					<li>
						<a href="#">
							<img src="images/course04.png" alt="">
							<h3>THink PHP 5.0 博客系统实战项目演练</h3>
							<p><span>高级</span> . 1125人在学习</p>
						</a> 
					</li>
				
					<li>
						<a href="#">
							<img src="images/course05.png" alt="">
							<h3>THink PHP 5.0 博客系统实战项目演练</h3>
							<p><span>高级</span> . 1125人在学习</p>
						</a> 
					</li>
				
					<li>
						<a href="#">
							<img src="images/course06.png" alt="">
							<h3>THink PHP 5.0 博客系统实战项目演练</h3>
							<p><span>高级</span> . 1125人在学习</p>
						</a> 
					</li>
				
					<li>
						<a href="#">
							<img src="images/course07.png" alt="">
							<h3>THink PHP 5.0 博客系统实战项目演练</h3>
							<p><span>高级</span> . 1125人在学习</p>
						</a> 
					</li>
				
					<li>
						<a href="#">
							<img src="images/course07.png" alt="">
							<h3>THink PHP 5.0 博客系统实战项目演练</h3>
							<p><span>高级</span> . 1125人在学习</p>
						</a> 
					</li>
				
					<li>
						<a href="#">
							<img src="images/course07.png" alt="">
							<h3>THink PHP 5.0 博客系统实战项目演练</h3>
							<p><span>高级</span> . 1125人在学习</p>
						</a> 
					</li>
				
				
					<li>
						<a href="#">
							<img src="images/course07.png" alt="">
							<h3>THink PHP 5.0 博客系统实战项目演练</h3>
							<p><span>高级</span> . 1125人在学习</p>
						</a> 
					</li>
				</ul>
			</div>
		</div>
		<!--版权-->
		<div class="footer">
			<div class="wrapper">
				<div class="left">
					<img src="images/logo.png" alt="">
					<p>学成在线致力于普及中国最好的教育它,与中国一流大学和机构合作提供在线课程.</p><br>2017年TXCG INc.保留所有权利</p>
					<a href="#">下载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>
					</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>

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值