html+css网页布局技巧积累
1.属性整理
1）<head>标签中的http-equiv属性
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <span style="white-space:pre"> </span><head> <span style="white-space:pre"> </span><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><!-- 等效于 <meta charset="utf-8"> --> <span style="white-space:pre"> </span><title>我的主页</title> <span style="white-space:pre"> </span><style type="text/css"></style> <span style="white-space:pre"> </span></head>
注：http-equiv 属性为名称/值对提供了名称。并指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME 文档头部包含名称/值对。
当服务器向浏览器发送文档时，会先发送许多名称/值对。虽然有些服务器会发送许多这种名称/值对，但是所有服务器都至少要发送一个：content-type:text/html。这将告诉浏览器准备接受一个 HTML 文档。
使用带有 http-equiv 属性的 <meta> 标签时，服务器将把名称/值对添加到发送给浏览器的内容头部。例如，添加：
<metahttp-equiv="charset"content="iso-8859-1"> <metahttp-equiv="expires"content="31 Dec 2008">
这样发送到浏览器的头部就应该包含：
content-type: text/html charset:iso-8859-1 expires:31 Dec 2008
当然，只有浏览器可以接受这些附加的头部字段，并能以适当的方式使用它们时，这些字段才有意义。
2) 各种属性
1.字体大小：font-size:12px
2.字体类型：font-family:"宋体"
3.取消连接的下划线:text-decoration:none
4.不知道干啥的：overflow:hidden
5 在某个区域使用平铺背景图片： background: url(../images/bg.jpg) repeat-x;
6.指定位置的边框：border-bottom:1px solid #C4D4E1
7.取消列表中li的小圆点:list-style:none
8.将内联元素转换成块状元素:display:block
9.清楚浮动：{clear:both}{clear:top}
10.<li>水平居中:text-align:center;------<li>垂直居中:<li>中设置line-height:外框的高度
11 overflow:当某个元素中的内容超出了给定的长度和跨度，则用来决定显示状态。overflow:hidden,隐藏溢出。overflow:scroll,超出范围出现滑块
注：隐藏溢出：当我们没有给父元素这个div设置高度的时候，子元素这个div的高度，就会撑开父元素这个div，而在另一个方面，我们要注意到的是，当我们 给父元素这个div加上一个高度值，那么无论子元素这个div的高度是多少，父元素这个高度都是我们设定的值。而当子元素的高度超过父元素的高度的时候， 超出的部分就会被隐藏。这就是隐藏溢出的含义!
3）其他
1.使用图片连接：也可以把图片放到标题<h1>中来
<a href="#"><img src="images/tu03.jpg" /></a>
2. <link href="style.css" type="text/css" rel="stylesheet">
3.导航栏中每个<li>中文字宽度自适应：1)取消每个<li>的跨度。2)在<li>中设置{padding:0 10px}
2.布局
1）浏览器兼容
<span style="font-size:18px;">body,h1,h2,h3,dl,dt,dd,ul,li,p,img{margin:0;padding:0;list-style:none;border:0;}抓哟就是这四个属性就OK了，是不是很简单</span>
2）布局技巧
1.令某个DIV区域水平居中：margin:20 auto(上下20px，左右居中)
2.使用dt+dd的组合（两行，每行一组dt,dd.dt里放图片，dd里方说明）
<span> </span><dl> <dt><a href="#"><img src="images/tu03.jpg" /></a></dt> <dd> <p>名称：<a href="#">领秀新硅谷</a></p> <p>类型：社区商业</p> <p>售价：23000-39000元/平米</p> <p><a href="#">详细</a></p> </dd> </dl> <dl> <dt><a href="#"><img src="images/tu03.jpg" /></a></dt> <dd> <p>名称：<a href="#">领秀新硅谷</a></p> <p>类型：社区商业</p> <p>售价：23000-39000元/平米</p> <p><a href="#">详细</a></p> </dd> </dl>
dl{height:95px;padding:7px 0 0 6px;overflow:hidden;}
dt{width:124px;height:102px;float:left;margin-right:10px;}
dt img{border:1px solid #d8d8d8;padding:2px;}
dd{width:180px;height:102px;float:left;}
dd p{height:21px;}
3.在标题里使用span
<h2>商铺新闻<span><a href="#">市场动态</a> | <a href="#">项目分析</a> | <a href="#">专家动态</a></span></h2>形成这样的效果
4.【position:absolute】
意思是：他的意思是绝对定位，他默认参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、
LEFT(下面简称TRBL)进行定位，有以下属性：
1)如果没有TRBL，以父级的左上角，在没有父级的时候，他是参照浏览器左上角,如果在没有父级元素的情况下，存在文本，则以它前面的最后一个文字的右上角为原点进行定位但是不断开文字，覆盖于上方。
2)如果设定TRBL，并且父级没有设定position 属性，那么当前的absolute 则以浏览器左上角为原始点进行定位，位置将由TRBL 决定。
3)如果设定TRBL，并且父级设定position 属性(无论是absolute 还是relative)，则以父级的左上角为原点进行定位，位置由TRBL 决定。即使父级有Padding 属性，对其也不起作用，说简单点就是：它只坚持一点，就以父级左上角为原点进行定位，父级的padding对其根本没有影响。
以上三点可以总结出，若想把一个定位属性为absolute 的元素定位于其父级元素内，只有
满足两个条件，
第一：设定TRBL
第二：父级设定Position 属性
上面的这个总结非常重要，可以保证你在用absolue 布局页面的时候，不会错位，并且随
着浏览器的大小或者显示器分辨率的大小，而不发生改变。
最重要的一句话：“如果用 position 来布局页面，父级元素的 position 属性必须为relative，而定位于父级内部某个位置的元素，最好用 absolute，同时设置TRBL，因为它不受父级元素的padding 的属性影响，当然你也可以用position，不过到时候计算的时候不要忘记padding的值。”
还有一句话：页面布局，浮动为主，Position为辅