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. Android设备标识符的使用

    设备ID(DeviceId) 获取办法 android.telephony.TelephonyManager tm = (android.telephony.TelephonyManager) con ...

  2. readelf -s 命令‘symbol’名字显示不全

    GCC编译出来的object(目标文件)getPon.o,在链接时(ld)报了一个错误说找不到一个函数(undefined reference to identifier devCtl_getEthe ...

  3. 初步使用nodejs（一）

    初步使用nodejs(一) 首先打开 https://nodejs.org/,点击INSTALL下载安装 安装完成后 打开CMD 输入node –v 验证是否正常 至此,NODEJS安装完成. 下载W ...

  4. RPC 框架原理详解

    首先了解什么叫RPC,为什么要RPC,RPC是指远程过程调用?也就是说两台服务器A,B,一个应用部署在A服务器上,想要调用B服务器上应用提供的函数/方法,由于不在一个内存空间,不能直接调用,需要通过网 ...

  5. HOJ———丢手绢

    hide handkerchief Time Limit: 10000/3000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) ...

  6. 网络爬虫之定向爬虫：爬取当当网2015年图书销售排行榜信息（Crawler）

    做了个爬虫,爬取当当网--2015年图书销售排行榜 TOP500 爬取的基本思想是:通过浏览网页,列出你所想要获取的信息,然后通过浏览网页的源码和检查(这里用的是chrome)来获相关信息的节点,最后 ...

  7. C#程序基础

  8. 嵌入式系统基础知识(一): 系统结构和嵌入式Linux

    目录 一. 嵌入式体系结构 二. 开发过程中的分工 三. 嵌入式软件体系结构 四. 嵌入式Linux 一. 嵌入式体系结构 <嵌入式系统设计师教程>这本书的前三章脉络很清晰, 按照嵌入式系 ...

  9. mysql 的事务

    $conn = mysql_connect('localhost','root','root') or die ("数据连接错误!!!");mysql_select_db('tes ...

  10. Hadoop无法上传文件查找原因

    部署了集群,上传测试文件到HDFS文件系统的时候出现问题.could only be replicated to 0 nodes, instead of 1,如下图所示: 度娘寻找解决方案: 博客链接 ...