diff --git a/Web12306/css/base.css b/Web12306/css/base.css new file mode 100644 index 0000000..d38d4d7 --- /dev/null +++ b/Web12306/css/base.css @@ -0,0 +1,165 @@ +body, +ul, +li, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +nav, +section, +summary, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +menu { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +ol, +ul, +li { + list-style: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} +body { + line-height: 1; + font: 12px; + background: url(../images/page-bg.png) repeat-x top left; + font: 14px Helvetica, Arial, "Microsoft Yahei", SimSun, sans-serif; +} +.cl { + zoom: 1; + content: ''; +} +.cl:after { + display: block; + clear: both; + content: ""; + visibility: hidden; + height: 0; +} +img { + border: 0 none; +} +a:link, +a:visited, +a:hover, +a:active { + color: #333; + text-decoration: none; +} +/**通用**/ +.wrap { + width: 982px; + margin: 0 auto; +} +.pr { + position: relative; +} +.fl { + float: left; +} +.fr { + float: right; +} +/*通用顶部*/ +.header-bar { + height: 87px; +} +.header-bar .logo { + width: 184px; + height: 49px; + margin: 21px 0 0 8px; + float: left; +} +.header-bar .user-nav { + margin-top: 9px; + float: right; + /**************导航tab对应icon 开始 *********************/ + /**************导航tab对应icon 结束*********************/ +} +.header-bar .user-nav .icon-index { + width: 23px; + background-position: 0 0; +} +.header-bar .user-nav .icon-order { + width: 26px; + background-position: 0 -44px; +} +.header-bar .user-nav .icon-12306 { + width: 24px; + background-position: 0 -84px; +} +.header-bar .user-nav .icon-user { + width: 24px; + background-position: 0 -122px; +} +.header-bar .user-nav li { + padding-top: 16px; + width: 104px; + height: 65px; + text-align: center; + color: #fff; + float: left; + cursor: pointer; +} +.header-bar .user-nav li .icon { + display: inline-block; + height: 26px; + margin-bottom: 2px; +} +.header-bar .user-nav li.selected { + border-radius: 5px; + color: #f17206; + background: #fff; +} +.header-bar .user-nav li.selected .icon-index { + background-position: 0 -164px; +} +.header-bar .user-nav li.selected .icon-order { + background-position: 0 -207px; +} +.header-bar .user-nav li.selected .icon-12306 { + background-position: 0 -45px; +} +.header-bar .user-nav li.selected .icon-user { + background-position: 0 -284px; +} +input[type="checkbox"] { + margin-left: 12px; + width: 15px; + height: 15px; + border: 0; + -webkit-appearance: none; + border-radius: 3px; + display: inline-block; + margin-bottom: 0; + margin-top: 0; + position: relative; + vertical-align: middle; + background: url(../images/icon.png) no-repeat 0 -560px; +} +input:checked[type="checkbox"] { + background-position: 0 -582px; +} diff --git a/Web12306/css/base.less b/Web12306/css/base.less new file mode 100644 index 0000000..2e1d2a9 --- /dev/null +++ b/Web12306/css/base.less @@ -0,0 +1,139 @@ +body,ul,li,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,nav,section,summary,article, +aside,canvas,details,embed,figure,figcaption,footer,header,menu{ + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +ol,ul,li { + list-style: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} +body { + line-height: 1; + font: 12px; + background:url(../images/page-bg.png) repeat-x top left; + font: 14px Helvetica, Arial, "Microsoft Yahei", SimSun, sans-serif; +} +.cl { + zoom: 1; + content: ''; +} +.cl:after { + display: block; + clear: both; + content: ""; + visibility: hidden; + height: 0; +} +img { + border: 0 none; +} +a:link, +a:visited, +a:hover, +a:active { + color: #333; + text-decoration: none; +} +/**通用**/ +.wrap { + width: 982px; + margin: 0 auto; +} +.pr { + position: relative; +} +.fl { + float: left; +} +.fr { + float: right; +} + +/*通用顶部*/ +.header-bar{ + height:87px; + & .logo{ + width: 184px; + height: 49px; + margin: 21px 0 0 8px; + float: left; + } + & .user-nav{ + margin-top:9px; + float: right; + /**************导航tab对应icon 开始 *********************/ + .icon-index{ + width:23px; + background-position:0 0; + } + .icon-order{ + width:26px; + background-position:0 -44px; + } + .icon-12306{ + width:24px; + background-position:0 -84px; + } + .icon-user{ + width:24px; + background-position:0 -122px; + } + /**************导航tab对应icon 结束*********************/ + & li{ + & .icon{ + display:inline-block; + height:26px; + margin-bottom:2px; + } + padding-top: 16px; + width: 104px; + height: 65px; + text-align: center; + color: #fff; + float: left; + cursor: pointer; + &.selected{ + border-radius:5px; + color:#f17206; + background:#fff; + .icon-index{ + background-position:0 -164px; + } + .icon-order{ + background-position:0 -207px; + } + .icon-12306{ + background-position:0 -45px; + } + .icon-user{ + background-position:0 -284px; + } + } + } + + } +} +input[type="checkbox"]{ + margin-left: 12px; + width: 15px; + height: 15px; + border: 0; + -webkit-appearance: none; + border-radius: 3px; + display: inline-block; + margin-bottom: 0; + margin-top: 0; + position: relative; + vertical-align: middle; + background:url(../images/icon.png) no-repeat 0 -560px; +} +input:checked[type="checkbox"]{ + background-position:0 -582px; +} diff --git a/Web12306/css/index.css b/Web12306/css/index.css new file mode 100644 index 0000000..a808f56 --- /dev/null +++ b/Web12306/css/index.css @@ -0,0 +1,318 @@ +@import url('base.css'); +.icon { + background: url(../images/icon.png) no-repeat; +} +.search-box { + height: 193px; + margin-top: 27px; + padding-top: 15px; + background: url(../images/search-box-bg.png) repeat-x; +} +.search-box .label-desc { + color: #984d00; + margin-bottom: 12px; + display: block; +} +.search-box .search-box-l, +.search-box .search-box-r { + width: 10px; + height: 199px; + background: url(../images/css-sprite.png) no-repeat; + position: absolute; + top: 0; +} +.search-box .search-box-r { + right: 0; + background-position: -12px 0; +} +.search-box .search-box-hings-l, +.search-box .search-box-hings-r { + width: 14px; + height: 31px; + background-position: 0 -459px; + position: absolute; + bottom: -8px; +} +.search-box .search-box-hings-l { + left: 188px; +} +.search-box .search-box-hings-r { + right: 188px; +} +.search-box .search-tips { + margin-left: 23px; + height: 32px; + font-size: 16px; + line-height: 29px; + color: #fff; + padding-left: 34px; + background-position: 0 -321px; +} +.search-box .search-tips span { + display: inline-block; +} +.search-box .search-tips .reset-btn { + width: 87px; + height: 30px; + background: url(../images/css-sprite.png) no-repeat; + background-position: -24px 0; + font-size: 0; + top: -7px; + position: relative; + margin: 0 39px 0 16px; + cursor: pointer; +} +.search-box .search-tips .order-ring { + top: 3px; + position: relative; + background-position: 0 -360px; + width: 19px; + height: 19px; + margin-right: 37px; +} +.search-box .search-tips .order-ring .order-num { + position: absolute; + top: -10px; + left: 20px; + background: #ff3e43; + font-size: 8px; + border-radius: 200px; + padding: 0 4px; +} +.search-box .search-form-wrap { + margin: 38px 0 0 44px; +} +.search-box .search-form li { + float: left; +} +.search-box .search-form-city, +.search-box .search-form-date { + width: 134px; + height: 37px; + padding: 0 30px 0 10px; + background: url(../images/css-sprite.png) no-repeat; + border: none; + -webkit-appearance: none; + background-position: -24px -72px; +} +.search-box .search-form-city:focus, +.search-box .search-form-date:focus { + background-position: -203px -72px; +} +.search-box .search-form-date { + background-position: -24px -117px; +} +.search-box .search-form-date:focus { + background-position: -203px -117px; +} +.search-box .transfer-city { + margin: 0 6px; +} +.search-box .transfer-city .transfer-city-btn { + width: 39px; + height: 39px; + background: url(../images/css-sprite.png) no-repeat; + background-position: -24px -158px; + margin-top: 27px; +} +.search-box .select-date { + margin: 0 70px 0 40px; +} +.search-box .submit-btn { + width: 133px; + height: 43px; + display: block; + margin-top: 5px; + line-height: 43px; + color: #fff; + font-size: 17px; + cursor: pointer; + border: 1px solid #2c961a; + border-radius: 4px; + -webkit-appearance: none; + background: -webkit-linear-gradient(top, #3bc412, #33a810); +} +.search-box .submit-btn:hover { + border-color: #176f0a; + background: -webkit-linear-gradient(top, #33cd19, #3b9d2a); +} +.search-box .submit-btn:active { + border-color: #176f0a; + background: -webkit-linear-gradient(top, #41b12f, #1f8a0c); +} +.search-box .identity label { + display: block; + line-height: 28px; + margin-right: 30px; + color: #984d00; +} +.search-box .identity label input { + position: relative; + top: -1px; +} +/*其他筛选条件*/ +.options-param { + padding: 0 10px; + border: 1px solid #e1e1e1; + border-radius: 4px; + font-size: 14px; + color: #000000; +} +.options-param dt { + height: 36px; + line-height: 36px; + float: left; +} +.options-param dd { + width: 825px; + overflow: hidden; +} +.options-param .split { + height: 1px; + overflow: hidden; + border-bottom: 1px dotted #d6d6d6; +} +.options-param dt { + margin-left: 36px; +} +.options-param .options-input { + width: 156px; + height: 36px; + padding: 0 30px 0 10px; + -webkit-appearance: none; + background: red; + border: none; + background: url(../images/css-sprite.png) no-repeat; + background-position: -24px -32px; +} +.options-param .options-input:focus { + background-position: -227px -32px; +} +.options-param .optional-block { + background: #fff; + height: 34px; + line-height: 34px; + border: 1px solid #d3d3d3; + border-radius: 4px; + display: inline-block; + position: relative; + padding: 0 34px 0 14px; + margin-bottom: 10px; +} +.options-param .optional-block .close { + font-size: 13px; + font-family: arial; + position: absolute; + top: -1px; + right: 10px; + cursor: pointer; + padding: 0 4px; +} +.options-param .options-seat-type { + line-height: 34px; +} +/*搜索结果日期选择*/ +.date-bar-wrap { + height: 60px; + margin-top: 18px; + border: 1px solid #dfdfdf; + border-bottom: 3px solid #f88c21; +} +.date-bar-wrap .date-bar-prev, +.date-bar-wrap .date-bar-next { + width: 28px; + height: 60px; + background: -webkit-linear-gradient(top, #fcfcfb, #e5e4e4); +} +.date-bar-wrap .date-bar-prev { + border-right: 1px solid #cccbc8; +} +.date-bar-wrap .date-bar-next { + border-left: 1px solid #cccbc8; +} +.date-bar-wrap .date-bar { + width: 922px; + height: 60px; + background: -webkit-linear-gradient(top, #f1f0f0, #dbdada); +} +/*搜索结果*/ +.result { + margin-bottom: 55px; + background: #fffefa; + border-top: 1px solid #c6701a; +} +.result table { + border-collapse: collapse; + width: 100%; + color: #444444; + font-size: 16px; +} +.result table thead { + background: #f5f5f5; + color: #777777; + line-height: 30px; + font-size: 14px; + border-left: 1px solid #dcdcdc; + border-right: 1px solid #dcdcdc; + text-align: left; +} +.result table thead tr th:nth-child(1) { + padding-left: 40px; +} +.result table thead tr th:nth-child(2) { + padding-left: 38px; +} +.result table thead tr th:nth-child(4) { + text-align: center; +} +.result .train-num { + padding: 18px 4px 18px 40px; + font-family: tahoma; + color: #4D5873; + font-size: 24px; + text-align: left; + line-height: 19px; + border: 1px solid #dcdcdc; + border-right: 1px solid #ccc7ba; + background: #fff9e8; +} +.result .train-seats { + padding: 20px 0; + border: 1px solid #cccccc; + border-left: none; + line-height: 18px; +} +.result .train-seats .row2 { + margin-top: 5px; +} +.result .train-info { + width: 120px; + padding: 0 45px 0 38px ; + border-top: 1px solid #cccccc; + border-bottom: 1px solid #cccccc; +} +.result .train-city { + width: 110px; + border-top: 1px solid #cccccc; + border-bottom: 1px solid #cccccc; + padding: 0 60px 0 5px; +} +.result .ticket-block { + display: inline-block; + border: 1px solid rgba(0, 0, 0, 0.2); + background: -webkit-linear-gradient(top, #ffffff, #ffffff 5%, #f5f5f5); + border-radius: 4px; + padding: 11px 16px; + color: #4e4e4e; + box-shadow: 0px 1px 8px rgba(155, 155, 155, 0.2); +} +.result .ticket-block:hover { + border-color: #dec496; + background: -webkit-linear-gradient(top, #ffffff, #ffffff 5%, #fcf6e1); +} +.result .ticket-num { + color: #e00000; +} +.result .train-station-type { + font-size: 12px; +} diff --git a/Web12306/css/index.less b/Web12306/css/index.less new file mode 100644 index 0000000..efdd678 --- /dev/null +++ b/Web12306/css/index.less @@ -0,0 +1,320 @@ +@import url('base.css'); +@sprite:url(../images/css-sprite.png) no-repeat; +@icon:url(../images/icon.png) no-repeat; +.icon{ + background:@icon; +} +.search-box{ + height:193px; + margin-top:27px; + padding-top:15px; + background:url(../images/search-box-bg.png) repeat-x; + .label-desc{ + color:#984d00; + margin-bottom:12px; + display:block; + } + .search-box-l,.search-box-r{ + width:10px; + height:199px; + background:@sprite; + position:absolute; + top:0; + } + .search-box-r{ + right:0; + background-position:-12px 0; + } + .search-box-hings-l,.search-box-hings-r{ + width:14px; + height:31px; + background-position:0 -459px; + position:absolute; + bottom:-8px; + } + .search-box-hings-l{ + left:188px; + } + .search-box-hings-r{ + right:188px; + } + .search-tips{ + margin-left:23px; + height:32px; + font-size:16px; + line-height:29px; + color:#fff; + padding-left:34px; + background-position:0 -321px; + & span{ + display:inline-block; + } + & .net-tips{ + + } + & .reset-btn{ + width:87px; + height:30px; + background:@sprite; + background-position:-24px 0; + font-size:0; + top:-7px; + position:relative; + margin:0 39px 0 16px; + cursor:pointer; + } + & .order-ring{ + top: 3px; + position: relative; + background-position: 0 -360px; + width: 19px; + height:19px; + margin-right: 37px; + & .order-num{ + position:absolute; + top:-10px; + left:20px; + background:#ff3e43; + font-size:8px; + border-radius:200px; + padding:0 4px; + } + } + } + .search-form-wrap{ + margin:38px 0 0 44px; + } + .search-form li{ + float:left; + } + .search-form-city,.search-form-date{ + width: 134px; + height: 37px; + padding: 0 30px 0 10px; + background: url(../images/css-sprite.png) no-repeat; + border: none; + -webkit-appearance: none; + background-position: -24px -72px; + &:focus{ + background-position:-203px -72px; + } + } + .search-form-date{ + background-position:-24px -117px; + &:focus{ + background-position:-203px -117px; + } + } + .transfer-city{ + margin:0 6px; + .transfer-city-btn{ + width:39px; + height:39px; + background:@sprite; + background-position:-24px -158px; + margin-top:27px; + + } + } + .select-date{ + margin:0 70px 0 40px; + } + .submit-btn{ + width:133px; + height:43px; + display:block; + margin-top:5px; + line-height:43px; + color:#fff; + font-size:17px; + cursor:pointer; + border:1px solid #2c961a; + border-radius:4px; + -webkit-appearance: none; + background:-webkit-linear-gradient(top,#3bc412,#33a810); + &:hover{ + border-color:#176f0a; + background:-webkit-linear-gradient(top,#33cd19,#3b9d2a); + } + &:active{ + border-color:#176f0a; + background:-webkit-linear-gradient(top,#41b12f,#1f8a0c); + } + } + .identity label{ + display:block; + line-height:28px; + margin-right:30px; + color:#984d00; + & input{ + position:relative; + top:-1px; + } + } +} +/*其他筛选条件*/ +.options-param{ + padding:0 10px; + border:1px solid #e1e1e1; + border-radius:4px; + font-size:14px; + color:#000000; + & dt{ + height:36px; + line-height:36px; + float:left; + } + & dd{ + width:825px; + overflow:hidden; + } + & .split{ + height:1px; + overflow:hidden; + border-bottom:1px dotted #d6d6d6; + } + & dt{ + margin-left:36px; + } + & .options-input{ + width:156px; + height:36px; + padding:0 30px 0 10px; + -webkit-appearance: none; + background:red; + border:none; + background:@sprite; + background-position:-24px -32px; + &:focus{ + background-position:-227px -32px; + } + } + & .optional-block{ + background:#fff; + height:34px; + line-height:34px; + border:1px solid #d3d3d3; + border-radius:4px; + display:inline-block; + position:relative; + padding:0 34px 0 14px; + margin-bottom:10px; + & .close{ + font-size: 13px; + font-family: arial; + position: absolute; + top: -1px; + right: 10px; + cursor:pointer; + padding:0 4px; + } + } + & .options-seat-type{ + line-height:34px; + } +} +/*搜索结果日期选择*/ +.date-bar-wrap{ + height:60px; + margin-top:18px; + border:1px solid #dfdfdf; + border-bottom:3px solid #f88c21; + & .date-bar-prev,& .date-bar-next{ + width:28px; + height:60px; + background:-webkit-linear-gradient(top,#fcfcfb,#e5e4e4); + } + & .date-bar-prev{ + border-right:1px solid #cccbc8; + } + & .date-bar-next{ + border-left:1px solid #cccbc8; + } + & .date-bar{ + width:922px; + height:60px; + background:-webkit-linear-gradient(top,#f1f0f0,#dbdada); + } +} +/*搜索结果*/ +.result{ + margin-bottom:55px; + background:#fffefa; + & table{ + border-collapse:collapse; + width:100%; + color:#444444; + font-size:16px; + & thead{ + background:#f5f5f5; + color:#777777; + line-height:30px; + font-size:14px; + border-left: 1px solid #dcdcdc; + border-right: 1px solid #dcdcdc; + text-align:left; + & tr th:nth-child(1){ + padding-left:40px; + } + & tr th:nth-child(2){ + padding-left:38px; + } + & tr th:nth-child(4){ + text-align:center; + } + } + } + border-top:1px solid #c6701a; + & .train-num{ + padding:18px 4px 18px 40px; + font-family: tahoma; + color: #4D5873; + font-size: 24px; + + text-align: left; + line-height: 19px; + border: 1px solid #dcdcdc; + border-right: 1px solid #ccc7ba; + background: #fff9e8; + } + & .train-seats{ + padding:20px 0; + border:1px solid #cccccc; + border-left:none; + line-height:18px; + & .row2{ + margin-top:5px; + } + } + & .train-info{ + width:120px; + padding:0 45px 0 38px ; + border-top:1px solid #cccccc; + border-bottom:1px solid #cccccc; + } + & .train-city{ + width:110px; + border-top:1px solid #cccccc; + border-bottom:1px solid #cccccc; + padding:0 60px 0 5px; + } + & .ticket-block{ + display:inline-block; + border:1px solid rgba(0,0,0,0.2); + background:-webkit-linear-gradient(top,#ffffff,#fff 5% ,#f5f5f5); + border-radius:4px; + padding:11px 16px; + color:#4e4e4e; + box-shadow:0px 1px 8px rgba(155, 155, 155, 0.2); + &:hover{ + border-color:rgba(222,196,150,1); + background:-webkit-linear-gradient(top,#ffffff,#fff 5% ,#fcf6e1); + } + } + & .ticket-num{ + color:#e00000; + } + & .train-station-type{ + font-size:12px; + } +} \ No newline at end of file diff --git a/Web12306/images/css-sprite.png b/Web12306/images/css-sprite.png new file mode 100644 index 0000000..3f50e06 Binary files /dev/null and b/Web12306/images/css-sprite.png differ diff --git a/Web12306/images/icon.png b/Web12306/images/icon.png new file mode 100644 index 0000000..0014ab6 Binary files /dev/null and b/Web12306/images/icon.png differ diff --git a/Web12306/images/logo.png b/Web12306/images/logo.png new file mode 100644 index 0000000..91ace8d Binary files /dev/null and b/Web12306/images/logo.png differ diff --git a/Web12306/images/page-bg.png b/Web12306/images/page-bg.png new file mode 100644 index 0000000..68963ce Binary files /dev/null and b/Web12306/images/page-bg.png differ diff --git a/Web12306/images/search-box-bg.png b/Web12306/images/search-box-bg.png new file mode 100644 index 0000000..1f726e5 Binary files /dev/null and b/Web12306/images/search-box-bg.png differ diff --git a/Web12306/index.html b/Web12306/index.html index 3f54b21..74b7881 100644 --- a/Web12306/index.html +++ b/Web12306/index.html @@ -3,9 +3,272 @@ - + +
+
+ + +
+
+ +
+
+
+
+
+
+ 已分配到畅通的网络环境，为你提速80%：乌鲁木齐 + 还原到默认 + 今日可预定：9月10日－10月2日的火车票 + 1 +
+ +
+
+
    +
  • + +
    +
    • +
  • +
    +
    • +
  • + +
    +
    • +
  • + +
    +
    • +
  • +
    + + +
    + +
    • +
+
+
+
+ +
+
+
指定坐席:
+
+ +
+
+
+
备选日期：
+
+ + + 10月1号x + 10月1号x + 10月1号x +
+
+
+
添加车次：
+
+ + + T12x + T2x + T3x +
+
+
+
添加乘客：
+
+ + + 木鱼x + 木鱼x + 木鱼x + 木鱼x + 木鱼x + 木鱼x + 木鱼x + 木鱼x + 木鱼x + 木鱼x + 木鱼x + 木鱼x +
+
+
+
+
出行计划：
+
+ + +
+
+
+ +
+
+
+ sadasd +
+
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
车次发／到时间发／到站余票信息
+

T190

+

经停站

+ 		+

07:00－12:36

+

历时5小时36分

+ 		+

北京西

+

南昌

+ 		+ +

二等座

+

+ 115张 + ¥657 +

+ + +

二等座

+

+ 115张 + ¥657 +

+ + +

二等座

+

+ 115张 + ¥657 +

+ +
+

T190

+

经停站

+ 		+

07:00－12:36

+

历时5小时36分

+ 		+

北京西

+

南昌

+ 		+ +

二等座

+

+ 115张 + ¥657 +

+ + +

二等座

+

+ 115张 + ¥657 +

+ + +

二等座

+

+ 115张 + ¥657 +

+ +
+

T190

+

经停站

+ 		+

07:00－12:36

+

历时5小时36分

+ 		+

北京西

+

南昌

+ 		+ +

二等座

+

+ 115张 + ¥657 +

+ + +

二等座

+

+ 115张 + ¥657 +

+ + +

二等座

+

+ 115张 + ¥657 +

+ +
+
+
+ +
+ +