中秋作业-仿美团触屏版-2019-9-12作业 - HTML/CSS/笔记

实例
<!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/style.css">
    <link rel="stylesheet" href="static/style2.css">
    <title>美团仿写</title>
    <style>
        /****************** 简单写了几个封装的CSS代码 ***********/
        
        body,
        button,
        dd,
        div,
        dl,
        dt,
        form,
        h1,
        h2,
        h4,
        h5,
        h6,
        input,
        li,
        ol,
        p,
        pre,
        td,
        textarea,
        th,
        ul {
            margin: 0;
            padding: 0;
        }
        
        .bd-t {
            margin-top: 10px;
            border-top: 1px solid #DDD8CE;
        }
        
        .bd-bt {
            border-bottom: 1px solid #DDD8CE;
        }
        
        a {
            text-decoration: none;
        }
        
        ul {
            list-style-type: none;
        }
        /************************* 核心CSS代码区 ****************/
        
        html {
            -webkit-tap-highlight-color: transparent;
            height: 100%;
            min-width: 320px;
            margin: 0;
            padding: 0;
        }
        
        body,
        p {
            margin: 0;
            padding: 0;
        }
        
        .top {
            height: 51.5px;
            text-align: center;
            line-height: 51.5px;
            background-color: #FFD000;
            box-sizing: border-box;
            display: flex;
        }
        
        .top-left {
            width: 75.25px;
            height: 50.5px;
        }
        
        .top-left a {
            color: black;
            text-decoration: none;
            width: 56.75px;
            font-size: 15px;
            margin: 0.31rem 0 0.31rem 0.37rem;
        }
        
        .top-content {
            height: 32px;
            width: 50%;
            flex: 1;
        }
        
        .top-content #text {
            width: 100%;
            text-align: center;
            background-color: #ebebeb;
            border: none;
            height: 34px;
            border-radius: 34px
        }
        
        .top-right {
            justify-content: center;
        }
        
        .top-right img {
            text-align: center;
            line-height: 50%;
            height: 25px;
            width: 24px;
        }
        /* banner图 */
        
        .banner-download {
            height: 52px;
            background: #000000;
            box-sizing: border-box;
            position: relative;
            display: flex;
            overflow: hidden;
        }
        
        .banner-left {
            display: flex;
            width: 182px;
            height: 52px;
        }
        
        .banner-left img {
            padding: 8px 0 8px 15px;
            width: 36px;
            height: 36px;
        }
        
        .banner-left-p {
            width: 131px;
            height: 36px;
            padding-left: 10px;
            box-sizing: border-box;
            color: white;
            font-size: 13px;
        }
        
        .banner-left-p .banner-p1 {
            width: 121px;
            height: 21.5px;
            padding-top: 2.6px
        }
        
        .banner-left-p .banner-p2 {
            width: 121px;
            height: 19.5px;
            padding-top: 2.4px
        }
        
        .banner-right {
            background-color: #FFD000;
            border-radius: 6px;
            width: 55px;
            height: 30px;
            line-height: 30px;
            text-align: 30px;
            position: absolute;
            right: 10px;
            top: 12px;
        }
        /* 主体内容 */
        
        .container .nav {
            height: 165px;
            text-align: center;
            line-height: 50%;
            box-sizing: border-box;
        }
        
        .container .nav ul {
            margin: 0;
            padding: 6px;
            display: flex;
        }
        
        .container .nav ul li {
            list-style-type: none;
            text-align: center;
            height: 81px;
            flex: 1;
        }
        
        .container .nav ul li img {
            width: 45px;
            height: 45px;
        }
        
        .container .nav ul li a {
            text-align: center;
            color: gray;
            text-decoration: none;
        }
        /* 猜你喜欢
 */
        
        .like .bd-bt {
            background-color: white;
            padding: 10px;
            margin-top: 10px;
            height: 82px;
            display: flex;
            justify-content: flex-start;
        }
        
        .like .bd-bt img {
            margin-right: 10px;
        }
        
        .like .likeright {
            width: 100%;
            height: 82px;
            display: flex;
            flex-direction: column;
            position: relative;
        }
        
        .like .likeright1 {
            padding-top: 5px;
            margin-bottom: 6px;
        }
        
        .like .likeright2 {
            height: 34px;
            color: #666;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            box-sizing: border-box;
            font-size: 10px;
        }
        
        .like .likeright3 {
            position: absolute;
            width: 100%;
            bottom: 0;
        }
        
        .like .likeright3 span:nth-of-type(2) {
            font-size: 15px;
            color: #F60;
        }
        
        .like .likeright3 span:nth-of-type(1) {
            font-size: 20px;
            color: #F60;
        }
        
        .like .likeright3 del {
            font-size: 14px;
            text-decoration: none;
            color: #666;
        }
        
        .like .likeright3 del:before {
            content: '门市价:';
        }
        
        .like .likeright3 .right {
            position: absolute;
            right: 0px;
            bottom: 0px;
            font-size: 10px;
            color: #666;
        }
        /* 团购 */
        
        .tg {
            height: 40px;
            line-height: 40px;
            position: relative;
        }
        
        .tg1 {
            padding-left: 15px;
            width: 100%;
            box-sizing: border-box;
            color: #FE8C00
        }
        
        .tg img {
            height: 42px;
            width: 32px;
            position: absolute;
            right: 0;
            top: 0;
        }
        /* **********************底部************* */
        /* 登录注册 */
        
        .bar {
            padding-left: 15px;
            padding-top: 15px;
            display: flex;
        }
        
        .bar-left {
            box-sizing: border-box;
            flex: 1;
        }
        
        .bar-left span {
            height: 27px;
        }
        
        .bder-1 {
            width: 55px;
            line-height: 27px;
            text-align: center;
            background-image: linear-gradient(135deg, #FFD000 0%, #FFBD00 100%);
            border-radius: 5px;
            display: inline-block;
        }
        
        .bder-1 a {
            color: #222222;
        }
        
        .bar-right {
            width: 96px;
            height: 30px;
        }
        
        .bar-right span {
            width: 34px;
            right: 17px;
        }
        
        .bar-right img {
            width: 12px;
            right: 13.9px;
        }
        
        .bar-right a {
            width: 42px;
            right: 30px;
        }
        /* 底部导航 */
        
        .footer-nav {
            height: 34px;
        }
        
        .footer-nav ul {
            display: flex;
            padding: 0;
        }
        
        .footer-nav ul li {
            flex: 1;
            border-right: .02rem solid #666;
            text-align: center;
        }
        
        .footer-nav ul li a {
            font-size: 12px;
            color: #FE8C00;
        }
        /* 底部友情链接 */
        
        .footer-links {
            height: 44px;
            margin: 15px 10px;
            font-size: 10px;
        }
        
        .footer-links a:nth-of-type(1) {
            padding-left: 0px;
        }
        
        .footer-links a {
            padding-left: 25px;
            color: #666;
        }
        /******* *返回顶部按钮 *******/
        
        .top-btn {
            position: fixed;
            right: 15px;
            bottom: 40px;
        }
        
        .top-btn img {
            width: 50px;
            right: 50px;
        }
    </style>
</head>

<body>
    <header>
        <div class="top">
            <div class="top-left">
                <a href="">泉州</a>

            </div>
            <div class="top-content">
                <input type="text" id="text" name="" style=" " placeholder="请输入关键字">
            </div>
            <div class="top-right">
                <img src="https://p0.meituan.net/travelcube/641521461179df7cfb88738dd1ea11ec1031.png" alt="">
            </div>
        </div>
        <div class="banner ">
            <div class="banner-download">
                <div class="banner-left">
                    <img src="https://p1.meituan.net/travelcube/7264ce9c25de2e464e3acd996fe8ad362803.png">
                    <div class="banner-left-p">
                        <p class="banner-p1">省钱利器 购物超划算</p>
                        <p class="banner-p2">吃喝玩乐尽在美团</p>
                    </div>
                </div>


                <div class="banner-right">
                    <span>去APP</span>
                </div>
            </div>
        </div>
    </header>
    <!-- 主体内容 -->

    <div class="container">
        <!-- 导航 -->
        <div class="nav bd-bt ">
            <ul>
                <li>
                    <a href=""><img src="static/1.jpg" alt=""><br><br>美食</a>
                </li>
                <li>
                    <a href=""><img src="static/maoyan.jpg" alt=""><br><br>猫眼电影</a>
                </li>
                <li>
                    <a href=""><img src="1" alt="">
                        <br><br>酒店</a>
                </li>
                <li>
                    <a href=""><img src="1" alt=""><br><br>休闲娱乐</a>
                </li>
                <li>
                    <a href=""><img src="1" alt="">
                        <br><br>外卖</a>
                </li>
            </ul>
            <ul>
                <li>
                    <a href=""><img src="1" alt=""><br><br>ktv</a>
                </li>
                <li>
                    <a href=""><img src="1" alt=""><br><br>周边游</a>
                </li>
                <li>
                    <a href=""><img src="1" alt=""><br><br>丽人</a>
                </li>
                <li>
                    <a href=""><img src="1" alt=""><br><br>小吃快餐</a>
                </li>
                <li>
                    <a href=""><img src="1" alt=""><br><br>全部分类</a>
                </li>
            </ul>
        </div>
        <!-- 猜你喜欢 -->
        <div class="like bd-t bd-bt">
            <h3>猜你喜欢</h3>
            <div class="bd-bt">
                <img src="https://p0.meituan.net/200.0/dpdeal/9037a771cd2b624d78acc78e3bb38cf21461857.png" alt="">
                <div class="likeright">
                    <div class="likeright1">大自然***</div>

                    <div class="likeright2">[泉州等]【大自然足道/中式推拿】2选1</div>
                    <div class="likeright3">
                        <span>99</span><span>元</span>
                        <del>119元</del>
                        <span class="right">
                            已售44633
                    </span>
                    </div>
                </div>
            </div>
            <div class="bd-bt">
                <img src="https://p0.meituan.net/200.0/dpdeal/9037a771cd2b624d78acc78e3bb38cf21461857.png" alt="">
                <div class="likeright">
                    <div class="likeright1">大自然***</div>

                    <div class="likeright2">[泉州等]【大自然足道/中式推拿】2选1</div>
                    <div class="likeright3">
                        <span>99</span><span>元</span>
                        <del>119元</del>
                        <span class="right">
                            已售44633
                    </span>
                    </div>
                </div>
            </div>
            <div class="bd-bt">
                <img src="https://p0.meituan.net/200.0/dpdeal/9037a771cd2b624d78acc78e3bb38cf21461857.png" alt="">
                <div class="likeright">
                    <div class="likeright1">大自然***</div>

                    <div class="likeright2">[泉州等]【大自然足道/中式推拿】2选1</div>
                    <div class="likeright3">
                        <span>99</span><span>元</span>
                        <del>119元</del>
                        <span class="right">
                            已售44633
                    </span>
                    </div>
                </div>
            </div>
            <div class="bd-bt">
                <img src="https://p0.meituan.net/200.0/dpdeal/9037a771cd2b624d78acc78e3bb38cf21461857.png" alt="">
                <div class="likeright">
                    <div class="likeright1">大自然***</div>

                    <div class="likeright2">[泉州等]【大自然足道/中式推拿】2选1</div>
                    <div class="likeright3">
                        <span>99</span><span>元</span>
                        <del>119元</del>
                        <span class="right">
                            已售44633
                    </span>
                    </div>
                </div>
            </div>
            <div class="bd-bt">
                <img src="https://p0.meituan.net/200.0/dpdeal/9037a771cd2b624d78acc78e3bb38cf21461857.png" alt="">
                <div class="likeright">
                    <div class="likeright1">大自然***</div>

                    <div class="likeright2">[泉州等]【大自然足道/中式推拿】2选1</div>
                    <div class="likeright3">
                        <span>99</span><span>元</span>
                        <del>119元</del>
                        <span class="right">
                            已售44633
                    </span>
                    </div>
                </div>
            </div>
            <div class="bd-bt">
                <img src="https://p0.meituan.net/200.0/dpdeal/9037a771cd2b624d78acc78e3bb38cf21461857.png" alt="">
                <div class="likeright">
                    <div class="likeright1">大自然***</div>

                    <div class="likeright2">[泉州等]【大自然足道/中式推拿】2选1</div>
                    <div class="likeright3">
                        <span>99</span><span>元</span>
                        <del>119元</del>
                        <span class="right">
                            已售44633
                    </span>
                    </div>
                </div>
            </div>
            <div class="bd-bt">
                <img src="https://p0.meituan.net/200.0/dpdeal/9037a771cd2b624d78acc78e3bb38cf21461857.png" alt="">
                <div class="likeright">
                    <div class="likeright1">大自然***</div>

                    <div class="likeright2">[泉州等]【大自然足道/中式推拿】2选1</div>
                    <div class="likeright3">
                        <span>99</span><span>元</span>
                        <del>119元</del>
                        <span class="right">
                            已售44633
                    </span>
                    </div>
                </div>
            </div>
            <div class="bd-bt">
                <img src="https://p0.meituan.net/200.0/dpdeal/9037a771cd2b624d78acc78e3bb38cf21461857.png" alt="">
                <div class="likeright">
                    <div class="likeright1">大自然***</div>

                    <div class="likeright2">[泉州等]【大自然足道/中式推拿】2选1</div>
                    <div class="likeright3">
                        <span>99</span><span>元</span>
                        <del>119元</del>
                        <span class="right">
                            已售44633
                    </span>
                    </div>
                </div>
            </div>

        </div>
        <!-- 团购 -->
        <div class="tg bd-bt">
            <div class="tg1">查看全部团购</div>
            <img src="static/tg-right.jpg" alt="">
        </div>
    </div>
    <!-- 底部 -->

    <footer>
        <!-- 登录-注册 -->
        <div class="bar">
            <div class="bar-left">
                <span class="bder-1"> <a href="">登录</a></span>
                <span class="bder-1"> <a href="">注册</a><span>

            </div>
            <div class="bar-right">
                <span>城市</span>

                <img src="https://p1.meituan.net/travelcube/c6c04160817d530ecddf9f86b158106e2032.png" alt="">
                <a href="">泉州</a>
            </div>
        </div>
        <!-- 底部导航 -->
        <div class="footer-nav">
            <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="footer-links">
            友情链接：
            <a href="">猫眼电影</a>
            <a href="">大众点评</a>
            <a href="">美团***</a>
            <a href="">榛果民宿</a>
            <a href="">大众点评下载</a>
            <a href="">美团收银官网</a>
            <a href="">美团点评餐饮学院</a>
            <a href="">快驴进货商家合作</a>


        </div>
    </footer>
    <div class="top-btn">
        <img src="https://p0.meituan.net/travelcube/fe027664e1161570a1830870662d34717731.png" alt="">
    </div>


</body>

</html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
代码有2个问题点没解决的（老师有空就点评支个招，(#^.^#)）：
时间没多少（黑厂不放假。。），框架就没写了，布局看着简单，但是我还是得花5个小时左右才写出来，代码都是一步步测试写出来的，虽然有点狼狈。但是很开心。
批改状态：合格

老师批语：毕业想去美团吗? 他们的制服太黄了, 不好看,哈哈
首页

PHP培训

视频教程

学习路径

资源下载

技术文章

社区

微信公众号

实例
