css布局实现手机端移动端外卖点餐购物车页面效果代码
代码语言：html
所属分类：布局界面
代码描述：css布局实现手机端移动端外卖点餐购物车页面效果代码
代码标签： 手机 端 移动 端外 卖点 餐 购物车 页面 效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html class="js cssanimations">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp">
<style type="text/css">
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
font-family: "微软雅黑","microsoft yahei",helvetica;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
a {
color: #333;
text-decoration: none;
outline: none
}
a:hover {
color: #090
}
/*Clear Float*/
.clearfix:after,.w1:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix,.w {
*+height: 1%
}
input[type="button"], input[type="submit"], input[type="reset"] {
-webkit-appearance: none;
}
textarea {
-webkit-appearance: none;
}
img {
width: 100%;
}
html,body {
height: 100%;
font-family: -apple-system-font,"Helvetica Neue", sans-serif;
font-size: 12px;
}
a,button,input,button,span,div {
-webkit-tap-highlight-color: rgba(255,0,0,0);
}
.header {
position: relative;
height: auto;
overflow: hidden;
color: #fff;
background: rgba(7,17,27,0.5);
background: url(//repo.bfw.wiki/bfwrepo/image/6085224b78e79.png) no-repeat;
background-size: cover;
}
.header .leftlogo {
width: 80px;
height: 80px;
border-radius: 5px;
float: left;
margin: 25px 20px 18px 30px;
background: url(//repo.bfw.wiki/bfwrepo/image/60665075e0765.png) no-repeat;
background-size: contain;
}
.header .righttitle {
float: left;
margin: 30px 0 0 0;
color: #FFF;
}
.header .righttitle h1 {
font-size: 20px;
font-weight: bold;
}
.header .righttitle h2 {
width: 200px;
font-size: 14px;
margin: 10px 0 0 0;
line-height: 20px;
}
.header .bulletin {
position: relative;
width: 94%;
height: 28px;
line-height: 28px;
padding: 0 4% 0 2%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
background: rgba(7,17,27,0.2);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.header .bulletin .bulletin-title {
display: inline-block;
vertical-align: top;
margin-top: 8px;
width: 25px;
height: 15px;
background: url(//repo.bfw.wiki/bfwrepo/icon/6094f85b87dce.png) no-repeat;
background-size: contain;
text-indent: -99999;
border-radius: 3px;
margin-right: 5px;
}
/*.header{
width: 100%;
height: 150px;
background: #555;
}*/
.swiper-container-ul {
list-style: none;
overflow: hidden;
width: 100%;
background: #fff;
top: 0;
}
.swiper-container-ul-li {
width: 50%;
height: 40px;
line-height: 40px;
float: left;
text-align: center;
}
.actives {
border-bottom: 1px solid #3190e8;
color: #3190e8;
}
.content {
width: 100%;
overflow: hidden;
}
.left {
top: 0px;
float: left;
width: 25%;
height: 100%;
background: #eee;
}
.left ul {
list-style: none;
}
.left ul li {
padding: 15px 5px;
text-align: center;
}
.active {
background: #fff;
border-left: 2px solid #3190e8;
}
.right {
float: left;
width: 75%;
height: 100%;
}
.right ul {
list-style: none;
}
.class-title {
padding: 15px 10px;
background: #eee;
}
.item {
overflow: hidden;
width: 100%;
padding: 10px;
background: #fff;
border-bottom: 1px solid #eee;
}
.item-left {
float: left;
}
.item-right {
float: left;
padding: 0 10px;
font-size: 14px;
font-weight: bold;
}
.item-ico {
width: 30px;
height: 30px;
margin: 20px 0 0 0;
float: left;
padding: 0;
}
.item-img {
width: 110px;
height: 66px;
background: #eee;
}
.item-img img {
width: 100%;
height: auto;
}
.title {
width: 100px;
height: 20px;
margin-top: 10px;
}
.subtitle {
width: 70px;
height: 20px;
margin-top: 10px;
background: #eee;
}
.price {
width: 50px;
height: 20px;
margin-top: 10px;
font-size: 13px;
font-weight: normal;
color: #f60002;
}
.shop {
position: fixed;
bottom: 0px;
width: 100%;
height: 50px;
background: #070f1a;
transition: all 0.5s ease 0s;
transition: all 0.5s ease 0s;
}
.shop .shopico {
position: relative;
width: 70px;
height: 70px;
border-radius: 50%;
float: left;
background: #070f1a;
margin: -15px 0 0 10px;
}
.shop .shopico i {
width: 50px;
height: 50px;
background: url(//repo.bfw.wiki/bfwrepo/icon/600047e09b69a.png) no-repeat;
background-size: contain;
display: inline-block;
margin: 8px 0 0 10px;
overflow: hidden;
border-radius: 50px;
}
.shop .shopprice {
float: left;
line-height: 50px;
font-size: 18px;
font-weight: bold;
color: #FFF;
margin-left: 10px;
}
.shop .shopbut {
background: #f55331;
float: right;
color: #FFF;
font-size: 16px;
font-weight: bold;
line-height: 50px;
padding: 0 20px;
}
.shop .numspan {
position: absolute;
top: -5px;
right: 5px;
width: 20px;
height: 20px;
text-align: center;
font-size: 12px;
line-height: 20px;
color: #FFF;
border-radius: 50%;
background: -webkit-linear-gradient(left top, #f07c49, #ff0000);
/* Safari 5.1 - 6.0 */
background: -o-linear-gradient(bottom right, #f07c49, #ff0000);
/* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(bottom right, #f07c49, #ff0000);
/* Firefox 3.6 - 15 */
background: linear-gradient(tobottom right, #f07c49, #ff0000);
/* 标准的语法 */
}
.mask {
width: 100%;
background: #000;
opacity: 0.5;
top: 0;
height: 100%;
display: none;
position: fixed;
}
.popup {
position: fixed;
width: 100%;
height: 300px;
background: #FFF;
bottom: -300px;
transition: all 0.5s ease 0s;
transition: all 0.5s ease 0s;
}
.popup .uptitle {
height: 40px;
line-height: 40px;
padding: 0 15px;
border-bottom: solid 1px #f9f9f9;
}
.popup .uptitle span {
font-size: 16px;
color: #000;
}
.popup .uptitle .tb {
height: 16px;
line-height: 20px;
font-size: 13px;
float: right;
margin: 0;
background: url(//repo.bfw.wiki/bfwrepo/icon/5d8351c1dcdea.png) no-repeat left center;
background-size: contain;
padding-left: 20px;
color: #a1a1a1;
margin: 13px 0 0 0;
}
.popup .uplist {
width: 100%;
height: 270px;
overflow-y: scroll;
}
.popup .uplist ul li {
width: 100%;
height: auto;
overflow: hidden;
margin: 10px 0;
}
.popup .uplist .uppic {
width: 80px;
height: auto;
float: left;
margin: 10px 10px 10px 15px;
}
.popup .uplist .listtitle {
width: 40%;
float: left;
margin: 10px 0 0 0;
line-height: 25px;
}
.popup .uplist .listtitle h1 {
font-size: 16px;
font-weight: bold;
color: #000;
}
.popup .uplist .listtitle h2 {
font-size: 14px;
font-weight: bold;
color: #f60002;
}
.popup .uplist .listright {
width: 30%;
height: auto;
float: right;
margin: 20px 0 0 0;
}
.popup .uplist .listright span {
display: block;
width: 30px;
height: 30px;
float: left;
}
.popup .uplist .listright p {
width: 30px;
float: left;
font-size: 14px;
text-align: center;
line-height: 30px;
}
.addnum {
background: url(//repo.bfw.wiki/bfwrepo/image/603857094e4e4.png) no-repeat;
background-size: contain;
}
.lessnum {
background: url(//repo.bfw.wiki/bfwrepo/image/6038571b445ab.png) no-repeat;
background-size: contain;
}
</style>
</head>
<body style="">
<div class="header">
<div class="leftlogo"></div>
<div class="righttitle">
<h1>xxx酒店</h1>
<h2>海淀区交大东路186号永大中心5号楼A口3层</h2>
</div>
<div class="bulletin">
<span class="bulletin-title"></span>公告信息公告信息公告信息公告信息公告信息
</div>
</div>
<div class="swiper-container">
<!--<ul class="swiper-container-ul" style="">
<li class="swiper-container-ul-li actives">商品</li>
<li class="swiper-container-ul-li">店铺</li>
</ul>-->
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="content" style="height: 2216px;">
<div id="left" class="left" style="">
<ul>
<li class="active">凉菜</li>
<li class="">粤菜</li>
<li class="">川菜</li>
<li class="">北方菜</li>
<li class="">主食</li>
</ul>
</div>
<div id="right" class="right" style="">
<ul>
<li>
<div class="class-title">
凉菜
</div>
<div>
<div class="item">
<div class="item-left">
<div class="item-img">
<img src="//repo.bfw.wiki/bfwrepo/image/608522a172d68.png">
</div>
</div>
<div class="item-right">
<div class="title">
葱油拌面
</div>
<div class="price">
¥ 32 元
</div>
</div>
<div class="item-ico addnum"></div>
</div>
</div>
<div>
<div class="item">
<div class="item-left">
<div class="item-img">
<img src="//repo.bfw.wiki/bfwrepo/image/608522a172d68.png">
</div>
</div>
<div class="item-right">
<div class="title">
葱油拌面
</div>
<div class="price">
¥ 32 元
</div>
</div>
<div class="item-ico addnum"></div>
</div>
</div>
<div>
<div class="item">
<div class="item-left">
<div class="item-img">
<img src="//repo.bfw.wiki/bfwrepo/image/608522a172d68.png">
</div>
</div>
<div class="item-right">
<div class="title">
葱油拌面
</div>
<div class="price">
¥ 32 元
</div>
</div>
<div class="item-ico addnum"></div>
</div>
</div>
<div>
<div class="item">
<div class="item-left">
<div class="item-img">
<img src="//repo.bfw.wiki/bfwrepo/image/608522a172d68.png">
</div>
</div>
<div class="item-right">
<div class="title">
葱油拌面
</div>
<div class="price">
¥ 32 元
</div>
</div>
<div class="item-ico addnum"></div>
</div>
</div>
</li>
<li>
<div class="class-title">
粤菜
</div>
<div>
<div class="item">
<div class="item-left">
<div class="item-img">
<img src="//repo.bfw.wiki/bfwrepo/image/608522a172d68.png">
</div>
</div>
<div class="item-right">
<div class="title">
葱油拌面
</div>
<div class="price">
¥ 32 元
</div>
</div>
</div>
</div>
<div>
<div class="item">
<div class="item-left">
<div class="item-img">
<img src="//repo.bfw.wiki/bfwrepo/image/608522a172d68.png">
</div>
</div>
<div class="item-right">
<div class="title">
葱油拌面
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0