代码注意细节

来源:互联网 发布:网络语取向狙击 编辑:程序博客网 时间:2024/05/29 20:03
1.  上边两个是圆角:border-radius:10px 10px 0 0;
2.  <div><img src="/uploads/170916/1-1F91614125bL.jpg" alt="" width="180" height="88"></div>
----注:div中写style时 可不写px,如:width="180px"不用加px
3.  a标签内套a标签会报错,可在最外面的框加a标签    a标签<a href="" titile=""  target="_blank"> ----target="_blank" 在新窗口打开链接,默认在当前窗口打开链接
4.  表单用input/ button 提交,而如果链接到QQ,则用a标签链接:<a href="" title="" target="_blank"></a>
5.  &copy 代码效果为:©
6.  input 标签定义图像域: <input type="image"  height="" width="" src="" />
7.  代码中空格输入法:法一:     (空隙较大)     (空隙较小)   法二:中文输入法的全角状态(shift+space)就可以直接空格了-----(注:这个空隙比半角下较大)
8.  自动省略并出现省略号:(只限一行文字时):text-overflow:ellipsis; overflow:hidden; white-space:nowrap;
9.  效果缓慢出现:transition-duration: .8s;-ms-transition-duration: .8s;-moz-transition-duration: .8s;-webkit-transition-duration: .8s;
10.  img{ display:block;}    注:图像下面有空隙的时候用到此属性
11.  z-index 只应用于position属性值为relative或absolute的对象,此属性的number值为正数的对象之上,而number值为负数的对象在其之下,用于设置对象的层叠顺序
12. 如何对齐文本与文本输入框 加上 vertical-align:middle; <style type="text/css"> <!-- input {      width:200px; height:30px;  border:1px solid red;      vertical-align:middle; } --> </style> 
13..IE6下为什么图片下有空隙产生 解决这个BUG的方法也有很多,可以是改变html的排版,或者设置img 为display:block 或者设置vertical-align 属性为 vertical-align:top | bottom |middle |text-bottom 都可以解决.
 14. /* 去掉链接的虚线框 */a { outline:none; star:expression(this.onFocus=this.blur());}
15. /* 将具有默认margin和padding的标记置零,所有标记的margin、padding都在使用时具体定义 */*{ margin:0;padding:0;}
16. /* 标签属性,textarea,input 强制输入时内容超出时换行 */textarea,input{ word-wrap:break-word; word-break:break-all; padding:0px;}
17.  /* 定义图片边框,当图片作为链接内容被填充时,会有默认边框出现,重定义掉 */img{ border:0 none;}
18. /* 清除ul列表标记的样式,ul列表更多的用在不需要列表前置符号的样式里 */li{ list-style-type:none;}