仿PHP中文网手机首页 - 2019年9月10日

利用flex技术仿PHP中文网首页和一个独立手机页面

仿PHP中文网

在线运行页面：http://demo.seogo.me/phpcn/

实例

<style>
/* 初始化样式 */

body {
    min-width: 320px;
    max-width: 768px;
    margin: 0 auto;
    background: #edeff0;
    position: relative;
    overflow-x: hidden;
    overflow-y: initial;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

p {
    margin: 0;
}

a {
    text-decoration: none;
    color: #444;
}


/* 头部样式 */

.header {
    position: fixed;
    z-index: 999;
    width: 100%;
    min-width: 320px;
    max-width: 768px;
    height: 42px;
    background: #2d353c;
    top: 0;
    left: 50%;
    transform: translate(-50%);
    display: flex;
}

.header img:first-of-type,
.header img:last-of-type {
    width: 25px;
    height: 25px;
    margin-top: 8px;
}

.header img:first-of-type {
    border-radius: 50%;
    margin-left: 5px;
}

.header .logo {
    flex: 1;
    text-align: center;
    height: 42px;
}

.header .logo img {
    width: 92px;
    height: 42px;
    margin-top: 0;
}

.banner {
    width: 100%;
    height: 160px;
    display: flex;
    margin-top: 42px;
}


/* 大图 */

.banner img {
    width: 100%;
    height: 160px;
}


/* 导航菜单 */

.nav {
    background-color: #fff;
    width: 100%;
}

.nav ul {
    margin: 0;
    display: flex;
    padding: 15px 0;
    box-sizing: border-box;
}

.nav ul li {
    flex: 1;
    text-align: center;
}

.nav ul li a {
    color: #888;
    font-size: 0.8rem;
    font-weight: 700;
}

.nav img {
    width: 45px;
    height: 45px;
}

.main {
    margin: 10px 10px 80px;
}


/* 推荐课程 */

h3 {
    color: #888;
}

.course ul {
    display: flex;
}

.course ul li {
    padding: 5px;
}

.course ul img {
    width: 100%;
    height: 90px;
}

.course div {
    background-color: #fff;
    padding: 10px;
    height: 90px;
    margin-top: 10px;
    display: flex;
}

.course div img {
    width: 100%;
    height: 90px;
}

.course div a {
    color: #444;
    flex: .45;
}

.course div p {
    flex: .55;
    margin-left: 10px;
}

.course div a span {
    position: relative;
    top: 10px;
}

.course div a span:first-of-type {
    background: #595757;
    color: #fff;
    padding: 2px;
    font-size: 0.75rem;
    border-radius: 8px;
}

.course div a span:last-of-type {
    font-size: 0.7rem;
    padding-left: 5px;
}

.course.new div {
    justify-content: flex-end;
}


/* 最新更新 */

.course.date small {
    color: #888;
    padding-top: 10px;
}

.course.date div p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.course.date div a span:last-of-type {
    float: right;
}


/* 最新文章 */

.article ul {
    display: flex;
}

.article ul li {
    padding: 5px;
}

.article ul img {
    width: 100%;
    height: 70px;
}

.article div {
    background-color: #fff;
    padding: 10px;
    height: 70px;
    margin-top: 10px;
    display: flex;
    flex-direction: row-reverse;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);
}

.article div img {
    width: 100%;
    height: 70px;
}

.article div a {
    color: #444;
    flex: .3;
}

.article div p {
    flex: .7;
    margin-left: 5px;
    font-size: 0.8rem;
}

.article div a span {
    position: relative;
    top: 10px;
    font-size: 0.7rem;
}

.article.new div {
    justify-content: flex-end;
}


/* 最新博文 */

.blog div {
    width: 100%;
    display: flex;
    background: #fff;
    padding: 10px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);
    margin-bottom: 20px;
    position: relative;
    box-sizing: border-box;
}

.blog div a {
    flex: .8;
    font-size: 0.8rem;
    font-weight: 700;
    color: #999;
}

.blog div span {
    flex: .2;
    font-size: 0.7rem;
    position: absolute;
    right: 30px;
    color: #999;
}

.blog .more {
    height: 32px;
    background: #fff;
    padding: 0;
}

.blog .more a {
    line-height: 32px;
    padding: 0;
    text-align: center;
    flex: 1;
}


/* 底部 */

.footer {
    width: 100%;
    position: fixed;
    bottom: 0;
    border-top: 1px solid #ccc;
    min-width: 320px;
    max-width: 768px;
    z-index: 999;
}

.footer ul {
    display: flex;
    margin: 0;
    width: 100%;
    height: 42px;
    background: #edeff0;
}

.footer ul li {
    flex: 1;
    text-align: center;
}
</style>
    <!-- 头部 -->
    <div class="header">
        <img src="static/images/user.jpg" class="user" alt="">
        <div class="logo">
            <img src="static/images/logo.png" alt="">
        </div>
        <img src="static/images/menu.png" alt="">
    </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>JavaSript</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>
    <div class="main">
        <!-- 推荐课程 -->
        <h3>推荐课程</h3>
        <div class="course">
            <ul>
                <li>
                    <a href=""><img src="static/images/course.jpg" alt=""></a>
                </li>
                <li>
                    <a href=""><img src="static/images/course.jpg" alt=""></a>
                </li>
            </ul>
            <div>
                <a href=""><img src="static/images/course1.jpg" alt=""></a>
                <p>
                    <a href="">CI框架30分钟极速入门<br>
                    <span>中级</span><span>49872次播放</span>
                </a>
                </p>
            </div>
            <div>
                <a href=""><img src="static/images/course2.jpg" alt=""></a>
                <p>
                    <a href="">2018前端入门_HTML5<br>
                        <span>中级</span><span>49872次播放</span>
                    </a>
                </p>
            </div>
        </div>
        <!-- 最新更新 -->
        <h3>最新更新</h3>
        <div class="course date">
            <div>
                <a href=""><img src="static/images/date1.jpg" alt=""></a>
                <p>
                    <a href="">Laravel 5.8 中文文档手册<br>
                        <small>本套课程将帮助大家迅速掌握JavaScript这门高端的、动态的、弱类型编程语言。知识点简单明了，让你学习0压力，适合新手观看学习......</small>
                        <br>
                    <span>中级</span><span>49872次播放</span>
                </a>
                </p>
            </div>
            <div>
                <a href=""><img src="static/images/date2.jpg" alt=""></a>
                <p>
                    <a href="">JavaScript极速入门<br>
                        <small>php中文网第七期线上***今晚（2019.7.1）正式开课啦~~！为了让广大PHP开发爱好者，了解本期的课程，特安排了直播开放课，感兴趣的小伙伴不要错过哟！ 晚 20:00-22:00直播 ，报名qq：88526（猪哥）。七期线上班详情：http://www.php.cn/k.html</small>
                       <br>
                        <span>中级</span><span>49872次播放</span>
                    </a>
                </p>
            </div>
            <div>
                <a href=""><img src="static/images/date3.jpg" alt=""></a>
                <p>
                    <a href="">第七期_直播体验课<br>
                        <small>html和css是组成WEB前端开发最核心的部分，所以结合之前的html课程，我们再来学习本章节的css，将会获得更好的学习体验。课程内容非常有节奏的安排，知识点简单明了，让你从头到尾学习毫无压力……快来学习吧……</small>
                        <br>
                            <span>中级</span><span>49872次播放</span>
                        </a>
                </p>
            </div>
        </div>
        <!-- 最新文章 -->
        <h3>最新文章</h3>
        <div class="article">
            <div>
                <a href=""><img src="static/images/course1.jpg" alt=""></a>
                <p>
                    <a href="">CI框架30分钟极速入门<br>
                    <span>发布时间：2019-08-23</span>
                </a>
                </p>
            </div>
            <div>
                <a href=""><img src="static/images/course1.jpg" alt=""></a>
                <p>
                    <a href="">CI框架30分钟极速入门<br>
                        <span>发布时间：2019-08-23</span>
                    </a>
                </p>
            </div>
        </div>
        <!-- 最新博文 -->
        <h3>最新博文</h3>
        <div class="blog">
            <div>
                <a href="">mysql查询时间戳和日期的转换</a>
                <span>2019-09-07</span>
            </div>

            <div>
                <a href="">小程序实现复制文本内容</a>
                <span>2019-09-07</span>
            </div>

            <div>
                <a href="">js获取url链接中的域名部分</a>
                <span>2019-09-07</span>
            </div>
            <div class="more"><a href="">更多内容</a></div>
        </div>
        <!-- 最新问答 -->
        <h3>最新问答</h3>
        <div class="blog">
            <div>
                <a href="">栏目链接不对吧？？？</a>
                <span>2019-09-07</span>
            </div>

            <div>
                <a href="">用的编辑软件是啥</a>
                <span>2019-09-07</span>
            </div>

            <div>
                <a href="">管理员账户密码都不修改，</a>
                <span>2019-09-07</span>
            </div>

            <div class="more"><a href="">更多内容</a></div>
        </div>
    </div>
    <div class="footer">
        <ul>
            <li>
                <a href=""><img src="static/images/home.png" alt=""></a>
            </li>
            <li>
                <a href=""><img src="static/images/video.png" alt=""></a>
            </li>
            <li>
                <a href=""><img src="static/images/shequ.png" alt=""></a>
            </li>
            <li>
                <a href=""><img src="static/images/us.png" alt=""></a>
            </li>
        </ul>
    </div>

仿文书帮首页

目标站地址：http://m.wenshubang.com/

仿站地址：http://demo.seogo.me/flex/

实例

<style>
body {
    min-width: 320px;
    max-width: 740px;
    margin: 0 auto;
    overflow-x: hidden;
    overflow-y: initial;
    position: relative;
    background-color: #f0f0f0;
}

h3,
ul {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}
/* 头部样式 */

.header {
    position: fixed;
    top: 0;
    width: 100%;
    height: 45px;
    background: #fff;
    min-width: 320px;
    max-width: 740px;
    left: 50%;
    transform: translate(-50%);
    z-index: 999;
}

.header img {
    margin-top: 45px;
    position: relative;
    width: 170px;
    height: 38px;
    margin-top: 4px;
    left: 50%;
    transform: translate(-50%);
}


/* 大图 */

.banner {
    margin-top: 45px;
    width: 100%;
    margin-bottom: -4px;
}

.banner img {
    width: 100%;
    height: auto;
}


/* 菜单栏 */

.nav {
    background: #fff;
    width: 100%;
}

.nav ul {
    display: flex;
    box-sizing: border-box;
}

.nav ul li {
    text-align: center;
    flex: 1;
    padding: 11px;
}

.nav ul li a {
    color: #333;
    text-decoration: none;
    font-size: .9rem;
}

.nav ul li img {
    width: 45px;
    height: 45px;
}


/* 分类导航栏 */

.menu {
    width: 100%;
    height: 131px;
    background: #fff;
    border-bottom: 1px solid #F3F0F0;
}

.menu h3 {
    height: 32px;
    line-height: 32px;
    background: #F9F9F9;
    margin-top: 10px;
    font-size: 1rem;
    color: #333;
    border-bottom: 1px solid #F3F0F0;
    position: relative;
    padding-left: 25px;
}

.menu h3:before {
    position: absolute;
    content: '';
    border-left: 4px solid #F1B605;
    height: 16px;
    top: 8px;
    left: 15px;
}

.subnav {
    height: 99px;
    border-bottom: 1px solid #F3F0F0;
    padding-top: 15px;
}

.subnav ul {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    padding-top: 4px;
}

.subnav ul li {
    flex: 1;
    text-align: center;
    padding-bottom: 16px;
}

.subnav ul li a {
    color: #666;
    text-decoration: none;
}

.subnav ul li a span {
    font-size: 14px;
    padding: 2px 4px;
    color: #fff;
    border-radius: 5px;
    margin-right: 15px;
}

.subnav ul:first-of-type>li:first-of-type span {
    background: #F1B605;
    border: 1px solid #F1B605;
}

.subnav ul:first-of-type>li:nth-of-type(2) span {
    background: #069DD0;
    border: 1px solid #069DD0;
}

.subnav ul:first-of-type>li:last-of-type span {
    background: #28A281;
    border: 1px solid #28A281;
}

.subnav ul:last-of-type>li:first-of-type span {
    background: #15C2C3;
    border: 1px solid #15C2C3;
}

.subnav ul:last-of-type>li:nth-of-type(2) span {
    background: #F1B605;
    border: 1px solid #F1B605;
}

.subnav ul:last-of-type>li:last-of-type span {
    background: #FF5D43;
    border: 1px solid #FF5D43;
}


/* 列表栏*/

.index_list {
    margin-top: 0;
    background: #fff;
    margin-bottom: 8px;
}

.index_list h3 {
    height: 36px;
    line-height: 36px;
    font-weight: normal;
    font-size: 1rem;
    color: #333;
    border-bottom: 1px solid #F3F0F0;
    padding-left: 15px;
    position: relative;
}

.index_list h3 img {
    position: absolute;
    top: 8px;
}

.index_list h3 a {
    font-size: 12px;
    color: #069DD0;
    line-height: 36px;
    text-decoration: none;
    position: absolute;
    right: 15px;
}

.index_list h3 span {
    height: 36px;
    line-height: 36px;
    padding-left: 27px;
}

.index_list ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    background: #fff;
}

.index_list ul li {
    width: 25%;
    text-align: center;
    height: 24px;
    line-height: 24px;
    overflow: hidden;
    margin: 6px 0 4px;
    position: relative;
}

.index_list ul li:after {
    position: absolute;
    content: '';
    border-right: 1px solid #E2E2E2;
    height: 24px;
    right: 0;
    top: 0;
}

.index_list ul li:nth-of-type(4n):after {
    border-right: none;
}

.index_list ul li a {
    text-decoration: none;
    color: #666;
}


/* 文章列表 */

.index_list.article_list ul li {
    width: 33.3% !important;
}

.index_list.article_list ul li:nth-of-type(3n):after {
    border-right: none !important;
}

.index_list.article_list ul li:nth-of-type(4n):after {
    border-right: 1px solid #E2E2E2 !important;
}

.index_list.article_list ul li a {
    color: #016cc1 !important;
}


/* 底部 */

.footer {
    position: relative;
    height: 36px;
    line-height: 36px;
    background: #fff;
    text-align: center;
}

.footer img {
    width: 24px;
    position: relative;
    top: 6px;
}

.footer span {
    color: #888;
    height: 36px;
    line-height: 36px;
    padding-left: 5px;
}
</style>
  <!-- 头部 -->
    <div class="header">
        <img src="static/images/logo.png" alt="">
    </div>
    <!-- 大图 -->
    <div class="banner">
        <img src="static/images/banner.jpg" alt="">
    </div>
    <!-- 菜单 -->
    <div class="nav">
        <ul>
            <li>
                <a href=""><img src="static/images/gw.png" alt=""><br><span>行政公文</span></span>
                </a>
            </li>
            <li>
                <a href=""><img src="static/images/zd.png" alt=""><br><span>规章制度</span></a>
            </li>
            <li>
                <a href=""><img src="static/images/sw.png" alt=""><br><span>事务文书</span></a>
            </li>
            <li>
                <a href=""><img src="static/images/hy.png" alt=""><br><span>会议文书</span></a>
            </li>
        </ul>
        <ul>
            <li>
                <a href=""><img src="static/images/ly.png" alt=""><br><span>交际礼仪文书</span></a>
            </li>
            <li>
                <a href=""><img src="static/images/fl.png" alt=""><br><span>法律文书</span></a>
            </li>
            <li>
                <a href=""><img src="static/images/jj.png" alt=""><br><span>经济财务文书</span></a>
            </li>
            <li>
                <a href=""><img src="static/images/lw.png" alt=""><br><span>论文</span></a>
            </li>
        </ul>
        <ul>
            <li>
                <a href=""><img src="static/images/ht.png" alt=""><br><span>合同文书</span></a>
            </li>
            <li>
                <a href=""><img src="static/images/dt.png" alt=""><br><span>总结范文</span></a>
            </li>
            <li>
                <a href=""><img src="static/images/sy.png" alt=""><br><span>实用范文</span></a>
            </li>
            <li>
                <a href=""><img src="static/images/zw.png" alt=""><br><span>作文</span></a>
            </li>
        </ul>

    </div>
    <!-- 分类导航区 -->

    <div class="menu">
        <h3>分类导航</h3>
        <div class="subnav">
            <ul>
                <li> <a href=""><span>事</span>事务类</a></li>
                <li> <a href=""><span>启</span>启示类</a> </li>
                <li> <a href=""><span>通</span>通知类</a> </li>
            </ul>
            <ul>
                <li> <a href=""><span>总</span>总结类</a> </li>
                <li> <a href=""><span>合</span>合同类</a> </li>
                <li> <a href=""><span>工</span>工作类</a></li>
            </ul>
        </div>
    </div>
    <!-- 列表栏 -->
    <div class="index_list">
        <h3>
            <img src="static/images/1.png" " alt=" "><span>交际礼仪文书</span>
            <a target="_blank " href=" ">查看>></a>
        </h3>
        <ul>
            <li>
                <a href=" ">聘书</a>
            </li>
            <li>
                <a href=" ">表扬信</a>
            </li>
            <li>
                <a href=" ">道歉信</a>
            </li>
            <li>
                <a href=" ">讣告</a>
            </li>
            <li>
                <a href=" ">悼词</a>
            </li>
            <li>
                <a href=" ">祝词</a>
            </li>
            <li>
                <a href=" ">贺信</a>
            </li>
            <li>
                <a href=" ">邀请函</a>
            </li>
            <li>
                <a href=" ">感谢信</a>
            </li>
            <li>
                <a href=" ">倡议书</a>
            </li>
            <li>
                <a href=" ">答谢信</a>
            </li>
            <li>
                <a href=" ">辞职信</a>
            </li>
            <li>
                <a href=" ">祝福语</a>
            </li>
            <li>
                <a href=" ">推荐信</a>
            </li>
            <li>
                <a href=" ">公开信</a>
            </li>
            <li>
                <a href=" ">离职证明</a>
            </li>
            <li>
                <a href=" ">辞职申请书</a>
            </li>
            <li>
                <a href=" ">简历</a>
            </li>
            <li>
                <a href=" ">求职信</a>
            </li>
            <li>
                <a href=" ">慰问信</a>
            </li>
        </ul>
    </div>
    <div class="index_list ">
            <h3>
                <img src="static/images/2.png " " alt=" "><span>法律文书</span>
            <a target="_blank " href=" ">查看>></a>
        </h3>

        <ul>
            <li>
                <a href=" ">起诉状</a>
            </li>
            <li>
                <a href=" ">上诉状</a>
            </li>
            <li>
                <a href=" ">申诉状</a>
            </li>
            <li>
                <a href=" ">答辩状</a>
            </li>
            <li>
                <a href=" ">仲裁协议书</a>
            </li>
            <li>
                <a href=" ">仲裁申请书</a>
            </li>
        </ul>
    </div>
    <div class="index_list ">
        <h3>
            <img src="static/images/3.png " " alt=" "><span>规章制度</span>
            <a target="_blank " href=" ">查看>></a>
        </h3>
        <ul>
            <li>
                <a href=" ">章程</a>
            </li>
            <li>
                <a href=" ">条例</a>
            </li>
            <li>
                <a href=" ">规定</a>
            </li>
            <li>
                <a href=" ">办法</a>
            </li>
            <li>
                <a href=" ">细则</a>
            </li>
            <li>
                <a href=" ">守则</a>
            </li>
            <li>
                <a href=" ">制度</a>
            </li>
        </ul>
    </div>
    <div class="index_list ">
            <h3>
                <img src="static/images/4.png " " alt=" "><span>会议文书</span></h3>
        <ul>
            <li>
                <a href=" ">会议方案</a>
            </li>
            <li>
                <a href=" ">会议通知</a>
            </li>
            <li>
                <a href=" ">会议记录</a>
            </li>
            <li>
                <a href=" ">会议讲话</a>
            </li>
            <li>
                <a href=" ">会议闭幕词</a>
            </li>
        </ul>
    </div>
    <div class="index_list ">
        <h3>
            <img src="static/images/5.png " " alt=" "><span>经济财务文书</span>
            <a target="_blank " href=" ">查看>></a>
        </h3>
        <ul>
            <li>
                <a href=" ">可行性研究</a>
            </li>
            <li>
                <a href=" ">审计报告</a>
            </li>
            <li>
                <a href=" ">财务分析</a>
            </li>
            <li>
                <a href=" ">资产评估</a>
            </li>
        </ul>
    </div>
    <!-- 文章列表 -->
    <div class="index_list article_list ">
            <h3>
                <img src="static/images/hot.png " " alt=" "><span>经济财务文书</span>
            <a target="_blank " href=" ">查看>></a>
        </h3>
        <ul>
            <li>
                <a href=" ">辅修经贸英语生求职信范文</a>
            </li>
            <li>
                <a href=" ">我惹祸了小学作文350字</a>
            </li>
            <li>
                <a href=" ">野鸭与苍鹰励志小故事</a>
            </li>
            <li>
                <a href=" ">《景阳冈》缩写作文</a>
            </li>
            <li>
                <a href=" ">辅修经贸英语生求职信范文</a>
            </li>
            <li>
                <a href=" ">我惹祸了小学作文350字</a>
            </li>
            <li>
                <a href=" ">野鸭与苍鹰励志小故事</a>
            </li>
            <li>
                <a href=" ">《景阳冈》缩写作文</a>
            </li>
            <li>
                <a href=" ">辅修经贸英语生求职信范文</a>
            </li>
        </ul>
    </div>
    <!-- 底部 -->
    <div class="footer">
        <img src="static/images/m_logo.png" alt=""><span>文书帮</span>
    </div>

总结

本次作业难点在于flex容器和项目的属性，之前flex布局基本没基础过，运用还不是很熟练。

flex容器属性总结

1、flex-direction （控制flex元素方向） ：row、row-reverse、column、column-reverse

2、flex-wrap（元素换行）：nowrap、wrap、wrap-reverse

3、flex-flow（flex-direction和flex-wrap的缩写）：默认为flex-flow：row nowrap

4、justify-content（横轴的对齐方式）：flex-start、flex-end、center、space-between、space-around

5、align-items（纵轴对齐方式）：flex-start、flex-end、center

6、align-content（多根轴线的对齐方式，如果只有一根轴线则该属性无效）：flex-start、flex-end、center、space-between、space-around、stretch

flex项目属性总结

1、order定义项目排列顺序,索引越小超靠前,默认为0

2、flex-grow定义项目的放大比例,默认为0表示不放大, 即就算存在剩余空间也不放大

3、flex-shrink定义了项目的缩小比例,默认为1,即如何空间不足,则自动缩小项目来填充

4、flex-basis定义了项目占据的主轴空间,默认值为auto, 即项目原始大小

5、flex是flex-grow,flex-shrink,flex-basis简写,默认值: 0 1 auto, 后二个属性可选6align-self个性化定定制某单个项目的对齐方式,可覆盖容器`align-items`属性,默认auto