search

博客列表 >php中文网移动端首页仿写_2019/9/10作业

php中文网移动端首页仿写_2019/9/10作业

零度 的博客
零度 的博客原创
2019年09月12日 00:12:581042浏览

图片演示

1.jpg

3.jpg2.jpg

代码演示

实例

<!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">
    <title>php中文网首页-实战</title>
</head>
<style>
    /* 公共样式 */
    
    body {
        height: 100%;
        min-width: 320px;
        max-width: 768px;
        margin: 0 auto;
        background: #edeff0;
        overflow-y: initial;
        position: relative;
        /*不要出现水平滚动条*/
        overflow-x: hidden;
        /*设置点击链接跳转时出现高亮,设置为透明: ios / ipad*/
        -webkit-tap-highlight-color: transparent;
    }
    /* 网站头部  */
    
    .top {
        position: fixed;
        top: 0;
        width: 100%;
        height: 42px;
        background-color: #444444;
        min-width: 320px;
        max-width: 768px;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }
    
    .top {
        display: flex;
    }
    
    .top img:first-of-type {
        width: 25px;
        height: 25px;
        margin-top: 8px;
        border-radius: 50%;
        margin-left: 5px;
    }
    
    .top img:last-of-type {
        width: 25px;
        height: 25px;
        margin-top: 8px;
        margin-right: 15px;
    }
    
    .top .logo {
        text-align: center;
        flex: 1;
    }
    
    .top .logo img {
        width: 94px;
        height: 45px;
    }
    /*轮播图*/
    
    .banner {
        display: flex;
    }
    
    .banner img {
        width: 100%;
        height: 160px;
    }
    /* 导航区 */
    
    .nav {
        height: 170px;
        background-color: white;
        box-sizing: border-box;
    }
    
    .nav ul {
        margin: 0;
        padding: 6px;
        display: flex;
    }
    
    .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;
        color: gray;
        text-decoration: none;
    }
    /* 推荐课程去 */
    
    h3 {
        color: gray;
    }
    
    .courses {
        height: 100%;
        color: gray;
    }
    
    .courses ul {
        margin: 0;
        padding: 0;
        list-style: none;
        /*flex布局*/
        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;
        /*flex布局*/
        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: .55;
        margin-left: 15px;
    }
    
    .courses div p span:first-of-type {
        font-size: 0.8rem;
        background-color: black;
        color: white;
        border-radius: 30%;
        padding: 0 2px;
    }
    
    .courses div p span:last-of-type {
        font-size: 0.7rem;
    }
    /*底部样式*/
    
    .footer {
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 42px;
        min-width: 320px;
        max-width: 768px;
        left: 50%;
        border-top: 1px solid #ccc;
        -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;
    }
    
    .footer ul li a {
        color: gray;
        text-decoration: none;
    }
    
    .footer ul li {
        flex: 1;
    }
    /* 最新更新区 */
    
    .zuixin {
        height: 100%;
        color: gray;
    }
    
    .zuixin div {
        background-color: white;
        padding: 10px;
        margin-top: 10px;
        height: 90px;
        /*flex布局*/
        display: flex;
        justify-content: flex-start;
    }
    
    .courses div {
        background-color: white;
        padding: 10px;
        margin-top: 10px;
        height: 90px;
        /*flex布局*/
        display: flex;
        ]
    }
    
    .zuixin div img {
        width: 100%;
        height: 90px;
    }
    
    .zuixin div a {
        text-decoration: none;
        color: gray;
        flex: 0.45;
    }
    
    .zuixin div p {
        flex: .55;
        margin-left: 15px;
    }
    
    .zuixin div p span:first-of-type {
        font-size: 0.1rem;
        padding: 0 2px;
    }
    
    .zuixin div p span:nth-of-type(2) {
        font-size: 0.8rem;
        background-color: black;
        color: white;
        border-radius: 30%;
        padding: 0 2px;
    }
    
    .zuixin div p span:last-of-type {
        font-size: 0.7rem;
        position: relative;
        left: 70%;
    }
    /* 最新文章 */
    
    .zxwz div {
        background-color: white;
        padding: 10px;
        margin-top: 10px;
        height: 90px;
        /*flex布局*/
        display: flex;
        flex-flow: row-reverse;
    }
    
    .zxwz div img {
        width: 100%;
        height: 90px;
    }
    
    .zxwz div a {
        text-decoration: none;
        color: rgb: 0;
        flex: 0.35;
    }
    
    .zxwz div p {
        flex: .65;
        margin: 0;
        margin-left: 15px;
        margin-top: 5px;
    }
    
    .zxwz div p a {
        margin-bottom: 10px;
        color: #444444;
        font-size: 14px;
        font-weight: bold;
    }
    
    .zxwz div p span {
        color: #888;
        font-size: 12px;
    }
    /* 更多内容区 */
    
    .gdnr {
        margin: 10px 0px;
    }
    
    .gdnr a {
        color: gray;
        text-decoration: none;
        display: block;
        margin: 0 auto;
        /* line-height: 30px; */
        line-height: 10px;
        text-align: center;
        background: #fff;
        padding: 10px 0;
    }
    /* 最新博文区 */
    
    .zxbw div {
        width: 100;
        display: flex;
        justify-content: space-between;
        background-color: #fff;
        margin: 10px 0;
    }
    
    .zxbw div p:nth-child(1) {
        height: 29px;
        margin-left: 15px;
        font-size: 14px;
        color: gray;
        font-weight: bold;
    }
    
    .zxbw div p:nth-child(2) {
        height: 29px;
        font-size: 12px;
        color: #888;
        margin-right: 15px;
    }
</style>

<body>
    <!-- 顶部 -->
    <div class="top">
        <img src="static/images/user-pic.jpeg" alt="">
        <div class="logo">
            <img src="https://m.php.cn/static/images/logo.png" alt="">
        </div>
        <img src="/static/images/user-nav.jpg" 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>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>
            <a href=""><img src="static/images/tjkc4.jpg" alt=""></a>
            <p>
                <a href="">2018前端入门_HTML5</a>
                <br>
                <span>初级</span><span>210066次播放</span>
            </p>
        </div>
    </div>
    <!-- 最新更新区 -->

    <h3>最新更新</h3>
    <div class="zuixin">

        <div>
            <a href=""><img src="static/images/tjkc3.jpg" alt=""></a>
            <p>
                <a href="">Laravel 5.8 中文文档手册</a>
                <br>
                <span>《Laravel 5.1/5.8速查表：https://www.php.cn/phpkj/laravel/cheatsheet5</span>
                <br>
                <span>中级</span><span>7240次播放
                    </span>
            </p>
        </div>
        <div>
            <a href=""><img src="static/images/tjkc3.jpg" alt=""></a>
            <p>
                <a href="">JavaScript极速入门</a>
                <br>
                <span>本套课程将帮助大家迅速掌握JavaScript这门高端的、动态的、弱类型编</span>
                <br>
                <span>中级</span><span>49748次播放</span>
            </p>
        </div>
        <div>
            <a href=""><img src="static/images/tjkc3.jpg" alt=""></a>
            <p>
                <a href="">第七期_直播体验课</a>
                <br>
                <span>php中文网第七期线上***今晚（2019.7.1）正式开课啦~~！为了让</span>
                <br>
                <span>中级</span><span>49748次播放</span>
            </p>
        </div>
        <div>
            <a href=""><img src="static/images/tjkc3.jpg" alt=""></a>
            <p>
                <a href="">CSS3 极速入门</a>
                <br>
                <span>html和css是组成WEB前端开发最核心的部分，所以结合之前的html课程，</span>
                <br>
                <span>中级</span><span>49748次播放</span>
            </p>
        </div>
        <div>
            <a href=""><img src="static/images/tjkc3.jpg" alt=""></a>
            <p>
                <a href="">HTML5 极速入门</a>
                <br>
                <span>在本套课程中，你将学习如何使用 HTML 来创建站点，完成静态网页布局</span>
                <br>
                <span>中级</span><span>49748次播放</span>
            </p>
        </div>
        <div>
            <a href=""><img src="static/images/tjkc3.jpg" alt=""></a>
            <p>
                <a href="">nodejs开发基础教程</a>
                <br>
                <span>Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js对一</span>
                <br>
                <span>中级</span><span>49748次播放</span>
            </p>
        </div>
    </div>
    <!-- 最新文章 -->
    <h3>最新文章</h3>
    <div class="zxwz">

        <div>
            <a href=""><img src="static/images/tjkc3.jpg" alt=""></a>
            <p>
                <a href="">百度站长主动推送php怎么弄</a>
                <br>

                <span>发布时间：2019-09-10</span>

            </p>
        </div>
        <div>
            <a href=""><img src="static/images/tjkc3.jpg" alt=""></a>
            <p>
                <a href="">百度站长主动推送php怎么弄</a>
                <br>

                <span>发布时间：2019-09-10</span>

            </p>
        </div>
        <div>
            <a href=""><img src="static/images/tjkc3.jpg" alt=""></a>
            <p>
                <a href="">百度站长主动推送php怎么弄</a>
                <br>

                <span>发布时间：2019-09-10</span>

            </p>
        </div>
        <div>
            <a href=""><img src="static/images/tjkc3.jpg" alt=""></a>
            <p>
                <a href="">百度站长主动推送php怎么弄</a>
                <br>

                <span>发布时间：2019-09-10</span>

            </p>
        </div>
        <div>
            <a href=""><img src="static/images/tjkc3.jpg" alt=""></a>
            <p>
                <a href="">百度站长主动推送php怎么弄</a>
                <br>

                <span>发布时间：2019-09-10</span>

            </p>
        </div>
    </div>
    <!-- 更多内容 -->
    <div class="gdnr">
        <a href="" class="more">更多内容</a>
    </div>
    <!-- 最新博文区 -->
    <h3>最新博文</h3>
    <div class="zxbw">

        <div>
            <p>mysql查询时间戳和日期的转换</p>
            <p>2019-09-07</p>
        </div>
        <div>
            <p>mysql查询时间戳和日期的转换</p>
            <p>2019-09-07</p>
        </div>
        <div>
            <p>mysql查询时间戳和日期的转换</p>
            <p>2019-09-07</p>
        </div>
        <div>
            <p>mysql查询时间戳和日期的转换</p>
            <p>2019-09-07</p>
        </div>
        \
    </div>
    <br><br><br>
    <!--底部-->
    <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>

运行实例 »

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

总结

  1. 看着视频挺简单，自己写写出一堆毛病。如下图其中一个毛病（高度写死值，内容不够就这样一片空白）：

    11.jpg

  2. flex布局一边看网上文字基础一边测试，才写出来下面的行内容反向展示啊，两端对齐啊什么的，还是得多练才行。。

上一条：Flex布局-仿照某生活服务平台网站首页_201909120008下一条：前端封装原理与知识点20190911作业
html
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多