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

  • opencv 图像旋转 cv2.rotate和np.rot90案例精讲

    OpenCV 方法 OpenCV 中带有一个旋转图像的函数 cv2.rotate rotate(src, rotateCode[, dst]) -> dst参数:src:输入图像rotateCode:旋转方式1、cv2.ROTATE_90_CLOCKWISE:顺时针 90 度2、cv2.ROTATE_180:顺时针 180 度3、cv2.ROTATE_…

    2022年12月1日
    3.7K0
  • 移动端web app和页面开发使用什么字体?微软雅黑?

    一直不清楚移动端web app和页面用的什么字体,只是觉得类似微软雅黑,直到有一次设计师问到设计移动web页面该用什么字体才严肃地想起这个问题。 三大手机系统IOS、android、winphone支持的字体 ios 系统 默认中文字体是Heiti SC 默认英文字体是Helvetica 默认数字字体是HelveticaNeue 无微软雅黑字体 androi…

    2019年4月9日
    13.0K0
  • 提高网页制作水平的7个要点

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

    2019年7月9日 网页设计
    3.9K0
  • 快速找到海报设计中存在的版式问题

    通过海报设计实例,分析海报设计存在的问题,引导如何重新设计修改。从实战中理解所学的设计理论,活学活用。

    2018年7月9日
    9.3K0
  • 6个技巧让你的版面设计的脱颖而出!

    优秀的版面设计可以让一个普通的文档脱颖而出。本文给大家分享6个让你版面设计脱颖而出的技巧:对齐,聚拢,重复,对比,强调,留白。并通过实例讲解原有版面设计的不足,运用这6个技巧如何改进你的版面设计。

    2018年10月2日
    4.8K0
  • 网页制作常用特殊符号大全

    网页常用特殊符号大全-最全的网页制作特殊符号。在做网页时经常会用到一些特殊符号,本文汇总了所有常用网页制作时用到的特殊符号包括18禁、爱心符号、货币符号、箭头符号、日语字符、 皇冠符号、emoji符号等。

    2018年2月19日
    8.0K0

发表回复

登录后才能评论