关于旅行社网站项目网页布局的设计思路

用HTML5和CSS3构建Web页面

创建项目
1.创建index.html文件 添加html5基本格式
2.创建img和css两个目录
3.创建css文件存放在css目录中，并在html5文件中加入css

网站结构
参考一些同类型的网站，了解一下大致结构，这次要做的网站是一个旅行社的网站，经过参考，首页上选择了3个模块 
 <header>header</header>  头部  包括Logo+导航  <nav> 标签定义导航链接的部分
 <section>section</section>  主体
 <footer>footer</footer>   尾部

 

第一个页面：主页

 

头部

logo 采用的是h1标签 一般为了让搜索引擎更好的抓取关键字，我们建议一个页面只有一个h1 而且是最重要的关键词放在里面，在首页上，最重要的关键词就是旅行社的名称，当然如果其他页面，比如新闻网站的单个新闻
最重要的应该是新闻标题 网站的名称就其次了

css隐藏文字的方法  text-indext:-9999
在建站的过程中 一般人喜欢把网站名称用h1来表示 但是从美观的考虑，要用logo图片来替代h1
这种情况下需要隐藏h1内的这段文字，但又不能对搜索引擎不友好，否则就失去了定义h1标签的意义

<!--  头部导航 -->
   <header id="header">
	   <div class="center">
		  <h1 class="logo">瓢城旅行社</h1>
		    <nav class="link">
		 	 <ul>
		 	   <h2 class="none">网站导航</h2>
			   <li class="active"><a href="飘城旅行社门户.html">首页</a></li>
			   <li><a href="旅游咨询.html">旅游资讯</a></li>
			   <li><a href="机票订购.html">机票订购</a></li>
			   <li><a href="风景欣赏.html">风景欣赏</a></li>
			   <li><a href="公司简介.html">公司简介</a></li>
		     </ul>
		   </nav>
	   </div>
   </header>

@charset "utf-8";
body,h1,ul {
	margin: 0;
	padding: 0;
}
ul {
	list-style: outside none none;
}
a {
	text-decoration: none;
}
#nav {
	width: 100%;
	height: 70px;
	background-color: #333;
}
#nav .center {
	width: 1263px;
	height: 70px;
	margin: 0 auto;
}
#nav .logo {
	width: 240px;
	height: 70px;
	background-image: url(../img/logo.png);
	text-indent: -9999px;
	float: left;
}
#nav .link {
	width: 650px;
	height: 70px;
	line-height: 70px;
	color: #eee;
	float: right;
}
#nav .link li {
	width: 120px;
	text-align: center;
	float: left;
}
#nav .link a {
	color: #eee;
	display: block;
}
#nav .link a:hover, 
#nav .active a {
	background-color: #000;
}

 

搜索区

在header的下面 设计一块搜索区，从表面上来分析，就是插入一张背景大图，然后居中一个搜索条

   <!--  搜索框  -->
   <div id="search">
	   <div class="center"></div>
	   <input type="text" class="search" placeholder="请输入旅游景点或城市">
	   <button class="button">搜索</button>
   </div>

#search{
	width: 100%;
	min-width: 1263px;
	height: 600px;
	background: url(../img/search.jpg) no-repeat center;
	position: relative;
}
#search .center{
	width: 600px;
	height