css实现手机端停车收费缴费页面代码

代码语言:html

所属分类:布局界面

代码描述:css实现手机端停车收费缴费页面代码

代码标签: css 手机端 停车 收费 缴费

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<style>
    body{
    background-color: #fff;
}
#body{
    height: 100%;
}
#body .div_top{
    padding: 30px 0px;
    text-align: center;
    border-bottom: 1px solid #f2f2f2;
}
#body .div_top>div{
    background-color: #5495f6;
    color: #fff;
    display: inline-block;
    padding: 6px;
    box-shadow: 0px 4px 10px 0px
    rgba(84, 149, 246, 0.32);
}
#body .div_top>div>div{
    border: 1px solid #fff;
    padding: 8px 12px;
    letter-spacing:4px;
    font-weight: bold;
    font-size: 1.2em;
}
#body .div_top>div.new{
    background: linear-gradient(#fff, #3aff70);
    color: #000;
    box-shadow: 0px 4px 10px 0px rgba(58, 255, 112, 0.32);
}
#body .div_top>div.new>div{
    border-color: #000;
}


#body .div_form{
    padding: 20px;
    border-bottom: 12px solid #f2f2f2;
}
#body .div_form .div_text{

}
#body .div_form .div_text>div{
    overflow: hidden;
    margin-top: 5px;
}
#body .div_form .div_text>div:nth-child(1){
    margin-top: 0px;
}
#body .div_form .div_text .div_key{
    height: 20px;
    line-height: 20px;
    float: left;
    font-size: 0.9em;
}
#body .div_form .div_text .div_val{
    overflow: hidden;
    text-align: right;
    line-height: 20px;
    font-size: 0.9em;
}
#body .div_form .div_text .div_val.div_valName{
    font-weight: bold;
}
#body .div_form .div_text .div_val.div_valNub{
    color: #5495f6;
    font-weight: bold;
}
#body .div_form .div_button{
    color: #fff;
    background-color: #5495f6;
    box-shadow: 0px 4px 10px 0px
    rgba(84, 149, 246, 0.25);
    border-radius: 4px;
    text-align: center;
    height: 44px;
    line-height: 44px;
    font-size: 0.9em;
    margin: 50px 0px 50px 0px;
}

#body .div_explain{
    padding: 20px;
}
#body .div_explain .div_name{
    font-size: 0.9em;
    margin-bottom: 10px;
    line-height: 20px;
    font-weight: bold;
}
#body .div_explain .div_text{

}
#body .div_explain .div_text p{
    margin: 0px;
    line-height: 20px;
    font-size: 0.8em;
}
#body .div_explain .div_text span{
    color: #ff2424;
}

html{
    he.........完整代码请登录后点击上方下载按钮下载查看

网友评论0