顶部栏目样式设计
代码：
shopping.html
购物车
停车场：P24241
车牌号码：京N2B945
计费时长：1h30min
支付金额：
￥198
停车开始时间：2020-8-4 11：04：31
停车结束时间：2020-8-4 12：35：04
停车场：P24241
车牌号码：京N2B945
计费时长：1h30min
支付金额：
￥198
停车开始时间：2020-8-4 11：04：31
停车结束时间：2020-8-4 12：35：04
全选
合计:
￥0
支付 （0）
personal-center.html
本次缴费
-
停车场：P24241
车牌号码：京N2B945
计费时长：1h30min
支付金额：
￥198
-
停车开始时间：2020-8-4 11：04：31
停车结束时间：2020-8-4 12：35：04
-
道路泊位停车的请于缴费后5分钟内驶离，公共停车场停车的请于缴费后15分钟内驶离，否则将重新计费产生费用。
总支付金额
￥198
common.css
@charset "utf-8";
*{
margin:0; padding:0;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td { margin: 0; padding: 0; font-family: "微软雅黑"; }
fieldset, img { border: 0; }
ul, ol, li { list-style: none; font-family:'Microsoft YaHei'; }
/* remember to define focus styles! */
:focus { outline: 0; }
address, caption, cite, code, dfn, em, strong, th, var, optgroup { font-style: normal; font-weight: normal; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; }
abbr, acronym { border: 0; font-variant: normal; }
input, button, textarea, select, optgroup, option { font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit; background-color: #fff; border: none;}
code, kbd, samp, tt { font-size: 100%; }
a{text-decoration:none;}
a:hover{
text-decoration: none;
}
/*@purpose To enable resizing for IE */
/*@branch For IE6-Win, IE7-Win */
input, button, textarea{ *font-size: 100%;}
ol, ul { list-style: none; }
/* tables still need 'cellspacing="0"' in the markup */
table,tr,td { border-collapse: collapse; border-spacing: 0; margin:0;padding:0;}
caption, th { text-align: left; }
sup, sub { font-size: 100%; vertical-align: baseline; }
/* remember to highlight anchors and inserts somehow! */
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
/**Common Css**/
.fr { float: right; *display: inline;}
.fl { float: left; *display: inline;}
/*文本超出显示省略号*/
.ehn, .otw, .tow { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
/*清除浮动*/
.clearfix { clear: both; *zoom:1;}
.clearfix:after { display: block; clear: both; content: "\0020"; visibility: hidden; height: 0; }
.border { border: 1px solid #e8e8e8 }
@media screen and (-webkit-min-device-pixel-ratio: 2) {
.border { border: 0.5px solid #e8e8e8 }
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
.border { border: 0.333333px solid #e8e8e8 }
}
.border-top { border-top: 1px solid #e8e8e8 }
@media screen and (-webkit-min-device-pixel-ratio: 2) {
.border-top { border-top: 0.5px solid #e8e8e8 }
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
.border-top { border-top: 0.333333px solid #e8e8e8 }
}
.border-bottom { border-bottom: 1px solid #e8e8e8 }
@media screen and (-webkit-min-device-pixel-ratio: 2) {
.border-bottom { border-bottom: 0.5px solid #e8e8e8 }
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
.border-bottom { border-bottom: 0.333333px solid #e8e8e8 }
}
.border-right { border-right: 1px solid #e8e8e8 }
@media screen and (-webkit-min-device-pixel-ratio: 2) {
.border-right { border-right: 0.5px solid #e8e8e8 }
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
.border-top { border-right: 0.333333px solid #e8e8e8 }
}
.icon-active a{
color: darkred!important;
}
.footer-icon {
display: flex;
justify-content: space-around;
position: fixed;
width: 100%;
z-index: 101;
padding: 8px 0 5px 0;
top: 0px;
height: 30px;
background: #ffffff;
}
.footer-icon a {
color: #000000;
display: flex;
flex-direction: column;
align-items: center;
font-size: 16px;
}
/*清除浮动代码*/
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
.clearfloat{zoom:1}
.right {
right: 0;
top: 5px;
}details.css
.index-page .swiper-slide img {
width: 100%;
}
.swiper-pagination-bullet-active {
background: rgba(0, 0, 0, 0.5);
}
.details-footer {
position: fixed;
background: #ffffff;
width: 98%;
padding: 0 0 0 2%;
display: flex;
justify-content: space-between;
bottom: 0;
}
.detail-icon {
display: flex;
align-items: center;
}
.detail-icon span {
margin: 0 5px;
}
.detail-icon a {
color: #000000;
text-align: center;
}
.detail-group {
display: flex;
align-items: center;
}
.detail-btn {
background: #999999;
color: #ffffff;
height: 50px;
line-height: 50px;
padding: 0 20px;
}
.detail-btn1 {
background: darkred;
color: #ffffff;
height: 50px;
line-height: 50px;
padding: 0 20px;
}
.detail-tit {
background: #ffffff;
text-align: center;
height: 40px;
line-height: 40px;
position: fixed;
top: 0;
width: 100%;
z-index: 10;
}
.goods-name {
font-size: 15px;
width: 96%;
padding: 0 3%;
}
.detile_next {
display: flex;
background: #Fff;
border-top: 1px solid #eaeaea;
border-bottom: 1px solid #eaeaea;
}
.detile_next .next_list {
color: #9a9a9a;
flex: 1;
text-align: center;
display: flex;
height: 50px;
align-items: center;
justify-content: center;
}
.detile_next .red_quan {
width: 10px;
height: 10px;
margin-right: 2px;
border-radius: 10px;
background: darkred;
}
.good-price {
font-size: 16px;
width: 96%;
padding: 5px 3% 10px 3%;
color: red;
}
.detail-header {
background: #ffffff;
}
.detitle_tab ul {
display: flex;
background: #fff;
}
.detile_centent {
width: 100%;
padding-bottom: 100px;
}
.detile_centent img {
width: 100%;
}
.tabulous_active {
color: darkred !important;
font-weight: bold;
}
.part {
display: none;
background: #ffffff;
padding: 20px 10px;
}
.detitle_tab ul li {
display: flex;
flex: 1;
height: 35px;
align-items: center;
justify-content: center;
font-size: 14px;
color: #000;
border-bottom: 1px solid #eaeaea;
}
/*个人中心的样式*/
.personal-header {
margin: 10px 0;
background: #ffffff;
padding: 10px 2%;
display: flex;
justify-content: space-between;
align-items: center;
}
.photo {
width: 60px;
height: 60px;
border-radius: 60px;
background: rgba(0, 0, 0, 0.3);
display: flex;
align-items: center;
font-size: 12px;
}
.personal-content {
background: #ffffff;
}
.content-top {
display: flex;
justify-content: space-between;
border-bottom: 1px solid #eaeaea;
padding: 10px 2%;
}
.content-next {
display: flex;
justify-content: space-around;
padding: 20px 0;
}
.content-next div {
text-align: center;
}
.personal-ul {
margin-top: 2px;
background: #ffffff;
}
.personal-ul li {
padding: 10px 3%;
display: flex;
justify-content: space-between;
align-items: center;
}
.personal-ul li + li {
border-top: 1px solid #eaeaea;
}
/*//下单页面*/
.u_header {
background: #ffffff;
text-align: center;
height: 40px;
line-height: 40px;
position: fixed;
top: 0;
width: 100%;
z-index: 10;
}
.write_word {
display: flex;
align-items: center;
justify-content: space-between;
background: #fffdea;
padding: 10px 3%;
}
.write_word img{
width: 20px;
}
.write_word div{
display: flex;
align-items: center;
}
.loc_item1{
width: 90%;
background: #ffffff;
margin: 10px auto;
border-radius: 5px;
padding: 10px 2%;
display: flex;
justify-content: space-between;
align-items: center;
}
.loc_first{
display: flex;
align-items: center;
}
.phone{
color: #999999;
margin-left: 10px;
}
.loc_address{
margin-top: 8px;
}
.address{
display: flex;
justify-content: space-between;
}
.detile_picture img{
width: 80px;
}
.detile_header {
display: flex;
justify-content: space-between;
background: #ffffff;
padding: 10px 2%;
}
.write_name{
margin-left: 5px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.write_name .detile_title {
font-size: 16px;
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.price_left{
color: #ff0000;
}
.tranform_fee {
margin-top: 10px;
background: #fff;
}
.tranform_fee .good_desc {
display: flex;
padding: 0 20px;
height: 45px;
line-height: 45px;
justify-content: space-between;
}
.tranform_fee .desc_left {
display: flex;
align-items: center;
justify-content: center;
}
.tranform_fee .add {
background: #EFEFEF;
height: 20px;
width: 25px;
display: flex;
align-items: center;
justify-content: center;
color: #999999;
font-size: 18px;
}
.tranform_fee .num {
margin: 0 5px;
}
.tranform_fee .num input {
border: 0;
width: 20px;
text-align: center;
}
.tranform_fee .good_desc + .good_desc {
border-top: 1px solid #efefef;
}
.detile_footer {
display: flex;
position: fixed;
bottom: 0px;
width: 100%;
}
.detile_footer .footer_left {
flex: 1;
display: flex;
height: 50px;
justify-content: center;
align-items: center;
font-size: 14px;
background: #fff;
}
.detile_footer .footer_left .footer_title {
color: #9a9a9a;
}
.detile_footer .footer_left .footer_price {
color: #ff0000;
font-size: 18px;
}
.detile_footer .footer_right {
flex: 1;
display: flex;
height: 50px;
justify-content: center;
align-items: center;
color: #fff;
background: darkred;
font-size: 18px;
}shopping.css
body {
background: #f4f4f4;
}
.shoping-page{
padding-bottom: 100px;
}
.shoping-page .shopping-name{
display: flex;
}
.shoping-page .shopping-item {
width: 90%;
margin: 10px auto;
padding: 10px;
background: #ffffff;
border-radius: 5px;
align-items: center;
}
.shoping-page .shopping-item img {
width: 80px;
height: 80px;
border-radius: 5px;
margin-right: 5px;
}
.shoping-page .goods-size {
margin-top: 5px;
}
.shoping-page .goods-size span {
background: #f4f4f4;
color: #999999;
}
.shoping-page .shopping-select {
display: inline-block;
width: 20px;
height: 20px;
background: url("../img/select.png") no-repeat center;
background-size: 100% 100%;
margin-right: 10px;
}
.shoping-page .good-property {
flex: 2;
}
.shoping-page .goods-footer {
display: flex;
align-items: center;
margin-top: 10px;
justify-content: space-between;
}
.header_box {
height: 44px;
position: fixed;
width: 94%;
padding: 0 3%;
line-height: 44px;
background: #ffffff;
top: 0;
z-index: 999999;
}
.box1{
text-align: center;width: 60%;margin: 0 auto
}
/*.box2{
text-align: center;
width: 20%;
position: absolute;
display: inline;
top: 0;
right: -20px;
}*/
.shoping-page .shopping-box{
position: relative;
}
.shoping-page .goods-count span {
border: 1px solid #f4f4f4;
padding: 2px 10px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.shoping-page .good-list{
display: flex;
position: relative;
}
.shoping-page .goods-count span + span {
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.shoping-page .store-goods{
width: 100%;
display: flex;
align-items: center;
background: #ffffff;
z-index: 1;
margin: 5px 0;
transform: translate3d(0px,0px,0px);
/*规定应用过渡的CSS属性*/
transition-property:transform;
/*规定应用过渡所花费的时间*/
transition-duration: 0s;
/*规定过渡效果从何开始，默认是0*/
transition-delay: 0;
/*规定过渡的时间曲线*/
transition-timing-function: linear;
}
.subListTitle {
position: absolute;
line-height: 89px;
}
.right > .subRight {
display: block;
float: left;
padding: 0 12px;
}
.collection {
background-color: #c7c7cc;
color: white;
}
.update {
background-color: #ffc900;
color: white;
}
.delete {
background-color: #ef473a;
color: white;
}
.shoping-page .shopping-check {
width: 20px;
height: 20px;
/*background: url("../img/pay_selected.png") no-repeat center;*/
background: url("../img/select.png") no-repeat center;
background-size: 100% 100%;
margin-right: 10px;
}
.shoping-page .checkbox_css {
width: 20px;
height: 20px;
vertical-align: middle;
opacity: 0;
margin-right: 10px;
}
.shoping-page .goods-count input {
border-top: 1px solid #f4f4f4;
border-bottom: 1px solid #f4f4f4;
width: 40px;
padding: 2px 0;
text-align: center;
}
.shoping-page .goods-price {
font-weight: bold;
color: #ff0000;
}
.shoping-page .footer-icon {
background: #f4f4f4;
}
.shoping-page .shopping-account {
background: #ffffff;
position: fixed;
bottom: 0px;
width: 94%;
height: 46.5px;
display: flex;
padding: 0 3%;
justify-content: space-between;
align-items: center;
z-index: 99;
}
.shoping-page .shopping-count {
font-size: 16px;
margin-right: 5px;
}
.shoping-page .shopping-account div {
display: flex;
align-items: center;
}
.count-color {
color: darkred;
}
.shoping-page .total {
background: darkred;
margin-left: 10px;
padding: 5px 10px;
border-radius: 20px;
color: #ffffff;
}style.css
.top-header {
background-color: #f60;
width: 100%;
overflow: hidden;
position: relative;
display: table;
}
.top-header h3 {
font-size: 1.6em;
padding: 1em;
margin: 0 30%;
white-space: nowrap;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
display: block;
color: #fff;
font-weight: normal;
display: table-cell;
}
.top-header a:first-child {
width: 14%;
display: table-cell;
padding: 0 4%;
vertical-align: middle;
}
.top-header a:last-child {
width: 14%;
display: table-cell;
padding: 0 4%;
vertical-align: middle;
}
.top-header img {
width: 100%;
display: block;
}
body {
background-color: #f2f2f2;
}
/*瀑布流开始*/
.wall {
display: block;
position: relative;
}
.wall-column {
display: block;
position: relative;
width: 50%;
float: left;
padding: 0 2%;
box-sizing: border-box;
margin-bottom: 50px;
}
.article {
display: block;
margin: 0 0 8% 0;
/*padding: 5%;*/
background: white;
border-radius: 3px;
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
transition: all 100;
overflow: hidden;
position: relative;
}
.article:hover {
transform: scale(1.01);
}
.article img {
display: block;
width: 100%;
margin: 0 0 5% 0;
}
.article a {
color: #666;
}
.article p {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 70%;
padding:0 5%;
font-size: 1em;
line-height: 1.5;
}
.article small {
font-size: 1em;
color: #ff0000;
line-height: 1.5;
padding:0 5% 5% 5%;
display: inline-block;
}
.article input {
width: 20%;
padding: 0.4em;
border-radius: 0.4em;
font-size: 0.8em;
z-index: 100;
background-color: #f60;
border: none;
position: absolute;
bottom: 3%;
right: 5%;
color: #fff;
box-shadow: 0 0 7px #d7d7d7;
}
/*瀑布流结束*/
.wrapper h3 {
text-align: center;
margin: 0 20%;
white-space: nowrap;
text-overflow: ellipsis;
font-weight: normal;
color: #333;
overflow: hidden;
font-size: 1.5em;
padding: 0.7em 0;
}
.wrapper h4 {
width: 90%;
margin: 0 5%;
text-align: justify;
font-weight: normal;
color: #999;
font-size: 1.2em;
margin-bottom: 3%;
line-height: 1.5;
}
效果：
