网页制作实战项目九:飘城旅行社(分步教程2)

网页制作实战项目九:飘城旅行社(分步教程)精

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

网页制作实战项目九:飘城旅行社(分步教程2)

练习一:PC端固定布局

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

练习二:流体移动布局

地址:马上上线

练习三:兼容响应式布局

地址:马上上线

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

网页制作实战项目九:飘城旅行社(分步教程2)

<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

网页制作实战项目九:飘城旅行社(分步教程2)

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

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/3193.html

(5)
江山如画的头像江山如画管理团队
上一篇 2019年1月19日 上午11:30
下一篇 2019年1月23日 下午6:14

99%的人还看了以下文章

  • 网站首页的设计

    网站首页从根本上说就是全站内容的目录,是一个索引。但只是罗列目录显然是不够的。 网站首页设计步骤 首先要确定首页的功能模块,即确定需要在首页上实现的主要内容和功能; 其次设计首页的版面; 最后处理技术上的细节。 设计网站主页必须遵循的5点基本原则 1、要简单   能吸引浏览者注意的时间是短暂的。 你的网站应该下载速度很快。如果你的网站为了给人留下深刻印象而包…

    2018年3月15日
    1.7K0
  • 你需要知道的色彩基础知识

    色彩基础知识 光与色彩 色彩三要素 色彩的冷暖 色彩深度 光与色彩 1666年,牛頓以三棱镜分解太阳光,发現看似无色的光线,经过三棱镜時,会依其波长和折射关系, 依序分为紅、橙、黃、绿、青、蓝、紫七色光。 光的物理性质:波长:产生色相的区別波长短的偏蓝,波长长的偏红振幅:产生明暗的区別振幅大的偏亮,振幅小的偏暗 【练习】哪一個较偏蓝?以下哪一個较亮?  人类…

    2018年1月27日
    4.2K0
  • 网页制作实战项目二:爱的天空

    请加入网页设计交流群:208047327 ,在项目制作过程中有任何问题,可以在群内讨论,或进入本站问答社区互动。 【时间要求】 2 学时( 45 分钟× 2=90 分钟) 【上机内容】 《爱的天空》主页面及心情日志页面制作 【上机目的】 1 、巩固表格布局的方法和技巧 2 、掌握HTML及CSS的使用 【上机重点】 1 、表格布局 2 、HTML及CSS的使…

    2018年4月12日 网页设计
    9.1K0
  • 个人如何制作网站、建立站点

    个人如何制作网站应该从以下几个方面展开: 1、确定网站的题材 网站题材就是网站的主题,你的网站是干什么的。如电影网站、小说网站等。 首先要明确,选择自己擅长和喜爱的题材,其次切忌题材太滥或者目标太高。 2、确定题材后,就要将收集到的资料内容作一个合理的编排 比如,将一些最吸引人的内容放在最突出的位置或者在版面分布上占优势地位。栏目的实质是一个网站的大纲索引,…

    2019年11月16日
    9.4K0
  • 提高网页制作水平的7个要点

    1. 学好HTML和CSS编程 这是网页设计中最基础,也是最重要的部分。《web前端开发学习路线》 2. 清晰的导航 导航栏是页面中最重要的部分,因为它是用户使用网站最主要的途径。通过使用简单清晰的导航栏,可以提升网站的易用性,还可以减少用户在寻找自己需要的内容时遇到的麻烦。 3. 高质量的图片 高质量的图片,能大大提升网站的逼格。图片应当辅助你的设计来推销…

    2019年7月9日 网页设计
    2.7K0
  • 如何设计有新意的精美网页?

    经常制作网页,可是没有新意且面目雷同或似曾相识。如何制作生动、活泼又充满新意的网页?那就好好看看设计大师的作品吧,拟物,创作的灵感来源于生活!

    2019年10月5日 网页设计
    2.8K0

发表回复

登录后才能评论