网页制作实战项目九：飘城旅行社（分步教程2）

江山如画 • 2019年1月22日下午8:32 • 网页设计 • 阅读 13267

网页制作实战项目九：飘城旅行社（分步教程）精

在上一课中，我们学习了实战项目九-首页的制作，今天来实现其他主要页面：旅游资讯。

练习一：PC端固定布局

地址：http://www.125jz.com/wp-content/demo/20190113demo1.html

练习二：流体移动布局

地址：马上上线

练习三：兼容响应式布局

地址：马上上线

1.导航下方图片及栏目介绍

<div id="headline">
 <div class="center">
  <hgroup>
   <h2>旅游资讯</h2>
   <h3>介绍各种最新旅游信息、资讯要闻、景点攻略等</h3>	
  </hgroup>
 </div>
</div>

注意学习hgroup的用法。

#headline {
 width: 100%;
 min-width: 1263px;
 height: 300px;
 background-color: #000;
 background: linear-gradient(to bottom right, rgba(0,0,0,0.7), rgba(0,0,0,0.0)), url(headline.jpg) no-repeat center;
}
#headline .center {
 width: 1263px;
 height: 300px;
 margin: 0 auto;
}
#headline hgroup {
 padding: 100px 0 0 50px;
}
#headline h2 {
 color: #eee;
 font-size: 36px;
 letter-spacing: 1px;
}
#headline h3 {
 color: #eee;
 letter-spacing: 1px;
 font-size: 20px;
}

2.侧边栏制作

主内容区分为左侧列表区域和侧边栏，侧边栏我们用aside，主体结构如下

<div id="container">
   <aside class="sidebar">
    右侧边栏
   </aside>
   <div class="list information">
     列表区域
   </div>
</div>

CSS

#container {
 width: 1263px;
 margin: 30px auto;
}
#container .sidebar {
 width: 340px;
 float: right;
}

侧边栏又分三个区域：景点推荐、热卖旅游、旅游百宝箱。

景点推荐html

<div class="recommend">
   <h2>景点推荐</h2>
   <div class="tag">
    <ul>
     <li><a href="#">曼谷(12)</a></li>
     <li><a href="#">东京(5)</a></li>
     ……
    </ul>
   </div>
  </div>

景点推荐CSS

#container .sidebar h2 {
 height: 40px;
 line-height: 40px;
 font-size: 20px;
 font-weight: normal;
 letter-spacing: 1px;
 color: #666;
 text-indent: 10px;
 background-color: #fafafa;
 border-bottom: 1px solid #eee;
 text-align: left;
}
#container .recommend {
 border: 1px solid #eee;
 margin: 0 0 10px;
}
#container .tag {
 text-align: center;
 padding: 10px 0;
}
#container .tag li {
 display: inline-block;
 background-color: #eee;
 width: 100px;
 height: 35px;
 line-height: 35px;
 text-indent: 8px;
 text-align: left;
 margin:2px 0;
}
#container .tag a {
 display: block;
 color: #999;
}
#container .tag a:hover {
 color: #fff;
 background-color: #458B00;
}

热卖旅游html

<div class="hot">
   <h2>热卖旅游</h2>
   <div class="figure">
    <figure>
     <img src="images/hot1.jpg" alt="曼谷-芭提雅6日游">
     <figcaption>曼谷-芭提雅6日游</figcaption>
    </figure>
    <figure>
     <img src="images/hot2.jpg" alt="马尔代夫双鱼6日游">
     <figcaption>马尔代夫双鱼6日游</figcaption>
    </figure>
    ……
   </div>
</div>

注意<figure>用法

 <figure>
     <img src="images/hot1.jpg" alt="曼谷-芭提雅6日游">
     <figcaption>曼谷-芭提雅6日游</figcaption>
</figure>

热卖旅游CSS

#container .hot {
 border: 1px solid #eee;
 margin: 0 0 10px;
 text-align: center;
}
#container .figure {
 padding: 10px 0;
}
#container .hot figure {
 display: inline-block;
 color: #666;
 padding: 4px;
}

旅游百宝箱HTML

<div class="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>

旅游百宝箱CSS

#container .treasure {
 border: 1px solid #eee;
 margin: 0 0 10px;
}
#container .box {
 text-align: center;
 padding: 10px 0;
}
#container .box a {
 display: inline-block;
 background-color: #eee;
 width: 150px;
 height: 40px;
 line-height: 40px;
 text-indent: 35px;
 text-align: left;
 margin:3px 0;
 color: #999;
}
#container .box a.trea1 {
 background: #eee url(trea1.png) no-repeat 10px center;
}
#container .box a.trea2 {
 background: #eee url(trea2.png) no-repeat 10px center;
}
#container .box a.trea3 {
 background: #eee url(trea3.png) no-repeat 10px center;
}
#container .box a.trea4 {
 background: #eee url(trea4.png) no-repeat 10px center;
}