仿php中文网手机端首页界面-2019年9月14日17:00

2019年09月14日 17:15:49阅读数：448博客 / i开哥的博客 / 第一阶段

仿站代码如下：

实例

<!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%)

 

批改状态：合格

老师批语：有一些知识 , 课堂上不讲的话, 靠自己摸索 会走很多弯路的, 做对了也感觉不自信,担心人家可能不是这样写的, 对不对? 所以, 多写多看多问才能学好

版权申明：本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论

文明上网理性发言，请遵守新闻评论服务协议

0 条评论
  • 博主信息
    i开哥的博客
    i开哥的博客
    博文
    10
    粉丝
    0
    评论
    0
    访问量
    5975
    积分：0
    P豆：20
    最新更新
    计算不定参数的乘积, 要求使用到剩余参数来实现-2019年10月7日19:002019-10-07
    几种数组的使用-2019年9月19日18:002019-09-19
    仿php中文网手机端首页界面-2019年9月14日17:002019-09-14
    使用CSS制作一张带有四个圆角的表格-2019年9月8日17:00分2019-09-08
    圣杯布局的简单实际应用-2019年9月8日13:50分2019-09-08
    如何消除子元素浮动造成父元素高度折叠的影响以及三列布局的实现原理-2019年9月5日11:40分2019-09-05
    相邻选择器和兄弟选择器异同，nth-child()和nth-of-type()选择器异同,padding对盒子影响以及margin的同级塌陷，嵌套传递和自动挤压的分析和解决-2019年9月4日18:002019-09-04
    <iframe>标签的使用、CSS样式优先级、CSS三大选择器使用规则以及盒模型五大元素-2019年9月3日15:50分2019-09-03
    博文分类
    第一阶段8篇
    第二阶段2篇
    热门文章
    <iframe>标签的使用、CSS样式优先级、CSS三大选择器使用规则以及盒模型五大元素-2019年9月3日15:50分955
    浅谈html理解、列表和表格的区别、注册表单的实现-2019年8月31日23:10分762
    使用CSS制作一张带有四个圆角的表格-2019年9月8日17:00分700
    几种数组的使用-2019年9月19日18:00559
    相邻选择器和兄弟选择器异同，nth-child()和nth-of-type()选择器异同,padding对盒子影响以及margin的同级塌陷，嵌套传递和自动挤压的分析和解决-2019年9月4日18:00556
    计算不定参数的乘积, 要求使用到剩余参数来实现-2019年10月7日19:00552
    PHPSTUDY安装启动和本地主机的创建-2019年8月29日22:55分543
    圣杯布局的简单实际应用-2019年9月8日13:50分475
    提交
    首页视频教程原生手册编程词典

    Copyright 2014-2020 //m.m.sbmmt.com/
    All Rights Reserved PHP中文网 版权所有

    皖B2-20150071-9皖公网安备34010402701654号

    如果有侵犯您的版权或其他权益，请联系邮箱: a@php.cn