首页 > 代码库 > 我的第一个手机页面
我的第一个手机页面
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />
<title>爱融网-网络理财新体验,安全投资,快乐理财，网贷首选</title>
<link href="http://www.mamicode.com/css/head.css" rel="stylesheet"/>
<link href="http://www.mamicode.com/css/myAccount.css" rel="stylesheet"/>
<style>
header{ background:#d7d6d6; height:44px; padding:20px 0%; text-align:center; }
header .iconfont{ font-size:42px; color:#fff;}
header li{ float:left; width:13%;}
.earnings{ background:#53bcdf; height:193px; color:#fff; width:100%; }
.earnings .earnings-box{ width:92%; margin:0 auto;}
.earnings p{ line-height:77px; height:77px;}
.earnings-box div{ font-size:56px;}
.asset{ padding:40px 0; width:92%; margin:0 auto; height:70px;}
.asset li{ float:left; width:50%; font-size:28px;}
.asset li p{ height:43px; font-size:18px;}
.list ul{ border:1px solid #dbdbdb;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius: 10px; border-radius:10px; border-radius:10px; margin-bottom:20px; font-size:24px; background:#fff;}
.list ul:nth-last-child(2){ font-size:18px;}
.list ul li{ padding:0 3.4%; height:74px; line-height:74px; border-bottom:1px solid #dbdbdb;}
.list ul li:nth-last-child(1){border:none;}
.list ul li a{ display:block; height:100%; overflow:hidden; color:#555555;}
.list .iconfont{color:#dbdbdb;}
footer{ margin-bottom:20px;}
footer a{ display:inline-block; margin:0 1.6%; height:60px; background:#ff4400; color:#fff; width:45%; line-height:60px; font-size:30px; text-align:center;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius: 10px; border-radius:10px; }
</style>
</head>
<body>
<header>
<ul class="box clear">
<li><i class="iconfont" style=" margin-left:-20px;">󰅮</i></li>
<li style=" width:74%; font-size:38px; line-height:44px;"><span>username</span></li>
<li><i class="iconfont">󰄾</i></li>
</ul>
</header>
<div class="earnings">
<div class="box">
<div class="earnings-box">
<p>累计收益(元):</p>
<div><span>456456.23</span></div>
</div>
</div>
</div>
<div class="box">
<ul class="clear asset">
<li>
<p>爱融资产(元)</p>
<span>41456.23</span>
</li>
<li>
<p>可用余额(元)</p>
<span>456456.231</span>
</li>
</ul>
<div class="list">
<ul>
<li>
<a href="javascript:;">
<span class="left">资金记录</span>
<i class="iconfont right">󰅭</i>
</a>
</li>
<li>
<a href="javascript:;">
<span class="left">投资记录</span>
<i class="iconfont right">󰅭</i>
</a>
</li>
<li>
<a href="javascript:;">
<span class="left">回款计划</span>
<i class="iconfont right">󰅭</i>
</a>
</li>
</ul>
<ul>
<li>
<span class="left">可用红包</span>
<i class="right"><span>500</span>元</i>
</li>
<li>
<span class="left">可用爱融劵</span>
<i class="right"><span>500</span>元</i>
</li>
</ul>
<ul>
<li>
<a href="javascript:;">
<span class="left">网站公告</span>
<i class="iconfont right">󰅭</i>
</a>
</li>
<li>
<a href="javascript:;">
<span class="left">系统消息</span>
<i class="iconfont right">󰅭</i>
</a>
</li>
</ul>
</div>
<footer>
<p>
<a href="javascript:;">充值</a>
<a href="javascript:;" style=" background:#dbdbdb; color:#555">提现</a>
</p>
</footer>
</div>
</body>
</html>
我的第一个手机页面