[CSS Tips]:几个css小技巧

简介:

1.  跨浏览器最小高度设置       
min-height

CSS:

.element { min-height:600px; height:auto !important; height:600px; }

2. 跨浏览器的CSS透明度 
opac

CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
. transparent 
 
/* Modern Browsers */  opacity: 0.7
 
/* IE 8 */  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"
 
/* IE 5-7 */  filter: alpha(opacity= 70 ); 
 
/* Netscape */  -moz-opacity: 0.7
 
/* Safari 1 */  -khtml-opacity: 0.7
 
}

3.著名的 Meyer Reset(重置) 
reset

CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
html, body, div, span, applet, object, iframe, 
h 1 , h 2 , h 3 , h 4 , h 5 , h 6 , 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, 
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-weight : inherit; 
     font-style : inherit; 
     font-size : 100%
     font-family : inherit; 
     vertical-align : baseline
/* remember to define focus styles! */
:focus { 
     outline : 0
body { 
     line-height : 1
     color : black
     background : white
ol, ul { 
     list-style : none
/* tables still need 'cellspacing="0"' in the markup */
table { 
     border-collapse : separate
     border-spacing : 0
caption , th, td { 
     text-align : left
     font-weight : normal
blockquote:before, blockquote:after, 
q:before, q:after { 
     content : ""
blockquote, q { 
     quotes : ""  ""
}

4.删除虚线轮廓

dotted
1
a, a:active { outline : none ; }
本文转自敏捷的水博客园博客,原文链接http://www.cnblogs.com/cnblogsfans/archive/2010/01/03/1638125.html如需转载请自行联系原作者

王德水
相关文章
|
3月前
|
前端开发
2s 利用 HTML+css动画实现企业官网效果
2s 利用 HTML+css动画实现企业官网效果
HTML+CSS 实现通用的企业官网页面(记得收藏)
HTML+CSS 实现通用的企业官网页面(记得收藏)
|
1月前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站:从零开始的HTML和CSS之旅
【9月更文挑战第32天】在这个数字化的时代,拥有一个个人博客不仅是展示自我的平台,也是技术交流的桥梁。本文将引导初学者理解并实现一个简单的个人博客网站的搭建,涵盖HTML的基础结构、CSS样式的美化技巧以及如何将两者结合来制作一个完整的网页。通过这篇文章,你将学会如何从零开始构建自己的网络空间,并在互联网世界留下你的足迹。
|
14天前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
64 6
|
1月前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站:从零开始的HTML与CSS之旅
【9月更文挑战第31天】在这个数字时代,拥有一个个人博客网站是展示自我、分享知识和连接世界的重要方式。本文将引导你通过简单的HTML和CSS知识,一步步构建起你的在线空间。无论你是编程新手还是希望通过实践加深理解,这篇文章都将是你的理想指南。我们将探索基本概念,实现页面布局,并点缀以个性化样式,最终将静态页面转变为动态交互式网站。准备好了吗?让我们开始吧!
|
2月前
|
前端开发 数据安全/隐私保护 容器
HTML+CSS 水滴登录页
该代码实现了一个创意的水滴登录页面,包含一个水滴形状的登录框与两个按钮(忘记密码和注册)。登录框包括用户名、密码输入框及登录按钮。页面设计独特,采用渐变色与动态效果,增强了交互性和视觉美感。以下为关键实现步骤: - 重置默认样式。 - 设置页面背景颜色和尺寸。 - 定义登录表单容器的布局、位置和尺寸。 - 设置登录表单内容样式,包括3D效果和过渡动画。 - 创建伪元素增强水滴效果。 - 设定输入框容器和输入框样式。 - 为提交按钮、忘记密码和注册按钮设定特定样式,并添加悬停效果。
|
2月前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
|
3月前
|
前端开发 JavaScript
HTML+CSS如何打造撒花动画效果?3分钟学会,炫酷到爆!
HTML+CSS如何打造撒花动画效果?3分钟学会,炫酷到爆!
|
3月前
|
前端开发 JavaScript
HTML+CSS助你轻松打造惊艳登录页,零基础也能学会!
HTML+CSS助你轻松打造惊艳登录页,零基础也能学会!