凤凰山6日游
包团特惠，超丰富景点，升级1晚国五，无自费，更赠送600元/成人自费劵
- 交通：春秋航空，上海出发，无需转机
- 团期：11/01、11/05、11/09...
¥2864 ¥3899
国内长线
5.8折
静态旅游网站（PC端）
HTML部分：
index.html
项目实战-PC端布局
季槐旅行社
热门旅游
国内旅游、国外旅游、自助旅游、自驾旅游、邮轮签证、主题旅游等各种最新热门旅游推荐
<凤凰山6日游> 包团特惠，超丰富景点，升级1晚国五，无自费，更赠送600元/成人自费劵
满意度 77%
¥ 2864 起
国内长线
<马尔代夫双鱼岛6日游> 上海出发，机+酒包含：早晚餐+快艇
满意度 97%
¥ 8039 起
出境长线
<海南双飞5日游> 含盐城接送，全程挂牌四星酒店，一价全含，"零自费"自费项目免费送
满意度 90%
¥ 2709 起
自助旅游
<富山-大阪-东京8日游> 暑假亲子，2天自由，无导游安排自费项目，全程不强迫购物
满意度 97%
¥ 9499 起
自助旅游
<法瑞意德12日游> 4至5星，金色列车，少女峰
满意度 97%
¥ 9199 起
出境长线
<巴厘岛5日自助游> 蓝梦出海，独栋别墅，悦榕庄下午茶，纯玩
满意度 95%
¥ 7680 起
出境长线
<花样姐姐土耳其9日游> 最高立减3000！中餐六菜一汤+土耳其当地美食满足您挑剔味道
满意度 98%
¥ 8980 起
出境长线
<杭州4日游> 包团特惠，超丰富景点，无自费
满意度 94%
¥ 2988 起
国内短线
<乌鲁木齐+吐鲁番+鄯善+天山天池5日4晚跟团游(4钻)> 升级1晚五星 共享沙漠雪山 成人立减500
满意度 98%
¥ 2869 起
国内短线
项目实战-PC端布局
季槐旅行社
旅游资讯
介绍各种最新旅游资讯、资讯要闻、景点攻略等
马尔代夫双鱼岛6日游
上海出发，机+酒包含：早晚餐+快艇
- 交通：春秋航空，上海出发，无需转机
- 团期：11/01、11/05、11/09...
¥8039 ¥10899
出境长线
5.8折
海南双飞5日游
含盐城接送，全程挂牌四星酒店，一价全含，"零自费"自费项目免费送
- 交通：春秋航空，江苏出发，无需转机
- 团期：11/01、11/05、11/09...
¥2709 ¥3699
自助旅游
5.8折
富山-大阪-东京8日游
暑假亲子，2天自由，无导游安排自费项目，全程不强迫购物
- 交通：春秋航空，上海出发，无需转机
- 团期：7/01、7/05、7/09...
¥9499 ¥11899
自助旅游
5.8折
法瑞意德12日游
4至5星，金色列车，少女
- 交通：春秋航空，上海出发，无需转机
- 团期：11/01、11/05、11/09...
¥9199 ¥13899
出境长线
4.8折
巴厘岛5日自助游
蓝梦出海，独栋别墅，悦榕庄下午茶，纯玩
- 交通：春秋航空，上海出发，无需转机
- 团期：11/01、11/05、11/09...
¥7680 ¥9899
出境长线
5.8折
花样姐姐土耳其9日游
最高立减3000！中餐六菜一汤+土耳其当地美食满足您挑剔味道
- 交通：春秋航空，上海出发，无需转机
- 团期：11/01、11/05、11/09...
¥8980 ¥10899
国内长线
5.8折
杭州4日游
包团特惠，超丰富景点，无自费
- 交通：春秋航空，上海出发，无需转机
- 团期：11/01、11/05、11/09...
¥2988 ¥3599
国内短线
5.8折
加载更多...
ticket.html
项目实战-PC端布局
季槐旅行社
旅游资讯
介绍各种最新旅游资讯、资讯要闻、景点攻略等
最新机票
- 热门城市：
- 北京
- 上海
- 广州
- 深圳
- 重庆
- 成都
- 杭州
路线
日期
价格
税费
餐食
航班
预定
北京-成都
10-15
¥768
¥45
有
春秋航空
预定
北京-上海
10-15
¥659
¥55
无
南方航空
预定
北京-深圳
10-15
¥568
¥43
有
西部航空
预定
北京-杭州
10-15
¥369
¥35
有
天津航空
预定
北京-广州
10-15
¥868
¥65
有
首都航空
预定
北京-重庆
10-15
¥478
¥39
有
东方航空
预定
北京-昆明
10-15
¥568
¥44
无
厦门航空
预定
北京-厦门
10-15
¥786
¥63
无
深圳航空
预定
北京-长沙
10-15
¥669
¥42
有
四川航空
预定
加载更多航班...
scenery.html
项目实战-PC端布局
季槐旅行社
旅游资讯
介绍各种最新旅游资讯、资讯要闻、景点攻略等
风景欣赏
凤凰山[共6张]
马尔代夫双鱼岛[共16张]
海南[共8张]
富山-大阪-东京[共12张]
法瑞意德[共18张]
巴厘岛[共7张]
加载更多
about.html
项目实战-PC端布局
季槐旅行社
旅游资讯
介绍各种最新旅游资讯、资讯要闻、景点攻略等
关于我们
季槐旅行社旅游网创立于2017年11月，以“让旅游更简单”为使命，为消费者提供由北京、上海、广州、深圳等64个城市出发的旅游城市产品预定服务，产品全面，价格透明，全年365天24小时666电话预定，并提供丰富的后续服务和保障。
目前，季槐旅行社旅游网提供8万多种旅游产品供消费者选择，涵盖跟团、自驾、自助、邮轮、签证、酒店、景区门票以及公司旅游等，已成功服务超过400万人次出游。
同时，基于季槐旅行社旅游网全球中文景点目录以及中文旅游社区，可以更好的帮助游客了解目的地信息，妥善制定好出游计划，并方便的预定旅程中的服务项目。
联系方式
- 季槐旅行社股份有限公司
- 地址：重庆市渝北区无名路233号
- 邮编：123456
- 电话：010-23336666
- 传真：010-88886666
CSS部分：
style.css
@charset "utf-8";
body,h1,h2,ul,p,figure {
margin: 0;
padding: 0;
}
body {
background-color: #fff;
}
ul {
list-style: outside none none;
}
a {
text-decoration: none;
}
.none {
display: none;
}
#header {
width: 100%;
min-width: 1263px;
height: 70px;
background-color: #333;
box-shadow: 0 2px 10px rgba(0,0,0,0.3);
position: relative;
z-index: 9999;
}
#header .center {
width: 1263px;
height: 70px;
margin: 0 auto;
}
#header .logo {
width: 240px;
height: 70px;
background-image: url(img/logoyuan.png);
text-indent: -9999px;
float: left;
}
#header .link{
width: 650px;
height: 70px;
line-height: 70px;
color: #eee;
float: right;
}
#header .link li {
width: 120px;
text-align: center;
float:left;
}
#header .link a {
color: #eee;
display: block;
}
#header .link a:hover,
#header .active a {
background-color: #000;
}
#search {
width: 100%;
min-width: 1263px;
height: 600px;
background: url(img/search1.jpg) no-repeat center;
position: relative;
}
#search .center {
width: 600px;
height: 60px;
background-color: #000;
position: absolute;
top: 50%;
left: 50%;
margin: -30px 0 0 -300px;
opacity: 0.6;
border-radius: 10px;
}
#search .search {
width: 446px;
height: 52px;
background-color: #eee;
position: absolute;
top: 50%;
left: 50%;
margin: -27px 0 0 -296px;
color: #666;
border: 1px solid #666;
border-radius: 10px;
font-size: 24px;
padding: 0 10px;
outline: none;
}
#search .button {
width: 120px;
height: 52px;
background-color: #eee;
position: absolute;
top: 50%;
left: 50%;
margin: -27px 0 0 175px;
color: #666;
border: 1px solid #666;
border-radius: 10px;
font-size: 24px;
outline: none;
cursor: pointer;
font-weight: bold;
}
#tour {
width: 1263px;
height: 1150px;
margin: 30px auto;
text-align: center;
}
#tour .center h2 {
font-size: 45px;
letter-spacing: 2px;
color: #666;
margin: 10px 0;
}
#tour .center p {
color: #666;
margin: 10px 0;
}
#tour figure {
border: 1px solid #ddd;
display: inline-block;
padding: 4px;
border-radius: 4px;
margin: 15px 12px;
width: 380px;
position: relative;
text-align: left;
}
#tour .info {
padding: 5px 0 0 0;
}
#tour figure img {
vertical-align: middle;
}
#tour figcaption {
color: #777;
letter-spacing: 1px;
line-height: 1.5;
font-size: 14px;
padding: 7px 0 5px 0;
height: 40px;
}
#tour .title {
color: #333;
font-weight: normal;
}
#tour .sat {
float: right;
font-size: 13px;
color: #999;
font-style: normal;
position: relative;
top: 5px;
right: 5px;
}
#tour .price {
font-size: 14px;
color: #f60;
}
#tour .price strong {
font-size: 20px;
letter-spacing: 1px;
}
#tour .type {
width: 90px;
height: 25px;
background-color: #59b200;
line-height: 25px;
text-align: center;
font-size: 14px;
color: #fff;
border-bottom-right-radius: 4px;
letter-spacing: 1px;
position: absolute;
top: 4px;
left: 4px;
}
#footer {
height: 360px;
background-color: #222;
}
#footer .top {
width: 1263px;
height: 281px;
margin: 0 auto;
text-align: center;
}
#footer .block {
width: 410px;
height: 280px;
color: #ccc;
display: inline-block;
text-align: left;
vertical-align: top;
}
#footer .bottom {
height: 80px;
background-color: #000;
line-height: 80px;
text-align: center;
color: #777;
border-top: 1px solid #444;
}
#footer h2 {
font-size: 24px;
font-weight: normal;
padding: 20px 0 0 20px;
}
#footer hr {
width: 90px;
border: 1px dashed #333;
}
#footer ul {
font-size: 18px;
color: #777;
text-indent:20px;
line-height: 2;
}
basic.css
@charset "utf-8";
body,h1,h2,h3,ul,ol,p,figure {
margin: 0;
padding: 0;
}
body {
background-color: #fff;
font-family: "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei UI","Microsoft Yahei",SimHei,"宋体",simsun,sans-serif;
}
ul,ol {
list-style: outside none none;
}
a {
text-decoration: none;
}
.none {
display: none;
}
#header {
width: 100%;
min-width: 1263px;
height: 70px;
background-color: #333;
box-shadow: 0 2px 10px rgba(0,0,0,0.3);
position: relative;
z-index: 9999;
}
#header .center {
width: 1263px;
height: 70px;
margin: 0 auto;
}
#header .logo {
width: 240px;
height: 70px;
background-image: url(img/logoyuan.png);
text-indent: -9999px;
float: left;
}
#header .link{
width: 650px;
height: 70px;
line-height: 70px;
color: #eee;
float: right;
}
#header .link li {
width: 120px;
text-align: center;
float:left;
}
#header .link a {
color: #eee;
display: block;
}
#header .link a:hover,
#header .active a {
background-color: #000;
}
#footer {
height: 360px;
background-color: #222;
clear: both;
position: relative;
top: 20px;
}
#footer .top {
width: 1263px;
height: 281px;
margin: 0 auto;
text-align: center;
}
#footer .block {
width: 410px;
height: 280px;
color: #ccc;
display: inline-block;
text-align: left;
vertical-align: top;
}
#footer .bottom {
height: 80px;
background-color: #000;
line-height: 80px;
text-align: center;
color: #777;
border-top: 1px solid #444;
}
#footer h2 {
font-size: 24px;
font-weight: normal;
padding: 20px 0 0 20px;
}
#footer hr {
width: 90px;
border: 1px dashed #333;
}
#footer ul {
font-size: 18px;
color: #777;
text-indent:20px;
line-height: 2;
}
column.css
@charset "utf-8";
#headline {
width: 100%;
min-width: 1263px;
height: 300px;
background:linear-gradient(to right bottom,rgba(0,0,0,0.7),rgba(0,0,0,0)), url(img/headline.jpg) no-repeat center;
}
#headline .center {
width: 1263px;
height: 300px;
margin: 0 auto;
}
#headline hgroup {
padding: 100px 0 0 50px;
}
#headline h2 {
font-size: 36px;
color: #eee;
letter-spacing: 1px;
}
#headline h3 {
font-size: 20px;
color: #eee;
letter-spacing: 1px;
}
#container {
width: 1263px;
height: 1200px;
margin: 30px auto;
}
#container .sidebar {
width: 340px;
float: right;
}
#container .sidebox {
border:1px solid #eee;
margin: 0 0 10px 0;
text-align: center;
}
#container .sidebox h2 {
font-size: 20px;
font-weight: normal;
letter-spacing: 1px;
text-indent: 8px;
height: 40px;
line-height: 40px;
background-color: #fafafa;
color: #666;
text-align: left;
}
#container .tag {
padding: 10px 0;
}
#container .tag li {
display: inline-block;
width: 100px;
height: 35px;
background-color: #eee;
line-height: 35px;
margin: 2px 0;
text-align: left;
text-indent: 4px;
}
#container .tag a {
display: block;
color: #999;
}
#container .tag a:hover {
background-color: #458b00;
color: #fff;
}
#container .figure {
padding: 10px 0;
}
#container figure {
display: inline-block;
padding: 4px;
color: #666;
}
#container .box {
padding: 10px 0;
}
#container .box a {
display: inline-block;
width: 150px;
height: 40px;
line-height: 40px;
margin: 2px 0;
color: #999;
text-indent: 35px;
text-align: left;
}
#container .box a.trea1 {
background:#eee url(img/trea1.jpg) no-repeat 10px center;
}
#container .box a.trea2 {
background:#eee url(img/trea2.jpg) no-repeat 10px center;
}
#container .box a.trea3 {
background:#eee url(img/trea3.jpg) no-repeat 10px center;
}
#container .box a.trea4 {
background:#eee url(img/trea4.jpg) no-repeat 10px center;
}
#container .list {
width: 910px;
float: left;
}
#container .info {
background-color: #eee;
height: 45px;
line-height: 45px;
margin: 0 0 20px 0;
}
#container .information .left {
display: inline-block;
float: left;
}
#container .information .left li {
display: inline-block;
width: 150px;
height: 43px;
line-height: 43px;
text-align: center;
}
#container .information .left a {
color: #666;
}
#container .information .left li:first-child {
background-color: #fff;
border-top: 2px solid #458b00;
position: relative;
left: 1px;
}
#container .information .right {
display: inline-block;
float: right;
padding: 0 20px 0 0;
}
#container .information .right li {
display: inline-block;
width: 60px;
height: 45px;
line-height: 45px;
text-align: center;
}
#container .information .right a {
padding: 3px 8px;
}
#container .information .right a.selected, #container .information .right a:hover {
background-color: #458b00;
color: #fff;
}
#container .tour {
width: 908px;
padding: 0;
margin: 20px 0 0 0;
border: 1px solid #eee;
position: relative;
}
#container .tour img {
float: left;
}
#container .tour figcaption {
width: 528px;
height: 220px;
float: right;
}
#container .tour hgroup {
width: 300px;
}
#container .tour h2 {
font-size: 24px;
font-weight: normal;
padding: 10px 0 10px 25px;
color: #333;
}
#container .tour h3 {
font-size: 16px;
font-weight: normal;
padding: 10px 0 10px 25px;
color: #666;
line-height: 1.5;
}
#container .tour ol {
padding: 0 0 0 25px;
line-height: 2;
color: #666;
}
#container .tour mark {
background-color: #fff;
border: 1px solid #458b00;
border-radius: 4px;
padding: 0 5px;
color: #458b00;
}
#container .tour .buy {
position: absolute;
top: 55px;
right: 30px;
}
#container .tour .price {
font-size: 20px;
color: #f60;
}
#container .tour .price s {
font-size: 16px;
color: #999;
}
#container .tour strong {
font-size: 36px;
}
#container .tour .reserve {
margin: 10px 0 0 0;
}
#container .tour .reserve a {
display: inline-block;
width: 152px;
height: 40px;
line-height: 40px;
border-radius: 4px;
text-align: center;
font-size: 20px;
color: #fff;
background-color: #f60;
}
#container .tour footer {
width: 528px;
height: 35px;
line-height: 35px;
text-indent: 25px;
color: #666;
background-color: #fafafa;
letter-spacing: 1px;
position: absolute;
bottom: 0;
}
#container .tour time {
color: #458B00;
}
#container .type {
width: 90px;
height: 25px;
background-color: #59b200;
line-height: 25px;
text-align: center;
font-size: 14px;
color: #fff;
border-bottom-right-radius: 4px;
letter-spacing: 1px;
position: absolute;
top: 0;
left: 0;
}
#container .tour .disc {
position: absolute;
top: 0;
right: 0;
width: 52px;
height: 52px;
background: url(img/disc.jpg) no-repeat;
}
#container .tour .disc span {
display: block;
transform: rotate(45deg);
width: 52px;
height: 52px;
padding: 5px 0 0 0;
font-size: 14px;
text-indent: 7px;
color: #ff7a40;
}
#container .information .more, #container .scenery .more {
width: 200px;
height: 50px;
line-height: 50px;
text-align: center;
margin: 0px auto;
border: 1px solid #ccc;
background-color: #fafafa;
font-size: 18px;
border-radius: 10px;
cursor: pointer;
color: #666;
}
#container .ticket, #container .scenery, #container .about {
color: #666;
font-size: 20px;
position: absolute;
}
#container .ticket h2, #container .scenery h2, #container .about h2 {
height: 40px;
line-height: 40px;
border-bottom: 1px dashed #999;
padding: 0 0 15px 0;
font-size: 30px;
}
#container .ticket p {
margin: 20px 0 10px 0;
font-size: 20px;
}
#container .ticket mark {
color: #fff;
background-color: #458B00;
padding: 5px 8px;
border-radius: 4px;
margin: 0 10px 0 16px;
}
#container .ticket .left {
float: left;
width: 43%;
}
#container .ticket .right {
float: left;
width: 43%;
}
#container .ticket .form p {
line-height: 3;
}
#container .ticket .form input {
width: 250px;
height: 30px;
border:1px solid #ccc;
background-color: #fff;
border-radius: 4px;
padding: 5px;
font-size: 18px;
color: #666;
margin: 0 0 0 10px;
}
#container .ticket .button {
float: left;
width: 9%;
}
#container .ticket .submit {
display: block;
width: 90px;
height: 90px;
line-height: 90px;
border-radius: 4px;
text-align: center;
font-size: 20px;
color: #fff;
background-color: #f60;
border:none;
position: relative;
top: 35px;
cursor: pointer;
}
#container .ticket .new {
clear: both;
padding: 20px 0 0 0;
}
#container .ticket .new ul {
margin: 20px 0 0 0;
}
#container .ticket .new li {
display: inline-block;
padding: 5px 10px;
}
#container .ticket .new li:first-child {
padding-left: 0;
}
#container .ticket .new li:nth-child(2) {
background-color: #458b00;
color: #fff;
border-radius: 4px;
}
#container .ticket table {
margin: 20px 0 0 0;
width: 100%;
border: 1px solid #ddd;
border-collapse: collapse;
}
#container .ticket th {
border-bottom: 1px solid #ddd;
height: 50px;
line-height: 50px;
}
#container .ticket td {
border-bottom: 1px solid #ddd;
text-align: center;
height: 50px;
line-height: 50px;
}
#container .ticket tr:nth-child(2n) {
background-color: #fafafa;
}
#container .ticket tr:hover {
background-color: #eee;
}
#container .ticket .price {
color: #f60;
}
#container .ticket .more {
color: #666;
}
#container .ticket .reserve {
display: inline-block;
width: 80px;
height: 35px;
line-height: 35px;
border-radius: 4px;
text-align: center;
font-size: 20px;
color: #fff;
background-color: #f60;
}
#container .scenery figure {
border: 1px solid #ddd;
display: inline-block;
padding: 4px;
border-radius: 4px;
margin: 15px 5px 15px 0;
width: 435px;
position: relative;
text-align: left;
}
#container .scenery figcaption {
text-align: center;
padding: 5px 0;
}
#container .about p {
line-height: 2;
margin: 20px 0;
}
#container .about address {
line-height: 1.5;
font-style: normal;
}