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:;

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

第八十六节，html5+css3pc端固定布局,网站结构,CSS选择器,完成导航的更多相关文章

  1. 第八十八节，html5+css3pc端固定布局，搜索区，插入大图，搜索框

    html5+css3pc端固定布局,搜索区,插入大图,搜索框 设置一个div作为搜索区域 1.宽度为百分之百 2.最小宽度为1263,因为要考虑到手机,等小屏幕缩小后宽度会自适应,导致破坏布局,将最小 ...

  2. 第八十九节，html5+css3pc端固定布局，热门旅游取，标题介绍区，旅游项目区

    html5+css3pc端固定布局,热门旅游取,标题介绍区,旅游项目区 样式: html代码: <!--主体--> <section class="zhu-ti" ...

  3. 第八十七节，html5+css3pc端固定布局，大纲算法，section和div，结构分析

    html5+css3pc端固定布局,大纲算法,section和div,结构分析 一．大纲算法 在HTML5中有一个很重要的概念,叫做HTML5 大纲算法(HTML5Outliner),它的用途是为用户 ...

  4. 第九十一节，html5+css3pc端固定布局，完成首页

    html5+css3pc端固定布局,完成首页 此时我们的首页就完成了 首页效果 其他页面我就不做了,原理相同,做其他页面时将头尾css分离调用即可 大纲算法 我们看看大纲算法比较清晰,说明符合规则 h ...

  5. 第九十节，html5+css3pc端固定布局，底部区域，说明区域，版权区域

    html5+css3pc端固定布局,底部区域,说明区域,版权区域 完成: HTML代码: <!--尾部--> <footer class="wei-bu"> ...

  6. 第三百八十六节，Django+Xadmin打造上线标准的在线教育平台—HTML母版继承

    第三百八十六节,Django+Xadmin打造上线标准的在线教育平台—HTML母版继承 母板-子板-母板继承 母板继承就是访问的页面继承一个母板,将访问页面的内容引入到母板里指定的地方,组合成一个新页 ...

  7. 第二百八十六节，MySQL数据库-MySQL事务操作(回滚)

    MySQL数据库-MySQL事务操作(回滚) 事务用于将某些操作的多个SQL作为原子性操作,一旦有某一个出现错误,即可回滚到原来的状态,从而保证数据库数据完整性. 举例:有这样一张表 从表里可以看出张 ...

  8. 第一百八十六节，jQuery，验证表单插件，Ajax 表单插件，验证和提交表单

    jQuery,验证表单插件,Ajax 表单插件,验证和提交表单 HTML <form id="reg" method="post" action=&quo ...

  9. centos linux系统日常管理3 服务管理ntsysv,chkconfig,系统日志rsyslog,last ,lastb ,exec,xargs,dmesg,screen,nohup,curl,ping ,telnet,traceroute ,dig ,nc,nmap,host,nethogs 第十六节课

    centos linux系统日常管理3  服务管理ntsysv,chkconfig,系统日志rsyslog,last ,lastb ,exec,xargs,dmesg,screen,nohup,cur ...

随机推荐

  1. PHP多维数组元素操作类

    我的框架里面一个多维数组元素操作类,主要用于读取数组中配置数据,可以通过字符串节点的方式:a.b.c 来获取和设置元素,以及多维数组的覆盖,有需求的可以参考下吧! <?php /** * Cre ...

  2. kafka服务安装-SuSE Linux Enterprise Server 11 SP3

    kafka是一款分布式消息发布和订阅的系统,具有高性能和高吞吐率. 更多说明请自行了解,直接进入主题. kakfa 安装之前需要安装jdk,不做更多说明 一.下载kafka  进入下载页面:http: ...

  3. CHD 2014迎新杯比赛题解

    A. 草滩的魔法学校 分析: 高精度乘法 或 JAVA大数类 很明显 10000 的阶乘已经远远超过 64 位数能表示的范围了.所以我们要用一个比较大的数组来存放这个数.那数组要开多少位合适呢?我们不 ...

  4. radio里面value值与其他字符进行比较

    本题旨在创建一个具有及时反馈的选择题,当选完其中一个选项后,会有弹窗来提醒你选择的答案是正确还是错误的.<div id="text" style="display: ...

  5. PNG文件转png8

    png8比普通png图片会小很多,所以在开发中为了是图片加载速度更快我们可以把Png图片都转成png8 首先添加  ImageProcessor  包 private byte[] ConvertTo ...

  6. SASS相关

    1.安装ruby http://rubyinstaller.org/downloads/ 2.安装SASS gem sources --remove https://rubygems.org/ gem ...

  7. 使用FormData，进行Ajax请求并上传文件

    前段时间做了个手机端的图片上传,为了用户体验,用ajax交互,发现了FromData对象,这里有详细解释https://developer.mozilla.org/zh-CN/docs/Web/API ...

  8. TortoiseSVN 1.8 关于右键的设置

    以前用SVN但都是 IDE 自己集成的插件,最近使用 android studio 发现居然自己不带SVN command line插件,非得自己单独装一个,于是使用了 TortoiseSVN ,但用 ...

  9. DB2的基础指令 学习笔记

    =======DB2基础指令======= 1.打开数据库db2 connect to 数据库名;2.查看数据库中有哪些表db2 list tables ;3.查看数据库中的表结构db2 descri ...

  10. 在MacOS下Python安装lxml报错xmlversion.h not found 报错的解决方案

    最近在看一个自动化测试框架的问题,需要用到Lxml库,下载lxml总是报错. 1,使用pip安装lxml pip install lxml 2,然后报错了,报错内容是: In file include ...