目录
0x00 分析页面构造
设计稿中每一个方框都是一个div。只要是我们认为应该捆绑在一起的元素，就应该用一个div包着它们
头部就是三张图片，然后垂直居中
轮播图暂时设置为一个静态的图片
分类就是ul li 然后左浮动，每一个设置为25%
0x01 实战编写静态页面
编写移动端页面时加入这行信息配置
<meta name='viewpoint' content="width=device-width,initial-scale=1.0,user-scalable=0,minimum-scale=1.0,maximum-scale=1.0"/>以上这行配置信息的作用如下：
width=device-width 宽度为设备宽度，如果你的页面宽度小于设备宽度，就需要修改一下这个属性，不然的话会出现页面可以左右滑动的情况。
initial-scale=1.0 初始的缩放比例
minimum-scale 允许用户缩放到的最小比例
maximum-scale 允许用户缩放到的最大比例
user-scalable 用户是否可以手动缩放
<!DOCTYPE html>
<html>
<head>
<meta name='viewpoint' content="width=device-width,initial-scale=1.0,user-scalable=0,minimum-scale=1.0,maximum-scale=1.0">
<meta charset="utf-8">
<title>项目实战</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
li{
list-style: none;
}
body{
background: #f6f6f6;
}
.header{
position:fixed;
top:0;
left:0;
/*border:1px solid black;*/
height: 50px;
line-height: 50px;
width: 100%;
background:white;
padding-left: 5%;
}
.header img{
vertical-align: middle;
}
.logo{
margin-right:45%;
height:24px;
width:82px;
}
.search,.userimg{
width:24px;
height:24px;
margin-left:5%;
}
.bannerwrap{
margin-top:50px;
}
.bannerwrap img{
height:100%;
width:100%;
}
.classifywrap{
margin-top:10px;
background: white;
padding-bottom: 5px;
}
.classify{
overflow: hidden;
}
.classify li{
float:left;
width:25%;
text-align: center;
}
.classify .icon{
width:40px;
height:40px;
line-height:40px;
text-align: center;
border-radius: 50%;
background: #4a95dc;
font-size: 18px;
color:white;
/*只有行内 块级元素才能被设置对其属性*/
display: inline-block;
margin:10px 0;
}
.classify .list{
color:#7e8c8d;
}
.coursewrap{
width:100%;
background: white;
padding:0 5%;
box-sizing: border-box;
margin:10px 0;
margin-bottom: 92px;
}
.hotwrap{
height:50px;
line-height:50px;
}
.hotwrap img{
width:25px;
height:25px;
/*和文本的底部对其*/
vertical-align:text-bottom;
}
.courselist{
overflow: hidden;
}
.courselist li{
float:left;
width:44%;
margin:3%;
}
.coursepost{
width:100%;
height:80px;
}
.coursepost img{
width:100%;
height:100%;
border-radius: 8%;
}
.coursetitle{
font-size:13px;
color:#333;
margin-top:5px;
}
.levelprice{
overflow:hidden;
margin-top:5px;
}
.level{
float:left;
font-size:12px;
color:#333;
}
.price{
float:right;
color:red;
font-size:12px;
}
#bottomwrap{
position:fixed;
bottom:0;
left:0;
width:100%;
height:92px;
}
</style>
</head>
<body>
<!-- 页面头部 -->
<div class='header'>
<img class ='logo' src="img/logo.png">
<img class ='search'src="img/search.png">
<img class ='userimg' src="img/userimg.png">
</div>
<!-- 轮播图 -->
<div class='bannerwrap'>
<img src="./img/banner.jpeg">
</div>
<!-- 分类 -->
<div class='classifywrap'>
<ul class='classify'>
<li>
<div class='icon'>前</div>
<p class='list'>前端</p>
</li>
<li>
<div class='icon'>后</div>
<p class='list'>后端</p>
</li>
<li>
<div class='icon'>维</div>
<p class='list'>运维</p>
</li>
<li>
<div class='icon'>测</div>
<p class='list'>测试</p>
</li>
</ul>
</div>
<!-- 课程栏目 -->
<div class='coursewrap'>
<div class='hotwrap'>
<img src="img/hot.png">
热门推荐
</div>
<ul class='courselist'>
<li>
<div class='coursepost'>
<img src="./img/1.png">
</div>
<p class='coursetitle'>springboot从入门到精通</p>
<div class='levelprice'>
<p class='level'>级别:中级</p>
<p class='price'>价钱:29.8</p>
</div>
</li>
<li>
<div class='coursepost'>
<img src="./img/2.png">
</div>
<p class='coursetitle'>vue2.5核心技术解析</p>
<div class='levelprice'>
<p class='level'>级别:中级</p>
<p class='price'>价钱:29.8</p>
</div>
</li>
<li>
<div class='coursepost'>
<img src="./img/3.png">
</div>
<p class='coursetitle'></p>
<div class='levelprice'>
<p class='level'>级别:中级</p>
<p class='price'>价钱:29.8</p>
</div>
</li>
<li>
<div class='coursepost'>
<img src="./img/4.png">
</div>
<p class='coursetitle'></p>
<div class='levelprice'>
<p class='level'>级别:中级</p>
<p class='price'>价钱:29.8</p>
</div>
</li>
</ul>
</div>
<!-- 底部导航 -->
<div class='classifywrap' id='bottomwrap'>
<ul class='classify'>
<li>
<div class='icon'>前</div>
<p class='list'>前端</p>
</li>
<li>
<div class='icon'>后</div>
<p class='list'>后端</p>
</li>
<li>
<div class='icon'>维</div>
<p class='list'>运维</p>
</li>
<li>
<div class='icon'>测</div>
<p class='list'>测试</p>
</li>
</ul>
</div>
</body>
</html>