html和css中的技巧

1:标签不要忘记带点

2:div是否成对的出现.

3.body 前面不能加点

4.在写css时记住一定要带上class的命名这样就不会出现重复的

5.出现文字的时候下面有下划线或虚线的时候，用padding撑开距离图片距离变框也是用padding

6.当出现有padding时要记住用width减去padding的值 padding是边与边的距离当出现高度是也是要用light减去padding值 padding也可以用到在四边的距离

7.网页最好写成块的形式也就是一对div中写一个模块，这样可以加快加载的速度

8.span中给行高是没有用的必需是先加块在给高（display：block）

9.a标签在无论怎么设置都不能用的时候要用display：block；

10.背景中有时要用到.top{ width:1349px; background:url(../images/box_background_image.png) no-repeat center top; height:266px;} 灰色的就是讲背景居中靠上

11. 外边局是 div也就是盒子与盒子之间是padding

12.在导航中右侧有竖条是居中处理：在整个行高ul中用padding-top；然后在li中用line-height和height是一样的，并且竖条在li设置border或者是在a中加padding：0px 10px； border：

13.导航中最后一个竖在行内解决border：none或者在a类中.div .a2{border:none}

14.图片：在图片下方有一个线的除去：在行内用border：none

15.在导航 a是给一个块并且居中text-align

16.在p标记中让字与字之间有距离用letter-spacing

17.块与块之间用margin

18.在图片与文字中间对齐：margin-top:-5px; vertical-align:middle;

一、Background-position背景定位

定位单词：background-position：水平对齐垂直对齐 background-position：center center
百分比：background-position：50% 50%
固定定位：background-position：5px 10px;

缩写形式

格式： background:背景图片地址，是否平铺图片定位

<ul>

<li><a href=”#”>ssssssss</a></li>

</ul>

</div>

Body,h2,ul,li,a{margin:0px;padding:0px;}

Body{font-size:12px;}

A:link,a:visited{color:#000ff;text-decoration:none;}

A:hover{color:#ff0000;}

.zhang{width:600px;}

Ul,li{list-style:none;}

.zhang h2{font-size:12px; padding:10px 0px;}

.zhang li{padding:5px 0px; background:url() no-repeat left center; padding-left:10px;}

19.padding是内边距，边线到内容的距离；

20.box > h1意思是子变孙子不变，指在一个div中有大box 下面有两个h1其中一个h1在另外一个div中

21.在li中有单个不一样的，可以用class=“v” a.v:link,a.v:visited{}含义：给class=v的a元素的：link增加样式；

22.div.box{color:#ffffff}//div.box含义：给class=box的<alert("欢迎来到java");>元素增加样式

23.浮动的块元素一定要有宽度

全局css设置总结：

1.清除所有

html，body，ul，li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,fieldset,img,legendd{margin:0px; padding:0px;}

2.全局文本大小，颜色设置

举例：body{color：#333；padding：5px 0px；}

3.清楚项目符号或编号前面的各种符号

ul，li{list-style：none；}

4.全局连接效果 a:link,a:visited{color:#eeee;text-decoration:none;}

5.所有图片去边线 img{border：none；}

6.合并表格的边线

7.Table{border-college：collapse；}

8.浮动和清除

常见的兼容问题

1.在主页绝对居中

在Firefox下，使用margin：0px auto实现主页居中
在ie5.5使用texe-align：center实现主页居中
Body{text-align：center；}
Box{margin：0px auto；text-align：center；}

2.单行文本垂直居中

a) 。Tiltle{ height：50px；link-height:50px;}

3.在ie6，左右margin会加倍

a) 在ie下，加了左右margin的元素

12.ie与火狐在整体居中差别，在body中加入text-align:center;这个是ie居中，火狐不认，然后再大层中在给一个text-align:left;

13.<a href=”属性”>

Target：目标文件的打开方式（-blank在新窗口中打开）（-self在当前窗口打开）（-top在最顶层窗口来打开）（-parent在上一级窗口打开）

巴特西

html和css中的技巧

最新文章

热门文章