中秋作业-仿美团触屏版-2019-9-12作业
程序员文章站
2022-03-05 21:29:07
...
目标网站图片
仿写成品图片
代码演示
实例
<!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个问题点没解决的（老师有空就点评支个招，(#^.^#)）：
1顶部右边的图标没居中
2.猜你喜欢的文字缩到最小会跑位。。
页面布局用flex布局
时间没多少（黑厂不放假。。），框架就没写了，布局看着简单，但是我还是得花5个小时左右才写出来，代码都是一步步测试写出来的，虽然有点狼狈。但是很开心。
上一篇： vue 与 react 区别有多大
下一篇： 什么是css盒子模型