css布局实现充值续费表单页面效果代码-html代码-BFW代码库

css布局实现充值续费表单页面效果代码

代码语言：html

代码描述：css布局实现充值续费表单页面效果代码

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

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">


    <style>
        * {
    	margin: 0;
    	padding: 0;
    }
    
    .pay {
    	width: 800px;
    	margin: 150px auto;
    	background: #ccc;
    	border: 1px solid #e5e5e5;
    	border-radius: 4px;
    }
    
    p{
    	margin: 0;
    }
    
    a,
    a:hover,
    a:focus {
    	color: #666;
    }
    
    .tr_recharge {
    	max-width: 800px;
    	background: #fff;
    	border-radius: 4px;
    	overflow: hidden;
    }
    
    .tr_rechtext {
    	width: 100%;
    	padding: 10px;
    	background: #27b0d6;
    	color: #fff;
    }
    
    .te_retit {
    	font-size: 20px;
    	font-weight: bold;
    	line-height: 40px;
    }
    
    .te_retit img {
    	float: left;
    	margin-top: 5px;
    	margin-right: 5px;
    }
    
    .tr_rechtext p {
    	margin-bottom: 10px;
    }
    
    .tr_rechbox {
    	padding: 20px;
    	border-bottom: 1px solid #ededed;
    }
    
    .tr_rechhead {
    	width: 100%;
    	background: rgba(39, 176, 214, .15);
    	padding: 20px;
    	display: inline-block;
    	float: left;
    	margin-bottom: 40px
    }
    
    .tr_rechhead>img {
    	width: 46px;
    	height: 46px;
    	border-radius: 50%;
    	float: left;
    	margin-right: 10px;
    }
    
    .tr_rechhead>p {
    	line-height: 46px;
    	float: left;
    	color: #666;
    }
    
    .tr_rechhead p a {
    	color: rgb(39, 176, 214);
    }
    
    .tr_rechheadcion {
    	float: right;
    	display: inline-block;
    }
    
    .tr_rechheadcion img {
    	width: 20px;
    	float: left;
    	margin-top: 13px;
    	margin-right: 5px;
    }
    
    .tr_rechheadcion span {
    	color: #565656;
    	line-height: 46px;
    }
    
    .tr_rechli ul li {
    	float: left;
    	border: 1px solid #d7d7d7;
    	color: #555;
    	font-size: 18px;
    	padding: 15px 30px;
    	margin-right: 30px;
    	border-radius: 4px;
    }
    
    .tr_rechli>span {
    	color: rgb(39, 176, 214);
    }
    
    .tr_rechcho {
    	margin-bottom: 20px;
    	display: inline-block;
    }
    
    .tr_rechcho img {
    	height: 50px;
    	padding: 10px;
    	border: 1px solid #e5e5e5;
    }
    
    .tr_rechcho label {
    	display: inline-block;
    
    }
    
    .tr_rechli {
    	display: inline-block;
    	margin-bottom: 40px;
    }
    
    .tr_rechcho>span {
    	color: #666;
    	float: left;
    	line-height: 50px;
    	margin-right: 10px;
    }
    
    .tr_rechnum {
    	height: 40px;
    }
    
    .tr_rechnum>span {
    	line-height: 40px;
    	margin-right: 10px;
    }
    
    .rechnum {
    	color: #ec5a5b;
 .........完整代码请登录后点击上方下载按钮下载查看