关于旅⾏社⽹站项⽬⽹页布局的设计思路⽤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:60px;
background-color: #000;
position:absolute;
top: 50%;
left: 50%;
margin: -30px 0 0 -300px;
opacity: 0.6;
border-radius: 10px;
}
#search .search{
width: 446px;
height: 52px;
background-color: #eee;
position: absolute;
青龙峡风景区旅游攻略top: 50%;
left: 50%;
margin: -27px 0 0 -296px;
color: #666;
border: 1px solid #666;
border-radius: 10px;
font-size: 24px;
padding: 0 10px;
outline: none;
}
#search .button{
width: 120px;
height: 54px;
background-color: #eee;
position: absolute;
top: 50%;
left: 50%;
margin: -27px 0 0 175px;
color: #666;
border: 1px solid #666;
border-radius: 10px;
font-size: 24px;
outline: none;
cursor: pointer;
西班牙足球国家队阵容font-weight: bold;
}
⾸页最核⼼的部分，旅游区
这块内容由两个部分组成，⼀个是⼤标题，表⽰热门旅游区域，其次就是旅游项⽬的图⽚展⽰区域
可以⽤<figcaption> 标签定义 figure 元素的标题，为放⼊的图⽚添加⽂字内容
⼀共有九个图⽚，每个图⽚的html设计都是⼀样的，所以下⾯的代码中我只放了三张图⽚的内容，后⾯复制6次修改⼀下对应的内容就⾏了
