boolan web ex 第四

到了实现该表格的阶段。
表格里面还是有很多坑：又发现编码过程种可能遇见的bug若干。
先看实现的效果

基本上先了效果图种的效果
这里面的坑点有如下几个
**

1 table中 边线 上下 有空格*

*

有两种解决办法：
1.1 用内置div来实现

在th中内置一个div，设置该div的pading-top，与 pading-buttom属性。这个方法有个缺点就是会在每个表现都需要添加一个div；代码显的不是那么优雅。
1.2 用图片
这也是12306网站的实现方法，12306网站上小的元素基本上都是图片。包括等下要讲的始，终，过等小图标。
来看这里用图片实现的方式：
表格表头高100px，图片边框是宽1px,高82px；图片数据可以从设计要求中提取。
这里用伪类的方式实现。
原则上用：after 或者:before都可以。
如下：.thTableDouleRow为th的类选择器。在每个使用该选择器的th前添加一个边框图片。

.thTableDouleRow:before {
/*before的内容为content，会出现在含有该伪选择器的前面*/
    content: url(../img/borderGreen.png);
    height: 82px;
    float: left;
    margin: 0;
    padding-top: 12px;
    padding-bottom: 12px;
}

这里用:after会出现bug

双列进了换行，这使图片的插入偏离了预期的位置。需要重新设定文职。为了避免不必要的麻烦，估用before来实现相对简单。

2. HTML 定高外框 文本双行显示居中

上下宽度过高，这里采用的是用内置一个div的方式来实现，用pading-top 与pading-buttom的方式来实现。如果高度没有超过文字高度的三倍还是可以用 line-height来实现的。

用div的方式：

.thTableDouleRow .divDoubleRow {
    padding-top: 35px;
    padding-bottom: 25px;
    overflow: hidden;
    height: 106px;
    margin: 0;
}

用line-height的方式
字体是16px;外框高度为50px；

.tableIndex .tdTrainFromCityInfo {

    line-height: 22px;
    text-align: left;
}

各有适用情况吧~

3.文本后接三角符号

在第一版本中对各个属性操作不是很熟练，采用的方法是内置了2个div来实现的对齐。
其实用伪类来实现很high

如下所示：

.thTableDouleRow .upTriangle {}

.thTableDouleRow .downTriangle {}

.upTriangle:after {
    content: "";

    width: 0;
    height: 0;
    margin-left: 2px;
    /* bottom相对于原来位置的偏移，用来对齐。*/
    position: relative;
    bottom: 12px;
    border-bottom: 5px solid #ffffff;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
}

.downTriangle:after {
    content: "";
    width: 0;
    height: 0;
    margin-left: 2px;
    /* bottom相对于原来位置的偏移，用来对齐。*/
    position: relative;
    top: 12px;
    border-top: 5px solid #ffffff;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
}

加入的方式很简单：

      <span class="spanDoubleRow upTriangle ">出发时间</span> 

span标签执行这个类选择器就好了~

12306中这个三角依然是用图片来实现的。不过我这样还是biG高一点，有木有！

4.小图标 始 终 过 HTML

这样的小图标放以前应该是要用图片来实现的，12306也是这么做的。翻了翻qunar发现，是用来实现，逐拷贝之。

实现如下：

.tableIndex .shi_icon {
    position: relative;
    display: inline-block;
    height: 19px;
    width: 19px;
    line-height: 19px;
    text-align: center;
    border: 0px solid #e0e0e0;
    font-style: normal;
    /* margin-top: 2px;*/
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    background: rgb(207, 151, 63);
    color: rgb(255, 255, 255);
}

.tableIndex .zhong_icon {
    background: rgb(62, 104, 0);
}

.tableIndex .guo_icon {
    background: rgb(107, 152, 218);
}

这里设置成inline-block是为了更改长宽
要红了，shi,guo,zhong。quner，12306也都是这样的命名。我了个大槽

用这种方式的是时候有个bug


坑爹有没有，中间居然多了一个空格出来~ 找了半天没找到原因。
于是只有换方法了

.tableIndex .tdTrainFromCitySpan {
    position: relative;
    left:-5px;*/
    display: inline-block; 
    font-size: 14px;
    font-family: "微软雅黑";
    font-weight: bold;
}

将postition相对位置，并设置left:-5px; 6不6。

撸完收工~ 要开始加javascript代码了

神还原有没有~