实例
<style type="text/css">
body{
min-width: 320px;
max-width: 768px;
margin: 0 auto;
background: #edeff0;
overflow-y: initial;
position: relative;
/* 不要出现水平滚动条 */
overflow-x: hidden;
/* 防止点击链接,高亮,设置为透明 */
-webkit-tap-highlight-color: transparent;
}
ul,li,h4{
list-style: none;
padding: 0;
margin: 0;
}
a{
text-decoration: none;
}
.header{
/* 定位 */
position: fixed;
top: 0;
left:0;
/* 大小 */
min-width: 320px;
max-width: 768px;
width: 100%;
height: 42px;
/* 背景 */
background: #444444;
/* 不确定宽度的居中对齐 */
left: 50%;
-webkit-transform: translateX(-50%); /* 通常放到上面 */
transform: translateX(-50%);
/* 弹性布局 */
display: flex;
}
.header img:first-of-type,
.header img:last-of-type {
width: 25px;
height: 25px;
margin-top: 8px;
}
.header img:first-of-type{
border-radius: 50%;
margin-left: 6px;
}
.header .logo{
text-align: center;
flex: 1;
}
.header .logo img{
width: 94px;
height: 45px;
margin-top: -2px;
}
/* banner */
.banner{
display: flex;
}
.banner img{
width: 100%;
height: 160px;
}
/* nav */
.nav{
height: 170px;
background-color: #fff;
box-sizing: border-box;
}
.nav ul{
display: flex;
padding: 6px;
}
.nav ul li{
flex: 1; /* 剩余空间平均分配 */
text-align: center;
height: 75px;
}
.nav ul li img{
width: 45px;
height: 45px;
}
.nav ul li a{
text-align: center;
color: gray;
}
/* 推荐课程区 */
h3{
color: gray;
}
.courses{
height: 326px;
}
.courses ul{
display: flex;
}
.courses ul li{
padding: 6px;
}
.courses ul li img{
width: 100%;
height: 90px;
}
.courses div{
background: #fff;
padding: 6px;
margin-top: 10px;
height: 90px;
display: flex;
}
.courses div img{
width: 100%;
height: 90px;
}
.courses div a{
color: gray;
flex: 0.45; /* 分配所占空间 */
}
.courses div p{
flex: 0.55;
margin-left: 15px;
}
.courses div p span:first-of-type{
font-size: 0.8rem;
background-color: black;
color: #fff;
border-radius: 30%;
padding: 0 2px;
}
.courses div p span:last-of-type{
font-size: 0.6rem;
}
/* 最新更新 */
.gengxin{
height: 90px;
background: #fff;
margin-top: 15px;
padding: 10px 0px;
display: flex;
padding-left: 6px;
}
.gengxin a{
flex: 0.45;
}
.gengxin img{
width: 100%;
height: 90px;
}
.gengxin .info{
flex: 0.55;
margin-left: 15px;
}
.gengxin .info h4{
font-size: 1rem;
}
.gengxin .info .desc{
color: gray;
font-size: 0.6rem;
overflow:hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.gengxin .info .remark{
box-sizing: border-box;
}
.gengxin .info .remark span:first-of-type{
background: #444;
color: #fff;
border-radius: 30%;
font-size: 0.6rem;
padding: 3px;
box-sizing: border-box;
}
.gengxin .info .remark span:last-of-type{
color: gray;
float: right;
margin-top: 5px;
margin-right: 10px;
font-size: 0.6rem;
}
/* 最新文章 */
.newArticle{
background: #fff;
display: flex;
justify-content:center;
align-items: center;
margin-top: 10px;
}
.newArticle .arc{
flex: 0.7;
padding-left: 8px;
}
.newArticle .arc p:first-of-type{
color: gray;
font-weight: bold;
}
.newArticle .arc p:last-of-type{
color: gray;
font-size: 0.5rem;
}
.newArticle a{
flex: 0.3;
}
.newArticle img{
width: 100%;
height: 65px;
}
.more{
height: 40px;
background: #fff;
margin-top: 6px;
display: flex;
justify-content: center;
align-items: center;
flex: 1;
font-size: 0.8rem;
}
.more a{
color: gray;
}
/* 最新博文 */
.blog{
margin-top: 10px;
height: 246px;
}
.blog a{
margin-top: 5px;
background: #fff;
display: flex;
align-items: center;
color: gray;
padding-left: 5px;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);
border-bottom: 1px solid #eee;
}
.blog a p{
flex: 0.8;
}
.blog a span{
flex: 0.2;
}
/* 底部 */
body{
height: 2400px;
}
.footer{
position: fixed;
bottom: 0;
width: 100%;
height: 42px;
min-width: 320px;
max-width: 768px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.footer ul{
display: flex;
text-align: center;
}
.footer ul li img{
width: 20px;
height: 20px;
}
.footer ul li{
flex: 1;
}
.footer ul li a{
color: gray;
}
</style>
<!-- 头部 -->
<div class="header">
<img src="http://xiaowanzizi.cn3v.net/static/images/user-pic.jpeg">
<div class="logo">
<img src="http://xiaowanzizi.cn3v.net/static/images/logo.png">
</div>
<img src="http://xiaowanzizi.cn3v.net/static/images/user-nav.jpg">
</div>
<!-- banner -->
<div class="banner">
<img src="http://xiaowanzizi.cn3v.net/static/images/banner.jpg">
</div>
<!-- 导航区 -->
<div class="nav">
<ul>
<li><a href=""><img src="http://xiaowanzizi.cn3v.net/static/images/html.png" alt=""><br>HTML/CSS</a></li>
<li><a href=""><img src="http://xiaowanzizi.cn3v.net/static/images/JavaScript.png" alt=""><br>Javascript</a></li>
<li><a href=""><img src="http://xiaowanzizi.cn3v.net/static/images/html.png" alt=""><br>服务端</a></li>
<li><a href=""><img src="http://xiaowanzizi.cn3v.net/static/images/html.png" alt=""><br>数据库</a></li>
</ul>
<ul>
<li><a href=""><img src="http://xiaowanzizi.cn3v.net/static/images/html.png" alt=""><br>HTML/CSS</a></li>
<li><a href=""><img src="http://xiaowanzizi.cn3v.net/static/images/JavaScript.png" alt=""><br>Javascript</a></li>
<li><a href=""><img src="http://xiaowanzizi.cn3v.net/static/images/html.png" alt=""><br>服务端</a></li>
<li><a href=""><img src="http://xiaowanzizi.cn3v.net/static/images/html.png" alt=""><br>数据库</a></li>
</ul>
</div>
<!-- 推荐课程 -->
<h3>推荐课程</h3>
<div class="courses">
<ul>
<li><a href=""><img src="http://xiaowanzizi.cn3v.net/static/images/tjkc1.jpg" alt=""></a></li>
<li><a href=""><img src="http://xiaowanzizi.cn3v.net/static/images/tjkc2.jpg" alt=""></a></li>
</ul>
<div>
<a href=""><img src="http://xiaowanzizi.cn3v.net/static/images/tjkc3.jpg" alt=""></a>
<p>
<a href="">课程名称课程名称</a>
<br>
<span>中级</span><span>5555次播放</span>
</p>
</div>
<div>
<a href=""><img src="http://xiaowanzizi.cn3v.net/static/images/tjkc4.jpg" alt=""></a>
<p>
<a href="">课程名称课程名称</a>
<br>
<span>初级</span><span>5555次播放</span>
</p>
</div>
</div>
<!-- 最新更新 -->
<h3>最新更新</h3>
<div class="gengxin">
<a href=""><img src="http://xiaowanzizi.cn3v.net/static/images/tjkc4.jpg" alt=""></a>
<div class="info">
<h4>我是标题我是标题我是标</h4>
<p class="desc">我是表述我是表述我是表述我是表述我是表述</p>
<p class="remark">
<span>初级</span>
<span>1688次播放</span>
</p>
</div>
</div>
<div class="gengxin">
<a href=""><img src="http://xiaowanzizi.cn3v.net/static/images/tjkc4.jpg" alt=""></a>
<div class="info">
<h4>我是标题我是标题我是标</h4>
<p class="desc">我是表述我是表述我是表述我是表述我是表述</p>
<p class="remark">
<span>初级</span>
<span>1688次播放</span>
</p>
</div>
</div>
<div class="gengxin">
<a href=""><img src="http://xiaowanzizi.cn3v.net/static/images/tjkc4.jpg" alt=""></a>
<div class="info">
<h4>我是标题我是标题我是标</h4>
<p class="desc">我是表述我是表述我是表述我是表述我是表述</p>
<p class="remark">
<span>初级</span>
<span>1688次播放</span>
</p>
</div>
</div>
<div class="gengxin">
<a href=""><img src="http://xiaowanzizi.cn3v.net/static/images/tjkc4.jpg" alt=""></a>
<div class="info">
<h4>我是标题我是标题我是标</h4>
<p class="desc">我是表述我是表述我是表述我是表述我是表述</p>
<p class="remark">
<span>初级</span>
<span>1688次播放</span>
</p>
</div>
</div>
<!-- 最新文章 -->
<h3>最新文章</h3>
<div class="newArticle">
<div class="arc">
<p>文章标题文章标题文章标题</p>
<p>2019-09-14 19:25</p>
</div>
<a href=""><img src="http://xiaowanzizi.cn3v.net/static/images/arc.jpg"></a>
</div>
<div class="newArticle">
<div class="arc">
<p>文章标题文章标题文章标题</p>
<p>2019-09-14 19:25</p>
</div>
<a href=""><img src="http://xiaowanzizi.cn3v.net/static/images/arc.jpg"></a>
</div>
<div class="newArticle">
<div class="arc">
<p>文章标题文章标题文章标题</p>
<p>2019-09-14 19:25</p>
</div>
<a href=""><img src="http://xiaowanzizi.cn3v.net/static/images/arc.jpg"></a>
</div>
<div class="more">
<a href="">更多...</a>
</div>
<!-- 最新博文 -->
<h3>最新博文</h3>
<div class="blog">
<a href="">
<p>我是标题我是标题我是标题我是标题</p>
<span>09-14</span>
</a>
<a href="">
<p>我是标题我是标题我是标题我是标题</p>
<span>09-14</span>
</a>
<a href="">
<p>我是标题我是标题我是标题我是标题</p>
<span>09-14</span>
</a>
<a href="">
<p>我是标题我是标题我是标题我是标题</p>
<span>09-14</span>
</a>
</div>
<div class="more">
<a href="">更多...</a>
</div>
<!-- 最新问答 -->
<h3>最新问答</h3>
<div class="blog">
<a href="">
<p>我是标题我是标题我是标题我是标题</p>
<span>09-14</span>
</a>
<a href="">
<p>我是标题我是标题我是标题我是标题</p>
<span>09-14</span>
</a>
<a href="">
<p>我是标题我是标题我是标题我是标题</p>
<span>09-14</span>
</a>
<a href="">
<p>我是标题我是标题我是标题我是标题</p>
<span>09-14</span>
</a>
</div>
<div class="more">
<a href="">更多...</a>
</div>
<!-- 底部 -->
<div class="footer">
<ul>
<li><a href=""><img src="http://xiaowanzizi.cn3v.net/static/font-icon/zhuye.png" alt=""><br><span>主页</span></a></li>
<li><a href=""><img src="http://xiaowanzizi.cn3v.net/static/font-icon/video.png" alt=""><br><span>视频</span></a></li>
<li><a href=""><img src="http://xiaowanzizi.cn3v.net/static/font-icon/luntan.png" alt=""><br><span>文章</span></a></li>
<li><a href=""><img src="http://xiaowanzizi.cn3v.net/static/font-icon/geren.png" alt=""><br><span>我的</span></a></li>
</ul>
</div>运行实例 »
点击 "运行实例" 按钮查看在线实例
总结： 本次作业主要用到flex方式盒子布局，简单快捷，响应式值得应用。