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:背景图片地址,是否平铺 图片定位
<div class=”zhang”>
<h2>ddd</h2>
<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在上一级窗口打开)