第八十六节，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定义型。
完成导航
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>headerheader>
<section>sectionsection>
<footer>footerfooter>
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，而且是最重要的关键词放在里面。在首页上，最重要的关键词就是旅行社的名称。当然，如果在其他页面，比如新闻网站的单个新闻，最重要的应该是新闻标题，网站的名称就其次了。