第八十六节,html5+css3pc端固定布局,网站结构,CSS选择器,完成导航

html5+css3pc端固定布局,网站结构,CSS选择器,完成导航

页面采用1280的最低宽度设计,去掉滚动条为1263像素。

项目是PC端的固定布局,会采用像素(px)单位。

网站结构语义

在没有任何思路的情况下,可以参考大量同类型的网站,了解一下大致结构。我们将要做的网站是一个旅行社的企业网站。经过大量参考,首页上,我们选择了最基本的四个模块。

四个基本模块:nav 导航、header头部、section首页主体、footer尾部

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>瓢城旅行社</title>
</head>
<body> <!--导航-->
<nav></nav> <!--头部-->
<header></header> <!--主体-->
<section></section> <!--尾部-->
<footer></footer> </body>
</html>

CSS选择器

我们这个旅行社的网站属于中小型网站,通用样式采用元素定义型;顶层的布局元素可以使用id定义型;其他标签一律class定义型。

完成导航

第八十六节,html5+css3pc端固定布局,网站结构,CSS选择器,完成导航

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>瓢城旅行社</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<!--导航-->
<nav class="dao-hang">
<div class="dao-hang2">
<h1 class="log">瓢城旅行社</h1>
<ul>
<li class="dao-hang-lie-biao"><a href="index.html">首页</a></li>
<li class="dao-hang-lie-biao"><a href="#">旅游资讯</a></li>
<li class="dao-hang-lie-biao"><a href="#">机票订购</a></li>
<li class="dao-hang-lie-biao"><a href="#">风景欣赏</a></li>
<li class="dao-hang-lie-biao"><a href="#">公司简介</a></li>
</ul>
</div>
</nav> <!--头部-->
<header>header</header> <!--主体-->
<section>section</section> <!--尾部-->
<footer>footer</footer> </body>
</html>

css代码

@charset "utf-8";
/*通用样式*/
*{
margin:;
padding:;
}
ul{
list-style-type: none;
}
a{
text-decoration: none;
}
/*通用样式结束*/ /*导航区域*/
.dao-hang{
width: 100%;
height: 70px;
background-color: #333;
color: azure;
}
.dao-hang .dao-hang2{
width: 1263px;
height: 70px;
margin: 0 auto;
}
.dao-hang .dao-hang2 .log{
width: 240px;
height: 70px;
float: left;
background-image: url("../img/logo.png");
text-indent:-9999px;
}
.dao-hang .dao-hang2 ul{
float: right;
}
.dao-hang .dao-hang2 .dao-hang-lie-biao{
width: 120px;
height: 70px;
float: left;
text-align: center;
line-height: 70px;
}
.dao-hang .dao-hang2 .dao-hang-lie-biao a{
display: block;
width: 120px;
height: 70px;
color: azure;
}
.dao-hang .dao-hang2 .dao-hang-lie-biao a:hover{
background-color: #ff4d51;
}
/*导航区域结束*/

总结

1.以前我们布局都是用div,html5更着重语义,用语义标签替换以前的div,我们采用的语义标签,nav 导航、header头部、section首页主体、footer尾部

2.如果是页面大部分标签都要用到的css样式,可以写在开头通用样式如:

/*通用样式*/
*{
margin:;
padding:;
}
ul{
list-style-type: none;
}
a{
text-decoration: none;
}
/*通用样式结束*/

去除所有元素的内外边距,去除所ul的小圆点,去除所有a标签的下划线

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

上一篇:DOM-Node类型


下一篇:设计模式之 -- 单例模式(Singleton)