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:}




												


											
其他常用HTML 片段的更多相关文章
	

    
						
  1. C#常用代码片段备忘
		
    以下是从visual studio中整理出来的常用代码片段,以作备忘 快捷键: eh 用途: 类中事件实现函数模板 private void MyMethod(object sender, Event ...
    
		
    2. 
						
  2. 36个Android开发常用代码片段
		
    //36个Android开发常用代码片段 //拨打电话 public static void call(Context context, String phoneNumber) { context.s ...
    
		
    3. 
						
  3. Jquery学习总结（1）——Jquery常用代码片段汇总
		
    1. 禁止右键点击 ? 1 2 3 4 5 $(document).ready(function(){     $(document).bind("contextmenu",fun ...
    
		
    4. 
								
  4. jQuery常用代码片段
		
    检测IE浏览器 在进行CSS设计时,IE浏览器对开发者及设计师而言无疑是个麻烦.尽管IE6的黑暗时代已经过去,IE浏览器家族的人气亦在不断下滑,但我们仍然有必要对其进行检测.当然,以下片段亦可用于检测 ...
    
		
    5. 
						
  5. Ext.NET Ext.JS 常用代码片段摘录
		
    引言 最近写代码突然有"一把梭"的感觉, 不管三七二十一先弄上再说. 换别人的说法, 这应该是属于"做项目"风格法吧. 至于知识体系, 可以参考官方或者更权威的 ...
    
		
    6. 
						
  6. python常用代码片段
		
    目录 Python3常用 文件处理 json处理 log日志 argparse使用 INIparser Python3常用 文件处理 class BaseMethod: @staticmethod d ...
    
		
    7. 
						
  7. Vue3.0常用代码片段和开发插件
		
    Vue3 Snippets for Visual Studio Code Vue3 Snippets源码 Vue3 Snippets下载 This extension adds Vue3 Code S ...
    
		
    8. 
						
  8. Play常用代码片段 http://www.anool.net/?p=625
		
    持续更新中: (1)按照降序查询: List<Entity> entities= Entity.find("order by id desc").fetch(2);   ...
    
		
    9. 
						
  9. Android开发常用代码片段
		
    拨打电话 public static void call(Context context, String phoneNumber) { context.startActivity( new Inten ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 在python包管理中使用easy_install软件的步骤
			
    本文主要介绍的是让python包管理变得更加容易的实际应用方法,就是运用easy_install这一软件,下面是文章的具体介绍. easy_install让python包管理变得 如果你想对Pytho ...
    
			
    2. 
						
  2. BZOJ4320 : ShangHai2006 Homework
			
    取$M=\sqrt{300000}$. 设$g[i]$表示程序员的$\bmod i$最小的值. 若$Y<M$,那么可以在$O(M)$时间内完成对所有$g[i]$的修改,$O(1)$时间内完成查询 ...
    
			
    3. 
						
  3. 用iftop监控流量
			
    1.下载iftop http://pan.baidu.com/share/link?shareid=387372457&uk=1829018343 或 wget http://www.ex-p ...
    
			
    4. 
						
  4. BestCoder Round #78 (div.2)
			
    因为rating不够QAQ就报了Div2.. [CA Loves Stick] CA喜欢玩木棍. 有一天他获得了四根木棍,他想知道用这些木棍能不能拼成一个四边形. Sample Input 2 1 1 ...
    
			
    5. 
						
  5. weblogic sockets 和 thread 问题解决
			
    原创文章,转载须注明出处. 这个问题网上很多答案,可惜没一个能解决.后来发现是weblogic 必须适配JDK 版本. 一般会报这个错误,There are: 5 active sockets, bu ...
    
			
    6. 
						
  6. 关于实现banner轮换的问题，如何修改
			
    最近遇到了这样的问题,本来banner都是gif格式的,但是现在要求上传图片格式为jpg时,运用JS实现动画效果,原来的也能用. aspx: <div id="bh" run ...
    
			
    7. 
						
  7. AspNetPager常用属性及一些样式（本文摘自网络，作者：x123jing）
			
    AlwaysShow 总是显示分页控件,即使要分页的数据只有一页 AlwaysShowFirsLastPageNumbr 是否总是显示第一页和最后一页数字页索引按钮 BackImageUrl 面板的背 ...
    
			
    8. 
						
  8. SQL Server事务的隔离级别
			
    SQL Server事务的隔离级别 ########## 数据库中数据的一致性 ########## 针对并发事务出现的数据不一致性,提出了4个级别的解决方法:  隔离级别  第一类丢失更新  脏读  ...
    
			
    9. 
						
  9. vs2005中删除最近打开的项目和文件的记录
			
    vs2005中总是保留最近打开的项目和文件的记录,甚至是以删除的它也不删,-_-!下面介绍几种删除的方法: 第一种:建立一个bat文件,以后双击即可清除,内置代码如下: @echo off@REG D ...
    
			
    10. 
						
  10. html5文章 -- 使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 基础
			
    这篇文章是使用 jQuery Mobile 与 HTML5 开发 Web App 系列的第二篇,在本文以及接下来的数篇文章 Kayo 将会介绍 jQuery Mobile 的组件.事件响应以及可以调用 ...
    
			
    11.