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,而且是最重要的关键词放在里面。在首页上,最重要的关键词就是旅行社的名称。当然,如果在其他页面,比如新闻网站的单个新闻,最重要的应该是新闻标题,网站的名称就其次了。