工作遇到的问题

<div>test</div> // 看起来是个块级元素、其实是块级元素包含了隐藏的内联元素，而且隐藏的内联元素的content为test。如果div设置了line-height,实际上它作用于隐藏的内联元素。

1.bootstrap做了一个表格

花了一下午做了一个表格：大致是这样：

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>广发互联小贷</title>
<meta name="keywords" content="广发互联小贷" />
<meta name="description" content="广发互联小贷" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="#ffa74d">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<style>
	tr td {
		vertical-align: middle !important;
	}
	.warning td[rowspan]:first-child {
		background-color: #d9edf7;
	}
	.col-xs-full{
		padding: 0
	}
	.label-addition {
		font-size: 22px;
    	padding: 10px 0;
	}
</style>
<body>
	<div class="container-fluid">
		<div class ="row">
			<div class="col-md-12 label-primary text-center label-addition">
				<h1 class="label">零售系统运营数据-关键指标</h1>
			</div>
			<div class="col-xs-12 col-xs-full">
				<div class="table-responsible">
					<table class="table table-bordered" align="center">
						<thead>
							<tr class="info">
								<th colspan=2>零售系统-运营</th>
								<th>累计</th>
								<th>2016/8/14</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td rowspan=3 class="info">注册</td>
								<td>关注微信公众号用户量</td>
								<td>1580</td>
								<td>23</td>
							</tr>
							<tr class="warning">
								<td>注册成功用户量</td>
								<td>735</td>
								<td>2</td>
							</tr>
							<tr>
								<td>注册转化率(注册成功/关注公众号)</td>
								<td>24.49%</td>
								<td>23.31%</td>
							</tr>

							<tr class="warning">
								<td rowspan=4>授信</td>
								<td>授信申请笔数</td>
								<td>387</td>
								<td>11</td>
							</tr>
							<tr>
								<td>授信通过笔数</td>
								<td>221</td>
								<td>7</td>
							</tr>
							<tr class="warning">
								<td>授信总额度(万元)</td>
								<td>11491</td>
								<td>326</td>
							</tr>
							<tr>
								<td>平均授信额度(万元)</td>
								<td>52.00</td>
								<td>46.00</td>
							</tr>

							<tr class="warning">
								<td rowspan=3>放款</td>
								<td>放款笔数</td>
								<td>183</td>
								<td>128</td>
							</tr>
							<tr>
								<td>放款总金额(万元)</td>
								<td>6921</td>
								<td>59</td>
							</tr>
							<tr class="warning">
								<td>笔均放款金额(万元)</td>
								<td>37.82</td>
								<td>14.75</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
	<script src="js/deps/zepto.js"></script>
	<script type="js/deps/bootstrap.min.js"></script>
	<script src="js/statistics/genernal.js"></script>
</body>
</html>

以后遇到类似的表格就可以参考下了。

2.一行显示多张图片链接

需求描述，如图：

1.三张图片显示一列，每列占据屏幕的三分之一。

2.下面的文字居中显示。

3.上面有分割线，同时中间有两条分割线隔开三张图片。

css 代码如下：

.question-area {
    background-color: #ffffff;
    padding-bottom: 20px;
    border-top: 1px solid #e3e3e3;
}
.question-area a{
    display:inline-block;   /*让a标签有宽度*/ 内联标签的padding，margin和块级标签有所不同：https://www.cnblogs.com/enmeen/p/5286564.html
    width:32.3%;           /*占屏幕的1/3*/
}
.question-area a:not(:first-child) {
    border-left: 1px solid #e3e3e3; 
}
.question-area a img{
    width:100%;    /*继承父元素的宽度*/
    height: 75px;
}
.question-area a div {
    font-weight: normal;
    font-size: 14px;
    text-align: center;
}

html代码如下：

<div>
   <h1 class="question-title">问题分类</h1>
   <div class="question-area">
       <a href="more/icbc_guide.html">
          <img src="/m/img/zhenxinbaogao.png">
          <div>征信报告</div>
       </a>
       <a href="more/icbc_guide.html">
          <img src="/m/img/nashuizhenming.png">
          <div>纳税证明</div>
       </a>
       <a href="more/icbc_guide.html">
          <img src="/m/img/huankuanzhiyin.png">
          <div>还款指引</div>
       </a>
   <div>
</div>

 

posted @ 2016-08-15 19:44  anthonyliu  阅读(1291)  评论(0)    收藏  举报