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

  • 第1章 网页设计与制作基础

    1.1 网站与网页1.2 网页相关的概念1.3 网站制作基本流程1.4 网页设计制作工具

    2018年3月15日
    5.1K0
  • web前端开发需要哪些技能?

    做WEB前端开发需要掌握哪些知识和技能? 中国网页设计通过对大型软件企业及IT培训机构(Oracle)的调研,把web前端开发需要的技能点列举如下。 HTML HTML简介 HTMl结构 HTML常用标签 HTML框架 HTML表格标签 HTML表单 HTML多媒体 CSS css简介 css的基本使用 css选择器 css常用样式属设置 CSS定位与DIV…

    2018年7月17日
    3.1K0
  • 设计师如何构建自己的知识体系?

    最近几年能看到各行各业越来越多关于知识体系化的文章话题被关注,一定程度上说明在当前社会发展中,大家越来越重视个人知识体系化的积累。本篇文章将围绕知识体系为主题,会涉及到很多不同纬度的知识内容展开。 为什么要构建知识体系 第一,系统化知识,可以帮助我们更高效学习,节省学习中大量不必要的时间; 第二,学习吸收进来的知识点及时纳入体系里,可以让知识记得更加牢固; …

    2022年8月10日 网页设计
    4.4K0
  • 网站前端开发常用工具大全-web设计师必备

    今天给大家分享的是网站前端开发常用工具及网址。 掌握了这些工具中的大部分,会让你的WEB前端设计工作事半功倍,您离一个优秀的前端设计师也就不远了~~ 原前端开发网(w3cfuns)开发,让前端开发变得更简单,exe文件只有1.67MB,点击直接运行,不需要安装,很方便。 功能:正则表达式、代码压缩、雪碧图制作、json格式化等,如果你经常在没有网络的办公环境…

    2019年2月21日
    5.2K0
  • 1秒学会两点透视绘图技巧

    三点透视是一种绘图方法,一般用于超高层建筑,俯瞰图或仰视图。第三个消失点必须和画面保持垂直的主视线,必须使其和视角的二等分线保持一致。 (二点透视)就是把立方体画到画面上,立方体的四个面相对于画面倾斜成一定角度时,往纵深平行的直线产生了两个消失点。 建筑绘画的两点透视要比三点透视还要难以掌控,Anatoly Reza Pahlevi 为我们展示了他的独门绝技…

    2018年7月14日 网页设计
    7.1K0
  • 配色就是这么简单!7个在线配色网站推荐

    配色对一个网站的来说非常重要,优秀的网页配色不是单纯好看就行了,颜色是有功能和目的的,需要了解颜色背后所能传达的信息、氛围、价值观……当你在面不同的客户时,你要清清楚楚的知道,你应该从什么倾向的颜色入手。网页面向的人群的年龄段、性别比例、消费层次、风格偏好等等,都应该作为选色的考量因素。 但网页配色更多的需要大量的实践去体会。简单来说…

    2018年1月31日
    26.8K1

发表回复

登录后才能评论