实战HTML：部分美团首页静态界面_美团网页html

作者：小蓝xlanll | 2024-02-14 13:37:03

踩

美团网页html

完整代码
好久没写html界面了，一个工作的朋友让我帮他写一下，写了写，果然生疏的很，不过还是完成了。

运行效果

在这里插入图片描述

代码

1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="1.css">
</head>
<body>
<div class="main">
    <div class="main-left">
        <div class="main-left-content">
            <ul>
                <li><img src="img/美食.png" alt=""><span class="select">美食</span><i>＞</i></li>
                <li><img src="img/外卖.png" alt=""><span class="select">外卖</span><i>＞</i></li>
                <li><img src="img/酒店.png" alt=""><span class="select">酒店</span><i>＞</i></li>
                <li><img src="img/民宿.png" alt=""><span class="select">民宿</span><i>＞</i></li>
                <li><img src="img/猫眼电影.png" alt=""><span class="select">猫眼电影</span><i>＞</i></li>
                <li><img src="img/机票.png" alt=""><span class="select">机票</span><span>/</span><span class="select">火车票</span><i>＞</i></li>
                <li><img src="img/休闲.png" alt=""><span class="select">休闲娱乐</span><span>/</span><span>KTV</span><i>＞</i></li>
                <li><img src="img/生活.png" alt=""><span class="select">生活服务</span><i>＞</i></li>
                <li><img src="img/丽人.png" alt=""><span class="select">丽人</span><span>/</span><span class="select">美发</span><span>/</span><span class="select">医学美容</span><i>＞</i></li>
                <li><img src="img/结婚.png" alt=""><span class="select">结婚</span><span>/</span><span class="select">婚纱摄影</span><span>/</span><span class="select">婚宴</span><i>＞</i></li>
                <li><img src="img/亲子.png" alt=""><span class="select">亲子</span><span>/</span><span class="select">儿童乐园</span><span>/</span><span class="select">幼教</span><i>＞</i></li>
                <li><img src="img/运动.png" alt=""><span class="select">运动健身</span><span>/</span><span class="select">健身中心</span><i>＞</i></li>
                <li><img src="img/家装.png" alt=""><span class="select">家装</span><span>/</span><span class="select">建材</span><span>/</span><span class="select">家居</span><i>＞</i></li>
                <li><img src="img/学习.png" alt=""><span class="select">学习培训</span><span>/</span><span class="select">音乐培训</span><i>＞</i></li>
                <li><img src="img/医疗.png" alt=""><span class="select">医疗健康</span><span>/</span><span class="select">宠物</span><span>/</span><span class="select">爱车</span><i>＞</i></li>
                <li><img src="img/酒吧.png" alt=""><span class="select">酒吧</span><span>/</span><span class="select">密室逃脱</span><i>＞</i></li>
            </ul>
        </div>
    </div>
    <div class="main-middle">
        <div class="main-middle-content">
            <div class="main-middle-content-top">
                <div class="main-main-content-top-left">
                    <div class="main-main-content-top-left-prev"><</div>
                    <div class="main-main-content-top-left-next">></div>
                </div>
                <div class="main-main-content-top-right"></div>
            </div>
            <div class="main-middle-content-foot">
                <div class="main-middle-content-foot-left"></div>
                <div class="main-middle-content-foot-middle"></div>
                <div class="main-middle-content-foot-right"></div>
            </div>
        </div>
    </div>
    <div class="main-right">
        <div class="main-right-content">
            <div class="main-right-content-top">
                <div class="main-right-content-top-img"></div>
                <div class="main-right-content-top-content">Hi！你好</div>
                <div class="main-right-content-top-login">注册</div>
                <div class="main-right-content-top-register">立即登录</div>
            </div>
            <div class="main-right-content-foot">
                <div class="main-right-content-foot-2D"></div>
                <div class="main-right-content-foot-content">
                    <p>美团APP手机版</p>
                    <span class="money">1元起</span><span>吃喝玩乐</span>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

1.css

*{
    margin: 0;
    padding: 0;
    list-style: none;
    box-sizing: border-box;
}
body{
    height: 100%;
    width: 100%;
    background-color: #F8F8F8;
}
.main{
    width: 80%;
    background-color: #FFF;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
}
.main .main-left{
    flex: 2;
    height: 500px;
}
.main .main-left .main-left-content{
    padding:5px;
}
.main .main-left .main-left-content ul li{
    position: relative;
    height: 30px;
    display: flex;
    align-items: center;
}
.main .main-left .main-left-content ul li img{
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 5px;
}
.main .main-left .main-left-content ul li span:nth-child(n+3){
    margin-left: 6px;
}
.main .main-left .main-left-content ul li i{
    font-style: normal;
    position: absolute;
    right: 10px;
}
.main .main-left .main-left-content ul li .select{
    cursor: pointer;
}
.main .main-middle{
    flex: 5;
    height: 500px;
}
.main .main-middle .main-middle-content{
    height: 96%;
    width: 98%;
    margin: 1.5% auto 0;
}
.main .main-middle .main-middle-content .main-middle-content-top{
    width: 100%;
    height: 60%;
    position: relative;
}
.main .main-middle .main-middle-content .main-middle-content-top .main-main-content-top-left{
    height: 100%;
    width: 70%;
    position: absolute;
    left: 0;
    background: url("img/left.png");
    background-size: cover;
}
.main .main-middle .main-middle-content .main-middle-content-top .main-main-content-top-left div{
    height: 30px;
    width: 30px;
    border-radius: 50%;
    background-color: #5B5A5C;
    color:#ffffff;
    text-align: center;
    line-height: 30px;
    position: absolute;
}
.main .main-middle .main-middle-content .main-middle-content-top .main-main-content-top-left-prev{
    top:48%;
    left: 2px;
}
.main .main-middle .main-middle-content .main-middle-content-top .main-main-content-top-left-next{
    top:48%;
    right: 2px;
}
.main .main-middle .main-middle-content .main-middle-content-top .main-main-content-top-right{
    height: 100%;
    width: 28%;
    position: absolute;
    right: 0;
    background: url("img/right.jpg");
    background-size: cover;
}
.main .main-middle .main-middle-content .main-middle-content-foot{
    width: 100%;
    height: 40%;
    position: relative;
}
.main .main-middle .main-middle-content .main-middle-content-foot div{
    height: 90%;
}
.main .main-middle .main-middle-content .main-middle-content-foot .main-middle-content-foot-left{
    position: absolute;
    width: 34%;
    left: 0;
    top: 5%;
    background: url("img/footleft.png");
    background-size: cover;
}
.main .main-middle .main-middle-content .main-middle-content-foot .main-middle-content-foot-middle{
    width: 34%;
    position: absolute;
    left: 36%;
    top: 5%;
    background: url("img/footmiddle.jpg");
    background-size: cover;
}
.main .main-middle .main-middle-content .main-middle-content-foot .main-middle-content-foot-right{
    width: 28%;
    position: absolute;
    right: 0;
    top: 5%;
    background: url("img/footright.jpg");
    background-size: cover;
}
.main .main-right{
    flex: 2;
    height: 500px;
}
.main .main-right .main-right-content{
    height: 94%;
    width: 98%;
    margin: 4% auto 0;
}
.main .main-right .main-right-content .main-right-content-top{
    width: 90%;
    height: 61%;
    position: relative;
    background-color: #ffffff;
    border: 1px solid #e5e5e5;
}
.main .main-right .main-right-content .main-right-content-top .main-right-content-top-img{
    height: 40px;
    width: 40px;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    margin-left: -30px;
    top: 50px;
    background: url("img/user.jpg");
    background-size: cover;
}
.main .main-right .main-right-content .main-right-content-top .main-right-content-top-content{
    position: absolute;
    top:100px;
    left: 35%;
}
.main .main-right .main-right-content .main-right-content-top .main-right-content-top-login,
.main .main-right .main-right-content .main-right-content-top .main-right-content-top-register{
    width: 100px;
    height: 35px;
    border-radius: 40px;
    text-align: center;
    line-height: 35px;
    position: absolute;
    left: 28%;
    border: 1px solid #e5e5e5;
}
.main .main-right .main-right-content .main-right-content-top .main-right-content-top-login{
    top:150px
}
.main .main-right .main-right-content .main-right-content-top .main-right-content-top-register{
    top:200px
}
.main .main-right .main-right-content .main-right-content-foot{
    width: 90%;
    height: 37%;
    margin-top: 4%;
    position: relative;
    border: 1px solid #e5e5e5;
}
.main .main-right .main-right-content .main-right-content-foot .main-right-content-foot-2D{
    width: 100px;
    height: 100px;
    position: absolute;
    background: url("img/2D.jpg");
    left: 28%;
    top: 20px;
}
.main .main-right .main-right-content .main-right-content-foot .main-right-content-foot-content{
    position: absolute;
    left: 25%;
    top: 125px;
}
.main .main-right .main-right-content .main-right-content-foot .main-right-content-foot-content span{
    font-size: 12px;
    margin-left: 14px;
}
.main .main-right .main-right-content .main-right-content-foot .main-right-content-foot-content span.money{
    color: #FF6600;
    font-size: 12px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205

2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="2.css">
</head>
<body>
<div class="main-second">
    <div class="main-nav">
        <span>猫眼电影</span><span>即将上映</span><span>全部></span><span>▲</span>
    </div>
    <div class="main-content">
        <div class="main-contain-item"><div class="main-contain-item-info"><span>35187</span><span>人想看</span><span>大红包</span></div></div>
        <div class="main-contain-item"><div class="main-contain-item-info"><span>14116</span><span>人想看</span><span>灰烬重生</span></div></div>
        <div class="main-contain-item"><div class="main-contain-item-info"><span>11629</span><span>人想看</span><span>印度奇游</span></div></div>
        <div class="main-contain-item"><div class="main-contain-item-info"><span>10751</span><span>人想看</span><span>魔法学院</span></div></div>
        <div class="main-contain-item"><div class="main-contain-item-info"><span>8420</span><span>人想看</span><span>今生只为遇见你</span></div></div>
    </div>
</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

2.css

*{
    margin: 0;
    padding: 0;
    list-style: none;
    box-sizing: border-box;
}
body{
    height: 100%;
    width: 100%;
    background-color: #F8F8F8;
}
.main-second{
    width: 80%;
    background-color: #FFF;
    margin: 0 auto;
}
.main-second .main-nav{
    height: 40px;
    width: 100%;
    background-color: #FB3F60;
    color:#ffffff;
    position: relative;
    overflow: hidden;
}
.main-second .main-nav span:nth-child(1){
    position:absolute;
    left: 10px;
    top:5px;
    font:20px MFShangHei-regular;
}
.main-second .main-nav span:nth-child(2){
    position:absolute;
    left: 110px;
    top:8px;
    font-size:14px;
}
.main-second .main-nav span:nth-child(3){
    position:absolute;
    right: 10px;
    top:8px;
    font-size:14px;
    cursor: pointer;
}
.main-second .main-nav span:nth-child(4){
    position:absolute;
    left: 130px;
    bottom:-8px;
}
.main-second .main-content{
    height: 400px;
    width: 100%;
    margin-top: 1px;
    display: flex;
    justify-content: space-evenly;
}
.main-second .main-content .main-contain-item{
    height: 380px;
    width: 18%;
    margin-top: 5px;
    position: relative;
    color: #ffffff;
}
.main-second .main-content .main-contain-item:nth-child(1){
    background: url("img/movie1.jpg");
    background-size: cover;
}
.main-second .main-content .main-contain-item:nth-child(2){
    background: url("img/movie2.jpg");
    background-size: cover;
}
.main-second .main-content .main-contain-item:nth-child(3){
    background: url("img/movie3.jpg");
    background-size: cover;
}
.main-second .main-content .main-contain-item:nth-child(4){
    background: url("img/movie4.jpg");
    background-size: cover;
}
.main-second .main-content .main-contain-item:nth-child(5){
    background: url("img/movie5.jpg");
    background-size: cover;
}
.main-second .main-content .main-contain-item .main-contain-item-info{
    height: 30%;
    width: 100%;
    position: absolute;
    bottom: 0;
    background-image: linear-gradient(-180deg, rgba(0,0,0,0.00) 0%, rgba(29,45,55,0.80) 99%)
}
.main-second .main-content .main-contain-item .main-contain-item-info span:nth-child(1){
    position: absolute;
    color: #FD9827;
    font-size: 18px;
    left: 10px;
    bottom: 35px;
}
.main-second .main-content .main-contain-item .main-contain-item-info span:nth-child(2){
    position: absolute;
    font-weight:bolder;
    left: 70px;
    font-size: 14px;
    bottom: 35px;
}
.main-second .main-content .main-contain-item .main-contain-item-info span:nth-child(3){
    position: absolute;
    left: 10px;
    font-size: 20px;
    bottom: 10px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109

3.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="3.css">
</head>
<body>
<div class="main">
    <div class="main-nav">
        <span>猜你喜欢</span><span>为你甄选最合适的</span>
        <p>▲</p>
    </div>
    <div class="main-content">
        <div class="main-content-item">
            <div class="main-content-item-top">
                <div class="content-tag">
                    <img src="1.jpg" alt="">
                    <p class="title">御足地带</p>
                    <div class="content-comment">
                        <span>☆</span>
                        <span>☆</span>
                        <span>☆</span>
                        <span>☆</span>
                        <span>☆</span>
                        <span>1622个评价</span>
                    </div>
                    <p class="place">中国婚纱城</p>
                    <p class="cost">￥159.0起</p>
                </div>
            </div>
            <div class="main-content-item-middle">
                <div class="content-tag">
                    <img src="1.jpg" alt="">
                    <p class="title">御足地带</p>
                    <div class="content-comment">
                        <span>☆</span>
                        <span>☆</span>
                        <span>☆</span>
                        <span>☆</span>
                        <span>☆</span>
                        <span>1622个评价</span>
                    </div>
                    <p class="place">中国婚纱城</p>
                    <p class="cost">￥159.0起</p>
                </div>
            </div>
            <div class="main-content-item-bottom">
                <div class="content-tag">
                    <img src="1.jpg" alt="">
                    <p class="title">御足地带</p>
                    <div class="content-comment">
                        <span>☆</span>
                        <span>☆</span>
                        <span>☆</span>
                        <span>☆</span>
                        <span>☆</span>
                        <span>1622个评价</span>
                    </div>
                    <p class="place">中国婚纱城</p>
                    <p class="cost">￥159.0起</p>
                </div>
            </div>
        </div>
        <div class="main-content-item">
            <div class="main-content-item-top">
                <div class="content-tag">
                    <img src="1.jpg" alt="">
                    <p class="title">御足地带</p>
                    <div class="content-comment">
                        <span>☆</span>
                        <span>☆</span>
                        <span>☆</span>
                        <span>☆</span>
                        <span>☆</span>
                        <span>1622个评价</span>
                    </div>
                    <p class="place">中国婚纱城</p>
                    <p class="cost">￥159.0起</p>
                </div>
            </div>
            <div class="main-content-item-middle">
                <div class="content-tag">
                    <img src="1.jpg" alt="">
                    <p class="title">御足地带</p>
                    <div class="content-comment">
                        <span>☆</span>
                        <span>☆</span>
                        <span>☆</span>
                        <span>☆</span>
                        <span>☆</span>
                        <span>1622个评价</span>
                    </div>
                    <p class="place">中国婚纱城</p>
                    <p class="cost">￥159.0起</p>
                </div>
            </div>
            <div class="main-content-item-bottom">
                <div class="content-tag">
                    <img src="1.jpg" alt="">
                    <p class="title">御足地带</p>
                    <div class="content-comment">
                        <span>☆</span>
                        <span>☆</span>
                        <span>☆</span>
                        <span>☆</span>
                        <span>☆</span>
                        <span>1622个评价</span>
                    </div>
                    <p class="place">中国婚纱城</p>
                    <p class="cost">￥159.0起</p>
                </div>
            </div>
        </div>
        <div class="main-content-item">
            <div class="main-content-item-top">
                <div class="content-tag">
                    <img src="1.jpg" alt="">
                    <p class="title">御足地带</p>
                    <div class="content-comment">
                        <span>☆</span>
                        <span>☆</span>
                        <span>☆</span>
                        <span>☆</span>
                        <span>☆</span>
                        <span>1622个评价</span>
                    </div>
                    <p class="place">中国婚纱城</p>
                    <p class="cost">￥159.0起</p>
                </div>
            </div>
            <div class="main-content-item-middle">
                <div class="content-tag">
                    <img src="1.jpg" alt="">
                    <p class="title">御足地带</p>
                    <div class="content-comment">
                        <span>☆</span>
                        <span>☆</span>
                        <span>☆</span>
                        <span>☆</span>
                        <span>☆</span>
                        <span>1622个评价</span>
                    </div>
                    <p class="place">中国婚纱城</p>
                    <p class="cost">￥159.0起</p>
                </div>
            </div>
            <div class="main-content-item-bottom">
                <div class="content-tag">
                    <img src="1.jpg" alt="">
                    <p class="title">御足地带</p>
                    <div class="content-comment">
                        <span>☆</span>
                        <span>☆</span>
                        <span>☆</span>
                        <span>☆</span>
                        <span>☆</span>
                        <span>1622个评价</span>
                    </div>
                    <p class="place">中国婚纱城</p>
                    <p class="cost">￥159.0起</p>
                </div>
            </div>
        </div>
        <div class="main-content-item">
            <div class="main-content-item-top">
                <div class="content-tag">
                    <img src="1.jpg" alt="">
                    <p class="title">御足地带</p>
                    <div class="content-comment">
                        <span>☆</span>
                        <span>☆</span>
                        <span>☆</span>
                        <span>☆</span>
                        <span>☆</span>
                        <span>1622个评价</span>
                    </div>
                    <p class="place">中国婚纱城</p>
                    <p class="cost">￥159.0起</p>
                </div>
            </div>
            <div class="main-content-item-middle">
                <div class="content-tag">
                    <img src="1.jpg" alt="">
                    <p class="title">御足地带</p>
                    <div class="content-comment">
                        <span>☆</span>
                        <span>☆</span>
                        <span>☆</span>
                        <span>☆</span>
                        <span>☆</span>
                        <span>1622个评价</span>
                    </div>
                    <p class="place">中国婚纱城</p>
                    <p class="cost">￥159.0起</p>
                </div>
            </div>
            <div class="main-content-item-bottom">
                <div class="content-tag">
                    <img src="1.jpg" alt="">
                    <p class="title">御足地带</p>
                    <div class="content-comment">
                        <span>☆</span>
                        <span>☆</span>
                        <span>☆</span>
                        <span>☆</span>
                        <span>☆</span>
                        <span>1622个评价</span>
                    </div>
                    <p class="place">中国婚纱城</p>
                    <p class="cost">￥159.0起</p>
                </div>
            </div>
        </div>
        <div class="main-content-item">
            <div class="main-content-item-top">
                <div class="content-tag">
                    <img src="1.jpg" alt="">
                    <p class="title">御足地带</p>
                    <div class="content-comment">
                        <span>☆</span>
                        <span>☆</span>
                        <span>☆</span>
                        <span>☆</span>
                        <span>☆</span>
                        <span>1622个评价</span>
                    </div>
                    <p class="place">中国婚纱城</p>
                    <p class="cost">￥159.0起</p>
                </div>
            </div>
            <div class="main-content-item-middle">
                <div class="content-tag">
                    <img src="1.jpg" alt="">
                    <p class="title">御足地带</p>
                    <div class="content-comment">
                        <span>☆</span>
                        <span>☆</span>
                        <span>☆</span>
                        <span>☆</span>
                        <span>☆</span>
                        <span>1622个评价</span>
                    </div>
                    <p class="place">中国婚纱城</p>
                    <p class="cost">￥159.0起</p>
                </div>
            </div>
            <div class="main-content-item-bottom">
                <div class="content-tag">
                    <img src="1.jpg" alt="">
                    <p class="title">御足地带</p>
                    <div class="content-comment">
                        <span>☆</span>
                        <span>☆</span>
                        <span>☆</span>
                        <span>☆</span>
                        <span>☆</span>
                        <span>1622个评价</span>
                    </div>
                    <p class="place">中国婚纱城</p>
                    <p class="cost">￥159.0起</p>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268

3.css

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;

}
.main{
    width: 80%;
    margin: 0 auto;
}
.main .main-nav{
    background-color: #53B2D9;
    height: 38px;
    width: 100%;
    color:#ffffff;
    position: relative;
    overflow: hidden;
}
.main .main-nav span:nth-child(1){
    line-height: 38px;
    margin: 0 20px;
    font-family: '幼圆', serif;
    font-size: 18px;
}
.main .main-nav span:nth-child(2){
    line-height: 38px;
    font-size: 13px;
}
.main .main-nav p{
    position: absolute;
    bottom: -9px;
    left: 157px;
}
.main .main-content{
    height: 600px;
    width: 100%;
    display: flex;
    justify-content: space-around;
    padding-top: 40px;
}

.main .main-content .main-content-item{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    background-color: #fff;
    user-select: none;
}

.main .main-content .main-content-item div{
    width: 100%;
}

.main .main-content .main-content-item .content-tag{
    margin-top: 10px;
    padding: 5px;
    width: 100%;
    background-color: #fff;
}
.main .main-content .main-content-item .content-tag:hover{
    background-color: #F4F4F4;
}
.main .main-content .main-content-item .content-tag img{
    width: 160px;
    height: 100px;
    display: block;
    margin: 0 auto;
    cursor: pointer;
    border-radius: 5px;
}
.main .main-content .main-content-item .content-tag p{
    margin: 5px;
}
.main .main-content .main-content-item .content-tag p.title{
    font-size: 16px;
    cursor: pointer;
}
.main .main-content .main-content-item .content-tag p.place{
    font-size: 12px;
}
.main .main-content .main-content-item .content-tag p.cost{
    font-size: 14px;
    color: #FF6600;
    font-weight: bolder;
}
.main .main-content .main-content-item .content-tag .content-comment{
    font-size: 12px;
    margin: 5px;
}
.main .main-content .main-content-item .content-tag .content-comment span{
    cursor: pointer;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92

4.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="4.css">
</head>
<body>
<div class="main-fourth">
    <div class="main-content">
        <div class="main-content-top">
            <div class="main-content-top-nav"><span>美团导航</span></div>
            <div class="main-content-top-first">
                <div class="main-content-top-item"><span>热门城市</span></div>
                <div class="main-content-top-ul line">
                    <ul>
                        <li>深圳</li>
                        <li>温州</li>
                        <li>哈尔滨</li>
                        <li>太原</li>
                        <li>太原</li>
                        <li>太原</li>
                        <li>太原</li>
                        <li>太原</li>
                        <li>太原</li>
                        <li>太原</li>
                        <li>太原</li>
                        <li>太原</li>
                        <li>太原</li>
                        <li>太原</li>
                        <li>太原</li>
                        <li>太原</li>
                        <li>太原</li>
                        <li>太原</li>
                        <li>太原</li>
                        <li>太原</li>
                    </ul>
                </div>
            </div>
            <div class="main-content-top-second">
                <div class="main-content-top-item"><span>热门分类</span></div>
                <div class="main-content-top-ul line" >
                    <ul>
                        <li class="hot-parent">酒店<span class="hot">HOT</span></li>
                        <li>酒店</li>
                        <li>酒店</li>
                        <li>酒店</li>
                        <li>酒店</li>
                        <li>酒店</li>
                        <li>酒店</li>
                        <li>酒店</li>
                        <li>酒店</li>
                        <li>酒店</li>
                        <li>酒店</li>
                        <li>酒店</li>
                        <li>酒店</li>
                        <li>酒店</li>
                        <li>酒店</li>
                        <li>酒店</li>
                        <li>酒店</li>
                        <li>酒店</li>
                        <li>酒店</li>
                    </ul>
                </div>
            </div>
            <div class="main-content-top-third">
                <div class="main-content-top-item"><span>周边热门</span></div>
                <div class="main-content-top-ul">
                    <ul>
                        <li>美食</li>
                        <li>美食</li>
                        <li>美食</li>
                        <li>美食</li>
                        <li>美食</li>
                        <li>美食</li>
                        <li>美食</li>
                        <li>美食</li>
                        <li>美食</li>
                        <li>美食</li>
                        <li>美食</li>
                        <li>美食</li>
                        <li>美食</li>
                        <li>美食</li>
                        <li>美食</li>
                        <li>美食</li>
                        <li>美食</li>
                        <li>美食</li>
                        <li>美食</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="main-content-foot">
            <div class="main-content-foot-first">
                <div class="main-content-foot-first-help">
                    <p>用户帮助</p>
                    <ul>
                        <li>申请退款</li>
                        <li>申请退款</li>
                        <li>申请退款</li>
                        <li>申请退款</li>
                        <li>申请退款</li>
                        <li>申请退款</li>
                        <li>申请退款</li>
                    </ul>
                </div>
                <div class="main-content-foot-first-service">
                    <p>美团服务</p>
                    <ul>
                        <li>美团外卖</li>
                        <li>美团外卖</li>
                        <li>美团外卖</li>
                        <li>美团外卖</li>
                        <li>美团外卖</li>
                        <li>美团外卖</li>
                        <li>美团外卖</li>
                        <li>美团外卖</li>
                    </ul>
                </div>
            </div>
            <div class="main-content-foot-second">
                <div class="main-content-foot-second-corp">
                    <p>商家合作</p>
                    <ul>
                        <li>美团餐饮商户中心</li>
                        <li>美团餐饮商户中心</li>
                        <li>美团餐饮商户中心</li>
                        <li>美团餐饮商户中心</li>
                        <li>美团餐饮商户中心</li>
                        <li>美团餐饮商户中心</li>
                        <li>美团餐饮商户中心</li>
                        <li>美团餐饮商户中心</li>
                        <li>美团餐饮商户中心</li>
                        <li>美团餐饮商户中心</li>
                        <li>美团餐饮商户中心</li>
                        <li>美团餐饮商户中心</li>
                        <li>美团餐饮商户中心</li>
                        <li>美团餐饮商户中心</li>
                        <li>美团餐饮商户中心</li>
                        <li>美团餐饮商户中心</li>
                        <li>美团餐饮商户中心</li>
                    </ul>
                </div>
            </div>
            <div class="main-content-foot-third">
                <div class="main-content-foot-third-join">
                    <p>代理商加盟</p>
                    <ul>
                        <li>美团外卖代理商招募</li>
                        <li>美团外卖代理商招募</li>
                        <li>美团外卖代理商招募</li>
                        <li>美团外卖代理商招募</li>
                        <li>美团外卖代理商招募</li>
                        <li>美团外卖代理商招募</li>
                        <li>美团外卖代理商招募</li>
                    </ul>
                </div>
                <div class="main-content-foot-third-rule">
                    <p>美团规则</p>
                    <ul>
                        <li>规则中信</li>
                        <li>规则中信</li>
                        <li>规则中信</li>
                    </ul>
                </div>
            </div>
            <div class="main-content-foot-fourth">
                <div class="main-content-foot-fourth-focus">
                    <p>关注美团</p>
                    <ul>
                        <li>美团新浪微博</li>
                    </ul>
                </div>
                <div class="main-content-foot-fourth-info">
                    <p>公司信息</p>
                    <ul>
                        <li>关于我们</li>
                        <li>关于我们</li>
                        <li>关于我们</li>
                        <li>关于我们</li>
                        <li>关于我们</li>
                    </ul>
                </div>
                <div class="main-content-foot-fourth-tip">
                    <p>廉政举报</p>
                    <ul>
                        <li>廉政举报平台</li>
                    </ul>
                </div>
                <div class="main-content-foot-fourth-kno">
                    <p>知识产权</p>
                    <ul>
                        <li>知识产权维权平台</li>
                    </ul>
                </div>
            </div>
            <div class="main-content-foot-fifth">
                <div class="main-content-foot-fifth-phone">
                    <p>消费者服务热线</p>
                    <ul>
                        <li>外卖消费者：10109777</li>
                        <li>外卖消费者：10109777</li>
                        <li>外卖消费者：10109777</li>
                    </ul>
                </div>
                <div class="main-content-foot-fifth-hot">
                    <p>商家服务热线</p>
                    <ul>
                        <li>外卖&餐饮商家：10105557</li>
                        <li>外卖&餐饮商家：10105557</li>
                        <li>外卖&餐饮商家：10105557</li>
                    </ul>
                </div>
                <div class="main-content-foot-fifth-tip">
                    <p>投诉举报热线</p>
                    <ul>
                        <li>违法和不良信息举报电话：4006018900</li>
                        <li>举报邮箱：tousujubao@meituan.com</li>
                    </ul>
                </div>
                <div class="main-content-foot-fifth-bus">
                    <p>商家自助入驻美团入口</p>
                </div>
                <div class="main-content-foot-fifth-pro">
                    <p>供应商注册入口</p>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232

4.css

*{
    margin: 0;
    padding: 0;
    list-style: none;
    box-sizing: border-box;
}
body{
    height: 100%;
    width: 100%;
    background-color: #F8F8F8;
}
.main-fourth{
    margin: 70px auto 0;
    width: 80%;
    display: flex;
    flex-direction: row;
}
.main-fourth .main-content{
    height: 100%;
    width: 100%;
}
.main-fourth .main-content .main-content-top{
    height: 280px;
    width: 100%;
    background-color: #FFF;
    border: 1px solid #cccccc;
    border-radius: 5px;
}
.main-fourth .main-content .main-content-top>div{
    height: 70px;
    width: 100%;
    position: relative;
}
.main-fourth .main-content .main-content-top .main-content-top-nav span{
    position: absolute;
    left: 20px;
    line-height: 70px;
    font-size: 18px;
}
.main-fourth .main-content .main-content-top div .main-content-top-item{
    height: 100%;
    width: 100px;
    position: absolute;
    left: 20px;
}
.main-fourth .main-content .main-content-top div .main-content-top-ul{
    height: 80%;
    width: 800px;
    position: absolute;
    left: 110px;
}
.main-fourth .main-content .main-content-top div .main-content-top-ul ul{
    width: 100%;
}
.main-fourth .main-content .main-content-top div .line{
    border-bottom: 1px solid #cccccc;
}
.main-fourth .main-content .main-content-top div .main-content-top-ul ul li.hot-parent{
    position: relative;
}
.main-fourth .main-content .main-content-top div .main-content-top-ul ul li.hot-parent .hot{
    display: block;
    position: absolute;
    background-color: #FF4848;
    width: 40px;
    left: 30px;
    top: 0;
    text-align: center;
    color: #ffffff;
    border-radius: 10px;
}
.main-fourth .main-content .main-content-top div .main-content-top-ul ul li{
    float: left;
    width: 80px;
    padding-bottom: 10px;
    font-size: 13px;
    color: #666666;
}
.main-fourth .main-content .main-content-foot{
    margin-top: 40px;
    width: 100%;
    border-top: 1px solid #cccccc;
    display: flex;
    justify-content: space-evenly;
}
.main-fourth .main-content .main-content-foot>div{
    padding-top: 30px;
    width: 19%;
}
.main-fourth .main-content .main-content-foot p{
    color:#333333;
    font-size: 14px;
}
.main-fourth .main-content .main-content-foot li{
    color:#666666;
    font-size: 12px;
}
.main-fourth .main-content .main-content-foot>div{
    margin: 5px;
}
.main-fourth .main-content .main-content-foot>div div{
    width: 100%;
    margin-top: 10px;
    position: relative;
    margin-bottom: 30px;
}
.main-fourth .main-content .main-content-foot>div  li{
    margin-top: 8px;
    cursor: pointer;
}
.main-fourth .main-content .main-content-foot>div  li:hover{
    color: #FF6600;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小蓝xlanll/article/detail/80690