![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：qualified
Teacher's comments：基本上做到了一比一高仿, 就是背景图下有一个阴影, 你可能忘了加了
Collection
Collection
1、先上代码
html部分
<!DOCTYPE html> <html lang="zh-CN"> <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"> <link rel="stylesheet" href="static/css/style.css"> <title>php中文网</title> </head> <body> <!-- 顶部 --> <div class="header"> <img src="static/images/user-pic.jpeg" alt="headimg"> <div class="logo"> <img src="static/images/logo.png" alt="logo"> </div> <img src="static/images/user-nav.jpg" alt="user-nav"> </div> <!-- 轮播 --> <div class="banner"> <img src="static/images/banner.jpg" alt=""> </div> <!-- 导航 --> <div class="nav"> <ul> <li> <a href=""><img src="static/images/html.png" alt=""><br>HTML/CSS</a> </li> <li> <a href=""><img src="static/images/JavaScript.png" alt=""><br>JavaScript</a> </li> <li> <a href=""><img src="static/images/code.png" alt=""><br>服务端</a> </li> <li> <a href=""><img src="static/images/sql.png" alt=""><br>数据库</a> </li> </ul> <ul> <li> <a href=""><img src="static/images/app.png" alt=""><br>移动端</a> </li> <li> <a href=""><img src="static/images/manual.png" alt=""><br>手册</a> </li> <li> <a href=""><img src="static/images/tool2.png" alt=""><br>工具</a> </li> <li> <a href=""><img src="static/images/live.png" alt=""><br>直播</a> </li> </ul> </div> <!-- 推荐课程 --> <h3>推荐课程</h3> <div class="recommend"> <ul> <li> <a href=""><img src="static/images/tjkc1.jpg" alt=""></a> </li> <li> <a href=""><img src="static/images/tjkc2.jpg" alt=""></a> </li> </ul> <div> <a href=""><img src="static/images/tjkc3.jpg" alt=""></a> <p> <a href="">CI框架30分钟极速入门</a><br> <span>中级</span><span>49798次播放</span> </p> </div> <div> <a href=""><img src="static/images/tjkc4.jpg" alt=""></a> <p> <a href="">2018前端入门_HTML5</a><br> <span>初级</span><span>49798次播放</span> </p> </div> </div> <!-- 最新更新 --> <h3>最新更新</h3> <div class="updates"> <div class="item"> <a href=""><img src="static/images/zxgx1.jpg" alt=""></a> <div> <a href="">Laravel 5.8 中文文档手册</a><br> <span>《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 缓存驱动规范等等。 </span><br> <p> <span>中级</span> <span>7321次播放</span> </p> </div> </div> <div class="item"> <a href=""><img src="static/images/zxgx2.jpg" alt=""></a> <div> <a href="">JavaScript极速入门</a><br> <span>本套课程将帮助大家迅速掌握JavaScript这门高端的、动态的、弱类型编程语言。知识点简单明了，让你学习0压力，适合新手观看学习...... </span><br> <p> <span>中级</span> <span>7321次播放</span> </p> </div> </div> <div class="item"> <a href=""><img src="static/images/zxgx3.jpg" alt=""></a> <div> <a href="">第七期_直播体验课</a><br> <span>php中文网第七期线上***今晚（2019.7.1）正式开课啦~~！为了让广大PHP开发爱好者，了解本期的课程，特安排了直播开放课，感兴趣的小伙伴不要错过哟！ 晚 20:00-22:00直播 ，报名qq：88526（猪哥）。七期线上班详情：http://www.php.cn/k.html </span><br> <p> <span>中级</span> <span>7321次播放</span> </p> </div> </div> <div class="item"> <a href=""><img src="static/images/zxgx4.jpg" alt=""></a> <div> <a href="">CSS3 极速入门</a><br> <span>html和css是组成WEB前端开发最核心的部分，所以结合之前的html课程，我们再来学习本章节的css，将会获得更好的学习体验。课程内容非常有节奏的安排，知识点简单明了，让你从头到尾学习毫无压力……快来学习吧…… </span><br> <p> <span>中级</span> <span>7321次播放</span> </p> </div> </div> <div class="item"> <a href=""><img src="static/images/zxgx5.jpg" alt=""></a> <div> <a href="">HTML5 极速入门</a><br> <span>在本套课程中，你将学习如何使用 HTML 来创建站点，完成静态网页布局，非常适合HTML5零基础入门，整个轻松明快，简洁生动，让你快速走入HTML5的世界，体会语义化开发的魅力！ </span><br> <p> <span>中级</span> <span>7321次播放</span> </p> </div> </div> <div class="item"> <a href=""><img src="static/images/zxgx6.jpg" alt=""></a> <div> <a href="">nodejs开发基础教程</a><br> <span>Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js对一些特殊用例进行优化，提供替代的API，使得V8在非浏览器环境下运行得更好。Node.js 使JavaScript 可以在浏览器之外上运行。非常适合前端人员想学习后端技术的同学。 </span><br> <p> <span>中级</span> <span>7321次播放</span> </p> </div> </div> </div> <!-- 最新文章--> <h3>最新文章</h3> <div class="newarticle"> <div class="item"> <p> <a href="">php接口有什么作用</a><br> <span>发布时间：2019-09-02</span> </p> <img src="static/images/zxwz1.jpg" alt=""> </div> <div class="item"> <p> <a href="">php用什么工具加密</a><br> <span>发布时间：2019-09-02</span> </p> <img src="static/images/zxwz2.jpg" alt=""> </div> <div class="item"> <p> <a href="">PHP之十六个魔术方法详解（总结）</a><br> <span>发布时间：2019-09-02</span> </p> <img src="static/images/zxwz3.jpg" alt=""> </div> <div class="item"> <p> <a href="">PHP生成折线图和饼图等</a><br> <span>发布时间：2019-09-02</span> </p> <img src="static/images/zxwz4.png" alt=""> </div> <div class="item"> <p> <a href="">PHP实现动态规划之***问题</a><br> <span>发布时间：2019-09-02</span> </p> <img src="static/images/zxwz5.jpg" alt=""> </div> <div class="more"><a href="">更多内容</a></div> </div> <!-- 最新博文--> <h3>最新博文</h3> <div class="newblog"> <div class="item"><a href="">mysql查询时间戳和日期的转换</a><span>2019-09-03</span></div> <div class="item"><a href="">小程序实现复制文本内容</a><span>2019-09-03</span></div> <div class="item"><a href="">js获取url链接中的域名部分</a><span>2019-09-03</span></div> <div class="item"><a href="">小程序实现头像图片裁剪</a><span>2019-09-03</span></div> <div class="item"><a href="">《悦帮到家》小程序</a><span>2019-09-03</span></div> <div class="more"><a href="">更多内容</a></div> </div> <!-- 最新问答--> <h3>最新问答</h3> <div class="answers"> <div class="item"><a href="">请教各位大神，php curl请求页面显示空白</a><span>2019-09-03</span></div> <div class="item"><a href="">提问</a><span>2019-09-03</span></div> <div class="item"><a href="">照抄下拉为什么还是连不是，各种问题</a><span>2019-09-03</span></div> <div class="item"><a href="">curl抓取页面之前都比较稳定，后来就输出空页面了</a><span>2019-09-03</span></div> <div class="item"><a href="">导入项目源码访问学生管理的学生列表出错</a><span>2019-09-03</span></div> <div class="more"><a href="">更多内容</a></div> </div> <!-- 底部 --> <div class="footer"> <a href=""><img src="static/font-icon/zhuye.png" alt=""><br><span>主页</span></a> <a href=""><img src="static/font-icon/luntan.png" alt=""><br><span>论坛</span></a> <a href=""><img src="static/font-icon/video.png" alt=""><br><span>视频</span></a> <a href=""><img src="static/font-icon/geren.png" alt=""><br><span>个人</span></a> </div> </body> </html>
点击 "运行实例" 按钮查看在线实例
css部分
body,
ul,
li,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
padding: 0;
}
body {
background-color: #eeeeee;
min-width: 320px;
max-width: 768px;
margin: 0 auto;
}
/* 头部部分 */
.header {
width: 100%;
height: 42px;
background-color: #333333;
min-width: 320px;
max-width: 768px;
display: flex;
position: fixed;
top: 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%)
}
.header img:first-child,
.header img:last-child {
width: 25px;
height: 25px;
margin-top: 8px;
}
.header img:first-child {
border-radius: 50%;
margin-left: 5px;
}
.header .logo {
text-align: center;
flex: 1;
}
.header .logo img {
width: 94px;
height: 45px;
margin: 0;
}
/* banner部分 */
.banner {
display: flex;
margin-top: 42px;
}
.banner img {
width: 100%;
height: 160px;
}
/* 导航部分 */
.nav {
height: 170px;
box-sizing: border-box;
background-color: white;
}
.nav ul {
display: flex;
padding: 8px 0;
}
.nav ul li {
flex: 1;
list-style: none;
text-align: center;
}
.nav ul li a {
text-decoration: none;
color: #333333;
}
.nav ul li img {
width: 45px;
height: 45px;
}
/* 推荐课程 */
h3 {
padding: 10px;
color: #666666;
}
.recommend {
/* background-color: white; */
height: 326px;
width: 98%;
margin: 0 auto;
}
.recommend ul {
display: flex;
background-color: white;
}
.recommend ul li {
flex: 1;
padding: 5px;
}
.recommend ul li a {
display: block;
height: 90px;
}
.recommend ul img {
width: 100%;
height: 90px;
}
.recommend div {
display: flex;
margin: 10px 0;
padding: 5px;
background-color: white;
}
.recommend div img {
width: 100%;
height: 90px;
}
.recommend div>a {
flex: 0.4;
width: 40%;
height: 90px;
}
.recommend div p {
flex: 0.6;
width: 60%;
padding: 20px 15px 0;
}
.recommend div p>a {
text-decoration: none;
color: #333333;
font-size: 1em;
}
.recommend div p span:first-of-type {
background: #666666;
border-radius: 30%;
font-size: 0.7em;
color: white;
padding: 1px 3px;
margin: 0 10px;
}
.recommend div p span:last-of-type {
font-size: 0.6em;
padding-left: 5px;
}
/* 最新更新 */
.updates {
width: 98%;
margin: 0 auto;
}
.updates br {
display: none;
}
.updates .item {
display: flex;
margin: 10px 0;
padding: 5px;
background: white;
}
.updates .item a {
flex: 0.4;
height: 90px;
text-decoration: none;
}
.updates .item img {
width: 100%;
height: 90px;
}
.updates .item div {
flex: 0.6;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin: 0 15px;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 90px;
}
.updates .item div a {
font-size: 1em;
color: #333333;
height: 40px
}
.updates .item div span:first-of-type {
font-size: 0.6em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.updates .item div p span:first-of-type {
font-size: 0.6em;
background-color: #666666;
border-radius: 30%;
padding: 1px 3px;
color: white;
margin: 0 10px;
}
.updates .item div p span:last-of-type {
font-size: 0.4em;
float: right;
padding: 0 10px;
}
/* 最新文章 */
.newarticle {
width: 98%;
margin: 0 auto;
}
.newarticle .item {
display: flex;
margin: 10px 0;
padding: 10px;
overflow: hidden;
background-color: white;
}
.newarticle .item p {
flex: 0.65;
line-height: 200%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
min-width: 50%;
}
.newarticle .item p a {
text-decoration: none;
color: #333333;
/* white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: inline-block;
max-width: 65%; */
}
.newarticle .item p span {
font-size: 0.8em;
color: #666666;
}
.newarticle .item img {
flex: 0.35;
height: 65px;
}
.more {
height: 25px;
background-color: white;
text-align: center;
line-height: 25px;
}
.more a {
text-decoration: none;
font-size: 0.8em;
color: #666666;
}
/* 最新博客 */
/* 最新问答 */
.newblog,
.answers {
width: 98%;
margin: 0 auto;
}
.newblog .item,
.answers .item {
height: 29px;
background-color: white;
margin-bottom: 10px;
padding: 10px;
}
.newblog .item a,
.answers .item a {
text-decoration: none;
color: #333333;
line-height: 29px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
display: inline-block;
max-width: 75%;
}
.newblog .item span,
.answers .item span {
float: right;
font-size: 0.6em;
color: #666666;
}
/* 底部 */
.footer {
height: 50px;
border-top: 1px solid #cccccc;
position: fixed;
bottom: 0;
left: 0;
display: flex;
background-color: #eeeeee;
width: 100%;
min-width: 320px;
max-width: 768px;
left: 50%;
transform: translateX(-50%);
}
.footer a {
width: 25%;
text-align: center;
line-height: 25px;
text-decoration: none;
font-size: 0.8em;
}
.footer a img {
width: 15px;
height: 15px;
}点击 "运行实例" 按钮查看在线实例
2、运行效果
放假放纵了几天，赶紧补上了！
有点问题，还不好处理：<br>标签后面跟着一个块级元素后，br标签会获得后面的块级元素的高度，如底部导航处，需换个思路来处理细节
