div+css(3)结束

 

14.table的border-collapse样式。

separate:边框独立。

collapse：相邻边缘被合并。

15.使用ul和li制作横向和纵向菜单(*)

布局最重要的一个属性就是float

ul li { float:left;  list-style-type:none;  margin-left:30px; }

16.Div+CSS就是将要布局的内容用<div>切成块，然后使用css描述每个块的大小、位置等。布局最重要的一个属性就是float

两个层并排排列float:left;

层的相对居中margin:0px auto;

层的自动高度（填满整个屏幕）。

17.文档流：将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素。

position:absolute;绝对定位,即完全脱离文档流, 相对于position属性非static值的最近父级元素进行偏移

position:fixed;固定定位,IE6及以下版本不支持。即完全脱离文档流, 相对于视区进行偏移.

position:relative;相对定位,这个属性值保持对象所在文档流中的位置，相对于元素在文档流中位置进行偏移. 但保留原占位.可以设置top, left, right, bottom定位

position:static; 默认值  文档流使用z-index,需要设置position:absolute;z-index大的在上面。

       position 有五个值：static、relative、absolute、fixed、inherit。

static

是默认值。就是按正常的布局流从上到下从左到右布局，平常我们做网页时，没有指定 position，也就表示使用 static。

relative

没有脱离布局流，此时可以使用 top、right、bottom、left 属性。

top 和 bottom 共存时，使用 top 值，忽略 bottom 值；

left?和?right 共存时，使用?left 值，忽略?right 值；

relative 是相对位置，指相对于元素的 position 为?static 时的位置：

top 相对于 static 下移多少像素（若 top 是负值，则上移）。

right?相对于 static 左移多少像素（若?right 是负值，则右移）。

bottom?相对于 static 上移多少像素（若?bottom 是负值，则下移）。

left?相对于 static 右移多少像素（若?left 是负值，则左移）。

使用 relative 之后：

原来的空间不会被其他元素挤占。

元素在最终位置时也不会挤占其他元素的空间，它浮动到其它元素的上方。

absolute

脱离布局流，此时可以使用 top、right、bottom、left，但这些属性不再是相对于 static 时的位置，而是相对于?containing block?的，相对于其边框内边缘的，而不是其 padding 内边缘。

使用?absolute 之后：

原来的空间会被其他元素挤占。

元素在最终位置时也不会挤占其他元素的空间，它浮动到其它元素的上方。

fixed

它的模式与 absolute 相同，不过无论怎么拖动滚动条，它始终固定在屏幕的指定位置。在 IE6 中不支持这个属性；在 IE7 中支持这个属性但需要指明 DOCTYPE；Firefox 等浏览器支持这个属性。

top、right、bottom、left 属性指相对于视口的。

inherit

继续父元素的 position 值。

名称解释

视口－通过解析文档，连续媒体（比如屏幕就是连续媒体，而打印机则是基于页的媒体）给用户产生一个视口（一个窗口或其它在屏幕上显示的区域）。

 

案例，网页右下角的广告图片（假冒QQ消息）

IE6不支持position: fixed;

使用资源 51xp.gif

 

    <style type="text/css">

        #jb51_yxj

        {

            position: fixed;

            background-color: #fff;

            width: 250px;

            bottom: 0px;

            overflow: hidden;

            right: 0px;

      }

    </style>

页面中插入多个回车，以出现滚动条：

    <div id="jb51_yxj">

        <img src="51xp.gif" />

    </div>

19.当使用表格布局的时候，不要建一个非常复杂的表格，而是使用表格嵌套表格，这样虽然代码会多点，但思路清晰，便于修改。

!important提高优先级。（color:red !important;  color:green;最后显示是red;）

z-index

@import url(xx.css);

CSS中的注释：/*   */

盒子模型。

 

20. meta标签包括在head标签中。

<meta>标签，<meta>有指定name和指定http-equiv两种用法：

<meta name=“名字” content=“值” />关于网页的描述信息。

<meta http-equiv="名字" content="值" />模拟http响应头信息。

例如：

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />指定网页编码

<meta http-equiv="Refresh" content="3" /> 三秒钟后刷新此网页。

<meta http-equiv="Refresh" content="3;url=http://www.rupeng.com" /> 三秒钟后重定向到新网页。发帖成功后提示“发帖成功，即将转向帖子查看页面”。

<meta http-equiv=“Cache-Control” content=“no-cache” /> 禁止浏览器缓存页面。

<meta name=“keywords” content=“新闻,娱乐,八卦”/>

<meta name=“description” content=”中国最全的八卦新闻”/>

 

21. 常用的几个html编码：

"  &quot;

&  &amp;

<  &lt;

>  &gt;

空格  &nbsp;

©  &copy;

®  &reg;

²  &sup2;

¥  &yen;

³ &sup3;