简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 仿php中文网手机端首页界面-2019年9月14日17:00
Blogger Information
Blog 10
fans 0
comment 0
visits 7440
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
仿php中文网手机端首页界面-2019年9月14日17:00
i开哥的博客
Original
578 people have browsed it

仿站代码如下：

实例

<!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;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图：

PHPcn手机端1.png

总结：

  1. Margin在绝对定位 position:fixed;下是无效的

  2. justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。默认值：flex-start

  3. a标签里面的字体颜色必须通过a标签实现，不能直接继承父集的文本样式，否则无效。

  4. 问题：banner图被固定的导航盖住了一部分？

    解决方案：在  .banner里面加一个padding-top:42px;

  5. 弹性盒子展示： display:flex;

    弹性盒子是给子元素的效果，所以给了 <ul>

    均分盒子内空间，是让 <li>均分

  6. 顶部和底部：

    首先考虑定位：  position:fixed; 一般是固定的，方便导航

    然后考虑到浏览器边框的举例，top/buttom   left ：0

    然后考虑 宽高 的值，自适应 宽度设置百分比一般 100% 高具体看情况设置多少px

    然后考虑最大最小宽度，手机啥的合适，

    导航中间部分要调整居中， left:50%；  transform:translateX(-50%)

 

Correction status：qualified

Teacher's comments：有一些知识 , 课堂上不讲的话, 靠自己摸索 会走很多弯路的, 做对了也感觉不自信,担心人家可能不是这样写的, 对不对? 所以, 多写多看多问才能学好
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！