实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
min-width: 320px;
max-width: 768px;
margin: 0 auto;
background: #edeff0;
background-color: rgb(236, 236, 236);
overflow-y: initial;
position: relative;
/*不要出现水平滚动条*/
overflow-x: hidden;
/*设置点击链接跳转时出现高亮,设置为透明: ios / ipad*/
-webkit-tap-highlight-color: transparent;
height: 2000px;
}
.top {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 42px;
background-color: #444444;
min-width: 320px;
max-width: 768px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.top {
display: flex;
}
.top img:first-of-type,
.top img:last-of-type {
width: 25px;
height: 25px;
margin-top: 8px;
border-radius: 50%;
}
.top img:first-of-type {
border-radius: 50%;
margin-left: 5px;
}
.top .logo {
text-align: center;
flex: 1;
}
.top .logo img {
width: 94px;
height: 44px;
margin: 0;
}
.banner {
display: flex;
margin-top: 42px;
}
.banner img {
width: 100%;
height: 160px;
}
/*nav*/
.nav {
height: 170px;
background-color: white;
box-sizing: border-box;
}
.nav ul {
margin: 0;
padding: 8px;
}
.nav ul li {
list-style-type: none;
text-align: center;
height: 75;
}
.nav ul li img {
width: 45px;
height: 45px;
}
.nav ul li a {
text-decoration: none;
text-align: center;
color: gray;
}
.nav ul {
display: flex;
}
.nav ul li {
flex: 1;
}
/* 最新课程 */
h3 {
margin: 0;
padding: 15px 0 5px 5px;
color: gray;
}
.courses {
/* margin-bottom: 5px; */
/* height: 416px; */
color: gray;
margin-bottom: 5px;
}
.courses ul {
margin: 10px 0;
padding: 0;
list-style: none;
display: flex;
}
.courses ul li {
padding: 5px;
}
.courses ul li img {
width: 100%;
height: 90px;
padding-top: 5px;
}
.courses .courses-box {
background-color: white;
padding: 10px;
margin-top: 5px;
height: 90px;
display: flex;
justify-content: flex-start;
}
.courses .courses-box img {
width: 100%;
height: 90px;
}
.courses .courses-box a {
text-decoration: none;
color: gray;
flex: 0.45;
}
.courses .courses-box p {
flex: 0.55;
margin-left: 15px;
}
.courses .courses-box p span:first-of-type {
font-size: 0.8rem;
background-color: black;
color: white;
border-radius: 30%;
padding: 0 2px;
}
.courses .courses-box p span:last-of-type {
font-size: 0.7rem;
}
/* second */
h4 {
margin: 5px 0;
padding: 0;
color: gray;
}
.courses ul {
background-color: white;
}
.courses .courses-list {
flex: 0.45;
}
.courses .courses-list a,
.courses .courses-pic a {
text-decoration: none;
}
.courses .courses-list img,
.courses .courses-pic img {
width: 100%;
}
.courses .courses-intro {
flex: 0.55;
margin: 0;
padding: 0;
}
.courses .courses-intro .courses-intro-info {
margin: 0;
padding: 5px 0 0 0;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
width: 350px;
}
.courses .courses-intro .level {
font-size: 0.6rem;
border-radius: 30%;
background-color: black;
text-align: center;
color: white;
padding: 0 5px;
}
.courses .courses-intro .count {
font-size: 0.8rem;
float: right;
padding-right: 15px;
}
.courses .courses-pic {
flex: 0.35;
}
.courses .courses-intro2 {
flex: 0.65;
margin: 0;
padding: 0 5px;
}
.courses .courses-intro2 h4 {
padding-top: 5px;
}
.courses .courses-intro2 .time {
font-size: 0.8rem;
}
.more {
margin: 0;
padding: 0;
width: 100%;
height: 35px;
background-color: white;
text-align: center;
}
.more a {
text-decoration: none;
line-height: 35px;
color: gray;
}
.courses-blog .courses-blog-list {
background-color: white;
margin: 5px 0;
}
.courses-blog .courses-blog-list ul {
margin: 0;
padding: 0;
height: 45px;
}
.courses-blog .courses-blog-list ul li {
display: flex;
margin: 0;
padding: 0 5px;
}
.courses-blog .courses-blog-list ul li a {
flex: 0.85;
line-height: 45px;
font-weight: bold;
text-decoration: none;
color: gray;
}
.courses-blog .courses-blog-list li span {
flex: 0.15;
line-height: 45px;
font-size: 0.8rem;
color: gray;
}
/* 底部信息 */
.footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 57px;
min-width: 320px;
max-width: 768px;
border-top: 1px solid #ccc;
background-color: rgb(236, 236, 236);
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.footer ul {
display: flex;
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
.footer ul li {
flex: 1;
}
.footer ul li img {
width: 20px;
height: 20px;
padding: 5px 0;
}
.footer ul li a {
text-decoration: none;
color: gray;
padding-bottom: 5px;
}
</style>
</head>
<body>
<div class="top">
<img src="https://m.php.cn/static/images/user_avatar.jpg" alt="">
<div class="logo"><img src="https://m.php.cn/static/images/logo.png" alt=""></div>
<img src="https://m.php.cn/static/images/user_avatar.jpg" alt="">
</div>
<div class="banner">
<img src="https://m.php.cn/static/images/ico/3.jpg" alt="">
</div>
<div class="nav">
<ul>
<li>
<a href=""><img src="https://m.php.cn/static/images/ico/html.png" alt=""><br>HTML+CSS</a>
</li>
<li>
<a href=""><img src="https://m.php.cn/static/images/ico/JavaScript.png" alt=""><br>JavaScript</a>
</li>
<li>
<a href=""><img src="https://m.php.cn/static/images/ico/code.png" alt=""><br>服务端</a>
</li>
<li>
<a href=""><img src="https://m.php.cn/static/images/ico/sql.png" alt=""><br>数据库</a>
</li>
</ul>
<ul>
<li>
<a href=""><img src="https://m.php.cn/static/images/ico/app.png" alt=""><br>移动端</a>
</li>
<li>
<a href=""><img src="https://m.php.cn/static/images/ico/manual.png" alt=""><br>手册</a>
</li>
<li>
<a href=""><img src="https://m.php.cn/static/images/ico/tool2.png" alt=""><br>工具</a>
</li>
<li>
<a href=""><img src="https://m.php.cn/static/images/ico/live.png" alt=""><br>直播</a>
</li>
</ul>
</div>
<div class="courses">
<h3>推荐课程</h3>
<ul>
<li>
<a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d242759adb88970.jpg" alt=""></a>
</li>
<li>
<a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d242759adb88970.jpg" alt=""></a>
</li>
</ul>
<div class="courses-box">
<a href=""><img src="https://img.php.cn/upload/course/000/000/035/5d2941e265889366.jpg" alt=""></a>
<p>
<a href="">CI框架30分钟极速入门</a>
<br>
<span>中级</span><span>49900次播放</span>
</p>
</div>
<div class="courses-box">
<a href=""><img src="https://img.php.cn/upload/course/000/126/153/5aa23f0ded921649.jpg" alt=""></a>
<p>
<a href="">2018前端入门_HTML5</a>
<br>
<span>初级</span><span>211259次播放</span>
</p>
</div>
</div>
<div class="courses">
<h3>最新更新</h3>
<ul>
<li class="courses-list">
<a href=""><img src="https://img.php.cn/upload/course/000/000/020/5d521d6cbbeb7258.jpg" alt=""></a>
</li>
<div class="courses-intro">
<h4>Laravel 5.8 中文文档手册</h4>
<p class="courses-intro-info">《Laravel 5.1/5.8速查表：https://www.php.cn/phpkj/laravel/cheatsheet58.html 》 手册简介：Laravel 5.8 在 Laravel 5.7 的基础上继续进行优化，包括引入新的 Eloquent 关联关系（has-one-through）、优化邮箱验证、基于约定的授权策略类自动注册、 DynamoDB 缓存及 Session 驱动、优化任务调度器的时区配置、支持分配多个认证 guard 到广播频道、PSR-16
缓存驱动规范等等。
</p>
<p>
<span class="level">中级</span><span class="count">7594次播放</span>
</p>
</div>
</ul>
<ul>
<li class="courses-list">
<a href=""><img src="https://img.php.cn/upload/course/000/000/014/5d2814b3a7a92573.jpg" alt=""></a>
</li>
<div class="courses-intro">
<h4>JavaScript极速入门</h4>
<p class="courses-intro-info">本套课程将帮助大家迅速掌握JavaScript这门高端的、动态的、弱类型编程语言。知识点简单明了，让你学习0压力，适合新手观看学习......</p>
<p>
<span class="level">初级</span><span class="count">7196次播放</span>
</p>
</div>
</ul>
<ul>
<li class="courses-list">
<a href=""><img src="https://img.php.cn/upload/course/000/000/015/5d199b00c2b82390.jpg" alt=""></a>
</li>
<div class="courses-intro">
<h4>第七期_直播体验课</h4>
<p class="courses-intro-info">php中文网第七期线上***今晚（2019.7.1）正式开课啦~~！为了让广大PHP开发爱好者，了解本期的课程，特安排了直播开放课，感兴趣的小伙伴不要错过哟！ 晚 20:00-22:00直播 ，报名qq：88526（猪哥）。七期线上班详情：http://www.php.cn/k.html</p>
<p>
<span class="level">初级</span><span class="count">6713次播放</span>
</p>
</div>
</ul>
</div>
<div class="courses">
<h3>最新文章</h3>
<ul>
<div class="courses-intro2">
<h4>PHP之十六个魔术方法详解（总结）</h4>
<p>
<span class="time">发布时间：2019-07-29</span>
</p>
</div>
<li class="courses-pic">
<a href=""><img src="https://img.php.cn/upload/article/000/000/020/5d3e90052c589609.jpg" alt=""></a>
</li>
</ul>
<ul>
<div class="courses-intro2">
<h4>PHP生成折线图和饼图等</h4>
<p>
<span class="time">发布时间：2019-08-02</span>
</p>
</div>
<li class="courses-pic">
<a href=""><img src="https://img.php.cn/upload/article/000/000/020/5d43d29295b8b765.png" alt=""></a>
</li>
</ul>
<ul>
<div class="courses-intro2">
<h4>PHP实现动态规划之***问题</h4>
<p>
<span class="time">发布时间：2019-08-13</span>
</p>
</div>
<li class="courses-pic">
<a href=""><img src="https://img.php.cn/upload/article/000/000/020/5d52570469da8988.jpg" alt=""></a>
</li>
</ul>
<div class="more"><a href="">更多内容</a></div>
</div>
<div class="courses-blog">
<h3>最新博文</h3>
<div class="courses-blog-list">
<ul>
<li><a href="">mysql查询时间戳和日期的转换</a><span>2019-09-09</span></li>
</ul>
</div>
<div class="courses-blog-list">
<ul>
<li><a href="">小程序实现复制文本内容</a><span>2019-09-06</span></li>
</ul>
</div>
<div class="courses-blog-list">
<ul>
<li><a href="">js获取url链接中的域名部分</a><span>2019-09-07</span></li>
</ul>
</div>
<div class="courses-blog-list">
<ul>
<li><a href="">小程序实现头像图片裁剪</a><span>2019-09-03</span></li>
</ul>
</div>
<div class="courses-blog-list">
<ul>
<li><a href="">《悦帮到家》小程序</a><span>2019-09-03</span></li>
</ul>
</div>
<div class="more"><a href="">更多内容</a></div>
</div>
<div class="footer">
<ul>
<li>
<a href="">
<img src="https://m.php.cn/static/images/user_avatar.jpg" alt=""><br><span>主页</span>
</a>
</li>
<li>
<a href="">
<img src="https://m.php.cn/static/images/user_avatar.jpg" alt=""><br><span>视频</span>
</a>
</li>
<li>
<a href="">
<img src="https://m.php.cn/static/images/user_avatar.jpg" alt=""><br><span>社区</span>
</a>
</li>
<li>
<a href="">
<img src="https://m.php.cn/static/images/user_avatar.jpg" alt=""><br><span>我的</span>
</a>
</li>
</ul>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
个人作业问题小结：
1 选取好父级flex布局，后续排序挺方便的；
2 可以给每个ul，li命名一个样式，这样不容易混乱和继承父类样式，也可以重新定义margin、padding，这样边框就不会飘出来。
3 除了ul，li，其他样式也须注意定义好。
4 介绍类语句，太长/换行等解决办法：
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;