网页制作实战项目九:飘城旅行社(分步教程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%的人还看了以下文章

  • 从零开始做APP界面设计一:iOS 界面设计规范

    准备整理一套APP界面设计教程,可能会花费一段时间,请持续关注。 首先开篇我们介绍APP 界面设计,也就是新手最常遇到的问题:尺寸。 我们以iPhone 7为例讲解iOS 界面设计规范。 一、APP 界面设计工具 做APP 界面设计用的最多的就是PS和AI了,如果你是Mac用户,可以尝试一下Sketch,软件的版本当然是推荐高版本,因为功能更强大,作图的速度…

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

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

    2019年11月16日
    9.0K0
  • 一个优秀的网站设计应具备的6个特征

    1、明确和突出的品牌设计 优秀的网站设计师会将品牌的色彩、设计元素贯穿到整个网站的设计中。 2、抢眼独到的头条 网站要有强大的内容支撑。 首页是网站的脸,头条是这个网站的眼! 头条要抢眼,干脆,直击用户,在网页上要一目了然,是视觉焦点。清晰的排版和易于浏览的头条文章,是必须要有的。 3、有阶梯层级的导航 导航设计要简化,给人以“专业”的感觉。尽量让体验顺滑流…

    2018年9月23日
    2.2K0
  • 网页制作实战项目七:毫州文化旅游公司

    【时间要求】 2 学时( 45 分钟× 2=90 分钟) 【上机内容】 毫州文化旅游公司 【上机目的】 1 、掌握网页布局的方法和技巧 2 、掌握HTML及CSS的使用 3、掌握行为的使用 4、培养团队意识和协作精神 【上机重点】 1 、网页布局 2 、行为的使用 3 、HTML及CSS的使用 【上机难点】 1、导航栏制作 2、CSS的定义和使用 【上机教学…

    2018年5月24日 网页设计
    4.2K0
  • 福利!13款免费商用卡通字体推荐(已打包)

    本期推荐的是免费商用的卡通体,此类字体非常适合运用在可爱活泼、轻松休闲的设计中,会有不俗的表现力,常常能达到“画龙点睛”的效果。 部分作品展示: 整个字形向上倾斜,给人一种积极向上的感觉,而且横折和竖折的笔画都有弧线,没那么死板,无论是笔画结构,还是笔画粗细,都是灵活的,是一例轻松快乐风格的字体。 字形笔画去除了折笔的弧形,换之以平直的笔画,竖弯钩转为竖折,…

    2023年1月28日 网页设计
    6.6K0

发表回复

登录后才能评论