1.input placeholder 文字居中 字体大小+上下padding值等于设计稿宽度 设计稿中总高度为86px
padding:27px 0;font-size:30px;
2.英文 文本换行
word-break:break-all;
word-wrap:break-word;
3.注意IE下的渐变写法，
引入pie文件之后
-pie-background: linear-gradient(#c9c9c9, #fff);
.nav_box{width:100%;height:50px;position:relative;
background: #ccc;
background: -webkit-linear-gradient(bottom, #c9c9c9, #fff);
background: -moz-linear-gradient(bottom, #c9c9c9, #fff);
background: -o-linear-gradient(bottom, #c9c9c9, #fff);
background: linear-gradient(to top, #c9c9c9, #fff);
-pie-background: linear-gradient(#c9c9c9, #fff);
behavior: url(PIE_uncompressed.htc);
4.表格代码片段
html:
<div class="level_score_table">
<table>
<thead>
<tr>
<td class="w150 table_left_title table_color01">信用等级</td>
<td class="w110 table_color02">A</td>
<td class="w110 table_color03">B</td>
<td class="w110 table_color04">C</td>
<td class="w110 table_color05">D</td>
<td class="w110 table_color06">E</td>
</tr>
</thead>
<tbody>
<tr>
<td class="table_left_title">信用分数</td>
<td>31-60分</td>
<td>31-60分</td>
<td>31-60分</td>
<td>31-60分</td>
<td>0-30分</td>
</tr>
</tbody>
</table>
</div>
.level_score_table{width: 704px;background: #dcdcdc;margin: 0 auto;
& table{border-collapse: separate;
border-spacing: 1px;
& thead tr{background:#f47908;& td{color: #FFF !important;}}
& tbody tr{background:#ffffff;& td{color: #333333;}}
& tr{background:#ffffff;
& td{border-spacing: 1px;text-align: center;color: #f1740f;padding: 18px 0px;font-size: 20px;}
}
}
}
.w150{width: 150px;}
.w110{width: 110px;}
.table_left_title{font-family: $yahei;font-size: 18px;}
.table_color01{background: #f47908;}
.table_color02{background: #f47908;}
.table_color03{background: #f68721;}
.table_color04{background: #fc993e;}
.table_color05{background: #fda656;}
.table_color06{background: #ffba7b;}
单元格合并
当需要合并单元格，即有的元素占用两行，有的元素占用两列。这时，用到了以下属性：
rowspan占n列
colspan占n行
<div class="level_score_table02">
<table>
<thead>
<tr>
<td class="w185 table_left_title "></td>
<td class="w310 table_left_title">项 目</td>
<td class="w84 table_left_title">状 态</td>
<td class="w125 table_left_title">信用分数</td>
</tr>
</thead>
<tbody>
<tr>
<td class="table_left_title" rowspan="3">基本信息</td>
<td>31-60分</td>
<td>31-60分</td>
<td>31-60分</td>
</tr>
<tr>
<td>31-60分</td>
<td>31-60分</td>
<td>31-60分</td>
</tr>
<tr>
<td>31-60分</td>
<td>31-60分</td>
<td>31-60分</td>
</tr>
<tr>
<td class="table_left_title" rowspan="3">基本信息</td>
<td>31-60分</td>
<td>31-60分</td>
<td>31-60分</td>
</tr>
<tr>
<td>31-60分</td>
<td>31-60分</td>
<td>31-60分</td>
</tr>
<tr>
<td>31-60分</td>
<td>31-60分</td>
<td>31-60分</td>
</tr>
</tbody>
</table>
</div>
.level_score_table02{width: 704px;background: #dcdcdc;margin: 0 auto;border-radius: 2px;
& table{border-collapse: separate;
border-spacing: 1px;
& thead tr{background:#f3f3f3;& td{color: #333333 !important;}}
& tbody tr{background:#ffffff;& td{color: #333333;}}
& tr{
& td{border-spacing: 1px;text-align: center;color: #f1740f;padding: 18px 0px;font-size: 20px;}
}
}
}
5.选择下拉框
默认系统select
<div class="loan_list_select w153">
<select name="listZhiwei1" size="1">北京</select>
</div>
css:
.loan_list_select{width: 620px;height: 40px;font-size: 17px;color: #343434;float: left;position: relative;}
.loan_list_select select{ width: 100%; height: 40px;color: #333;line-height: 1.5;padding: 10px 0 ;font-size: 16px;}
效果：
IE下
谷歌浏览器下
div标签模拟
<div class="select_box province">
<div class="selected">1000元</div>
<img src="data:images/loan/list_icon02.png" class="select_arrow" />
<div class="select_list_box" style="display:none;">
<div class="select_list">1000元</div>
<div class="select_list">2000元</div>
<div class="select_list">3000元</div>
<div class="select_list">4000元</div>
<div class="select_list">5000元</div>
</div>
</div>
// 模拟select
.select_box{width:100%;height:40px;position:absolute;left:0px;top:0px;cursor:pointer;z-index:;border: 1px solid #d5d5d5;behavior: url(PIE_uncompressed.htc);border-radius:3px ;}//注意宽度设置为100%,继承父元素的宽度
.select_box .selected{width:80%;height:40px;line-height:40px;font-size:17px;text-indent:18px;color: #343434;overflow: hidden;}//注意宽度设置为80%,并且overflow: hidden;保证文字太多不会与后面箭头重叠
.select_list_box{width:100%;/*height:150px;*//*overflow:hidden;overflow-y:scroll;*/background:#d5d5d5;}//注意1.宽度设置为100%,继承父元素的宽度。2.如果有内容太多可以放开滚动
.select_list_box .select_list{width:100%;height:40px;font-size:17px;line-height:40px;text-indent:18px;border-top:1px solid #f5f5f5;color: #FFF;}//注意宽度设置为100%,继承父元素的宽度
.select_list_box .select_list:hover{background:#c9c9c9;}
.select_arrow{position: absolute;right: 0px;top:0px;cursor: pointer;} .z_index6{z-index:;}
.z_index5{z-index:;}
.z_index4{z-index:;}
.z_index3{z-index:;}
.z_index2{z-index:;}
.z_index1{z-index:}