search

博客列表 >2019年9月10日，flex布局仿php中文网手机站点

2019年9月10日，flex布局仿php中文网手机站点

riskcn的博客
riskcn的博客原创
2019年09月16日 11:33:08735浏览

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、运行效果

_C__Users_Admin_Desktop_demo_index.html.png

放假放纵了几天，赶紧补上了！

有点问题，还不好处理：<br>标签后面跟着一个块级元素后，br标签会获得后面的块级元素的高度，如底部导航处，需换个思路来处理细节

上一条：前端封装原理与知识点（HTML手册)-2019年9月11日下一条：仿造php中文网20190910
flex布局
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多