HTML+CSS实例：旅行社网页设计教程，包含代码和布局-CSDN博客

本文链接：https://blog.csdn.net/A240307/article/details/137840877

一、前言

简约大气旅行社网页设计实例，应用html+css，css+div布局，简单大气，适用于初学者网页设计，供大家参考。

二、网页文件

三、网页效果

以下为网页正文（节选示例）：

四、代码展示

1.HTML

代码如下（节选示例）：

<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>山河旅行社</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header id="header">

<div class="center">
<nav class="link" >
<h2 style="display:none;">网站导航</h2>
<ul>
<li class="active"><a href="###">首页</a></li>
<li><a href="information.html"><span class="xs-hidden">旅游</span>资讯</a></li>
<li><a href="ticket.html">机票<span class="xs-hidden">订购</span></a></li>
<li class="xs-hidden"><a href="scenery.html">风景欣赏</a></li>
<li><a href="about.html"><span class="xs-hidden">关于</span>公司</a></li>
</ul>
</nav>
</div>
</header>
<div id="adver">
<img src="picture/adver.jpg" alt="">
<div class="center"></div>
<div class="center copy">
<input type="text" class="search" placeholder="请输入旅游景点或城市">
<button class="button">搜索</button>
</div>
</div>
<div id="tour">
<section class="center ">
<h2>热门旅游</h2>
<p>国内旅游，国外旅游、自助旅游、自驾旅游、游轮签证、主题旅游等各种最新热门旅游推介</p>
</section>
<figure>
<img src="picture/tour1.png" alt="">
<figcaption>
<div class="tour_title">
<strong><曼谷-芭提雅6日游></strong> 包团特惠，超丰富景点，升级1晚国五，无自费，更赠送600元成人资费券
</div>
<div class="info">
<em class="sat">满意度97%</em>
<span class="price"> ￥<strong> 2864</strong> 起</span>
</div>
<div class="type">国内长线</div>
</figcaption>

</figure>
<figure>
<img src="picture/tour2.png" alt="">
<figcaption>
<div class="tour_title">
<strong><曼谷-芭提雅6日游></strong> 包团特惠，超丰富景点，升级1晚国五，无自费，更赠送600元成人资费券
</div>
<div class="info">
<em class="sat">满意度97%</em>
<span class="price"> ￥<strong> 2864</strong> 起</span>
</div>
<div class="type">国内长线</div>
</figcaption>
</figure>
<figure>
<img src="picture/tour3.png" alt="">
<figcaption>
<div class="tour_title">
<strong><曼谷-芭提雅6日游></strong> 包团特惠，超丰富景点，升级1晚国五，无自费，更赠送600元成人资费券
</div>
<div class="info">
<em class="sat">满意度97%</em>
<span class="price"> ￥<strong> 2864</strong> 起</span>
</div>
<div class="type">国内长线</div>
</figcaption>
</figure>
<figure>
<img src="picture/tour4.png" alt="">
<figcaption>
<div class="tour_title">
<strong><曼谷-芭提雅6日游></strong> 包团特惠，超丰富景点，升级1晚国五，无自费，更赠送600元成人资费券
</div>
<div class="info">
<em class="sat">满意度97%</em>
<span class="price"> ￥<strong> 2864</strong> 起</span>
</div>
<div class="type">国内长线</div>
</figcaption>

</figure>
<figure>
<img src="picture/tour5.png" alt="">
<figcaption>
<div class="tour_title">
<strong><曼谷-芭提雅6日游></strong> 包团特惠，超丰富景点，升级1晚国五，无自费，更赠送600元成人资费券
</div>
<div class="info">
<em class="sat">满意度97%</em>
<span class="price"> ￥<strong> 2864</strong> 起</span>
</div>
<div class="type">国内长线</div>
</figcaption>
</figure>
<figure>
<img src="picture/tour6.png" alt="">
<figcaption>
<div class="tour_title">
<strong><曼谷-芭提雅6日游></strong> 包团特惠，超丰富景点，升级1晚国五，无自费，更赠送600元成人资费券
</div>
<div class="info">
<em class="sat">满意度97%</em>
<span class="price"> ￥<strong> 2864</strong> 起</span>
</div>
<div class="type">国内长线</div>
</figcaption>
</figure>
<figure>
<img src="picture/tour7.png" alt="">
<figcaption>
<div class="tour_title">
<strong><曼谷-芭提雅6日游></strong> 包团特惠，超丰富景点，升级1晚国五，无自费，更赠送600元成人资费券
</div>
<div class="info">
<em class="sat">满意度97%</em>
<span class="price"> ￥<strong> 2864</strong> 起</span>
</div>
<div class="type">国内长线</div>
</figcaption>
</figure>
<figure>
<img src="picture/tour8.png" alt="">
<figcaption>
<div class="tour_title">
<strong><曼谷-芭提雅6日游></strong> 包团特惠，超丰富景点，升级1晚国五，无自费，更赠送600元成人资费券
</div>
<div class="info">
<em class="sat">满意度97%</em>
<span class="price"> ￥<strong> 2864</strong> 起</span>
</div>
<div class="type">国内长线</div>
</figcaption>
</figure>
<figure>
<img src="picture/tour9.png" alt="">
<figcaption>
<div class="tour_title">
<strong><曼谷-芭提雅6日游></strong> 包团特惠，超丰富景点，升级1晚国五，无自费，更赠送600元成人资费券
</div>
<div class="info">
<em class="sat">满意度97%</em>
<span class="price"> ￥<strong> 2864</strong> 起</span>
</div>
<div class="type">国内长线</div>
</figcaption>

</figure>
</div>
<footer id="footer">
<div class="top sm-hidden">
<div class="block left">
<h2>合作伙伴</h2>
<hr>
<ul class="ul">
<li>途牛旅游网</li>
<li>驴妈妈旅游网</li>
<li>携程旅游</li>
<li>中国青年旅社</li>
</ul>
</div>

<div class="block center">
<h2>旅游FAQ</h2>
<hr>
<ul class="ul">
<li>旅游合同签订方式？</li>
<li>儿童价是基于什么制定的？</li>
<li>旅游的线路品质是怎么界定的？</li>
<li>旅游保险有些什么种类？</li>
</ul>
</div>
<div class="block right">
<h2>联系方式</h2>
<hr>
<ul class="ul">

......

2.CSS

代码如下（节选示例）：

@charset "utf-8";
body,h1,h2 ,h3,h4,ul,ol,p,form,fieldset,figure{
margin:0;
padding:0;
}
body{
background-color: #fff;
font-family: "Helvetica Neue",Helvetica, Arial, "Microsoft Yahei UI", "Microsoft YaHei", SimHei, "\5B8B\4F53", simsun, sans-serif;
}
img{
display:block;
max-width:100%;
}
ul,ol{
list-style:outside none none;
}
a{
text-decoration:none;
}
div,figure,img,input,button{
box-sizing:border-box;
}
#headline img{
width:100%;
}
.none {
display: none;
}
.sm-visible{
display:none;
}
.clearfix:after{
content:'.';
height:0;
visibility:hidden;
display:block;
clear:both;
}
#header{
width:100%;
height:70px;
background-color:#333;
box-shadow: 0 1px 10px rgba(0 ,0 ,0,0.3);
position:fixed;
top:0;
z-index:9999;
}
#header .center{
max-width:1263px;
height:70px;
margin:0 auto;
}
#header .logo{
width:30%;
height:70px;
background:url(../images/logo.png) no-repeat left center;
text-indent:-9999px;
float:left;
}
#header .link{
width:55%;
height:70px;
line-height:70px;
color:#aaaaaa;
float:right;
}
#header .link li{
width:20%;
text-align:center;
float:left;
}
#header .link a {
color:#eeeeee;
display: block;
}
#header .link a:hover, #header .active a{
background-color:#000;
}

#adver{
padding:70px 0 0 0;
max-width:1920px;
margin:0 auto;
position:relative;
}
#adver .center{
width:40%;
height:60px;
background-color:#000000;
position:absolute;
top:50%;
left:50%;
margin:-10px 0 0 -20%;
opacity:0.6;
border-radius: 10px;
}
#adver .copy{
opacity:1;
background-color: transparent;
padding:3px 3px 0 3px;
}
#adver .search{
width:70%;
height:52px;
background-color: #eeeeee;
color:#666666;
border:1px solid #666666;
border-radius: 10px;
font-size:24px;
padding:0 10px;
outline:none;
display: block;
float:left;
}
#adver .button{
width:30%;
height:54px;
background-color: #eeeeee;
color:#666666;
border:1px solid #333;
border-left-width:3px ;
border-radius: 12px;
font-size:24px;
/*padding:0 10px;*/
outline:none;
cursor:pointer;
font-weight:bold;
display: block;
float:right;
}
#tour{
max-width:1263px;
position:relative;
margin:30px auto;
text-align:center;

}
#tour .center h2{
margin:10px 0;
font-size: 45px;
letter-spacing:2px;
color:#666666;
}
#tour .center p{
color:#666666;
margin:10px;
font-size: 16px;
}
#tour .tour_title{
height:40px;
overflow: hidden;
}

#tour figure {
border: 1px solid #dddddd;
display:block;
float:left;
padding:4px;
border-radius: 4px;
margin:15px 0.4%;
width:32.4%;
text-align:left;
position:relative;
}
#tour figure img{
vertical-align:middle;
}
#tour figcaption{
color:#777;
line-height:1.5;
letter-spacing:1px;
font-size: 14px;
padding:7px 0 5px 0;
}
#tour title{
color:#333;
font-weight: 600;
}
#tour .info{
padding:5px 0 0 0;
}
#tour .sat{
float:right;
font-size: 13px;
color:#999999;
font-style:normal;
position:relative;
top:5px;
right:5px;
}
#tour .price{
color:#f60;
font-size:14px;
}
#tour .price strong{
font-size:20px;
letter-spacing: 1px;
}
#tour .type{
width:90px;