index.html:
<!DOCTYPE html> <html lang="zh-cn"> <head> <title>项目实战-PC端固定布局（1）</title> <meta charset="utf-8"> <link rel="stylesheet" href="css/basic.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <header id="header"> <div> class="center"> <h1 class="logo">星月旅行社</h1> <nav class="link"> <h2 class="none">网站导航</h2> <ul> <li class="active"><a href="index.html">首页</a></li> <li><a href="information.html">旅游资讯</a></li> <li><a href="ticket.html">机票订购</a></li> <li><a href="scenery.html">风景欣赏</a></li> <li><a href="about.html">公司简介</a></li> </ul> </nav> </div> </header> <!-- <header>header</header> --> <div id="search"> <div class="center"></div> <input type="text" class="search" placeholder="请输入旅游景点或城市" > <button class="button"> 搜索</button> </div> <div id="tour"> <section class="center"> <h2>热门旅游</h2> <p>国内旅游，国外旅游，自助旅游，自驾旅游，游轮签证，主题旅游等各种最热门旅游推荐</p> </section> <figure> <img src="img/10.png" alt=""> <figcaption> <strong class="title"><河南省-云台山8日游></strong> 抱团特惠，超级曼妙景点，相约周口，不见不散 <div class="info"> <em class="sat">满意度：99%</em> <span class="price"><strong>$666</strong>起</span> <div class="type">国内景点</div> </div> </figcaption> </figure> <figure> <img src="img/20.png" alt=""> <figcaption> <strong class="title"><四川-九寨沟8日游></strong> 抱团特惠，超级曼妙景点，相约周口，不见不散 <div class="info"> <em class="sat">满意度：99%</em> <span class="price"><strong>$666</strong>起</span> <div class="type">国内景点</div> </div> </figcaption> </figure> <figure> <img src="img/21.png" alt=""> <figcaption> <strong class="title"><山东-烟台6日游></strong> 抱团特惠，超级曼妙景点，相约周口，不见不散 <div class="info"> <em class="sat">满意度：99%</em> <span class="price"><strong>$666</strong>起</span> <div class="type">国内景点</div> </div> </figcaption> </figure> <figure> <img src="img/22.png" alt=""> <figcaption> <strong class="title"><杭州-西湖9日游></strong> 抱团特惠，超级曼妙景点，相约周口，不见不散 <div class="info"> <em class="sat">满意度：99%</em> <span class="price"><strong>$666</strong>起</span> <div class="type">国内景点</div> </div> </figcaption> </figure> <figure> <img src="img/23.png" alt=""> <figcaption> <strong class="title"><江西-庐山5日游></strong> 抱团特惠，超级曼妙景点，相约周口，不见不散 <div class="info"> <em class="sat">满意度：99%</em> <span class="price"><strong>$666</strong>起</span> <div class="type">国内景点</div> </div> </figcaption> </figure> <figure> <img src="img/24.png" alt=""> <figcaption> <strong class="title"><北京-长城7日游></strong> 抱团特惠，超级曼妙景点，相约周口，不见不散 <div class="info"> <em class="sat">满意度：99%</em> <span class="price"><strong>$666</strong>起</span> <div class="type">国内景点</div> </div> </figcaption> </figure> <figure> <img src="img/25.png" alt=""> <figcaption> <strong class="title"><江苏-扬州4日游></strong> 抱团特惠，超级曼妙景点，相约周口，不见不散 <div class="info"> <em class="sat">满意度：99%</em> <span class="price"><strong>$666</strong>起</span> <div class="type">国内景点</div> </div> </figcaption> </figure> <figure> <img src="img/26.png" alt=""> <figcaption> <strong class="title"><浙江-杭州6日游></strong> 抱团特惠，超级曼妙景点，相约周口，不见不散 <div class="info"> <em class="sat">满意度：99%</em> <span class="price"><strong>$666</strong>起</span> <div class="type">国内景点</div> </div> </figcaption> </figure> <figure> <img src="img/27.png" alt=""> <figcaption> <strong class="title"><福建-鼓浪屿5日游></strong> 抱团特惠，超级曼妙景点，相约周口，不见不散 <div class="info"> <em class="sat">满意度：99%</em> <span class="price"><strong>$666</strong>起</span> <div class="type">国内景点</div> </div> </figcaption> </figure> </div> <footer id="footer"> <div class="top"> <div class="block left"> <h2>合作伙伴</h2> <hr> <ul> <li>途牛旅游网</li> <li>驴妈妈旅游网</li> <li>携程旅行</li> <li>中国青年旅行社</li> </ul> </div> <div class="block center"> <h2>旅游FAQ</h2> <hr> <ul> <li>旅游合同签订方式</li> <li>儿童价是基于什么制定的</li> <li>单房差是什么</li> <li>旅游保险有哪些种类</li> </ul> </div> <div class="block right"> <h2>联系方式</h2> <hr> <ul> <li>微博：weibo.com</li> <li>邮件：ycku@ycku.com</li> <li>地址：河南省周口市郸城县振兴路</li> </ul> </div> </div> <div class="bottom">Copyright ©YTU 星月旅行社 | 豫ICP 备120110119 号 | 旅行社许可号：L-YC-BK12345</div> </footer> </body> </html> information.html <!DOCTYPE html> <html lang="zh-cn"> <head> <title>项目实战-PC端固定布局（1）</title> <meta charset="utf-8"> <link rel="stylesheet" href="css/basic.css"> <link rel="stylesheet" type="text/css" href="css/column.css"> <body> <header id="header"> <div> class="center"> <h1 class="logo">星月旅行社</h1> <nav class="link"> <h2 class="none">网站导航</h2> <ul> <li><a href="index.html">首页</a></li> <li class="active"><a href="information.html">旅游资讯</a></li> <li><a href="ticket.html">机票订购</a></li> <li><a href="scenery.html">风景欣赏</a></li> <li><a href="about.html">公司简介</a></li> </ul> </nav> </div> </header> <div id="headline"> <div class="center"> <hgroup> <h2>旅游资讯</h2> <h3>介绍各种最新版旅游信息，资讯要闻，景点攻略等</h3> </hgroup> </div> </div> <div id="container"> <aside class="sidebar"> <div class=" sidebox recommend"> <h2>景点推荐</h2> <div class="tag"> <ul> <li> <a href="###">河南（20）</a></li> <li><a href="###">曼谷（12）</a></li> <li><a href="###">南京（6）</a></li> <li><a href="###">江苏（7）</a></li> <li><a href="###">山东（8）</a></li> <li><a href="###">内蒙（19）</a></li> <li><a href="###">埃及（9）</a></li> <li><a href="###">迪拜（3）</a></li> <li><a href="###">希腊（4）</a></li> <li><a href="###">洛杉矶（15）</a></li> <li><a href="###">纽约（18）</a></li> <li><a href="###">新加坡（11）</a></li> </ul> </div> </div> <div class="sidebox hot"> <h2>热门旅游</h2> <div class="figure"> <figure> <img src="img/12.png" alt="河南-云台山8日游"> <figcaption>河南-云台山8日游</figcaption> </figure> <figure> <img src="img/13.png" alt="山东-烟台6日游"> <figcaption>山东-烟台6日游</figcaption> </figure> <figure> <img src="img/14.png" alt="杭州-西湖9日游"> <figcaption>杭州-西湖9日游</figcaption> </figure> <figure> <img src="img/15.png" alt="江西-庐山5日游"> <figcaption>江西-庐山5日游</figcaption> </figure> <figure> <img src="img/16.png" alt="北京-长城7日游"> <figcaption>北京-长城7日游</figcaption> </figure> <figure> <img src="img/17.png" alt="江苏-扬州4日游"> <figcaption>江苏-扬州4日游</figcaption> </figure> <figure> <img src="img/18.png" alt="浙江-杭州6日游"> <figcaption>浙江-杭州6日游</figcaption> </figure> <figure> <img src="img/19.png" alt="福建-鼓浪屿5日游"> <figcaption>福建-鼓浪屿5日游</figcaption> </figure> </div> </div> <div class="sidebox treasure"> <h2>旅游百宝箱</h2> <div class="box"> <a href="###" class="trea1">天气预报</a> <a href="###" class="trea2">火车票查询</a> <a href="###" class="trea3">航空查询</a> <a href="###" class="trea4">地铁线路查询</a> </div> </div> </aside> <div class="list information"> <div class="infor"> <ul class="left"> <li><a href="###">限时特价</a></li> <li><a href="###">热门推荐</a></li> </ul> <ul class="right"> <li><a href="###" class="selected">推荐</a></li> <li><a href="###">折扣</a></li> <li><a href="###">价格</a></li> </ul> </div> <figure class="tour"> <img src="img/20.png" alt="河南-云台山8日游"> <figcaption> <article> <header> <hgroup> <h2>河南-云台山8日游</h2> <h3>抱团特惠，超丰富景点，惊喜多多，快来报名，人数越多，优惠越多，赠送600元成人券...</h3> </hgroup> </header> <ol> <li><mark>交通 </mark> 春秋航空，杭州出发，无需转机</li> <li><mark>团期 </mark> 11/01 11/03 11/08...</li> </ol> <div class="buy"> <div class="price">￥<strong>600</strong><s>￥1200</s></div> <div class="reserve"><a href="###">立即抢购</a></div> </div> <div class="type">国内长线</div> <div class="disc"><span>5.0折</span></div> <footer>本团游由星月旅行社赞助提供，截止于<time>2017-8-8</time></footer> </article> </figcaption> </figure> <figure class="tour"> <img src="img/21.png" alt="山东-烟台6日游"> <figcaption> <article> <header> <hgroup> <h2>山东-烟台6日游</h2> <h3>蓬莱仙阁，人间仙境，人数越多，优惠越多，赠送1200元成人券...</h3> </hgroup> </header> <ol> <li><mark>交通 </mark> 春秋航空，上海出发，无需转机</li> <li><mark>团期 </mark> 11/01 11/03 11/08...</li> </ol> <div class="buy"> <div class="price">￥<strong>800</strong><s>￥1500</s></div> <div class="reserve"><a href="###">立即抢购</a></div> </div> <div class="type">国内长线</div> <div class="disc"><span>5.3折</span></div> <footer>本团游由星月旅行社赞助提供，截止于<time>2017-8-8</time></footer> </article> </figcaption> </figure> <figure class="tour"> <img src="img/22.png" alt="浙江-杭州6日游"> <figcaption> <article> <header> <hgroup> <h2>浙江-杭州6日游</h2> <h3>山好水好，型男型女，惊喜多多，快来报名，人数越多，优惠越多，赠送600元成人券...</h3> </hgroup> </header> <ol> <li><mark>交通 </mark> 春秋航空，山东出发，无需转机</li> <li><mark>团期 </mark> 11/01 11/03 11/08...</li> </ol> <div class="buy"> <div class="price">￥<strong>600</strong><s>￥1200</s></div> <div class="reserve"><a href="###">立即抢购</a></div> </div> <div class="type">国内长线</div> <div class="disc"><span>5.0折</span></div> <footer>本团游由星月旅行社赞助提供，截止于<time>2017-8-8</time></footer> </article> </figcaption> </figure> <div class="more">加载更多...</div> </div> </div> <footer id="footer"> <div class="top"> <div class="block left"> <h2>合作伙伴</h2> <hr> <ul> <li>途牛旅游网</li> <li>驴妈妈旅游网</li> <li>携程旅行</li> <li>中国青年旅行社</li> </ul> </div> <div class="block center"> <h2>旅游FAQ</h2> <hr> <ul> <li>旅游合同签订方式</li> <li>儿童价是基于什么制定的</li> <li>单房差是什么</li> <li>旅游保险有哪些种类</li> </ul> </div> <div class="block right"> <h2>联系方式</h2> <hr> <ul> <li>微博：weibo.com</li> <li>邮件：ycku@ycku.com</li> <li>地址：河南省周口市郸城县振兴路</li> </ul> </div> </div> <div class="bottom">Copyright ©YTU 星月旅行社 | 豫ICP 备120110119 号 | 旅行社许可号：L-YC-BK12345</div> </footer> </body> </html> ticket.html <!DOCTYPE html> <html lang="zh-cn"> <head> <title>项目实战-PC端固定布局（1）</title> <meta charset="utf-8"> <link rel="stylesheet" href="css/basic.css"> <link rel="stylesheet" type="text/css" href="css/column.css"> <body> <header id="header"> <div> class="center"> <h1 class="logo">星月旅行社</h1> <nav class="link"> <h2 class="none">网站导航</h2> <ul> <li><a href="index.html">首页</a></li> <li><a href="information.html">旅游资讯</a></li> <li class="active"><a href="ticket.html">机票订购</a></li> <li><a href="scenery.html">风景欣赏</a></li> <li><a href="about.html">公司简介</a></li> </ul> </nav> </div> </header> <div id="headline"> <div class="center"> <hgroup> <h2>旅游资讯</h2> <h3>介绍各种最新版旅游信息，资讯要闻，景点攻略等</h3> </hgroup> </div> </div> <div id="container"> <aside class="sidebar"> <div class=" sidebox recommend"> <h2>景点推荐</h2> <div class="tag"> <ul> <li> <a href="###">河南（20）</a></li> <li><a href="###">曼谷（12）</a></li> <li><a href="###">南京（6）</a></li> <li><a href="###">江苏（7）</a></li> <li><a href="###">山东（8）</a></li> <li><a href="###">内蒙（19）</a></li> <li><a href="###">埃及（9）</a></li> <li><a href="###">迪拜（3）</a></li> <li><a href="###">希腊（4）</a></li> <li><a href="###">洛杉矶（15）</a></li> <li><a href="###">纽约（18）</a></li> <li><a href="###">新加坡（11）</a></li> </ul> </div> </div> <div class="sidebox hot"> <h2>热门旅游</h2> <div class="figure"> <figure> <img src="img/12.png" alt="河南-云台山8日游"> <figcaption>河南-云台山8日游</figcaption> </figure> <figure> <img src="img/13.png" alt="山东-烟台6日游"> <figcaption>山东-烟台6日游</figcaption> </figure> <figure> <img src="img/14.png" alt="杭州-西湖9日游"> <figcaption>杭州-西湖9日游</figcaption> </figure> <figure> <img src="img/15.png" alt="江西-庐山5日游"> <figcaption>江西-庐山5日游</figcaption> </figure> <figure> <img src="img/16.png" alt="北京-长城7日游"> <figcaption>北京-长城7日游</figcaption> </figure> <figure> <img src="img/17.png" alt="江苏-扬州4日游"> <figcaption>江苏-扬州4日游</figcaption> </figure> <figure> <img src="img/18.png" alt="浙江-杭州6日游"> <figcaption>浙江-杭州6日游</figcaption> </figure> <figure> <img src="img/19.png" alt="福建-鼓浪屿5日游"> <figcaption>福建-鼓浪屿5日游</figcaption> </figure> </div> </div> <div class="sidebox treasure"> <h2>旅游百宝箱</h2> <div class="box"> <a href="###" class="trea1">天气预报</a> <a href="###" class="trea2">火车票查询</a> <a href="###" class="trea3">航空查询</a> <a href="###" class="trea4">地铁线路查询</a> </div> </div> </aside> <div class="list ticket"> <form action="###"> <h2>机票预订</h2> <div class="type"> <p>航班类型 <mark>单程</mark> 往返</p> </div> <div class=" form left"> <p> <label for="from_city">出发城市</label> <input type="text" name="from_city" id="from_city" placeholder="城市名"> </p> <p> <label for="to_city">返回城市</label> <input type="text" name="to_city" id="to_city" placeholder="城市名"> </p> </div> <div class=" form right"> <p> <label for="from_time">出发时间</label> <input type="text" name="from_time" id="from_time" placeholder="时间/日期"> </p> <p> <label for="to_time">返回时间</label> <input type="text" name="to_time" id="to_time" placeholder="时间/日期"> </p> </div> <div class=" form button"> <p> <button type="submit" class="submit">订票</button> </p> </div> </form> <div class="new"> <h2>最新机票</h2> <ul> <li>热门城市：</li> <li>北京</li> <li>上海</li> <li>广州</li> <li>深圳</li> <li>重庆</li> <li>成都</li> <li>杭州</li> <li>南京</li> <li>山东</li> </ul> <table > <thead> <tr> <th>路线</th> <th>日期</th> <th>价格</th> <th>税费</th> <th>餐食</th> <th>航班</th> <th>预订</th> </tr> </thead> <tbody> <tr> <td>北京-成都</td> <td>10-15</td> <td class="price">￥555</td> <td>￥50</td> <td>有</td> <td>春秋航空</td> <td><a href="###" class="reserve">预订</a></td> </tr> <tr> <td>北京-成都</td> <td>10-15</td> <td class="price">￥555</td> <td>￥50</td> <td>有</td> <td>春秋航空</td> <td><a href="###" class="reserve">预订</a></td> </tr> <tr> <td>北京-成都</td> <td>10-15</td> <td class="price">￥555</td> <td>￥50</td> <td>有</td> <td>春秋航空</td> <td><a href="###" class="reserve">预订</a></td> </tr> <tr> <td>北京-成都</td> <td>10-15</td> <td class="price">￥555</td> <td>￥50</td> <td>有</td> <td>春秋航空</td> <td><a href="###" class="reserve">预订</a></td> </tr> <tr> <td>北京-成都</td> <td>10-15</td> <td class="price">￥555</td> <td>￥50</td> <td>有</td> <td>春秋航空</td> <td><a href="###" class="reserve">预订</a></td> </tr> <tr> <td>北京-成都</td> <td>10-15</td> <td class="price">￥555</td> <td>￥50</td> <td>有</td> <td>春秋航空</td> <td><a href="###" class="reserve">预订</a></td> </tr> <tr> <td>北京-成都</td> <td>10-15</td> <td class="price">￥555</td> <td>￥50</td> <td>有</td> <td>春秋航空</td> <td><a href="###" class="reserve">预订</a></td> </tr> <tr> <td>北京-成都</td> <td>10-15</td> <td class="price">￥555</td> <td>￥50</td> <td>有</td> <td>春秋航空</td> <td><a href="###" class="reserve">预订</a></td> </tr> <tr> <td>北京-成都</td> <td>10-15</td> <td class="price">￥555</td> <td>￥50</td> <td>有</td> <td>春秋航空</td> <td><a href="###" class="reserve">预订</a></td> </tr> </tbody> <tfoot> <tr> <td colspan="7"><a href="###" class="more">加载更多航班...</a></td> </tr> </tfoot> </table> </div> </div> </div> <footer id="footer"> <div class="top"> <div class="block left"> <h2>合作伙伴</h2> <hr> <ul> <li>途牛旅游网</li> <li>驴妈妈旅游网</li> <li>携程旅行</li> <li>中国青年旅行社</li> </ul> </div> <div class="block center"> <h2>旅游FAQ</h2> <hr> <ul> <li>旅游合同签订方式</li> <li>儿童价是基于什么制定的</li> <li>单房差是什么</li> <li>旅游保险有哪些种类</li> </ul> </div> <div class="block right"> <h2>联系方式</h2> <hr> <ul> <li>微博：weibo.com</li> <li>邮件：ycku@ycku.com</li> <li>地址：河南省周口市郸城县振兴路</li> </ul> </div> </div> <div class="bottom">Copyright ©YTU 星月旅行社 | 豫ICP 备120110119 号 | 旅行社许可号：L-YC-BK12345</div> </footer> </body> </html> scenery.html <!DOCTYPE html> <html lang="zh-cn"> <head> <title>项目实战-PC端固定布局（1）</title> <meta charset="utf-8"> <link rel="stylesheet" href="css/basic.css"> <link rel="stylesheet" type="text/css" href="css/column.css"> <body> <header id="header"> <div> class="center"> <h1 class="logo">星月旅行社</h1> <nav class="link"> <h2 class="none">网站导航</h2> <ul> <li><a href="index.html">首页</a></li> <li><a href="information.html">旅游资讯</a></li> <li><a href="ticket.html">机票订购</a></li> <li class="active"><a href="scenery.html">风景欣赏</a></li> <li><a href="about.html">公司简介</a></li> </ul> </nav> </div> </header> <div id="headline"> <div class="center"> <hgroup> <h2>旅游资讯</h2> <h3>介绍各种最新版旅游信息，资讯要闻，景点攻略等</h3> </hgroup> </div> </div> <div id="container"> <aside class="sidebar"> <div class=" sidebox recommend"> <h2>景点推荐</h2> <div class="tag"> <ul> <li> <a href="###">河南（20）</a></li> <li><a href="###">曼谷（12）</a></li> <li><a href="###">南京（6）</a></li> <li><a href="###">江苏（7）</a></li> <li><a href="###">山东（8）</a></li> <li><a href="###">内蒙（19）</a></li> <li><a href="###">埃及（9）</a></li> <li><a href="###">迪拜（3）</a></li> <li><a href="###">希腊（4）</a></li> <li><a href="###">洛杉矶（15）</a></li> <li><a href="###">纽约（18）</a></li> <li><a href="###">新加坡（11）</a></li> </ul> </div> </div> <div class="sidebox hot"> <h2>热门旅游</h2> <div class="figure"> <figure> <img src="img/12.png" alt="河南-云台山8日游"> <figcaption>河南-云台山8日游</figcaption> </figure> <figure> <img src="img/13.png" alt="山东-烟台6日游"> <figcaption>山东-烟台6日游</figcaption> </figure> <figure> <img src="img/14.png" alt="杭州-西湖9日游"> <figcaption>杭州-西湖9日游</figcaption> </figure> <figure> <img src="img/15.png" alt="江西-庐山5日游"> <figcaption>江西-庐山5日游</figcaption> </figure> <figure> <img src="img/16.png" alt="北京-长城7日游"> <figcaption>北京-长城7日游</figcaption> </figure> <figure> <img src="img/17.png" alt="江苏-扬州4日游"> <figcaption>江苏-扬州4日游</figcaption> </figure> <figure> <img src="img/18.png" alt="浙江-杭州6日游"> <figcaption>浙江-杭州6日游</figcaption> </figure> <figure> <img src="img/19.png" alt="福建-鼓浪屿5日游"> <figcaption>福建-鼓浪屿5日游</figcaption> </figure> </div> </div> <div class="sidebox treasure"> <h2>旅游百宝箱</h2> <div class="box"> <a href="###" class="trea1">天气预报</a> <a href="###" class="trea2">火车票查询</a> <a href="###" class="trea3">航空查询</a> <a href="###" class="trea4">地铁线路查询</a> </div> </div> </aside> <div class="list scenery"> <section> <h2>风景欣赏</h2> <figure> <img src="img/scenery1.png" alt="河南省-云台山"> <figcaption>河南省-云台山[共8张]</figcaption> </figure> <figure> <img src="img/scenery2.png" alt="河南省-云台山"> <figcaption>河南省-云台山[共8张]</figcaption> </figure> <figure> <img src="img/scenery3.png" alt="河南省-云台山"> <figcaption>河南省-云台山[共8张]</figcaption> </figure> <figure> <img src="img/scenery4.png" alt="河南省-云台山"> <figcaption>河南省-云台山[共8张]</figcaption> </figure> <figure> <img src="img/scenery5.png" alt="河南省-云台山"> <figcaption>河南省-云台山[共8张]</figcaption> </figure> <figure> <img src="img/scenery6.png" alt="河南省-云台山"> <figcaption>河南省-云台山[共8张]</figcaption> </figure> <figure> <img src="img/scenery7.png" alt="河南省-云台山"> <figcaption>河南省-云台山[共8张]</figcaption> </figure> <figure> <img src="img/scenery8.png" alt="河南省-云台山"> <figcaption>河南省-云台山[共8张]</figcaption> </figure> </section> <div class="more">加载更多...</div> </div> </div> <footer id="footer"> <div class="top"> <div class="block left"> <h2>合作伙伴</h2> <hr> <ul> <li>途牛旅游网</li> <li>驴妈妈旅游网</li> <li>携程旅行</li> <li>中国青年旅行社</li> </ul> </div> <div class="block center"> <h2>旅游FAQ</h2> <hr> <ul> <li>旅游合同签订方式</li> <li>儿童价是基于什么制定的</li> <li>单房差是什么</li> <li>旅游保险有哪些种类</li> </ul> </div> <div class="block right"> <h2>联系方式</h2> <hr> <ul> <li>微博：weibo.com</li> <li>邮件：ycku@ycku.com</li> <li>地址：河南省周口市郸城县振兴路</li> </ul> </div> </div> <div class="bottom">Copyright ©YTU 星月旅行社 | 豫ICP 备120110119 号 | 旅行社许可号：L-YC-BK12345</div> </footer> </body> </html> about.html <!DOCTYPE html> <html lang="zh-cn"> <head> <title>项目实战-PC端固定布局（1）</title> <meta charset="utf-8"> <link rel="stylesheet" href="css/basic.css"> <link rel="stylesheet" type="text/css" href="css/column.css"> <body> <header id="header"> <div> class="center"> <h1 class="logo">星月旅行社</h1> <nav class="link"> <h2 class="none">网站导航</h2> <ul> <li><a href="index.html">首页</a></li> <li><a href="information.html">旅游资讯</a></li> <li><a href="ticket.html">机票订购</a></li> <li><a href="scenery.html">风景欣赏</a></li> <li class="active"><a href="about.html">公司简介</a></li> </ul> </nav> </div> </header> <div id="headline"> <div class="center"> <hgroup> <h2>旅游资讯</h2> <h3>介绍各种最新版旅游信息，资讯要闻，景点攻略等</h3> </hgroup> </div> </div> <div id="container"> <aside class="sidebar"> <div class=" sidebox recommend"> <h2>景点推荐</h2> <div class="tag"> <ul> <li> <a href="###">河南（20）</a></li> <li><a href="###">曼谷（12）</a></li> <li><a href="###">南京（6）</a></li> <li><a href="###">江苏（7）</a></li> <li><a href="###">山东（8）</a></li> <li><a href="###">内蒙（19）</a></li> <li><a href="###">埃及（9）</a></li> <li><a href="###">迪拜（3）</a></li> <li><a href="###">希腊（4）</a></li> <li><a href="###">洛杉矶（15）</a></li> <li><a href="###">纽约（18）</a></li> <li><a href="###">新加坡（11）</a></li> </ul> </div> </div> <div class="sidebox hot"> <h2>热门旅游</h2> <div class="figure"> <figure> <img src="img/12.png" alt="河南-云台山8日游"> <figcaption>河南-云台山8日游</figcaption> </figure> <figure> <img src="img/13.png" alt="山东-烟台6日游"> <figcaption>山东-烟台6日游</figcaption> </figure> <figure> <img src="img/14.png" alt="杭州-西湖9日游"> <figcaption>杭州-西湖9日游</figcaption> </figure> <figure> <img src="img/15.png" alt="江西-庐山5日游"> <figcaption>江西-庐山5日游</figcaption> </figure> <figure> <img src="img/16.png" alt="北京-长城7日游"> <figcaption>北京-长城7日游</figcaption> </figure> <figure> <img src="img/17.png" alt="江苏-扬州4日游"> <figcaption>江苏-扬州4日游</figcaption> </figure> <figure> <img src="img/18.png" alt="浙江-杭州6日游"> <figcaption>浙江-杭州6日游</figcaption> </figure> <figure> <img src="img/19.png" alt="福建-鼓浪屿5日游"> <figcaption>福建-鼓浪屿5日游</figcaption> </figure> </div> </div> <div class="sidebox treasure"> <h2>旅游百宝箱</h2> <div class="box"> <a href="###" class="trea1">天气预报</a> <a href="###" class="trea2">火车票查询</a> <a href="###" class="trea3">航空查询</a> <a href="###" class="trea4">地铁线路查询</a> </div> </div> </aside> <div class="list about"> <section> <h2>关于我们</h2> <p>今天，爸爸给我两篇文章让我学习：一篇是欧阳修的《秋声赋》，一篇是毛泽东的《沁园春·长沙》。读完之后，我觉得两篇文章风格相差很大———欧阳修的《秋声赋》所描写的秋天是那么的凄凄惨惨，而毛泽东笔下的秋天却是那么迷人。我迷惑了：同样是秋天，为什么差别如此之大呢？看见窗外秋高气爽，我不由得心动了，出去走走或许能找到答案。</p> <p>秋天是个丰收的季节，秋橘成熟了，麦子长高了。农民伯伯兴高采烈地把它们送到加工厂做成有营养的食品。</p> <p>我用树枝一挑，一个果子“啪”的一声掉下来。我把它拿在手里一捏，软绵绵的。我忍不住咬了一口，甜丝丝的，透着一点涩，同时带着一丝秋的凉。我抬头向天空望去，透过稀疏的树叶，只见蔚蓝的天空中飘浮着朵朵白云，偶尔有一队大雁向那遥远而又温暖的南方飞去。</p> <p> </p> <h2>联系我们</h2> <address> <ul> <li>星月旅行社股份有限公司</li> <li>地址：河南省周口市郸城县振宇路1111号</li> <li>邮编：477174</li> <li>传真：010-88886666</li> </ul> </address> </section> </div> </div> <footer id="footer"> <div class="top"> <div class="block left"> <h2>合作伙伴</h2> <hr> <ul> <li>途牛旅游网</li> <li>驴妈妈旅游网</li> <li>携程旅行</li> <li>中国青年旅行社</li> </ul> </div> <div class="block center"> <h2>旅游FAQ</h2> <hr> <ul> <li>旅游合同签订方式</li> <li>儿童价是基于什么制定的</li> <li>单房差是什么</li> <li>旅游保险有哪些种类</li> </ul> </div> <div class="block right"> <h2>联系方式</h2> <hr> <ul> <li>微博：weibo.com</li> <li>邮件：ycku@ycku.com</li> <li>地址：河南省周口市郸城县振兴路</li> </ul> </div> </div> <div class="bottom">Copyright ©YTU 星月旅行社 | 豫ICP 备120110119 号 | 旅行社许可号：L-YC-BK12345</div> </footer> </body> </html> style.css: @charset "utf-8"; /*插入背景图片*/ #search{ width:100%; min-width: 1263px; height: 600px; background:url(../img/8.png) 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: 480px; height: 54px; background-color: #fff; 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: 54px; 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-size: bold; } #tour{ width: 1263px; height: 1300px; /*background-color: #ccc;*/ margin:30px auto; text-align: center; } #tour .center h2{ margin:10px 0; font-size: 45px; letter-spacing: 2px; color: #666; } #tour .center p{ color:#666; margin:10px 0; } #tour figure{ border:1px solid #ddd; /*block宽度占一行，inline-block只占用自身大小*/ display: inline-block; background-color: padding:4px; border-radius: 4px; margin:10px 5px; width:400px; text-align: left; position: relative; } #tour figure img{ vertical-align: middle; } #tour .info{ padding :5px 0 0 0; } #tour figure figcaption{ color: #777; line-height: 1.5; letter-spacing: 1px; font-size: 14px; padding: 7px 0 5px 0; } #tour .title{ color: #333; font-weight: normal; } /*999是淡淡的颜色*/ #tour .sat{ float: right; font-size: 13px; color: #999; font-size: normal; /*background-color: red;*/ position: relative; top: 5px; right: 5px; } /*#f60是橘红色*/ #tour .price{ color: #f60; font-size: 14px; } #tour .price strong{ font-size: 20px; letter-spacing: 1px; } /*与figure的相对点与绝对点*/ #tour .type{ width: 90px; height: 25px; line-height: 25px; font-size: 14px; text-align: center; color: #fff; background-color: #59b200; position: absolute; top:0; left: 0; } basic.css @charset "utf-8"; /*内外边距都是0*/ body,h1,h2,ul,ol,p,h3,figure{ margin: 0; padding: 0; } /*将ul前面的点去掉*/ ul,ol{ list-style: outside none none; } /*将链接的下划线去掉*/ a{ text-decoration: none; } .none{ display: none; } /*#333是黑色*/ #header{ width: 100%; min-width: 1263px; height: 70px; background-color: #333; box-shadow: 0 1px 10px rgba(0,0,0,0.3); position: relative; z-index: 9999px; } #header .center{ width: 1263px; height: 70px; margin: 0 auto; } /*将文本移走用到text-indent并插入logo*/ #header .logo{ width: 240px; height: 70px; background-image: url(../img/4.png); text-indent: -9999px; float:left; } /*#eee是灰色 line-height设置垂直居中*/ #header .link{ width: 650px; color:#eee; float: right; height: 70px; line-height: 70px; } /*水平居中*/ #header .link li{ float: left; width:120px; text-align: center; } /*将a由内联设置成块*/ #header .link a{ color:#eee; display: block; } /*鼠标效果*/ #header .link a:hover, #header .active a{ background-color: #aaa; } #footer{ height: 360px; background-color: #222; clear: both; position: relative; top:20px; } /*版权区CSS*/ #footer .bottom{ height: 80px; line-height: 80px; background-color: #000; text-align:center; color:#777; border-top:1px solid #444; text-align: center; } #footer .top{ width: 1263px; height: 280px; /*background-color: red;*/ margin:0 auto; text-align: center; } #footer .block{ width: 410px; height: 280px; display: inline-block; text-align: left; color: #ccc; /*垂直居顶*/ vertical-align: top; } #footer ul{ font-size: 18px; color:#777; /*文本首行缩进*/ text-indent:1px; line-height: 2; } #footer h2{ font-size: 24px; font-weight: normal; padding: 20px; } #footer hr{ width: 99%; border:1px dashed #333; } colume.css @charset "utf-8"; #headline{ width:100%; min-width: 1263px; height: 300px; /*模糊度，使字迹清晰*/ background:linear-gradient(to bottom right,rgba(0,0,0,0.7),rgba(0,0,0,0.0)),url(../img/11.png) no-repeat center; } #headline .center{ width: 1263px; height: 300px; margin:0 auto; /*background-color: red;*/ } #headline hgroup{ /*上右下左*/ padding:100px 0 0 10px; } #headline h2{ color:#eee; font-size: 36px; letter-spacing: 1px; } #headline h3{ color:#eee; font-size: 20px; letter-spacing: 1px; } #container{ width: 1263px; margin:30px auto; } #container .sidebar{ width: 340px; background-color: #eee; float: right; } #container .sidebox{ border:1px solid #eee; margin:0 0 10px 0; background-color: red; background-color: #fafafa; color:#666; text-align: center; } #container .sidebox h2{ font-size: 20px; font-weight: normal; letter-spacing: 1px; text-indent: 8px; height: 40px; line-height: 40px; text-align: left; } /*景点推荐*/ #container .tag{ padding: 10px 0; } #container .tag li{ /*a需要将其转化为内联块才能设置宽度高度*/ display: inline-block; width: 100px; height: 35px; line-height: 35px; margin:2px 0; background-color:#eee; color: #666; /*text-indent: 8px;*/ text-align: left; } #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 .list{ width: 900px; /*background-color: #ccc;*/ float: left; } /*旅游百宝箱*/ #container .box{ padding: 10px 0; } #container .box a{ display: inline-block; width: 150px; height: 40px; line-height: 40px; margin:2px 0; background-color:#eee; color: #666; text-indent: 35px; text-align: left; } #container .box a.trea1{ background: #eee url(../img/trea1.png) no-repeat 10px center; } #container .box a.trea2{ background: #eee url(../img/trea2.png) no-repeat 10px center; } #container .box a.trea3{ background: #eee url(../img/trea3.png) no-repeat 10px center; } #container .box a.trea4{ background: #eee url(../img/trea4.png) no-repeat 10px center; } #container .infor{ height: 45px; line-height: 45px; background-color: #eee; margin: 0 0 20px 0; } #container .information .left{ display: inline-block; /* background-color: maroon;*/ float: left; } #container .information.left li{ display: inline-block; /*background-color: #ccc;*/ 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; padding:0 20px 0 0; float: right; } #container .information .right li{ display: inline-block; /*background-color: green;*/ width: 60px; height: 45px; line-height: 45px; text-align: center; } #container .information .right a{ color: #666; padding:3px 8px; } #container .information .right a.selected{ background-color: #458b00; color: #fff; } #container .tour{ width: 908px; padding:0; margin:0 0 20px 0; border:1px solid #eee; position: relative; } #container .tour img{ float: left; } #container .tour figcaption{ width: 508px; height:300px; float: right; } #container .tour footer{ width: 508px; 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 .tour hgroop{ width: 300px; } #container .tour h2{ font-size: 24px; font-weight: normal; padding :20px 0 10px 25px; color: #333; } #container .tour h3{ font-size: 16px; padding: 20px 0 10px 25px; line-height: 1.5; font-weight: normal; color: #666; width: 250px; } #container .tour ol{ padding: 0 0 0 25px; color:#666; line-height: 2; } #container .tour mark{ padding:0px 5px; border-radius: 4px; color:#458b00; border:1px solid #458b00; background-color: #fff; } #container .tour .buy{ position: absolute; top:55px; right:30px; } #container .tour s{ font-size: 16px; color:#999; } #container .tour .price{ font-size: 20px; color: #f60; } #container .tour .price 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; background-color: #f60; color: #fff; font-size: 20px; text-align: center; } #container .tour .type{ width: 90px; height: 25px; line-height: 25px; font-size: 14px; text-align: center; color: #fff; background-color: #59b200; position: absolute; top:0; left: 0; } #container .tour .disc{ position: absolute; top:0; right: 0; width: 52px; height: 52px; /*background:url(../img/disc.png); */ } #container .tour .disc span{ display: block; transform: rotate(45deg); text-indent:7px; padding: 5px 0 0 0 ; width: 52px; height: 52px; color: #ff7a4d; font-size: 14px; } #container .information .more, #container .scenery .more{ width: 200px; height: 50px; line-height: 50px; text-align: center; border:1px solid #ccc; border-radius: 10px; font-size: 18px; margin: 0 auto; cursor: pointer; background-color: #fafafa; } #container .ticket,#container .scenery,#container .about{ color:#666; font-size: 20px; } #container .ticket h2,#container .scenery h2,#container .about h2{ height: 40px; line-height: 40px; border-bottom: 1px dashed #999; font-size: 30px; font-weight: normal; padding:0 0 15px 0; } #container .ticket .type{ font-size: 20px; margin:20px 0 10px 0; } #container .ticket .type mark{ color: #fff; background: #458b00; padding: 5px 8px; border-radius: 4px; margin:0 10px 0 16px; } #container .ticket .left{ width: 43%; display: inline-block; } #container .ticket .right{ width: 43%; display: inline-block; } #container .ticket .button{ width: 9%; display: inline-block; } #container .ticket .submit{ } #container .ticket .form input{ width: 250px; height: 30px; border:1px solid #ccc; background: #fff; border-radius: 4px; padding: 5px; font-size: 18px; color: #666; margin:0 0 0 16px; } #container .ticket .form{ line-height: 3; } #container .ticket .submit{ display: block; width: 90px; height: 90px; line-height: 90px; border-radius: 4px; background-color: #f60; color: #fff; font-size: 20px; text-align: center; border:none; cursor:pointer; position: relative; top:-28px; } #container .ticket .new{ margin:20px 0 0 0; font-size: 20px; } #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{ height: 50px; line-height: 50px; border:1px solid #ddd; text-align: center; border-bottom:1px solid #ddd; } #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; background-color: #f60; color: #fff; font-size: 20px; text-align: center; } #container .scenery figure{ border:1px solid #ddd; /*block宽度占一行，inline-block只占用自身大小*/ display: inline-block; background-color: padding:4px; border-radius: 4px; margin:10px 5px 10px 0; width:430px; text-align: left; } #container .scenery figcaption{ text-align: center; padding: 5px 0; } #container .about p{ font-size: 20px; color:#666; line-height: 2; margin:20px 0; } #container .about address{ font-style: normal; font-size: 20px; color:#666; margin:20px 0; line-height: 1.6; }