所有的
1.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">
<title>学成在线</title>
</head>
<link rel="stylesheet" href="css.css">
<style>
</style>
<body>
<!-- 导航栏 -->
<div class=" w header ">
<div class="logo"></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="输入关键词" class="wenben">
<input type="button" value="" class="anniu">
</div>
<div class="denglu"></div>
</div>
<!-- baner部分 -->
<div class="baner">
<div class="w">
<div class="liebiao">
<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="#">前端开发<span>></span></a>
</li>
<li>
<a href="#">前端开发<span>></span></a>
</li>
</div>
<div class="kechengbiao">
<h5>我的课程表</h5>
<ul>
<li>
<p>继续学习程序语言设计</p><span>正在学习-使用对象</span>
</li>
<li>
<p>继续学习程序语言设计</p><span>正在学习-使用对象</span>
</li>
<li>
<p>继续学习程序语言设计</p><span>正在学习-使用对象</span>
</li>
</ul>
<a href="#">全部课程</a>
</div>
</div>
</div>
<div class="goods">
<h5>精品推荐</h5>
<ul>
<li>
<span>|</span>
<p>JQuery</p>
</li>
<li>
<span>|</span>
<p>JQuery</p>
</li>
<li>
<span>|</span>
<p>JQuery</p>
</li>
<li>
<span>|</span>
<p>JQuery</p>
</li>
<li>
<span>|</span>
<p>JQuery</p>
</li>
<li>
<span>|</span>
<p>JQuery</p>
</li>
</ul>
<div>
<a href="#">修改兴趣</a>
</div>
</div>
<div class="box w">
<div class="hd">
<h5>精品推荐</h5>
<a href="#">查看全部</a>
</div>
<div class="bd">
<ul class="clearfix">
<li>
<a href="#"><img src="image/bd.png" alt="">
<h5>Think PHP 5.0 博客系统实战项目演练 </h5>
<span>高级</span> .
<p>1125人在学习</p>
</a>
</li>
<li>
<a href="#"><img src="image/bd.png" alt="">
<h5>Think PHP 5.0 博客系统实战项目演练 </h5>
<span>高级</span> .
<p>1125人在学习</p>
</a>
</li>
<li>
<a href="#"><img src="image/bd.png" alt="">
<h5>Think PHP 5.0 博客系统实战项目演练 </h5>
<span>高级</span> .
<p>1125人在学习</p>
</a>
</li>
<li>
<a href="#"><img src="image/bd.png" alt="">
<h5>Think PHP 5.0 博客系统实战项目演练 </h5>
<span>高级</span> .
<p>1125人在学习</p>
</a>
</li>
<li>
<a href="#"><img src="image/bd.png" alt="">
<h5>Think PHP 5.0 博客系统实战项目演练 </h5>
<span>高级</span> .
<p>1125人在学习</p>
</a>
</li>
<li>
<a href="#"><img src="image/bd.png" alt="">
<h5>Think PHP 5.0 博客系统实战项目演练 </h5>
<span>高级</span> .
<p>1125人在学习</p>
</a>
</li>
<li>
<a href="#"><img src="image/bd.png" alt="">
<h5>Think PHP 5.0 博客系统实战项目演练 </h5>
<span>高级</span> .
<p>1125人在学习</p>
</a>
</li>
<li>
<a href="#"><img src="image/bd.png" alt="">
<h5>Think PHP 5.0 博客系统实战项目演练 </h5>
<span>高级</span> .
<p>1125人在学习</p>
</a>
</li>
<li>
<a href="#"><img src="image/bd.png" alt="">
<h5>Think PHP 5.0 博客系统实战项目演练 </h5>
<span>高级</span> .
<p>1125人在学习</p>
</a>
</li>
<li>
<a href="#"><img src="image/bd.png" alt="">
<h5>Think PHP 5.0 博客系统实战项目演练 </h5>
<span>高级</span> .
<p>1125人在学习</p>
</a>
</li>
</ul>
</div>
</div>
<div class="bianjirumen w">
<div class="left">
<h5>编辑入门</h5>
</div>
<div class="center"><a href="">热门</a>
<a href="">初级</a>
<a href="">中级</a>
<a href="">高级</a></div>
<div class="right"><a href="">查看全部</a>
</div>
</div>
<div class="end w">
<div class="left">
<img src="image/学成在线.png" alt="">
<p class="xiangxia">学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。</p>
<p> © 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</p>
<a href="#">下载app</a>
</div>
<div class="guanyu">
<h5>关于学成网</h5>
<ul>
<li>关于</li>
<li>管理团队</li>
<li>工作机会</li>
<li>客服服务</li>
<li>帮助</li>
</ul>
</div>
<div class="guanyu xinshou">
<h5>新手指南</h5>
<ul>
<li>如何注册</li>
<li>如何选课</li>
<li>如何拿到毕业证</li>
<li>学分是什么</li>
<li>考试未通过怎么办</li>
</ul>
</div>
<div class="guanyu">
<h5>合作伙伴</h5>
<ul>
<li>合作机构</li>
<li>合作导师</li>
</ul>
</div>
</div>
</body>
<!-- 270 230 -->
</html>css部分
* {
margin: 0;
padding: 0;
}
body {
height: 9000px;
}
/* 清除浮动 */
.clearfix:after {
content: " ";
display: block;
clear: both;
height: 0;
}
.clearfix {
zoom: 1;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
.w {
width: 1200px;
margin: auto;
}
.header {
height: 42px;
/* background-color: pink; */
margin: 30px auto;
}
.logo {
float: left;
width: 195px;
height: 42px;
background-image: url(image/学成在线.png);
}
.header .nav ul li {
float: left;
}
.header .nav ul li a {
float: left;
display: block;
height: 42px;
line-height: 42px;
color: #424243;
padding: 0 30px;
font-size: 17px;
}
.header .nav ul li a:hover {
border-bottom: solid 1px #00a4ff;
color: #00a4ff;
}
.header .nav {
float: left;
display: block;
padding-left: 80px;
}
.header .search {
float: left;
height: 42px;
color: blue;
}
.search .wenben {
float: left;
width: 362px;
height: 40px;
border: solid 1px #00a4ff;
}
.search .anniu {
float: left;
border: none;
width: 50px;
height: 41px;
background-image: url(image/按钮.png);
}
.header .denglu {
float: right;
width: 117px;
height: 30px;
background-image: url(image/登陆状态.png);
margin: 6px 20px;
}
.baner {
height: 421px;
background-color: #1c036c;
}
.baner .w {
width: 1200px;
height: 420px;
background-image: url(image/banner2.png);
}
.baner .w .liebiao {
float: left;
width: 192px;
height: 421px;
background-color: rgba(0, 0, 0, .3);
}
.liebiao ul li {
height: 46px;
line-height: 46px;
padding: 0 20px;
}
.liebiao ul li a {
color: #f3f5f7;
font-size: 14px;
}
.liebiao ul li a span {
float: right;
}
.liebiao ul li a:hover {
color: #00a4ff;
}
.kechengbiao {
float: right;
width: 230px;
height: 300px;
background-color: #fff;
margin: 60px 0px;
}
.kechengbiao h5 {
display: block;
height: 48px;
background-color: #9bceea;
font-size: 18px;
color: #fff;
line-height: 48px;
text-align: center;
}
.kechengbiao ul li p {
font-size: 18px;
}
.kechengbiao ul li span {
color: #bfbfbf;
}
.kechengbiao ul li {
width: 191px;
height: 61px;
margin: 5px 19px;
border-bottom: solid 1px #bfbfbf;
}
.kechengbiao a {
display: block;
width: 200px;
height: 40px;
font-size: 16px;
line-height: 40px;
text-align: center;
border: solid 2px #00a4ff;
margin: 0px 15px;
}
.goods {
width: 1200px;
height: 60px;
margin: 10px auto;
box-shadow: 1px 4px 4px rgba(0, 0, 0, .3);
}
.goods h5 {
float: left;
display: inline-block;
line-height: 60px;
font-size: 16px;
color: #00a4ff;
padding: 0px 35px;
}
.goods ul li {
float: left;
padding: 0px 25px;
line-height: 60px;
}
.goods ul li p {
display: inline-block;
font-size: 16px;
margin-left: 25px;
}
.goods div {
float: right;
display: inline-block;
line-height: 60px;
}
.goods div a {
color: #00a4ff;
display: inline-block;
font-size: 15px;
padding: 0px 30px;
}
.box {
margin-top: 30px;
}
.hd {
height: 40px;
}
.hd h5 {
float: left;
}
.hd a {
float: right;
display: block;
font-size: 12px;
margin-top: 10px;
color: #d8d9db;
margin-right: 30px;
}
.bd ul li {
float: left;
background-color: #ffffff;
width: 228px;
height: 270px;
margin-right: 15px;
margin-bottom: 14px;
}
.bd ul li a img {
width: 100%;
}
.bd ul li a h5 {
font-size: 14px;
font-weight: 400;
margin: 20px;
color: #050505;
}
.bd ul li a h5:hover {
font-size: 14px;
font-weight: 400;
margin: 20px;
color: red;
}
.bd ul li a span {
font-size: 12px;
color: #ff7c2d;
margin-left: 24px;
}
.bd ul li a p {
display: inline-block;
font-size: 12px;
color: #999;
}
.bd ul {
width: 1215px;
}
.bianjirumen {
height: 79px;
background-color: #fff;
}
.bianjirumen .left h5 {
float: left;
font-size: 20px;
line-height: 79px;
}
.bianjirumen .center {
float: left;
line-height: 79px;
margin-left: 350px;
}
.bianjirumen .center a {
font-size: 16px;
color: #868686;
margin-right: 60px;
}
.bianjirumen .right a {
float: right;
display: inline-block;
margin-right: 60px;
line-height: 79px;
}
.bianjirumen a:hover {
font-size: 16px;
color: #00a4ff;
margin-right: 60px;
}
.end {
height: 157px;
background-color: #fff;
}
.end .left p {
font-size: 12px;
}
.end .left {
float: left;
}
.end .left .xiangxia {
margin-top: 20px;
}
.end .left a {
display: inline-block;
width: 120px;
height: 36px;
border: solid 1px #fff;
color: #fff;
font-size: 16px;
line-height: 36px;
margin-top: 15px;
text-align: center;
}
.end .left a:hover {
display: inline-block;
width: 120px;
height: 36px;
border: solid 1px #00a4ff;
color: #00a4ff;
font-size: 16px;
line-height: 36px;
margin-top: 15px;
text-align: center;
}
.end .guanyu {
float: left;
display: inline-block;
margin-left: 180px;
}
.end .guanyu h5 {
font-size: 16px;
font-weight: 400;
}
.end .guanyu ul {
margin-top: 15px;
}
.end .guanyu ul li {
font-size: 12px;
margin-top: 6px;
}
.end .xinshou {
margin-left: 140px;
}
/* 200 40 228 270 */image里的图片
banner2.png
bd.png
按钮.png
登录状态.png
学成在线.png
最终整体效果：
学成在线的ps版本发不成文件，有人要是想要学成在线ps版本的话，加qq2198372748联系
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
