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

最终实现效果为：