网页设计常用网页技巧

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 可以解决本地调试跨域问题

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。