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. java基础练习 8

    public class Eighth { /*判断101-200之间有多少个素数,并输出所有素数.素数又叫质数,就是除了1和它本身之外,再也没有整数能被它整除的数.也就是素数只有两个因子.*/ pu ...

  2. Some Error

    0x01 E: Unmet dependencies. Try 'apt-get -f install' with no packages (or specify a solution). sudo ...

  3. mybatis-generator 代码自动生成工具（maven方式）

    由于MyBatis属于一种半自动的ORM框架,所以主要的工作将是书写Mapping映射文件,但是由于手写映射文件很容易出错,mybatis-gennerator插件帮我们自动生成mybatis所需要的 ...

  4. JavaEE XML DOM创建

    DOM创建XML @author ixenos 1.思路: 先封装构建一颗DOM树,然后将DOM树转换成XML文件 2.三种写DOM树到XML文件的方式: 1)使用DOM(或DOM4J.JDOM) 2 ...

  5. Aspose系列实现docx转PDF，PPT转PDF，EXCEL转PDF

    没有什么营养,就是调用一下这个组件.其实一开始用的是Microsoft.Office.Interop.Excel;Microsoft.Office.Interop.Word 但是在服务器要注意,服务器 ...

  6. Leetcode-33-Search in Rotated Sorted Array (Hard)

    二分查找算法以及旋转之后的数组二分查找算法: #!/usr/local/bin/python3 # -*- coding: utf-8 -*- __author__ = 'author' class ...

  7. 仿QQ空间视差效果，ListView.setHeader( )

    根据listview的手指移动事件,动态设置listview上面的图片的宽高,并在手指放开的时候 实现图片的动画(随时间变化的动画值) ValueAnimator.ofInt ( ) import a ...

  8. Mysql 常用命令和注意事项

    1. 连接mysql数据库 如果配置了环境变量可以直接运行,如果没有配置环境变量需要在安装目录...\bin下运行, cmd -> mysql -u root -p,然后输入密码: 或者可以运行 ...

  9. Unity3DGUI：GUILayout

    显示效果,注意GUILayout控件默认垂直布局,且在水平布局模块里控件大小默认按控件内容来显示,因此对于水平滑块HorizontalSlider来说需要自定义大小避免变形

  10. CodeForces 670E Correct Bracket Sequence Editor

    链表,模拟. 写一个双向链表模拟一下过程. #pragma comment(linker, "/STACK:1024000000,1024000000") #include< ...