当前位置: 网站建设 > 网页设计 > 建站经验 >

如何学习Div+Css网页布局

时间:2013-03-02 03:59来源:未知 作者:admin 点击:

标签:如何学习Div+Css网页布局 DIV+CSS(51)做好(19)网页(168)学习(19)布局(72)如何(201)
做好DIV+CSS的网页设计,作者以为有三点需要重点理解。 首先插入一张盒子模型的图片(有利于懂得margin与padding) 2、盒模式:层存在宽度width、高度height、边框border、内间距padding和外间距margin等属性,而层实际盘踞的空间是上述属性值相加的大小,公道应用这些属机能实现紧凑而又雅观的网页布局。 图片如下: 3,float(布局属性之一) 基础语法: float:none/left/right 语法取值: none:默认值,对象不沉没。 left:文本流向对象的左边
如何学习Div+Css网页布局》文章地址:http://www.tfxk.com/wangyesheji/jianzhanjingyan/03023402H013.htm

做好DIV+CSS的网页设计,作者以为有三点需要重点理解。

    首先插入一张盒子模型的图片(有利于懂得margin与padding)

    2、盒模式:层存在宽度width、高度height、边框border、内间距padding和外间距margin等属性,而层实际盘踞的空间是上述属性值相加的大小,公道应用这些属机能实现紧凑而又雅观的网页布局。

    图片如下:


   3,float(布局属性之一)
     基础语法:
           float:none/left/right
     语法取值:
           none:默认值,对象不沉没。
           left:文本流向对象的左边漂浮。
           right:文本流向对象的右边漂浮。
     使用阐明:
           属性的值指出了对象是否及如何浮动。
           当该属性不即是 none 引起对象浮动时,对象将被视作块对象( block-level ),即 display 属性等于 block 。也就是说,浮动对象的 display 属性将被疏忽。追随浮动对象的对象将移动到浮动对象的地位。
           浮动对象会向左或向右挪动直到碰到边框( border 、内补丁( padding 、外补丁( margin 或者另一个块对象( block-level )为止,如何在网页中嵌入任意字体。 
           在IE5+中, div 和 span 对象如果不指定宽度会被调配默认的宽度,而在此前的浏览器版本中则必须指定宽度值才可以呈递此属性。
     代码示例:
               div { float: right }

    独自提下浏览器兼容的话题。DIV+CSS比拟TABLE布局,更轻易涌现多种浏览器不兼容的问题,重要起因是不同的阅读器对web尺度默认值不同。海内主流是ie,firefox及chrome用的较少,在兼容性测试方面,首先需要保障在ie多版本不呈现问题,这里设计到一些方式和技能,可以针对详细问题在网站查找解决 措施。

    示例代码:
          BODY { margin: 2em }         /* all margins set to 2em */ 
          BODY { margin: 1em 2em }     /* top & bottom = 1em, right & left = 2em */ 
          BODY { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em, left=2em */ ,如何在网页中加入百度地图;
          或  
          BODY {  
                 margin-top: 1em;  
 ,如何在各种不同的浏览器中做到“隐藏CSS”;                margin-right: 2em;  
                   margin-bottom: 3em;  
                 margin-left: 2em;        /* copied from opposite side (right) */ 
                  }  

        3、层嵌套:有教训的网页设计师都晓得层不宜嵌套过多,个别不超过3层,嵌套过多的会导致代码庞杂冗余、保护艰苦及运行慢的问题。另外,在多列布局时完整能够用层浮动实现,不需要整体设置一个ie层来嵌入。

   4,clear(布局属性之一)
    根本语法:
         clear:none/left/right/both
    语法取值:
         none:默认值,容许两边都有浮动对象。
         left:不允许左边有浮动对象。
  ,如何在一个月令AdSense收入猛增3倍;       right:不允许右边有浮动对象。
         both:不允许两边有浮动对象。
    使用说明:
         该属性的值指出了不许可有浮动对象的边。
    代码示例:
             div { clear : left }

 
       当初讲述从视频学到的第2点:margin,padding,clear,float款式属性的常识
    ,如何合理布局网站;       以下总结是我依据视频和参考CSS参考手册3.0

1、float属性:DIV(层)默认是占据一整行,对常见的两列或多列布局的设计,需要可能准确设置float及width属性实现后果。
                      多列布局停止后如果跟了一个占领通栏的层,此时须要设置clear属性肃清层浮动。

Tag:网页   布局   学习   如何     网页   布局   学习   如何    

    代码示例:
           H1 {   
                 background: white;   
                 padding: 1em 2em;  
                }  

--> [网站建设之]如何学习Div+Css网页布局

  2,padding(补白属性)
    基本语法:
         padding:length
    语法取值:
         length
         由浮点数和单位标识符组成的长度值|百分数。
         百分数是基于父对象的宽度,不答应负值。
    使用说明:
         检索或设置对象四边的内补丁。对于td 和th对象而言默认值为1.其它对象默认值为0
         如果提供全部四个参数值,将依照上--右--下--左的次序作用于四边。
         假如只供给一个,将用于全体的四条边。
         如果提供两个,第一个作用于上--下,第二个作用于左--右。
         如果提供三个,第一个作用于上,第二个作用于左右,第三个作用于下。
         在IE5.5+中此属性支持内联对象使用。
         而在此前的版本中,内联要素要使用该属性,必须先设定对象的 height 或 width 属性,或者设定 position 属性为 absolute ,或者设定 display 属性为 block 。

        

        
        1,margin (边界属性)
    基本语法:
         auto/length
    语法取值:
         auto:取盘算机值。
         length:由浮点数跟单位标识符组成的长度值/百分数。
         百分数是基于父对象的高度。
         支持使用负数值。
    使用解释:
         检索或设置对象四边的外补丁。默认值为0 0.如果提供全部四个参数值。将按照上--右--下--左的顺序作用于四边。
         如果知识提供一个,将用于全部的四边。
         如果提供两个,第一个将作用于高低,第二个将作用于左右。
         如果提供三个,第一个作用于上,第二个作用于左右,第三个作用于下。
         在IE4.0+中此属性不支持用于 td 和 th 对象。要设置单元格内的外补丁,请使用单元格内的如 div 、 p 等类型对象的此属性。
         在IE5.5+中此属性支撑内联对象应用。而在此前的版本中,内联因素要使用该属性,必需先设定对象的 height 或 width 属性,或者设定 position 属性为                          absolute ,或者设定 display 属性为 block 。


(责任编辑:网站建设)
如何学习Div+Css网页布局相关文章
上一篇:如何在网页中嵌入任意字体 下一篇:如何定义CSS3属性的书写顺序
回到顶部