目录
一、内容展示
二、HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div id="app">
<div class="head">
<div class="box main">
<div>客服热线:95083</div>
<div>立即登录 | 快速注册 | 最新公告 | app下载</div>
</div>
</div>
<div class="nav main">
<h2>全栈学院</h2>
<ul>
<li>
<input type="text" class="search" placeholder="请输入搜索内容">
</li>
<li>首页</li>
<li>包图网</li>
<li>包图大学</li>
<li>课程排期</li>
<li>往期课程</li>
<li>讲师团</li>
<li>课件下载</li>
</ul>
</div>
<div class="content main">
<p>首页>包图大学>课程列表>课程详情</p>
<div class="content_r">
<div class="banner">
<p>响应式开发让一切都是弹性的</p>
<span>一套代码适配多终端 用户体验和开发效率 完美结合</span>
</div>
<div class="banner_r">
<p>包图网系统模式 —— 初级培训班 一期一班</p>
<ul class="list">
<li>
<p>3天</p>
<span>课程时长</span>
</li>
<li>
<p>50人</p>
<span>开课人数</span>
</li>
<li>
<p>31人</p>
<span>已报名人数</span>
</li>
<li>
<p>3天</p>
<span>课程时长</span>
</li>
</ul>
<div class="desc">
<ul>
<li>
<span>开课学院</span>
<p>包图大学总院</p>
</li>
<li>
<span>开课场地</span>
<p>包图大学3楼305会议室</p>
</li>
<li>
<span>往期学院</span>
<p>已有<span>156454</span>人参加学习</p>
</li>
</ul>
<ul>
<li>
<span>开课时间</span>
<p>2016-8-11 09:30</p>
</li>
<li>
<span>结束时间</span>
<p>2016-8-11 09:30</p>
</li>
</ul>
</div>
<div class="foot">
<div>
<ul class="btn">
<li>包住宿</li>
<li class="li_l">包三餐</li>
<li class="li_l">初级</li>
<li class="li_l">颁发证书</li>
</ul>
<div class="price">
<span>￥ 999.0</span>
<button>￥ 999.00</button>
</div>
</div>
<div class="foot_r">
<div>
<img src="./imgs/1_07.jpg" alt="">分享
<img src="./imgs/1_09.jpg" alt=""><span class="collection">收藏</span>
<span>已收藏</span>
</div>
<div class="logo">
<img src="./imgs/1_14.jpg" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>三、css文件
html,body,h2,p,ul{
margin: 0;
padding: 0;
font-size: 16px;
}
#app{
width: 100vw;
background-color: #fff;
}
.main{
width: 75vw;
margin: auto;
}
/* 头部 */
.head{
width: 100%;
height: 30px;
background-color:rgb(42, 130, 219);
color: white;
line-height: 30px;
font-size: 14px;
}
.box{
display: flex;
justify-content: space-between;
}
/* 导航 */
.nav,.nav ul{
display: flex;
justify-content: space-between;
margin-top: 10px;
}
.nav h2{
color: rgb(42, 130, 219);
font-size: 30px;
}
.search{
border:1px solid rgb(42, 130, 219);
border-radius: 25px;
padding: 5px;
box-sizing: border-box;
outline: none;
background: url(./../imgs/1_03.jpg) right center no-repeat;
background-position: 150px 5px;
}
.nav ul{
list-style: none;
width: 700px;
}
.nav ul>li:nth-child(-n+3){
color: rgb(42, 130, 219);
}
.nav ul>li:hover{
color: rgb(255, 170, 0);
}
/* 主体 */
.content >p{
margin-top: 20px;
font-size: 13px;
}
.content_r{
display: flex;
margin-top: 20px;
}
.banner{
width: 460px;
height: 300px;
color: white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-image: linear-gradient(to bottom, rgb(90, 167, 248), rgb(201, 242, 250));
}
.banner p{
letter-spacing: 5px;
font-size: 20px;
margin-bottom: 10px;
}
.banner span{
font-size: 14px;
}
.banner_r{
margin-left: 40px;
}
.list{
list-style: none;
list-style-position: outside;
padding: 0;
display: flex;
margin-top: 20px;
}
.list li{
/* border-right: 1px solid #ddd; */
width: 100px;
position: relative;
}
.list li:nth-child(-n+3):after{
content: "";
position: absolute;
right: 20px;
top: 50%;
transform: translate(0, -50%);
width: 0;
height: 35px;
border: 1px solid #dcdcdc;
}
.list li>span{
font-size: 13px;
color: #a4a4a4;
}
.desc{
display: flex;
font-size: 14px;
margin-top: 20px;
}
.desc>ul{
padding: 0;
}
.desc>ul>li{
width: 300px;
display: flex;
line-height: 30px;
}
.desc>ul>li>span{
color: #a4a4a4;
}
.desc>ul>li>p{
margin-left: 20px;
}
.desc>ul>li>p>span{
color: rgb(90, 167, 248);
}
.foot{
display: flex;
overflow: hidden;
}
.btn{
list-style: none;
list-style-position: outside;
padding: 0;
display: flex;
margin-top: 20px;
}
.btn>li{
width: 80px;
height: 30px;
text-align: center;
line-height: 30px;
border: 2px solid rgb(90, 167, 248);
border-radius: 5px;
color:rgb(90, 167, 248) ;
}
.li_l{
margin-left: 10px;
}
.price{
margin-top: 20px;
font-size: 25px;
}
.price>span{
color: #a4a4a4;
text-decoration: line-through;
}
.price>button{
font-size: 25px;
width: 200px;
height: 35px;
border: none;
background-color:rgb(255, 170, 0) ;
border-radius: 5px;
color: white;
}
.foot_r{
margin: 30px 50px ;
color: rgb(90, 167, 248);
font-size: 13px;
}
.collection{
color: #a4a4a4;
}
.collection~span{
margin-left: 20px;
}
.foot_r>div>img{
vertical-align: middle;
margin-right: 5px;
}
.logo{
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 25px;
border: 1px solid #dddddd;
border-radius: 5px;
box-shadow:#f6f6f6 3px 3px 3px 1px;
margin-top: 20px;
margin-left: -30px;
}四、结束语
本节内容主要展示了一个pc端售课静态页面，小伙伴们可以参考一下。