仿站代码如下：
实例
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="static/css/init.css"> <link rel="stylesheet" href="static/css/style.css"> <link rel="stylesheet" href="static/css/nat.css"> <link rel="stylesheet" href="static/css/blogstyle.css"> <link rel="stylesheet" href="static/css/newqa.css"> <title>PHPcn手机端</title> </head> <body> <!--布局原则：宽度自适应，高度是固定--> <!--顶部 固定定位--> <div class="top"> <img src="static/images/user_avatar.jpg" alt="user_avatar"> <div class="logo"> <img src="static/images/logo.png" alt="logo"> </div> <img src="static/images/user-nav.jpg" alt="user_nav"> </div> <!--banner图--> <div class="banner"> <img src="static/images/banner1.jpg" alt="banner"> </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="courses"> <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> <br> <span>中级</span><span>49898次播放</span> </p> </div> <div> <a href=""><img src="static/images/tjkc4.jpg" alt=""></a> <p> <a href="">2018前端入门_HTML5</a> <br> <br> <span>初级</span><span>211112次播放</span> </p> </div> </div> <h3>最新更新</h3> <div class="newest"> <div> <a href=""><img src="static/images/newest1.jpg" alt=""></a> <p> <a href="">Laravel 5.8 中文文档手册</a> <br> <span>《Laravel 5.1/5.8速查表： ...</span> <br> <span>初级</span><span>7571次播放</span> </p> </div> <div> <a href=""><img src="static/images/newest2.jpg" alt=""></a> <p> <a href="">JavaScript极速入门</a> <br> <span>本套课程将帮助大家迅速掌握JavaScript这门高端的、动态的、弱类型编程语言。...</span> <br> <span>初级</span><span>7194次播放</span> </p> </div> <div> <a href=""><img src="static/images/newest3.jpg" alt=""></a> <p> <a href="">第七期_直播体验课</a> <br> <span>php中文网第七期线上***今晚（2019.7.1）正式开课啦~~！为了让广大PHP...</span> <br> <span>初级</span><span>6711次播放</span> </p> </div> <div> <a href=""><img src="static/images/newest4.jpg" alt=""></a> <p> <a href="">CSS3 极速入门</a> <br> <span>html和css是组成WEB前端开发最核心的部分，所以结合之前的html课程，我们...</span> <br> <span>初级</span><span>6724次播放</span> </p> </div> <div> <a href=""><img src="static/images/newest5.jpg" alt=""></a> <p> <a href="">HTML5 极速入门</a> <br> <span>在本套课程中，你将学习如何使用 HTML 来创建站点，完成静态网页布局，非常...</span> <br> <span>初级</span><span>5657次播放</span> </p> </div> <div> <a href=""><img src="static/images/newest6.jpg" alt=""></a> <p> <a href="">nodejs开发基础教程</a> <br> <span>Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js对一些特殊用例进...</span> <br> <span>初级</span><span>4908次播放</span> </p> </div> </div> <h3>最新文章</h3> <div class="newarticle"> <div> <p> <a href="">PHP之十六个魔术方法详解（总结）</a> <br> <span>发布时间:</span><span>2019-07-29</span> </p> <a href=""><img src="static/images/article1.jpg" alt=""></a> </div> <div> <p> <a href="">PHP生成折线图和饼图等</a> <br> <span>发布时间:</span><span>2019-07-29</span> </p> <a href=""><img src="static/images/article2.png" alt=""></a> </div> <div> <p> <a href="">PHP实现动态规划之***问题</a> <br> <span>发布时间:</span><span>2019-07-29</span> </p> <a href=""><img src="static/images/article3.jpg" alt=""></a> </div> <div> <p> <a href="">ThinkPHP6源码：从Http类的实例化看依赖注入是如何实现的</a> <br> <span>发布时间:</span><span>2019-07-29</span> </p> <a href=""><img src="static/images/article4.jpg" alt=""></a> </div> <div> <p> <a href="">PHP7中php.ini、php-fpm和www.conf配置</a> <br> <span>发布时间:</span><span>2019-07-29</span> </p> <a href=""><img src="static/images/article5.png" alt=""></a> </div> </div> <h3>最新博文</h3> <div class="newblog"> <div> <p> <a href="">mysql查询时间戳和日期的转换</a> <span>2019-07-22</span> </p> </div> <div> <p> <a href="">小程序实现复制文本内容</a> <span>2019-07-22</span> </p> </div> <div> <p> <a href="">js获取url链接中的域名部分</a> <span>2019-08-22</span> </p> </div> <div> <p> <a href="">小程序实现头像图片裁剪</a> <span>2019-09-12</span> </p> </div> <div> <p> <a href="">《悦帮到家》小程序</a> <span>2019-08-22</span> </p> </div> <div> <p> <a href="">更多内容</a> </p> </div> </div> <h3>最新问答</h3> <div class="newqa"> <div> <p> <a href="">服务器80端口telnet测试通，但网页还是无法打开</a> <span>2019-07-22</span> </p> </div> <div> <p> <a href="">谷歌访问助手安装不了</a> <span>2019-07-22</span> </p> </div> <div> <p> <a href="">语法错误，意外'：'</a> <span>2019-08-22</span> </p> </div> <div> <p> <a href="">栏目链接不对吧？？？</a> <span>2019-09-12</span> </p> </div> <div> <p> <a href="">用的编辑软件是啥</a> <span>2019-08-22</span> </p> </div> <div> <p> <a href="">更多内容</a> </p> </div> </div> <!--底部--> <div class="footer"> <ul> <li><a href=""><img src="static/images/icon_square.png" alt=""><br>首页</a></li> <li><a href=""><img src="static/images/icon_live.png" alt=""><br>视频</a></li> <li><a href=""><img src="static/images/icon_meeting.png" alt=""><br>社区</a></li> <li><a href=""><img src="static/images/icon_principal.png" alt=""><br>我的</a></li> </ul> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
CSS文件：
实例
body {
min-width: 320px;
max-width: 768px;
margin: 0 auto;
height: 3000px;
background: #edeff0;
/*y轴的滚动条会根据内容自动出现*/
overflow-y: initial;
position: relative;
/*不要出现水平滚动条*/
overflow-x: hidden;
/*点击链接跳转出现高亮，设置为透明，主要考虑IOS/IPAD*/
-webkit-tap-highlight-color: transparent;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
.newblog {
height: 400px;
}
.newblog div {
background-color: white;
padding: 10px;
height: 40px;
display: flex;
justify-content: flex-start;
margin-top: 10px;
}
.newblog div a {
text-decoration: none;
color: gray;
font-weight: bolder;
flex: 0.02;
}
.newblog div p {
flex: 0.98;
margin-left: 15px;
}
.newblog div p span:first-of-type {
font-size: 0.7rem;
color: gray;
float: right;
}
.newblog div:last-of-type {
text-align: center;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
.newarticle {
height: 410px;
}
.newarticle ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
}
.newarticle ul li {
padding: 5px;
}
.newarticle ul img {
width: 100%;
height: 90px;
}
.newarticle div {
background-color: white;
padding: 5px;
margin-top: 8px;
height: 65px;
display: flex;
justify-content: flex-start;
}
.newarticle div img {
width: 100%;
height: 65px;
}
.newarticle div a {
text-decoration: none;
color: gray;
flex: 0.35;
font-weight: bold;
}
.newarticle div p {
flex: 0.65;
margin-left: 15px;
}
.newarticle div p span:last-of-type {
font-size: 0.7rem;
color: gray;
}
.newarticle div p span:first-of-type {
font-size: 0.8rem;
color: gray;
border-radius: 30%;
padding: 0 2px;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
.newqa {
height: 400px;
}
.newqa div {
background-color: white;
padding: 10px;
height: 40px;
display: flex;
justify-content: flex-start;
margin-top: 10px;
}
.newqa div a {
text-decoration: none;
color: gray;
font-weight: bolder;
flex: 0.02;
}
.newqa div p {
flex: 0.98;
margin-left: 15px;
}
.newqa div p span:first-of-type {
font-size: 0.7rem;
color: gray;
float: right;
}
.newqa div:last-of-type {
text-align: center;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
.top {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 42px;
background-color: #444444;
min-width: 320px;
max-width: 760px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
display: flex;
}
.top img:first-of-type,
.top img:last-of-type {
width: 25px;
height: 25px;
margin-top: 8px;
}
.top img:first-of-type {
border-radius: 50%;
margin-left: 5px;
}
.top img:last-of-type {
margin-right: 5px;
}
.top .logo {
text-align: center;
flex: 1;
}
.top .logo img {
margin-top: 0;
width: 94px;
height: 45px;
}
.banner {
display: flex;
padding-top: 42px;
}
.banner img {
width: 100%;
height: 160px;
}
.nav {
height: 170px;
background-color: white;
/*防止撑开，直接定位到盒子边框*/
box-sizing: border-box;
}
.nav ul {
display: flex;
margin: 0;
padding: 7px;
}
.nav ul li {
list-style-type: none;
text-align: center;
height: 75px;
flex: 1;
}
.nav ul li img {
width: 45px;
height: 45px;
}
.nav ul li a {
text-align: center;
text-decoration: none;
color: gray;
}
h3 {
color: gray;
/*margin-left: 10px;*/
/*padding-bottom: 5px;*/
}
.courses {
height: 340px;
}
.courses ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
}
.courses ul li {
padding: 5px;
}
.courses ul img {
width: 100%;
height: 90px;
}
.courses div {
background-color: white;
padding: 10px;
margin-top: 10px;
height: 90px;
display: flex;
justify-content: flex-start;
}
.courses div img {
width: 100%;
height: 90px;
}
.courses div a {
text-decoration: none;
color: gray;
flex: 0.45;
}
.courses div p {
flex: 0.55;
margin-left: 15px;
}
.courses div p span:first-of-type {
background-color: black;
font-size: 0.8rem;
color: white;
border-radius: 30%;
padding: 0 2px;
}
.courses div p span:last-of-type {
font-size: 0.6rem;
color: gray;
}
.newest {
height: 700px;
}
.newest ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
}
.newest ul li {
padding: 5px;
}
.newest ul img {
width: 100%;
height: 90px;
}
.newest div {
background-color: white;
padding: 10px;
margin-top: 10px;
height: 90px;
display: flex;
justify-content: flex-start;
}
.newest div img {
width: 100%;
height: 90px;
}
.newest div a {
text-decoration: none;
color: gray;
flex: 0.45;
}
.newest div p {
flex: 0.55;
margin-left: 15px;
}
.newest div p span:nth-of-type(2) {
background-color: black;
font-size: 0.8rem;
color: white;
border-radius: 30%;
padding: 0 2px;
}
.newest div p span:last-of-type {
font-size: 0.7rem;
color: gray;
float: right;
}
.newest div p span:first-of-type {
font-size: 0.4rem;
color: gray;
border-radius: 30%;
padding: 0 2px;
}
.footer {
position: fixed;
bottom: 0;
width: 100%;
height: 42px;
min-width: 320px;
max-width: 760px;
border-top: 1px solid #ccc;
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 img {
width: 20px;
height: 20px;
opacity: 0.5;
}
.footer ul li a {
color: gray;
text-decoration: none;
}
.footer ul li {
flex: 1;
background-color: #edeff0;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
效果图：
总结：
Margin在绝对定位 position:fixed;下是无效的
justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。默认值：flex-start
a标签里面的字体颜色必须通过a标签实现，不能直接继承父集的文本样式，否则无效。
问题：banner图被固定的导航盖住了一部分？
解决方案：在 .banner里面加一个padding-top:42px;
弹性盒子展示： display:flex;
弹性盒子是给子元素的效果，所以给了 <ul>
均分盒子内空间，是让 <li>均分
顶部和底部：
首先考虑定位： position:fixed; 一般是固定的，方便导航
然后考虑到浏览器边框的举例，top/buttom left ：0
然后考虑 宽高 的值，自适应 宽度设置百分比一般 100% 高具体看情况设置多少px
然后考虑最大最小宽度，手机啥的合适，
导航中间部分要调整居中， left:50%； transform:translateX(-50%)