boolan web Ex笔记二

这次做中间的选择页面

一 整体说明:

   主体设计思路为：由上中下三个块状结构构成。其中出发地，到达地等用ur li来实现。“**席别**“那一列为了与“**出发地**”保持对齐，所用样式保持一致。

如上图所示，中间的出发地，到达地等页面用ul,li来实现。其中第一列宽度为160第二列宽度为60。在这里用百分比来表示宽度。
且高度都为100。
“出发地”为span,“from”也为span，框体为input

.mainbody .fromCityUl{
    padding-left: 60px;
    padding-right: 48px;
}
.mainbody .fromCityLi {
        float: left;
        list-style-type: none;
        text-align: center;
        height: 100px;
        width: 17%;
    }
.mainbody .arrowImgLi {
        float: left;
        list-style-type: none;
        text-align: center;
        height: 100px;
        width: 6.4%;
        padding-top:60px
}

二 第一行元素

fromCityUl用于“出发地，北京”哪一行UL的样式。其中两种“li”一种fromCityLi 占宽度17%，一种arrowImgLi占宽度6.4%
其中arrowImgli中 分别为三角形以及traingle样式。traingle示例如下：

.triangle_right_for_all {
        height: 0px;
        width: 0px;
        border-left: 5px solid #316745;
        border-top: 5px solid transparent;
        border-bottom: 5px solid transparent;
    }

效果中不能选种，以及颜色变化采用了如下方式：

在chrome中用开发者模式可以查看到如上。如果在input的样式中没有设置color与background-color，当将其设置为disable时，系统会自动修改input的样式，图片中自己生成的。
那么在设计要求中的灰色效果，依葫芦画瓢就可以了。

    .mainbody .inputFromCity {
        height: 50px;
        width: 100%;
        font-size: 30px;
        color: #a83a00;
        text-align: center;
        font-family: 'Microsoft YaHei';
        background-color: #fdffd7;
        border: 1px;
        box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 8px inset;
        -moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 8px inset;
        -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 8px inset;
    }

    .mainbody .inputFromCityDate {
        font-size: 16px;
    }

    .mainbody .inputFromCityDisable {
        background-color: #fcffcf;
        color: #e6d2a7;
    }

    .mainbody .spanFromCityDisable {
        color: #aabc8e;
    }

实现效果如下：

基本上满足的设计要求。
input框的阴影边框为Css3的box-shadow属性

 box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 8px inset;
 -moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 8px inset;
 -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 8px inset;
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow    必需。水平阴影的位置。允许负值。     
v-shadow    必需。垂直阴影的位置。允许负值。     
blur    可选。模糊距离。     
spread  可选。阴影的尺寸。    
color   可选。阴影的颜色。请参阅 CSS 颜色值。    
inset   可选。将外部阴影 (outset) 改为内部阴影。    

其中还有几个细微的地方：
1.设置文本框文字上下居中
将文本height与line-height设置成一样

    .mainbody .inputFromCity {
        height: 50px;
        line-height:50px;
  /*      设置文本框文字上下居中*/

2.复选框与文字居中对齐

    .mainbody .checkBoxSpan {
        color: green;
        font-weight: bold;
        font-size: 14px;
        vertical-align: middle;
    }

    .mainbody .checkBoxCheckButton {
        width: 20px;
        height: 20px;
        vertical-align: middle;
    }

到这里完成效果如下：

三 第二行元素

第三行元素为常用路线等。这里还是用ul来解决。用三个li来解决，第二li中，用8个span来放置路径；同时给这个li设置了宽度，以预留变化的常用路径显示。这里应用javasript生成，且每次应判断输出的字符串长度大小。然后来确定几个span换行。不然极端情况可能会出现如下格式问题：

先在静态代码实现如下：

      <ul class="fromCityUl "> 
        <li class="usualPathLi ">
          <span class="usualTitleSpan" >常用路线：</span> </li>
        <li class="usualPathLi usualPathCityLi ">
          <span class="spansmallred ">北京-上海</span>
          <span class="spansmallred ">北京-济南</span>
          <span class="spansmallred spansmallChoose ">济南-兰州</span>
          <span class="spansmallred ">石家庄-南京</span></br>
          <span class="spansmallred ">大连-天津</span>
          <span class="spansmallred ">南昌-上海</span>
          <span class="spansmallred ">厦门-杭州</span>
          <span class="spansmallred ">郑州-武汉</span>
        </li>
        <li class="usualPathLi ">
          <span class="usualTitleSpan" >快速选择：</span> 
          <span class="spansmallred ">昨天</span>
          <span class="spansmallred ">今天</span>
          <span class="spansmallred ">明天</span>
        </li>
      </ul>

样式如下：

    .mainbody .usualTitleSpan{
        color:green;
        font-weight: bold;
    }

    .mainbody .usualPathLi{
        float: left;
        list-style-type: none;
        text-align: left;
    }
    .mainbody .usualPathCityLi{
        width: 360px;
    }

    .mainbody .spansmallred {
        font-size: 14px;
        color: rgb(168, 58, 0);
    }

    .mainbody .spansmallChoose{
        text-decoration:underline;
    }

**

四 第二行元素

**
这里唯一强调的是，为了与第一行元素对齐。如下图所示，需要在每个标题种添加一个li最为填充。
如下所示

同中蓝色部分需要填充一个li,为了保持橙色部分的对齐
代码为：

      <ul class="fromCityUl ">
        <li class="fromCityLi ">
          <span class="spanBigFromCity ">席别</span> 
          <div class="triangleContainSetKind " >
            <div class="triangle_down_for_all traingleSetKind "></div>
          </div>
        </li>
        <li class="arrowImgLi "></li>
        <li class="fromCityLi ">
          <span class="spanBigFromCity ">列车类型</span> 
          <div class="triangleContainSetKind " >
            <div class="triangle_down_for_all traingleSetKind "></div>
          </div>
        </li>
        <li class="arrowImgLi "></li>
        <li class="fromCityLi ">
          <span class="spanBigFromCity ">出发时间</span> 
          <div class="triangleContainSetKind " >
            <div class="triangle_down_for_all traingleSetKind "></div>
          </div>
        </li>
        <li class="arrowImgLi "></li>
        <li class="fromCityLi ">
          <span class="spanBigFromCity ">乘车人</span> 
          <div class="triangleContainSetKind " >
            <div class="triangle_down_for_all traingleSetKind "></div>
          </div>
        </li>

其中增加了样式

   .mainbody .triangleContainSetKind {
    padding-top: 10px;
    width: 100%;
    text-align: center;
    overflow: hidden;
    }

    .mainbody .traingleSetKind{
       display: inline;
    }

最终实现效果为：