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. 选择Blobs (Evision)

    C++ // Sort by decreasing area Blobs.SortObjectsUsingFeature(OBJ_AREA, OBJ_SORT_DESCENDING); // Enum ...

  2. Oracle怎么更改用户名和密码

    通过修改ORACLE基表的方式来修改用户名直接修改底层表USER$更改用户名(该方法在Oracle9i,Oracle10g中测试通过)SQL> UPDATE USER$ SET NAME='TT ...

  3. Method Invocation Expressions

      15.12.1. Compile-Time Step 1: Determine Class or Interface to Search   The first step in processin ...

  4. 想要见识外太空？一款VR头显就能帮你实现梦想

    除了宇航员,我们中的大多数人一生都没有机会前往地球之外的宇宙空间,只能在图片和纪录片中感受浩瀚宇宙的震撼. 美国肯尼迪航天中心和BrandVR合作推出的VR头显 而NASA在VR中的投资,创造的新的V ...

  5. 前端技术——WebFont与Sprite

    一.WebFont web font是应用在web中的一种字体技术,在CSS中使用font-face定义新的字体. 我们在文档中显示的字体应该在系统中能找到才会正常显示,比如你在word中使用了黑体字 ...

  6. C# 三角形外心和外接圆半径计算方法

    在网上找了好久,想找一个现成的方法来用,折腾半天发现没有一个好用的,最后迫不得已自己写了一个,需要的同学可以直接拿去用, private void GetTriangleExcenterRadius( ...

  7. Oracle odi 数据表导出到文件

    最近新客户要求,以EXCEL数据方式,将数据表的内容,通过AS2协议传输到客户那边,本来打算使用存储过程直接输出EXCEL,但一想,ODI这么强大的工具应该可以直接进行转换,所以参考了一下官方标准文档 ...

  8. 笔记 bug和任务 工具

    云表格 https://www.huoban.com/禅道

  9. 【3】Chrome 的一些常用操作

    记录一些 Chrome 的常用操作 1. 让页面可以编辑 1). 在 控制台 输入 document.designMode = 'on';  链接地址>>

  10. docker容器安全

    title: docker容器安全 tags: Docker,容器,安全策略 grammar_cjkRuby: true --- Docker容器的安全性 1.安全策略-Cgroup 1.限制Cpu ...