登录  /  注册
博主信息
博文 15
粉丝 0
评论 0
访问量 11415
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
使用flex布局仿写php中文网及千图网手机端页面--2019年9月10日
缘的博客
原创
1061人浏览过

0x01    php中文网手机端(https://m.php.cn/)页面仿写

     主要的html代码:   

实例

<head>
    <link rel="stylesheet" href="static/css/init.css">
    <link rel="stylesheet" href="static/css/demo1.css">
    <title>仿php.cn</title>
</head>

<body>
    <div class="header">
        <img src="static/images/user-pic.jpg" alt="">
        <div class="logo">
            <img src="static/images/logo.png" alt="">
        </div>
        <img src="static/images/user-nav.jpg" alt="">
    </div>

    <div class="banner">
        <a href=""><img src="static/images/banner.jpg" alt=""></a>
    </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>
                <span>中级</span><span>49748次播放</span>
            </p>
        </div>
    </div>

    <h3>最近更新</h3>
    <div class="update">
        <div class="content">
            <a href=""><img src="static/images/laravel.jpg" alt=""></a>
            <div>
                <h2><a href="">Laravel 5.8 中文文档手册</a></h2>
                <p>《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
                    缓存驱动规范等等。
                </p>
                <br>
                <p>
                    <span>中级</span>
                    <span>7264次播放</span>
                </p>
            </div>
        </div>
    </div>

    <h3>最新文章</h3>
    <div class="article">
        <div class="content">
            <div>
                <a href="">
                    <span>宝塔面板php无法使用</span>
                    <br>
                    <span>发布时间:2019-09-10</span>
                </a>
            </div>
            <a href=""><img src="static/images/article5.jpg" alt=""></a>
        </div>
        <a class="more" href="">更多内容</a>
    </div>


    <div class="footer">
        <ul>
            <li>
                <a href=""><img src="static/font-icon/zhuye.png" alt=""><br><span>首页</span></a>
            </li>
            <li>
                <a href=""><img src="static/font-icon/video.png" alt=""><br><span>视频</span></a>
            </li>
            <li>
                <a href=""><img src="static/font-icon/luntan.png" alt=""><br><span>社区</span></a>
            </li>
            <li>
                <a href=""><img src="static/font-icon/geren.png" alt=""><br><span>我的</span></a>
            </li>
        </ul>
    </div>
</body>

</html>

运行实例 »

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

    相应的css样式表的部分重要代码:

实例

.header {
    width: 100%;
    min-width: 320px;
    max-width: 768px;
    height: 42px;
    background-color: #444;
    position: fixed;
    top: 0;
    left: 50%;
    /* 往回移动一半头部的宽度 */
    transform: translateX(-50%);
    display: flex;
}

.banner {
    margin-top: 42px;
}


.nav ul {
    display: flex;
    padding: 6px;
}

.nav ul li {
    height: 75px;
    flex: 1;
}

.article .content {
    height: 65px;
    background-color: white;
    padding: 10px;
    margin-top: 10px;
    display: flex;
    justify-content: space-evenly;
}

.footer {
    width: 100%;
    min-width: 320px;
    max-width: 768px;
    height: 42px;
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 0;
    background-color: #EDEFF0;
}

.footer ul {
    display: flex;
}

.footer ul li {
    flex: 1;
}

运行实例 »

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

    效果图:

html.io1.html.png


0x02    千图网仿站(http://m.58pic.com/

    html文档:

实例

<!DOCTYPE html>
<html lang="en">

<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/init2.css">
    <link rel="stylesheet" href="static/css/demo2.css">
    <title>仿千图网</title>
</head>

<body>
    <div class="top">
        <img class="logo" src="static/images/qiantu_logo.PNG" alt="">
        <div class="right">
            <img class="search" src="static/images/search.png" alt="">
            <div class="login_from">
                <a class="login" href="javascript:void(0);">登录</a>|<a class="register" href="javascript:void(0);">注册</a>
            </div>
        </div>
    </div>

    <div class="banner">
        <a href=""><img src="static/images/banner_640.jpg" alt=""></a>
    </div>

    <div class="nav">
        <ul>
            <li><a style="background: #eadfbf; color: #a8810d;" href="javascript:void(0);">平面广告</a></li>
            <li><a style="background: #eed9bb; color: #8f724d;" href="javascript:void(0);">电商淘宝</a></li>
            <li><a style="background: #eddbcc; color: #ad6834;" href="javascript:void(0);">装饰装修</a></li>
            <li><a style="background: #e7c0c0; color: #924545;" href="javascript:void(0);">网页UI</a></li>
        </ul>
        <ul>
            <li><a style="background: #b7e2ef; color: #518fa2;" href="javascript:void(0);">视频音效</a></li>
            <li><a style="background: #d6e7c0; color: #7d9b56;" href="javascript:void(0);">产品工业</a></li>
            <li><a style="background: #c1e7c0; color: #51964f;" href="javascript:void(0);">PPT模板</a></li>
            <li><a style="background: #b8d2fb; color: #4f6b97;" href="javascript:void(0);">背景</a></li>
        </ul>
    </div>

    <div class="content">
        <div class="content_box">
            <div class="img">
                <a href=""><img src="static/images/1.jpg" alt=""></a>
            </div>
            <div class="desc">
                <div class="left">
                    <a href="">
                        <p>紫金大气中秋节宣传海报</p>
                    </a>
                    <p>2019-9-15</p>
                </div>
                <div class="right">
                    <i></i>
                    <span>7777</span>
                </div>
            </div>
        </div>
        <div class="content_box">
            <div class="img">
                <a href=""><img src="static/images/2.jpg" alt=""></a>
            </div>
            <div class="desc">
                <div class="left">
                    <a href="">
                        <p>合成中秋节日宣传海报展板</p>
                    </a>
                    <p>2019-9-15</p>
                </div>
                <div class="right">
                    <i></i>
                    <span>3666</span>
                </div>
            </div>
        </div>
        <div class="content_box">
            <div class="img">
                <a href=""><img src="static/images/3.jpg" alt=""></a>
            </div>
            <div class="desc">
                <div class="left">
                    <a href="">
                        <p>中国传统节日月圆中秋手机海报</p>
                    </a>
                    <p>2019-9-15</p>
                </div>
                <div class="right">
                    <i></i>
                    <span>7777</span>
                </div>
            </div>
        </div>
        <div class="content_box"></div>
    </div>

    <div class="more">
        <span>查看更多</span>
    </div>

    <div class="footer">
        <ul>
            <li>
                <a href=""><img src="static/font-icon/zhuye.png" alt=""><br><span>首页</span></a>
            </li>
            <li>
                <a href=""><img src="static/font-icon/tuijian.png" alt=""><br><span>为我推荐</span></a>
            </li>
            <li>
                <a href=""><img src="static/font-icon/fenlei.png" alt=""><br><span>素材分类</span></a>
            </li>
            <li>
                <a href=""><img src="static/font-icon/zixun.png" alt=""><br><span>设计资讯</span></a>
            </li>
            <li>
                <a href=""><img src="static/font-icon/geren.png" alt=""><br><span>用户后台</span></a>
            </li>
        </ul>
    </div>
</body>

</html>

运行实例 »

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

    对应的css样式表:

实例

/* 顶部样式 */

.top {
    width: 100%;
    min-width: 320px;
    max-width: 640px;
    height: 46px;
    background-color: #fff;
    position: fixed;
    top: 0;
    left: 50%;
    /* 让整个头部往回走1/2个头部的距离,让头部刚好居中
    因为直接用left:50%的基准位置是容器的左上角 */
    transform: translateX(-50%);
    /* 定义盒子为弹性盒子 */
    display: flex;
    justify-content: space-between;
}

.top .logo {
    width: 100px;
    height: 34px;
    padding-top: 10px;
    padding-left: 20px;
}

.top .right .search {
    float: left;
    padding-top: 13px;
    margin-right: 12px;
}

.top .right .login_from {
    float: right;
}

.top .right .login_from a {
    font-size: 14px;
    padding: 0 6px;
    display: inline-block;
    height: 46px;
    line-height: 46px;
    color: #666;
}

.top .right .login_from .login {
    color: #219d02;
}

.banner {
    /* 让整个banner往下移动一个头部的高度
    因为固定定位相当于绝对定位,脱离了文档流。
    当头部设置了固定定位,banner就会往上移到浏览器顶部,导致被头部遮住了部分 */
    margin-top: 48px;
}

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

.nav {
    height: 100px;
    box-sizing: border-box;
}

.nav ul {
    display: flex;
    /* 为了让两行之间有一点间距 */
    padding: 5px 0;
}

.nav ul li {
    height: 35px;
    /* 让项目平分剩余空间 */
    flex: 1;
}

.nav ul li a {
    display: inline-block;
    width: 142px;
    line-height: 35px;
    text-align: center;
    font-size: 12px;
    border-radius: 4px;
}

.content {
    display: flex;
    /* 将换行方式设置为换行 */
    flex-wrap: wrap;
}

.content .content_box {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 12px;
}

.content .content_box ***g {
    height: 300px;
    /* 隐藏超出容器的内容 */
    overflow: hidden;
}

.content .content_box .desc {
    box-sizing: border-box;
    width: 300px;
    height: 52px;
    padding: 8px 8px 0;
    background-color: #fff;
}

.content .content_box .desc .left {
    height: 38px;
    float: left;
    display: flex;
    /* 将y轴设置为主轴 */
    flex-direction: column;
    justify-content: space-between;
}

.content .content_box .desc .left p {
    color: #888;
    width: 220px;
    height: 16px;
    line-height: 16px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 14px;
}

.content .content_box .desc .left a p {
    color: #333;
}

.content .content_box .desc .right {
    height: 42px;
    float: right;
    display: flex;
}

.content .content_box .desc .right i {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url("../images/hot.png");
    background-repeat: no-repeat;
}

.content .content_box .desc .right span {
    font-size: 12px;
    color: #d81e06;
    padding-top: 2px;
}

.more {
    margin: 0 10px;
    background-color: #fff;
    text-align: center;
}

.more span {
    line-height: 36px;
    color: #666;
    font-size: 14px;
}

.footer {
    width: 100%;
    min-width: 320px;
    max-width: 640px;
    height: 50px;
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 0;
    background-color: #fff;
}

.footer ul {
    display: flex;
}

.footer ul li {
    flex: 1;
}

.footer ul li img {
    display: inline-block;
    width: 26px;
    height: 26px;
}

.footer ul li span {
    color: #666;
    font-size: 12px;
}

运行实例 »

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

    效果图:

html.io2.html.png


0x03    总结

    1.    flex的基本概念

       (1)Flex容器:采用flex布局的元素, 称为flex容器, 简称容器。需设置样式display:flex;

       (2) Flex项目(flex item):Flex容器中的所有成员(子元素,注意:这里的子元素指的是当前采用了flex布局的父元素的子元素,子元素的子元素并不是项目)会自动成为该容器的成员,称为flex项目,简称项目。

       (3) flex项目都支持宽高设置, 哪怕它之前是内联元素,类似于浮动元素

       (4) 主轴(main axis):也叫水平轴, 横轴,x轴

                main start: 起始位置

                main end: 结束位置

                main size: 单个项目占据的主轴空间

        (5)交叉轴(cross axis):也叫垂直轴,坚轴,y轴

                cross start: 起始位置

                cross end: 结束位置

                cross size: 单个项目占据的交叉轴空间

    2.    flex容器属性

        (1)flex-direction:主轴方向(即项目排列方向,他有四个值:

                row(默认值):主轴为水平方向,起点在左边    

                row-reverse:主轴为水平方向, 起点在右边(反转)    

                column:主轴为垂直方向, 起点在上边    

                column-reverse:主轴为垂直方向, 起点在下边    

        (2)flex-wrap:确定项目的换行方式,他有三个值:

                nowrap(默认值):不换行   

                wrap:自动换行, 第一行排列不下, 自动转到下一行    

                wrap-reverse:自动反向换行, 第一行显示在下方, 与wrap相反 

        (3)flex-flow:flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap

        (4)justify-content:设置项目在主轴上的对齐方式,他有六个值:

                flex-start(默认值)左对齐    

                flex-end:右对齐    

                center:居中对齐    

                space-between:两端对齐: 项目之间间隔相等    

                space-around:项目两侧间隔相等,即项目之间间隔是项目到两端的二倍    

                space-evenly: 所有间距平均分,即项目两侧间隔以及项目间的间距都相等

         (5)align-items:该属性设置项目在交叉轴上的对齐方式,他有五个值:

                flex-start:与交叉轴起点对齐, 即: 顶对齐 / 上对齐    

                flex-end:与交叉轴终点对齐, 即: 底对齐 / 下对齐    

                center:与交叉轴中间线对齐, 即: 居中对齐    

                baseline:与项目中第一行文本的基线对齐, 即文本的下边线    

                stretch(默认值):自动伸展到容器的高度(项目未设置高度或将高度设置为auto有效)    

         (6)align-content:它是用来让每一个单行的容器居中而不是让整个容器居中,只适用于多行的flex容器,并且当交叉轴上有多余空间使flex容器内的flex线对齐。简单点来说就是把所有看成一个整体进行布局,他有六个值:
                flex-start:与交叉轴起点对齐    

                flex-end:与交叉轴终点对齐    

                center:与交叉轴中间点对齐    

                space-between:与交叉轴两端对齐, 轴线之间间隔相等    

                sapce-around:每根轴线间隔相等,轴线间隔比轴线到边框大一倍    

                stretch(默认值):轴线占满整个交叉轴    

    3.    flex项目属性(只列出常用)

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

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

                flex-grow: 1: 每个项目等分, 都占全部的空间的N分之一(N: 项目数量)。

                flex-grow: 2如果某个项目为2, 其它项目为1, 则它占据空间比其它项目多一倍

        (3)flex-shrink:设置了项目的缩小比例,默认为1, 即空间不足时, 自动缩小填充。

                flex-shrink: 1: 所有项目都为1, 空间不足时, 自动等比例缩小填充主轴剩余空间

                flex-shrink: 如果有一个项目为0, 其它项目为1, 则空间不足时, 它并不随其它项目缩小

                注意: 该属性不支持负值, 即flex-shrink: -1 无效

         (4)flex:flex-grow,flex-shrink和flex-basis属性的简写。默认值: 0  1 auto, 除第一个外, 其它二个可选

    4.    弹性盒子flex的容器和项目的概念是针对父子元素而言的,假如有以下代码:

<ul>
    <li>
        <span></span>
        <span></span>
    </li>
    <li>
        <span></span>
        <span></span>
    </li>
</ul>

运行实例 »

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

    现在要对span元素进行布局,这时就要在li标签中设置display:flex; 然后在进行布局操作。如果在ul标签中添加了flex则无法对span进行弹性布局,因为ul的子元素是li。

    5.    flex项目的float属性会失效








批改状态:合格

老师批语:写得不错, 还多做了一个
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学