网页设计常用网页技巧

1.为了seo先声明

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>XX</title>
<meta name="keywords" content="XXX" />
<meta name="description" content="XXXXXXXXXXX">

2.最开始先声明以下格式，排除后续的干扰

/*避免margin，padding干扰*/
*{margin:0px;padding:0px;}

img{border:0px;}

ul{list-style-type:none;}
li{list-style:none;}

.fl, .fr{display:inline;}

3.关于透明,ie不支持opacity所以使用

{ filter:alpha(opacity=30); opacity:.3; }

4.关于居中

最常用：{margin:0px auto;text-align:center;}

个性化的用法：margin-left:50%;left:-width/2;

5.关于margin，padding

ie对margin的支持有时出现问题，所以尽量使用padding元素，如：padding-left:10px;

6.特效中阴影的使用，低版本ie不支持

box-shadow:0px 0px 20px #ccc;

7.position的使用

absolute：dom绝对定位；fixed：窗口绝对定位；relative：相对定位；static：正常

8.原生js中的各种宽和高

9.jquery中的 window和document高度

$(window).height()代表了当前可见区域的大小，而jQuery(document).height()则代表了整个文档的高度

$(document).scrollTop() 获取垂直滚动的距离  即当前滚动的地方的窗口顶端到整个页面顶端的距离
$(document).scrollLeft() 这是获取水平滚动条的距离

10关于背景图片，尽量使用

  background:url(images/top_01.jpg) center no-repeat

11.巧用float排版，少用clear

    float:right;

12.使用 ul 与 li 制作标题

参考：http://www.bodamn120.com/nkzt/qh/robTicket.html

13.使用<a target="_blank" href=""><img src=""></a>这种形式

14.圆角div，后面数值越大越圆。

  border-radius:8px;

 15调试的时候，在桌面图表属性的位置处添加

--disable-web-security 可以解决本地调试跨域问题

16.用<p>代替<br>