- 头部
- 搜索
- 点餐分类部分
1、头部和底部
header 水平不居中，居左
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="framework/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="framework/reset.css" rel="stylesheet">
<style type="text/css">
.wrapper {
width: 100%;
height: 100%;
}
.wrapper header{
width: 100%;
height: 12vw;
background-color: #0097FF;
display: flex;
align-items: center;
}
/* 底部 */
.wrapper .footer {
width: 100%;
height: 14vw;
border-top: solid 1px #DDD;
background-color: #fff;
position: fixed;
left: 0;
bottom: 0;
display: flex;
justify-content: space-around;
align-items: center;
}
/* 底部li里的图标和文字垂直居中 */
.wrapper .footer li {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #999;
user-select: none;
cursor: pointer;
}
/* 设置图标和文字大小 */
.wrapper .footer li p {
font-size: 2.8vw;
}
.wrapper .footer li i {
font-size: 5vw;
}
</style>
</head>
<body>
<div class="wrapper">
<!-- header部分 -->
<header>
<p>用户登录</p>
</header>
<!-- 底部菜单部分 -->
<ul class="footer">
<li onclick="location.href='index.html'">
<i class="fa fa-home"></i>
<p>首页</p>
</li>
<li>
<i class="fa fa-compass"></i>
<p>发现</p>
</li>
<li onclick="location.href='orderList.html'">
<i class="fa fa-file-text-o"></i>
<p>订单</p>
</li>
<li>
<i class="fa fa-user-o"></i>
<p>我的</p>
</li>
</ul>
</div>
</body>
目前效果
image.png
1、header部分
1）最左侧定位小图标：
/**
-
location 定位小图标
-
说明：使用div标签，加上icon-location类样式即可。
但需要放置在一个容器中，调整容器大小，图标能自适应容器大小。-
示例：
-
<div class="icon-location-box">
<div class="icon-location"></div>-
</div>
*/<header> <div class="icon-location-box"> <div class="icon-location"></div> </div> </header>
css外层盒子
.wrapper header .icon-location-box {
width: 3.5vw;
height: 3.5vw;
margin: 0 1vw 0 3vw;
}
图标样式icon.css
.icon-location {
/*先画一个正方形*/
position: relative;
width: 100%;
height: 100%;
/*然后将三个角变成圆角*/
border-radius: 50% 50% 50% 0;
background: #fff;
/*最后，旋转45度*/
transform: rotate(-45deg);
}
.icon-location:after {
content: '';
width: 40%;
height: 40%;
margin: 30% 0 0 29%;
background-color: #0097FF;
position: absolute;
border-radius: 50%;
}
2)公司名称
<div class="location-text">沈阳市规划大厦<i class="fa fa-caret-down"></i></div>
/* 2公司名称简单调整样式*/
.wrapper header .location-text{
font-size: 4.5vw;
font-weight: 700;
color: #fff;
}
.wrapper header .location-text .fa-caret-down{
margin-left: 1vw;
}
目前效果
image.png
2、搜索部分
1）html
搜索框部分（此块与search-fixed-top块宽度高度一致，用于当
search-fixed-top块固定后，挡住下面块不要窜上去）
<div class="search">
<!-- 当滚动条超过上面的定位块时，search-fixed-top块变成固定在顶部。 -->
<div class="search-fixed-top" id="fixedBox">
<!-- 搜索框部分中间的白框 -->
<div class="search-box">
<i class="fa fa-search"></i>搜索饿了么商家、商品名称
</div>
</div>
</div>
2)css
/* search部分 */
.wrapper .search{
width: 100%;
height: 13vw;
}
/* 用于固定定位的父盒子 蓝色背景 */
.wrapper .search .search-fixed-top{
width: 100%;
height: 13vw;
background-color: #0097FF;
display: flex;
justify-content: center;
align-items: center;
}
/* 文本框样式 白色带圆角 中间字体灰色*/
.wrapper .search .search-fixed-top .search-box{
width: 90%;
height: 9vw;
background-color: #fff;
border-radius: 2px;
display: flex;
justify-content: center;
align-items: center;
font-size: 3.5vw;
color: #AEAEAE;
font-family: "宋体";
/*此样式是让文本选中状态无效*/
user-select: none;
}
3、 点餐分类部分
<!-- html部分 -->
<ul class="foodtype">
<li onclick="location.href='businessList.html'">
<img src="img/dcfl01.png">
<p>美食</p>
</li>
<li onclick="location.href='businessList.html'">
<img src="img/dcfl02.png">
<p>早餐</p>
</li>
<li onclick="location.href='businessList.html'">
<img src="img/dcfl03.png">
<p>跑腿代购</p>
</li>
<li onclick="location.href='businessList.html'">
<img src="img/dcfl04.png">
<p>汉堡披萨</p>
</li>
<li onclick="location.href='businessList.html'">
<img src="img/dcfl05.png">
<p>甜品饮品</p>
</li>
<li onclick="location.href='businessList.html'">
<img src="img/dcfl06.png">
<p>速食简餐</p>
</li>
<li onclick="location.href='businessList.html'">
<img src="img/dcfl07.png">
<p>地方小吃</p>
</li>
<li onclick="location.href='businessList.html'">
<img src="img/dcfl08.png">
<p>米粉面馆</p>
</li>
<li onclick="location.href='businessList.html'">
<img src="img/dcfl09.png">
<p>包子粥铺</p>
</li>
<li onclick="location.href='businessList.html'">
<img src="img/dcfl10.png">
<p>炸鸡炸串</p>
</li>
</ul>
/* 点餐分类部分css */
/* 整体宽度 */
.foodtype{
width: 100%;
height: 48vw;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
}
/* li宽度及里面内容按列排列 */
.foodtype li{
width: 18vw;
height: 20vw;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
/* 图片大小 */
.wrapper .foodtype li img{
width: 12vw;
/*视频讲解时高度设置为12vw，实际上设置为10.3vw更佳*/
height: 10.3vw;
}
/* 文字大小和颜色 */
.wrapper .foodtype li p{
font-size: 3.2vw;
color: #666;
}
目前样式
image.png
网友评论