|
|
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定义型。
完成导航
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: 0;
padding: 0;
}
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: 0;
padding: 0;
}
ul{
list-style-type: none;
}
a{
text-decoration: none;
}
/*通用样式结束*/
去除所有元素的内外边距，去除所ul的小圆点，去除所有a标签的下划线
3.备注：LOGO采用的是h1标签，一般为了让搜索引擎更好的抓取关键字，我们建议一个页面只有一个h1，而且是最重要的关键词放在里面。在首页上，最重要的关键词就是旅行社的名称。当然，如果在其他页面，比如新闻网站的单个新闻，最重要的应该是新闻标题，网站的名称就其次了。 |
|
QQ群⑧：
窥视卡
雷达卡
发表于 2017-7-1 17:28:25
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡