高阶函数 双重检验锁 个人收款码 java 线程池 Transformer javascript dtel语言 ansible odbc Seajs Minjs Momentjs 后台网站模板 angular视频教程 jquery删除子元素 多线程实现方式 nfc卡片 docker启动命令 python正则 python生成多个随机数 python使用教程 python的安装 python操作文件 python实例教程 python函数大全 python可视化编程 java文件流 java对象和类 java泛型方法 python网站开发实例 嵌入式linux驱动程序设计从入门到精通 莫莫小工具 atq subprocess infopath下载 fireworks8序列号 无法打开搜索页 千千静听老版本 win10有哪些版本 朋友圈访客记录教程
当前位置: 首页 > 学习教程  > 编程语言

H5美团小demo

2020/7/24 10:51:46 文章标签:

在这里插入图片描述
没有实现具体的功能 主要是学习了一下灵活布局

代码奉上

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>美团网</title>
    <link rel="stylesheet" href="./css/iconfont.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/iconfont2.css">
</head>

<body>
    <header>
        <div class="navbar">
            <div class="navbar-left">
                <span class="nav-city">湖北 <i class="icon-downarrow"></i></span>
            </div>
            <div class="nav-search">
                <input type="text" placeholder="请输入商家名、品类或者商圈">
            </div>
        </div>
    </header>
    <main>
        <div class="banner">
            <img src="images/download_banner.png" alt="广告图">
        </div>
        <nav class="navlist">
            <ul>
                <li class="nav-item">
                    <a href="#" class="nav-href">
                        <span class="nav-icon iconfont meishi" style="background:#fd9d21"></span>
                        <span class="nav-des">美食</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-href">
                        <span class="nav-icon iconfont dianying" style="background:#ff6767"></span>
                        <span class="nav-des">电影</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-href">
                        <span class="nav-icon iconfont jiudian" style="background:#8a90fa"></span>
                        <span class="nav-des">酒店</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-href">
                        <span class="nav-icon iconfont xiuxianyule" style="background:#fde030"></span>
                        <span class="nav-des">休闲娱乐</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-href">
                        <span class="nav-icon iconfont waimai" style="background:#fd9d21"></span>
                        <span class="nav-des">外卖</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-href">
                        <span class="nav-icon iconfont ktv" style="background:#fde030"></span>
                        <span class="nav-des">KTV</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-href">
                        <span class="nav-icon iconfont zhoubianyou" style="background:#4dc6ee"></span>
                        <span class="nav-des">周边游</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-href">
                        <span class="nav-icon iconfont liren" style="background:#ff80c2"></span>
                        <span class="nav-des">丽人</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-href">
                        <span class="nav-icon iconfont xiaochikuaican" style="background:#fd9d21"></span>
                        <span class="nav-des">小吃快餐</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-href">
                        <span class="nav-icon iconfont quanbu" style="background:#00d3be"></span>
                        <span class="nav-des">全部分类</span>
                    </a>
                </li>
            </ul>
        </nav>
        <div class="pintuan boxWrapper">
            <h4 class="title">附近拼团</h4>
            <div class="box-list">
                <div class="box-item">
                    <img src="images/food.jpg" alt="美食团">
                    <div class="item-title">牛小灶牛腩牛杂煲</div>
                    <div class="price">
                        <span class="strong">129</span>
                        <span class="line-price">198</span>
                    </div>
                </div>
                <div class="box-item">
                    <img src="images/ktv.jpg" alt="KTV">
                    <div class="item-title">好声音KTV欢唱4小时限时优惠</div>
                    <div class="price">
                        <span class="strong">69</span>
                        <span class="line-price">299</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="guesslike">
            <div class="title">- 猜你喜欢 -</div>
            <ul class="list">
                <li class="guessItem">
                    <a href="#" class="item-href">
                        <div class="item-box">
                            <div class="item-img">
                                <img src="images/food.jpg" alt="预览图">
                            </div>
                            <div class="item-des">
                                <div class="item-name">牛小灶牛腩牛杂煲</div>
                                <div class="item-title">[5店通用]2人套餐,提供免费wifi</div>
                                <div class="price">
                                    <span class="strong">129</span>
                                    <span class="retail">门市价:159</span></br>
                                    <span class="selNum">已售:30859</span>
                                </div>
                            </div>
                        </div>
                    </a>
                </li>
                <li class="guessItem">
                    <a href="#" class="item-href">
                        <div class="item-box">
                            <div class="item-img">
                                <img src="images/food.jpg" alt="预览图">
                            </div>
                            <div class="item-des">
                                <div class="item-name">牛小灶牛腩牛杂煲</div>
                                <div class="item-title">[5店通用]2人套餐,提供免费wifi</div>
                                <div class="price">
                                    <span class="strong">129</span>
                                    <span class="retail">门市价:159</span></br>
                                    <span class="selNum">已售:30859</span>
                                </div>
                            </div>
                        </div>
                    </a>
                </li>
                <li class="guessItem">
                    <a href="#" class="item-href">
                        <div class="item-box">
                            <div class="item-img">
                                <img src="images/food.jpg" alt="预览图">
                            </div>
                            <div class="item-des">
                                <div class="item-name">牛小灶牛腩牛杂煲</div>
                                <div class="item-title">[5店通用]2人套餐,提供免费wifi</div>
                                <div class="price">
                                    <span class="strong">129</span>
                                    <span class="retail">门市价:159</span></br>
                                    <span class="selNum">已售:30859</span>
                                </div>
                            </div>
                        </div>
                    </a>
                </li>
                <li class="guessItem">
                    <a href="#" class="item-href">
                        <div class="item-box">
                            <div class="item-img">
                                <img src="images/food.jpg" alt="预览图">
                            </div>
                            <div class="item-des">
                                <div class="item-name">牛小灶牛腩牛杂煲</div>
                                <div class="item-title">[5店通用]2人套餐,提供免费wifi</div>
                                <div class="price">
                                    <span class="strong">129</span>
                                    <span class="retail">门市价:159</span></br>
                                    <span class="selNum">已售:30859</span>
                                </div>
                            </div>
                        </div>
                    </a>
                </li>
                <li class="guessItem">
                    <a href="#" class="item-href">
                        <div class="item-box">
                            <div class="item-img">
                                <img src="images/food.jpg" alt="预览图">
                            </div>
                            <div class="item-des">
                                <div class="item-name">牛小灶牛腩牛杂煲</div>
                                <div class="item-title">[5店通用]2人套餐,提供免费wifi</div>
                                <div class="price">
                                    <span class="strong">129</span>
                                    <span class="retail">门市价:159</span></br>
                                    <span class="selNum">已售:30859</span>
                                </div>
                            </div>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
    </main>
    <footer>
        <nav>
            <ul class="nav-menu">
                <li class="nav-item">
                    <a href="#" class="active">
                        <i class="iconfont2 iconshouye"></i>
                        <span>首页</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#">
                        <i class="iconfont2 iconicon_order"></i>
                        <span>订单</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#">
                        <i class="iconfont2 iconwode"></i>
                        <span>我的</span>
                    </a>
                </li>
            </ul>
        </nav>
    </footer>
</body>

</html>
*{
    margin:0;
    padding: 0;
}
body{
    background: #f9f7f8;
    padding: 45px 0 70px 0;
}
ul{
    list-style: none;
}
a{
    text-decoration: none;
}
header{
    /* margin-bottom: 7px; */
    position: fixed;
    top: 0;
    width: 100%;
    margin-bottom: 5px;
}
.navlist{
    padding-top: 15px;
}
.navbar{
    display: flex;
    background: #fff;
    height: 40px;
    color: black;
}
.navbar .navbar-left{
    height: 40px;
    line-height: 40px;
}
.navbar .nav-city{
    font-size: 14px;
    margin: 0 15px;
    font-weight: bolder;
}

.icon-downarrow{
    display: inline-block;
    width: 6px;
    height: 6px;
    border-left: 2px solid black;
    border-bottom: 2px solid black;
    transform: rotate(-45deg);
    margin: 0 0 3px 0;
}

.nav-search{
    flex: 1;
    background: #f3f3f3;
    height: 30px;
    line-height: 30px;
    border-radius: 15px;
    padding:0 25px;
    margin: 5px 15px 0 0 ;
}
.nav-search input{
    display: block;
    width: 100%;
    height: 100%;
    background-color: transparent;
    font-size: 14px;
    border: none;
    outline: none;
}

/* 广告图 */
.banner img{
    width: 100%;
}
.banner{
    margin: 7px;
    background: #fff;
    box-shadow: 0px 1px 5px rgba(0, 0,0, 0.2);
}

/* 导航菜单 */

.navlist{
    background: #fff;
}

.navlist ul{
    display: flex;
    flex-wrap: wrap;
}

.navlist .nav-item{
    flex: 0 0 20%;
    text-align: center;
}

.nav-item  .nav-icon{
    display: block;
    width: 40px;
    height: 40px;
    margin: auto;
    border-radius: 50%;
    background: #fd9121;
    margin:10px auto;
    color: #fff;
    font-size: 25px;
    line-height: 40px;
}
.nav-item .nav-des{
    color :#333;
    font-size:14px;
    /* font-weight: 500; */
}

/* 拼团 */
.boxWrapper{
    background: #ffffff;
    margin-top: 10px;
    padding: 5px;
}
.boxWrapper h4{
    color: #333;
}

.box-item img{
    width: 100%;
    border-radius: 7px;
}

.box-list{
    display: flex;
    justify-content: space-between;
}

.box-list .box-item{
    display: inline-block;
    width: 47%;
    margin: 5px 5px;
    text-align: center;
}

.box-item .price .strong{
    font-size:18px;
    padding: 0 10px 0 0;
    color: #f63;
}

.box-item .item-title{
    font-size: 16px;

    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    padding: 0 15px;

}

.box-item .price .line-price{
    font-size:14px;
    text-decoration: line-through;
    color: #666666;
}

.guesslike{
    background: #fff;
    margin-top: 10px;
    padding: 0 10px ;
}

.guesslike .title{
    text-align:center;
    padding: 10px 0;
    border-bottom: 1px solid #ddd8ce;
    color: #666;
}

.guessItem .item-href{
    display: block;
    padding: 15px 0;
}

.guessItem .item-href .item-box{
    display: flex;
}

.guessItem .item-img{
    display: inline-block;
    width: 120px;
    height: 90px;
}

.item-img img{
    width: 100%;
    height: 100%;
}

.guessItem .item-des{
    flex:1;
    margin-left:10px;
}

.guessItem .item-name{
    font-size: 18px;
    color: #333;
    margin-bottom: 8px;
}
.guessItem .item-title{
    color: #666;
    font-size: 15px;
    margin-bottom: 12px;
}
.guessItem .price{
    font-size: 14px;
    color: #666;
    position: relative;
}
.guessItem .price .strong{
    font-size: 20px;
    color: #ff0000;
}

.guessItem .price .strong::before{
    /* content: '\A5'; */
    font-size: 14px;
    color: #f00;
    margin-left: 5px;
}

.guessItem .price .selNum{
    position: absolute;
    font-size: 12px;
    right:10px;
    bottom: 4px;
}

.guesslike .guessItem{
    border-bottom: 1.5px solid #ddd8ce;
}

/* 底部菜单 */
footer{
    position: fixed;
    bottom:0;
    width: 100%;
    background: #fff;
}

footer .nav-menu{
    display: flex;
}
.nav-item{
    flex:1;
    text-align: center;
    padding: 8px 0;
}

.nav-item a{
    display: block;
    color: #333;
}

.nav-item .iconfont2{
    display: block;
    font-size: 24px;
}

.nav-item .active{
    color: #f63;
}

.nav-item span {
    font-size: 14px;
}

项目很小 主要是练练手用的


本文链接: http://www.dtmao.cc/news_show_50335.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?