CSS已经成为网页前段设计一个非常重要的部分,由于写CSS时需要考虑的问题非常多,老手们创建新页面是通常会沿用以前的CSS框架。但是新手没有自己的框架,这篇文章可以给新手们一些启示。
1.简单的纯CSS tooltip
通过这些代码,你可以做出简单的tooltip。这是CSS代码:
a:hover {background:#ffffff; /*要兼容ie6的话必须添加背景色*/
text-decoration:none;
}
a.tooltip span {
display:none;
padding:2px 3px;
margin-left:8px;
wIDth:130px;
}
a.tooltip:hover span{
display:inline;
position:absolute;
background:#ffffff;
border:1px solID #cccccc;
color:#6c6c6c;
}
HTML代码如下:
Easy <a class="tooltip" href="#">tooltip<span>This is a Example by imbolo.com.</span></a>. 效果如图。2.重设基本样式
为了统一不同浏览器对各种HTML标签的默认样式的渲染,我们必须从新定义各种标签的样式,这样能对以后的开发带来方便。重新定义各种HTML标签只需要在CSS的开头加入以下代码。HTML,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,Font,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
b,u,i,center,
dl,dt,dd,ol,ul,li,
fIEldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
Font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol,ul {
List-style: none;
}
blockquote,q {
quotes: none;
}
blockquote:before,blockquote:after,
q:before,q:after {
content: none;
}
/* 元素获得焦点时的样式! */
:focus {
outline: 0;
}
/* 特殊文本的样式! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* 细线表格样式 */
table {
border-collapse: collapse;
border-spacing: 0;
}3.方便的CSS调试器
这段代码可以把页面上的各种标签嵌套用不同的线条划分出来,方便你找出BUG。
* { outline: 2px dotted red }* * { outline: 2px dotted green }
* * * { outline: 2px dotted orange }
* * * * { outline: 2px dotted blue }
* * * * * { outline: 1px solID red }
* * * * * * { outline: 1px solID green }
* * * * * * * { outline: 1px solID orange }
* * * * * * * * { outline: 1px solID blue }
总结
以上是内存溢出为你收集整理的节约开发时间的十个CSS技巧全部内容,希望文章能够帮你解决节约开发时间的十个CSS技巧所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)