为什么使用 Web 标准？
由于不同浏览器解析出来的效果可能不一致，开发者常常需要为多版本的开发而艰苦工作------通过web标准-----就可以展现统一内容，大大提高了开发效率。使用Web标准主要有以下几个好处：
1、让Web的发展前景更广阔
2、内容能被更广泛的设备访问
3、更容易被搜寻引擎搜索
4、降低网站流量费用
5、使网站更易于维护
6、提高页面浏览速度等。
Web标准是什么？
Web标准不是某一个标准，而是由W3C和其他标准化组织制定的一系列标准的集合。
狭义的 Web 标准是指网页设计的 DIV+CSS 化，广义的 Web 标准是指网页设计要符合 W3C 和 ECMA 规范。
Web标准的构成
主要包括结构(Structure)、表现(Presentation)和行为(Behavior)三个方面。
结构标准：结构用于对网页元素进行整理和分类。
结构化标准语言主要包括：HTML、XML、XHTML。
表现标准：表现用于设置网页元素的版式、颜色、大小等外观样式。
表现标准语言主要包括：CSS。
行为标准：行为是指网页模型的定义及交互的编写。
行为标准主要包括文档对象模型(W3C DOM)和ECMAScript等。
在符合标准的网页设计中，CSS 与 HTML、JavaScript 并列称为网页前端设计的 三种基本语言，其中：
HTML 负责构建网页的基本结构；
CSS 负责设计网页的表现效果；
JavaScript 负责开发网页的交互效果。
直观感受：人的骨骼就相当于结构，衣服鞋子就相当于表现，行走奔跑跳跃就是行为。
图片来源：网络(侵删)

1.div+css布局

<div>特征

① 可以定义文档中的分区或节（division/section）

② 可以把文档分割为独立的、不同的部分，可以用作严格的组织工具

③ 是一个块级元素，它的内容会自动开始一个新行

④ 一般通过 id 或 class 标记与CSS配合使用

常用到的CSS属性：

width:数值、height:数值、background-color:颜色、float-left（是div不占据一行）

2.background-color背景颜色

默认值是transparent（透明的）

当同时定义了背景图像和背景颜色时，背景图像将覆盖背景颜色之上

颜色取值方式：

① 关键字，如red、blue等

② 16进制，如#000000、#cccccc、#ff0000等

③ rgb（0,0,0）

④ rgba（0,0,0, .n），n为0~1，透明度

3.background-image背景图片

默认值是none（没有图片）

元素背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距

通过url使用绝对或相对路径指定图片，background-image:url("");

4.background-repeat背景图片是否重复

常用属性：

repeat，默认值，background-image默认水平方向和垂直方向平铺显示

repeat-x，背景图片将在水平方向重复

repeat-y，背景图片将在垂直方向重复

no-repeat，背景图片将仅显示一次

语法示例

body{
        background-image: url("");
        background-repeat: no-repeat;
        }

5.background-size背景图片尺寸

length，设置背景图片的宽度和高度，第一个值设置宽度，第二个值设置高度，如果只设置一个值，则第二个值会被设置为“auto”

percentage，以父元素的百分比来设置图片的宽度和高度，后文同上

cover，把背景图片扩展至足够大，以是背景图片完全覆盖背景区域，背景图片某些部分也许无法完全显示在背景区域中

contain， 把图片扩展至最大尺寸，以使其宽度和高度完全适应内容区域，背景区域某些部分可能无法完全覆盖

6.background-position背景图片位置

position是相对于外部容器而言，非整个页面

属性值书写方式：

① 使用方位关键词定义，第一个值定义水平方向（left、center、right），第二个值定义垂直方向（top、center、bottom）

② 使用百分比定义，第一个值定义水平方向，第二个值定义垂直方向，左上角是“0% 0%”，右下角是“100% 100%”

③ 使用具体数字定义，第一个值定义水平方向，第二个值定义垂直方向，左上角是“0px 0px”

属性特点：

① position的默认值为区域的左上角，即0点坐标

② 以上三种方式，如果仅定义了一个值，则另一个值为居中（center或50%）

③ 以上三种方式可以混合搭配使用

7.background-attachment背景图片是否随内容滚动

属性值：

① scroll，默认值，随页面其余部分的滚动而移动

② fixed，页面滚动时，背景图片不动

body{
     background-image: url("");
     background-attachment: scroll;
     }

8.background简写

background 简写属性可以在一个声明中设置所有的背景属性。

可以设置属性如下：

background-color

background-image

background-repeat

background-attachment

background-position

background-size

如果不设置其中某个值，也不会出问题，自动取默认值，在书写属性值时，没有严格顺序要求，建议按照上文列表顺序依次设置。希望这些干货对你有帮助，加油吧，任何时候开始学习都不晚。

我们公司www.yz368.cn的主页div布局覆盖了图片的一部分，一开始看没问题,然而那个图片是做了一个页面跳转。
思路【1】将中间图片设置相对位置，紧靠着左面图片，重叠左面图片不会有影响   x
【2】修改左面图片的属性改成去掉设置没有浮于的属性，改绝对位置
x
【3】终极解决方案将
<div class="nav_bar" style="text-align:right">


利用浏览器自带的搜索工具进行搜索元素大小然后修改css里面的
之前宽度是840px

.nav {
position: relative;
width: 740px;
margin: 0 auto;
font-family: "Microsoft YaHei", SimSun, SimHei;
font-size: 16px;
}












<div class="nav_bar" style="text-align:right">

    

                    

                    

                    
                    
                    
欢迎点击「算法与编程之美」↑关注我们！
本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。
问题描述
大家在制作网页过程中经常会遇到需要这种样式的div：
或者更多例如：
诸如这些一系列问题，我们该如何解决呢？
第一种情况，大家可能会想到利用浮动，2个div设置float属性，再调整黑色div的margin来达到效果，此时CSS代码如下：
 但3个div或者3个以上呢？设置浮动属性便行不通，浮动只能够对2个起作用。所以3个以上时我们可以采用绝对定位或相对定位来实现及position属性来实现。
它们的值分别为：absolute与relative。
解决方案
我们首先将3个div放入一个父级div中，注意：一定要对父级元素设置position属性。然后对其他3个div设置绝对定位：position：absolute；调整3个div位置，便可得到问题中的排版。代码如下：
（div4为父级div）
结语
本文介绍了position的2个非常重要的属性值，绝对定位与相对定位，但position还有3个属性值，相对定位此文章并未详细介绍，需要了解的可以继续查看其它博客。
更多精彩文章：
 where2go 团队
   
微信号：算法与编程之美          
长按识别二维码关注我们!
温馨提示：点击页面右下角“写留言”发表评论，期待您的参与！期待您的转发！