博主信息
wpj的博客
博文
31
粉丝
1
评论
0
访问量
2192
积分:0
P豆:63

仿php中文网移动端首页-2019-09-10

2019年09月12日 14:47:56阅读数:22博客 / wpj的博客 / 8期-html & css

仿php中文网移动端首页

实例

<!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>移动端案例</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
    <style>
        * {padding: 0;margin: 0;}
        a {text-decoration: none;color: #888;}
        li {list-style: none;}
        h3 {color: #888;margin-left: 5px;}
        .mt-20 {margin-top: 20px;}
        body {
            min-width: 320px;
            max-width: 768px;
            margin: 0 auto;
            background-color: #edeff0;
            overflow-y: initial;
            overflow-x: hidden; /*禁止出现水平滚动条*/
            position: relative; 
            -webkit-tap-highlight-color: transparent; /* 当用户点击链接跳转时候会出现高亮一块,这样很影响用户体验,我们可以吧颜色设置为透明 */
        }
        
        /* 顶部 */
        .top {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 42px;
            min-width: 320px;
            max-width: 768px;
           
           /*水平居中*/
            left: 50%;
            -webkit-transform: translateX(-50%);
            transform: translateX(-50%);

            /* 弹性布局 */
            display: flex;

            background-color: #444;
        }
        .top img:first-of-type {
            width: 25px;
            height: 25px;
            margin: 8px 0px 0px 5px;
            border-radius: 50%;
        }
        .top .logo {
            flex: 1;
            text-align: center;
        }
        .top .logo img{
            width: 94px;
            height: 45px;
            margin: 0;
        }
        .top  i {
            color: white;
            font-size: 19px;
            line-height: 45px;
            padding-right: 10px;
        }

        /* 轮播图 */
        .banner {
            display: flex;
            margin-top: 41px;
        }
        .banner img {
            width: 100%;
            height: 160px;
        }
        
        /* 导航栏 */
        .nav {
            height: 170px;
            box-sizing: border-box;
            background-color: white;
        }
        .nav ul {
            padding: 6px;
            display: flex;
        }
        .nav ul li {
            flex: 1;
            height: 75px;
            text-align: center;
        }
        .nav ul li img {
            width: 45px;
            height: 45px;
        }

        /* 推荐课程 */
        .courses ul {
            display: flex;
        }
        .courses ul li {
            padding: 5px;
        }
        .courses ul img {
            width: 100%;
            height: 90px;
        }
        .courses div , .new_updates div , .new_article div{
            height: 90px;
            padding: 10px;
            margin-top: 10px;
            background-color: white;

            display: flex;
            justify-content: flex-start;
        }
        .courses div img , .new_updates div img ,.new_article div img {
            width: 100%;
            height: 90px;
        }
        .courses div a , .new_updates div a {
            flex: 0.45;
        }
        .courses div p , .new_updates div p {
            flex: 0.55;
            margin-left: 15px;
        }
        .courses div p span:first-of-type , .new_updates div p span:nth-last-child(2){
            color: white;
            font-size: 0.8rem;
            padding: 0 2px;
            border-radius: 30%;
            background-color: black;
        }
        .courses div p span:last-of-type{
            font-size: 0.7rem;
            padding-left: 5px;
        }

        /* 最新课程 */
        .new_updates div p span:last-of-type {
            font-size: 0.7rem;
            float:right;
        }
        .new_updates .desc {
            display: block;
            width: 190px;
            font-size: 12px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            padding-top: 10px;
        }
        
        /* 最新文章 */
        .new_article div a {
            flex: 0.40;
        }
        .new_article div p {
            flex: 0.60;
        }
        .new_article div p span {
            display: block;
            font-size: 12px;
            margin-top: 10px;
        }
        /* 最新博文 */
        .new_blog div{
            height: 40px;
            padding: 10px;
            margin-top: 10px;
            background-color: white;
        }
        .new_blog div p {
            line-height: 40px;
        }
        .new_blog div p span:first-of-type{
            width: 80%;
            float: left;
            color: #888;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            display: block;
        }
        .new_blog div p span:last-of-type{
            font-size: 12px;
            float: right;
        }

        /* 底部 */
        .footer {
            position: fixed;
            bottom: 0;
            width: 100%;
            height: 42px;
            min-width: 320px;
            max-width: 768px;
            left: 50%;
            -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
            border-top: 1px solid #ccc;
            background-color: #edeff0;
        }
        .footer ul {
            display: flex;
            text-align: center;
        }
        .footer ul li {
            flex: 1;
        }
        .footer ul li a:active{
            color: red;
        }
    </style>
</head>
<body>
    <!-- 顶部  -->
    <div class="top">
        <img src="https://m.php.cn/static/images/user_avatar.jpg" alt="">
        <div class="logo">
            <img src="https://m.php.cn/static/images/logo.png" alt="">
        </div>
        <i class="fa fa-dedent"></i>
    </div>

    <!-- 轮播图 -->
    <div class="banner">
        <img src="https://m.php.cn/static/images/ico/2.jpg" alt="">
    </div>

    <!-- 导航栏 -->
    <div class="nav">
        <ul>
            <li><a href=""><img src="https://m.php.cn/static/images/ico/html.png"><br>HTML/CSS</a></li>
            <li><a href=""><img src="https://m.php.cn/static/images/ico/JavaScript.png"><br>JavaScript</a></li>
            <li><a href=""><img src="https://m.php.cn/static/images/ico/code.png"><br>服务端</a></li>
            <li><a href=""><img src="https://m.php.cn/static/images/ico/sql.png"><br>数据库</a></li>
        </ul>
        <ul>
            <li><a href=""><img src="https://m.php.cn/static/images/ico/app.png"><br>移动端</a></li>
            <li><a href=""><img src="https://m.php.cn/static/images/ico/manual.png"><br>手册</a></li>
            <li><a href=""><img src="https://m.php.cn/static/images/ico/tool2.png"><br>工具</a></li>
            <li><a href=""><img src="https://m.php.cn/static/images/ico/live.png"><br>直播</a></li>
        </ul>
    </div>

    <!-- 推荐课程 -->
    <div class="mt-20">
        <h3>推荐课程</h3>
        <div class="courses">
            <ul>
                <li><a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d242759adb88970.jpg"></a></li>
                <li><a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d242759adb88970.jpg"></a></li>
            </ul>
            <div>
                <a href=""><img src="https://img.php.cn/upload/course/000/000/035/5d2941e265889366.jpg" alt=""></a>
                <p>
                    <a href="">CI框架30分钟极速入门</a>
                    <br>
                    <span>中级</span><span>6666次播放</span>
                </p>
            </div>
            <div>
                <a href=""><img src="https://img.php.cn/upload/course/000/126/153/5aa23f0ded921649.jpg" alt=""></a>
                <p>
                    <a href="">2018前端入门_HTML5</a>
                    <br>
                    <span>初级</span><span>9999次播放</span>
                </p>
            </div>
        </div>
    </div>

    <!-- 最新更新 -->
    <div class="mt-20">
        <h3>最新更新</h3>
        <div class="new_updates">
            <div>
                <a href=""><img src="https://img.php.cn/upload/course/000/000/020/5d521d6cbbeb7258.jpg" alt=""></a>
                <p>
                    <a href="">Laravel 5.8 中文文档手册</a>
                    <br>
                    <span href="" class="desc">Laravel 5.1/5.8速查表</span>
                    <br>
                    <span>中级</span><span>6969次播放</span>
                </p>
            </div>
            <div>
                <a href=""><img src="https://img.php.cn/upload/course/000/000/014/5d2814b3a7a92573.jpg" alt=""></a>
                <p>
                    <a href="">JavaScript极速入门</a>
                    <br>
                    <span href="" class="desc">本套课程将帮助大家迅速掌握JavaScript这门高端的、动态的、弱类型编程语言。知识点简单明了,让你学习0压力,适合新手观看学习</span>
                    <br>
                    <span>中级</span><span>6969次播放</span>
                </p>
            </div>
            <div>
                <a href=""><img src="https://img.php.cn/upload/course/000/000/020/5d521d6cbbeb7258.jpg" alt=""></a>
                <p>
                    <a href="">Laravel 5.8 中文文档手册</a>
                    <br>
                    <span href="" class="desc">Laravel 5.1/5.8速查表</span>
                    <br>
                    <span>中级</span><span>6969次播放</span>
                </p>
            </div>
            <div>
                <a href=""><img src="https://img.php.cn/upload/course/000/000/020/5d521d6cbbeb7258.jpg" alt=""></a>
                <p>
                    <a href="">Laravel 5.8 中文文档手册</a>
                    <br>
                    <span href="" class="desc">Laravel 5.1/5.8速查表</span>
                    <br>
                    <span>中级</span><span>6969次播放</span>
                </p>
            </div>
        </div>
    </div>

    <!-- 最新文章 -->
    <div class="mt-20">
        <h3>最新文章</h3>
        <div class="new_article">
            <div>
                <p>
                    <a href="">php自定义错误处理器</a>
                    <br>
                    <span>发布时间:2019-09-11</span>
                </p>
                <a href="">
                    <img src="https://img.php.cn/upload/article/000/000/029/5d788f01e8f75226.jpg" alt="">
                </a>
            </div>
            <div>
                <p>
                    <a href="">Composer简明教程</a>
                    <br>
                    <span>发布时间:2019-09-11</span>
                </p>
                <a href="">
                    <img src="https://img.php.cn/upload/article/000/000/020/5d788d7438b3d312.jpg" alt="">
                </a>
            </div>
        </div>
    </div>

    <!-- 最新博文 -->
    <div class="mt-20">
        <h3>最新博文</h3>
        <div class="new_blog">
            <div>
                <p>
                    <span>mysql查询时间戳和日期的转换</span>
                    <span>2019-09-11</span>
                </p>
            </div>
            <div>
                <p>
                    <span>php之免费常用快递物流api查询接口的使用教程</span>
                    <span>2019-09-11</span>
                </p>
            </div>
            <div>
                <p>
                    <span>mysql查询时间戳和日期的转换</span>
                    <span>2019-09-11</span>
                </p>
            </div>
        </div>
    </div>

    <div style="margin-top: 50px;"></div>
    <!-- 底部 -->
    <div class="footer">
        <ul>
            <li><a href=""><i class="fa fa-home"></i><br><span>主页</span></a></li>
            <li><a href=""><i class="fa fa-play-circle-o"></i><br><span>视频</span></a></li>
            <li><a href=""><i class="fa fa-code"></i><br><span>社区</span></a></li>
            <li><a href=""><i class="fa fa-user"></i><br><span>我的</span></a></li>
        </ul>
    </div>
</body>
</html>

运行实例 »

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


总结:

使用flex布局,要避免使用float,因为flex布局会让子容器的float失效。


运行结果图:

QQ截图20190912143426.png

QQ截图20190912143449.png

批改状态:合格

老师批语:写得不错, 基本上一比一高仿. 上课我把最基本最核心的讲了, 其它的地方, 就靠大家自己动手完成了

全部评论

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

条评论
暂无评论暂无评论!