CSS
html,
body {
max-width: 768px;
min-width: 320px;
margin: 0 auto;
background-color: #e5e5e5
}
.w100 {
width: 100%;
}
.m {
margin: 0 auto;
}
.h3 {
line-height: 34px;
padding: 22px 0 12px;
font-size: 18px;
color: #888;
font-weight: bold;
}
.padding-left-0 {
padding-left: 0 !important;
}
a.more {
line-height: 1em;
text-align: center;
background-color: #fff;
padding: 7px 0;
display: block
}
/* top */
.top {
height: 45px;
background-color: #2d353c;
display: flex;
}
.top a:first-of-type,
.top a:last-of-type,
.top a:first-of-type img,
.top a:last-of-type img {
width: 25px;
height: 25px;
}
.top a:first-of-type,
.top a:last-of-type {
margin: 9px 5px 0;
}
.top a:first-of-type img {
border-radius: 50%;
}
.top a.logo {
text-align: center;
flex: 1;
}
.top a.logo img {
height: 45px;
}
/* banner */
.banner {
display: flex;
}
.banner img {
width: 100%;
display: block;
}
/* nav */
.nav {
display: flex;
background-color: #fff;
padding: 10px 0;
}
.nav li {
flex: 1;
text-align: center;
}
.nav li img {
width: 50%;
margin-bottom: 6px;
}
.nav li a {
color: #888;
font-weight: 600;
}
/* course */
.course {
display: flex;
margin-bottom: 14px;
}
.course a {
flex: 1;
}
.course a img {
width: 100%;
}
.course a:first-of-type {
padding-right: 5px;
}
.course a:last-of-type {
padding-left: 5px;
}
/* course-list */
.course-list li {
padding: 10px;
background-color: #fff;
margin-bottom: 10px;
}
.course-list li a {
display: flex;
}
.course-list li a span {
flex: .4;
}
.course-list li a img {
width: 100%;
display: block;
}
.course-list li a h2 {
text-overflow: ellipsis;
white-space: nowrap;
color: #888;
font-size: 16px;
overflow: hidden;
padding-bottom: 6px;
}
.course-list .course-list-right {
flex: .6;
padding-left: 14px;
overflow: hidden;
}
.course-list-right p {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
font-size: 12px;
color: #888;
}
.course-list-right-info {
padding: 4px 0;
overflow: hidden;
}
.course-list-right-info span {
border-radius: 5px;
background-color: #595757;
color: #fff;
font-size: 12px;
padding: 4px;
}
.course-list-right-info em {
font-size: 12px;
color: #888;
padding: 4px;
}
.index-article-list a {
padding: 8px 5px;
margin-bottom: 8px;
display: flex;
background-color: #fff;
color: #888;
}
.index-article-list h2 {
flex: .7;
font-size: 14px;
line-height: 1em;
}
.index-article-list span {
flex: .3;
line-height: 1em;
padding-left: 5px;
text-align: right
}HTML
<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> <link rel="stylesheet" href="static/style/reset.css"> <link rel="stylesheet" href="static/style/css.css"> </head> <body> <!-- top --> <div class="w100 top "> <a href=""><img src="https://m.php.cn/static/images/user_avatar.jpg" alt=""></a> <a class="logo" href=""><img src="https://m.php.cn/static/images/logo.png" alt=""></a> <a href=""><img src="static/images/user-nav.jpg" alt=""></a> </div> <!-- banner --> <div class="w100 banner"> <img src="https://m.php.cn/static/images/ico/1.jpg" alt=""> </div> <!-- nav --> <ul class="nav"> <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 class="nav"> <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> <!-- title --> <h3 class="h3">推荐课程</h3> <div class="course"> <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d242759adb88970.jpg" alt=""></a> <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d2426f409839992.jpg" alt=""></a> </div> <div class="course-list"> <li> <a href=""> <span><img src="https://img.php.cn/upload/course/000/000/035/5d2941e265889366.jpg" alt=""></span> <div class="course-list-right"> <h2>CI框架30分钟极速入门</h2> <div class="course-list-right-info"> <span>中级</span> <em>49900次播放</em> </div> </div> </a> </li> <li> <a href=""> <span><img src="https://img.php.cn/upload/course/000/000/035/5d2941e265889366.jpg" alt=""></span> <div class="course-list-right"> <h2>CI框架30分钟极速入门</h2> <div class="course-list-right-info"> <span>中级</span> <em>49900次播放</em> </div> </div> </a> </li> </div> <!-- title --> <h3 class="h3">最新更新</h3> <div class="course-list"> <li> <a href=""> <span><img src="https://img.php.cn/upload/course/000/000/035/5d2941e265889366.jpg" alt=""></span> <div class="course-list-right"> <h2>CI框架30分钟极速入门</h2> <p>《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> <div class="course-list-right-info"> <span class="fl">中级</span> <em class="fr">49900次播放</em> </div> </div> </a> </li> <li> <a href=""> <span><img src="https://img.php.cn/upload/course/000/000/035/5d2941e265889366.jpg" alt=""></span> <div class="course-list-right"> <h2>CI框架30分钟极速入门</h2> <p>《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> <div class="course-list-right-info"> <span class="fl">中级</span> <em class="fr">49900次播放</em> </div> </div> </a> </li> </div> <!-- title --> <h3 class="h3">最新文章</h3> <div class="course-list"> <li> <a href=""> <div class="course-list-right padding-left-0"> <h2>CI框架30分钟极速入门</h2> <div class="course-list-right-info"> <em>发布时间：2019-07-29</em> </div> </div> <span><img src="https://img.php.cn/upload/course/000/000/035/5d2941e265889366.jpg" alt=""></span> </a> </li> <li> <a href=""> <div class="course-list-right padding-left-0"> <h2>CI框架30分钟极速入门</h2> <div class="course-list-right-info"> <em>发布时间：2019-07-29</em> </div> </div> <span><img src="https://img.php.cn/upload/course/000/000/035/5d2941e265889366.jpg" alt=""></span> </a> </li> </div> <a class="more" href="">更多内容</a> <!-- title --> <h3 class="h3">最新文章</h3> <div class="index-article-list"> <a href=""> <h2>mysql查询时间戳和日期的转换</h2> <span>2019-09-07</span> </a> <a href=""> <h2>mysql查询时间戳和日期的转换</h2> <span>2019-09-07</span> </a> <a href=""> <h2>mysql查询时间戳和日期的转换</h2> <span>2019-09-07</span> </a> </div> <a class="more" href="">更多内容</a> <!-- title --> <h3 class="h3">最新问答</h3> <div class="index-article-list"> <a href=""> <h2>mysql查询时间戳和日期的转换</h2> <span>2019-09-07</span> </a> <a href=""> <h2>mysql查询时间戳和日期的转换</h2> <span>2019-09-07</span> </a> <a href=""> <h2>mysql查询时间戳和日期的转换</h2> <span>2019-09-07</span> </a> </div> <a class="more" href="">更多内容</a> </body>
