master

分支 (1)

管理

管理

master

project
/
课程列表页.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>学习猿地课程列表页</title>
		<link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_3205184_771t425tmon.css"/>
		<style type="text/css">
			body,ul,li,a{
				padding: 0px;
				margin: 0px;
				list-style: none;
				text-decoration: none;
			}
			body{
				background-color: #f4f4f4;
			}
			/* 头部样式 */
			header{
				width: 100%;
				height: 60px;
				background-color: #fff;
				margin-bottom: 20px;
				box-shadow: 0 0 5px 5px #ccc;
			}
			.top{
				height: 60px;
				width: 60%;
				/* border: 1px solid red; */
				margin: 0 auto;
				display: flex;
				justify-content: space-between;
				/* align-items: center; */
			}
			.top_left{
				/* border: 1px solid red; */
				flex-grow: 1;
				display: flex;
				align-items: center;
			}
			.top_left>img{
				width: 180px;
			}
			.top_center{
				/* border: 1px solid red; */
				flex-grow: 5;
			}
			.top_center>ul{
				height: 60px;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
			.top_center>ul>li{
				/* border: 1px solid red; */
				display: flex;
				align-items: center;
			}
			.top_center>ul>li>a,.top_right>ul>li>a,.top_center>ul>li:nth-child(1)>div>ul>li>a>span{
				font-size: 14px;
				font-weight: bold;
				color: rgba(31,45,61,0.5);
			}
			.top_center>ul>li>img{
				width: 20px;
			}
			.top_center>ul>li:nth-child(1){
				position: relative;
			}
			.top_center>ul>li:nth-child(1):hover>div{
				display: block;
				z-index: 1;
			}
			.top_center>ul>li:nth-child(1)>div{
				/* border: 1px solid red; */
				position: absolute;
				width: 180px;
				top: 30px;
				border-radius: 10px;
				background-color: #fff;
				display: none;
			}
			.top_center>ul>li:nth-child(1)>div>ul>li{
				/* border: 1px solid red; */
				height: 25x;
				text-align: center;
				padding: 3px 10px;
			}
			.top_center>ul>li:nth-child(1)>div>ul>li>a{
				display: flex;
				align-items: center;
			}
			.top_center>ul>li:nth-child(1)>div>ul>li>a>span{
				/* border: 1px solid red; */
				margin-left: 15px;
			}
			.top_center>ul>li:nth-child(1)>div>ul>li>a>img{
				/* border: 1px solid red; */
				width: 30px;
			}
			.top_right{
				/* border: 1px solid red; */
				flex-grow: 2;
			}
			.top_right>ul{
				height: 60px;
				display: flex;
				justify-content: space-around;
				align-items: center;
			}
			nav{
				width: 60%;
				height: 80px;
				margin: 0 auto;
				margin-bottom: 20px;
				box-shadow: 0 0 5px 5px #ccc;
				/* border: 1px solid red; */
				background-color: #fff;
				border-radius: 10px;
			}
			nav>ul{
				height: 80px;
				display: flex;
				justify-content: space-around;
				align-items: center;
			}
			nav>ul>li:first-child{
				/* border: 1px solid red; */
				padding: 10px 30px;
				background-color: #8492a6;
				border-radius: 10px;
			}
			nav>ul>li>a{
				color: #8492a6;
			}
			nav>ul>li:first-child>a{
				color: #fff;
			}
			#content{
				width: 70%;
				/* border: 1px solid blue; */
				margin: 0 auto;
				margin-bottom: 20px;
			}
			.content{
				width: 100%;
				/* border: 1px solid black; */
				/* height: 300px; */
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
			.content>section{
				width: 23%;
				height: 200px;
				margin-bottom: 10px;
				/* border: 1px solid black; */
			}
			.content>section>section:first-child{
				/* border: 1px solid red; */
				position: relative;
			}
			.content>section>section:first-child>span{
				border: 2px solid #fff;
				background-color: #ffaa00;
				border-radius: 10px;
				padding: 2px 5px;
				font-size: 12px;
				color: #fff;
				position: absolute;
				top: 5px;
				left: -10px;
			}
			.content>section>section:first-child>section{
				/* border: 1px solid black; */
				width: 120px;
				display: flex;
				position: absolute;
				justify-content: space-between;
				bottom: 5px;
				left: 5px;
			}
			.content>section>section:first-child>section>article{
				font-size: 12px;
				background-color: rgba(0,0,0,.5);
				/* border: 1px solid blue; */
				color: #fff;
				padding: 2px 5px;
				border-radius: 5px;
			}
			.content>section>section:first-child>img{
				width: 100%;
				border-radius: 10px;
			}
			.content>section>section:nth-child(2){
				margin-bottom: 20px;
				font-size: 14px;
			}
			.content>section>section:nth-child(2):hover{
				color: red;
			}
			.content>section>section:last-child>article>span{
				font-size: 12px;
				color: #8492a6;
			}
			.content>section>section:last-child>article:first-child>span:first-child{
				border: 1px solid red;
				background-color: #b572e5;
				border-radius: 5px;
				color: #fff;
				padding: 2px 3px;
			}
			.content>section>section:last-child>article:first-child>span:last-child>i{
				color: orange;
				letter-spacing: -8px;
			}
			.content>section>section:last-child>article:nth-child(2)>span:last-child{
				border: 1px solid #fff;
				border-radius: 5px;
				background-color: #FFAA00;
				color: #fff;
				padding: 2px 3px;
				margin-left: -2px;
			}
			.content:nth-child(1),.content:nth-child(2){
				margin-bottom: 10px;
			}
			#page{
				width: 60%;
				margin: 0 auto;
				margin-bottom: 20px;
			}
			#page>ul{
				display: flex;
				justify-content: center;
			}
			#page>ul>li{
				/* border: 1px solid red; */
				padding: 0 4px;
				min-width: 30px;
				height: 28px;
				line-height: 28px;
				text-align: center;
				border-radius: 5px;
			}
			#page>ul>li>a{
				font-size: 13px;
				background-color: #f4f4f5;
				color: #606266;
			}
			#page>ul>li>a:hover{
				color: red;
			}
			footer{
				width: 100%;
				background-color: #fff;
				height: 320px;
			}
			.footer{
				width: 60%;
				height: 300px;
				margin: 0 auto;
				/* border: 1px solid red; */
				display: flex;
				justify-content: space-around;
			}
			.footer_bottom{
				width: 60%;
				height: 20px;
				margin: 0 auto;
				text-align: center;
			}
			.footer_left{
				/* border: 1px solid red; */
				width: 350px;
				position: relative;
			}
			.footer_left>img{
				width: 130px;
				position: absolute;
				top: -15px;
				right: calc(50% - 130px / 2);
			}
			.footer_left>p{
				margin-top: 30px;
				text-indent: 2em;
				color: #606266;
			}
			.footer_center{
				/* border: 1px solid red; */
				flex-grow: 2;
				display: flex;
				justify-content: space-around;
			}
			.footer_center>div{
				/* border: 1px solid red; */
			}
			.footer_center>div>h3{
				border-bottom: 1px solid green;
				padding-bottom: 10px;
			}
			.footer_center>div>ul>li{
				text-align: center;
				padding: 5px;
				color: #606266;
			}
			.footer_right{
				/* border: 1px solid red; */
			}
			.footer_right>div{
				margin-top: 80px;
				display: flex;
				flex-direction: column;
			}
			.footer_right>div>img{
				width: 100px;
			}
		</style>
	</head>
	<body>
		<!-- 头部开始 -->
		<header>
			<section class="top">
				<section class="top_left"><img src="img/logo.png" ></section>
				<section class="top_center">
					<ul>
						<li><a href="">更多课程</a><img src="img/爱心.png" >
							<div>
								<ul>
									<li>
										<a href=""><img src="./img/java.png" ><span>java开发工程师</span></a>
									</li>
									<li>
										<a href=""><img src="./img/java.png" ><span>java开发工程师</span></a>
									</li>
									<li>
										<a href=""><img src="./img/java.png" ><span>java开发工程师</span></a>
									</li>
									<li>
										<a href=""><img src="./img/java.png" ><span>java开发工程师</span></a>
									</li>
									<li>
										<a href=""><img src="./img/java.png" ><span>java开发工程师</span></a>
									</li>
									<li>
										<a href=""><img src="./img/java.png" ><span>java开发工程师</span></a>
									</li>
									<li>
										<a href=""><img src="./img/java.png" ><span>java开发工程师</span></a>
									</li>
								</ul>
							</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>
						<li><a href="">猿生态</a></li>
						<li><a href="">猿生态</a></li>
						<li><a href="">猿生态</a></li>
					</ul>
				</section>
				<section class="top_right">
					<ul>
						<li><a href="">注册</a></li>
						<li><a href="">登录</a></li>
					</ul>
				</section>
			</section>
		</header>

		<!-- 导航开始 -->
		<nav>
			<ul>
				<li><a href="">全部</a></li>
				<li><a href="">Java</a></li>
				<li><a href="">Python</a></li>
				<li><a href="">PHP</a></li>
				<li><a href="">Go</a></li>
				<li><a href="">大数据</a></li>
				<li><a href="">前端</a></li>
				<li><a href="">UI/UE</a></li>
				<li><a href="">Linux</a></li>
			</ul>
		</nav>

		<!-- 内容区域 -->
		<section id="content">
			<section class="content">
				<section>
					<section>
						<span>升级</span>
						<img src="./img/contentpage.png" >
						<section>
							<article>python</article>
							<article>核心类库</article>
						</section>
					</section>
					<section>python高级特性</section>
					<section>
						<article>
							<span>python</span>
							<span>高级</span>
							<span class="iconfont icon-user"></span>
							<span>5533</span>
							<span>
								<i class="iconfont icon-favorite"></i>
								<i class="iconfont icon-favorite"></i>
								<i class="iconfont icon-favorite"></i>
								<i class="iconfont icon-favorite"></i>
								<i class="iconfont icon-favorite"></i>
							</span>
						</article>
						<article>
							<span>2022-02-25</span>
							<span>已更新至主课</span>
							<span>限时免费</span>
						</article>
					</section>
				</section>
				<section>
					<section>
						<span>升级</span>
						<img src="./img/contentpage.png" >
						<section>
							<article>python</article>
							<article>核心类库</article>
						</section>
					</section>
					<section>python高级特性</section>
					<section>
						<article>
							<span>python</span>
							<span>高级</span>
							<span class="iconfont icon-user"></span>
							<span>5533</span>
							<span>
								<i class="iconfont icon-favorite"></i>
								<i class="iconfont icon-favorite"></i>
								<i class="iconfont icon-favorite"></i>
								<i class="iconfont icon-favorite"></i>
								<i class="iconfont icon-favorite"></i>
							</span>
						</article>
						<article>
							<span>2022-02-25</span>
							<span>已更新至主课</span>
							<span>限时免费</span>
						</article>
					</section>
				</section>
				<section>
					<section>
						<span>升级</span>
						<img src="./img/contentpage.png" >
						<section>
							<article>python</article>
							<article>核心类库</article>
						</section>
					</section>
					<section>python高级特性</section>
					<section>
						<article>
							<span>python</span>
							<span>高级</span>
							<span class="iconfont icon-user"></span>
							<span>5533</span>
							<span>
								<i class="iconfont icon-favorite"></i>
								<i class="iconfont icon-favorite"></i>
								<i class="iconfont icon-favorite"></i>
								<i class="iconfont icon-favorite"></i>
								<i class="iconfont icon-favorite"></i>
							</span>
						</article>
						<article>
							<span>2022-02-25</span>
							<span>已更新至主课</span>
							<span>限时免费</span>
						</article>
					</section>
				</section>
				<section>
					<section>
						<span>升级</span>
						<img src="./img/contentpage.png" >
						<section>
							<article>python</article>
							<article>核心类库</article>
						</section>
					</section>
					<section>python高级特性</section>
					<section>
						<article>
							<span>python</span>
							<span>高级</span>
							<span class="iconfont icon-user"></span>
							<span>5533</span>
							<span>
								<i class="iconfont icon-favorite"></i>
								<i class="iconfont icon-favorite"></i>
								<i class="iconfont icon-favorite"></i>
								<i class="iconfont icon-favorite"></i>
								<i class="iconfont icon-favorite"></i>
							</span>
						</article>
						<article>
							<span>2022-02-25</span>
							<span>已更新至主课</span>
							<span>限时免费</span>
						</article>
					</section>
				</section>
			</section>
			<section class="content">
				<section>
					<section>
						<span>升级</span>
						<img src="./img/contentpage.png" >
						<section>
							<article>python</article>
							<article>核心类库</article>
						</section>
					</section>
					<section>python高级特性</section>
					<section>
						<article>
							<span>python</span>
							<span>高级</span>
							<span class="iconfont icon-user"></span>
							<span>5533</span>
							<span>
								<i class="iconfont icon-favorite"></i>
								<i class="iconfont icon-favorite"></i>
								<i class="iconfont icon-favorite"></i>
								<i class="iconfont icon-favorite"></i>
								<i class="iconfont icon-favorite"></i>
							</span>
						</article>
						<article>
							<span>2022-02-25</span>
							<span>已更新至主课</span>
							<span>限时免费</span>
						</article>
					</section>
				</section>
				<section>
					<section>
						<span>升级</span>
						<img src="./img/contentpage.png" >
						<section>
							<article>python</article>
							<article>核心类库</article>
						</section>
					</section>
					<section>python高级特性</section>
					<section>
						<article>
							<span>python</span>
							<span>高级</span>
							<span class="iconfont icon-user"></span>
							<span>5533</span>
							<span>
								<i class="iconfont icon-favorite"></i>
								<i class="iconfont icon-favorite"></i>
								<i class="iconfont icon-favorite"></i>
								<i class="iconfont icon-favorite"></i>
								<i class="iconfont icon-favorite"></i>
							</span>
						</article>
						<article>
							<span>2022-02-25</span>
							<span>已更新至主课</span>
							<span>限时免费</span>
						</article>
					</section>
				</section>
				<section>
					<section>
						<span>升级</span>
						<img src="./img/contentpage.png" >
						<section>
							<article>python</article>
							<article>核心类库</article>
						</section>
					</section>
					<section>python高级特性</section>
					<section>
						<article>
							<span>python</span>
							<span>高级</span>
							<span class="iconfont icon-user"></span>
							<span>5533</span>
							<span>
								<i class="iconfont icon-favorite"></i>
								<i class="iconfont icon-favorite"></i>
								<i class="iconfont icon-favorite"></i>
								<i class="iconfont icon-favorite"></i>
								<i class="iconfont icon-favorite"></i>
							</span>
						</article>
						<article>
							<span>2022-02-25</span>
							<span>已更新至主课</span>
							<span>限时免费</span>
						</article>
					</section>
				</section>
				<section>
					<section>
						<span>升级</span>
						<img src="./img/contentpage.png" >
						<section>
							<article>python</article>
							<article>核心类库</article>
						</section>
					</section>
					<section>python高级特性</section>
					<section>
						<article>
							<span>python</span>
							<span>高级</span>
							<span class="iconfont icon-user"></span>
							<span>5533</span>
							<span>
								<i class="iconfont icon-favorite"></i>
								<i class="iconfont icon-favorite"></i>
								<i class="iconfont icon-favorite"></i>
								<i class="iconfont icon-favorite"></i>
								<i class="iconfont icon-favorite"></i>
							</span>
						</article>
						<article>
							<span>2022-02-25</span>
							<span>已更新至主课</span>
							<span>限时免费</span>
						</article>
					</section>
				</section>
			</section>
		</section>

		<!-- 分页开始 -->
		<section id="page">
			<ul>
				<li><a href="" class="iconfont icon-arrow-left-bold"></a></li>
				<li><a href="">1</a></li>
				<li><a href="">2</a></li>
				<li><a href="">3</a></li>
				<li><a href="">4</a></li>
				<li><a href="">...</a></li>
				<li><a href="">10</a></li>
				<li><a href="" class="iconfont icon-arrow-right-bold"></a></li>
			</ul>
		</section>

		<!-- 底部开始 -->
		<footer>
			<footer class="footer">
				<section class="footer_left">
					<img src="img/logo.png" >
					<p>学习猿地根据IT方向的线上学习特点，研发人机互动教学系统， 打造领先的学习模式。平台签约了十名大牛联合创办， 每个合伙人再召集几名身边的技术大咖，根据程序员的岗位需求研发精品课程， 并将一门学科中所需要的全部学习资料汇总在一起， 且实时更新。 选中一门课程即拥有全部的精品学习资源，不需要再找其它资源补充。</p>
				</section>
				<section class="footer_center">
					<div>
						<h3>新手指南</h3>
						<ul>
							<li>挑选课程</li>
							<li>挑选课程</li>
							<li>挑选课程</li>
							<li>挑选课程</li>
							<li>挑选课程</li>
						</ul>
					</div>
					<div>
						<h3>新手指南</h3>
						<ul>
							<li>挑选课程</li>
							<li>挑选课程</li>
							<li>挑选课程</li>
							<li>挑选课程</li>
							<li>挑选课程</li>
						</ul>
					</div>
					<div>
						<h3>新手指南</h3>
						<ul>
							<li>挑选课程</li>
							<li>挑选课程</li>
							<li>挑选课程</li>
							<li>挑选课程</li>
							<li>挑选课程</li>
						</ul>
					</div>
				</section>
				<section class="footer_right">
					<div>
						<img src="img/qrcodenew.png" >
						<span>学习猿地公众号</span>
					</div>

				</section>
			</footer>
			<footer class="footer_bottom">实猿科技 学习猿地-LMONKEY</footer>
		</footer>
	</body>
</html>