CSS技巧让你的网站更上一层楼

简介:
CSS是网站的外衣,所谓人靠衣装,佛靠金装,CSS决定了你给用户的第一感觉。虽然一直在做网站的架构和后端开发,但是还是需要多揣点CSS技巧,以防万一。 

01.DIV水平居中 

DIV 水平居中很简单,只需要设置DIV的宽带以及让左右margins设置成auto: 

div#container {width: 960px; margin: 0 auto } 

02.文字垂直居中 

单行文字居中,只需要将行高和容器高度设置成一样即可。比如下面的HTML代码: 

<div id="container">我是一行字</div> 

然后通过下面的样式就可以居中: 

div#container {height: 35px; line-height: 35px;} 

如何你有很多行字,只要将行高设置成容器的高度的1/N就好。 
03.DIV垂直居中 

比如有以下两个div,如何让包在中间的div垂直居中,这里有一篇详细的介绍文章。 

<div id="f"> 
 <div id="s">Some Things!</div> 
</div> 

首先,将外层容器的定位为relative。 

div#f{ position:relative; height:500px; } 

然后,将里面的容器定位设置成absolute,再将它的左上角沿y轴下移50%,最后将它margin-top上移本身高度的50%即可。 

div#s { position: absolute; top: 50%; height: 250px; margin-top: -125px; } 

使用同样的思路,也可以做出水平居中的效果。 
04.自适应宽带的图片 

可以通过以下样式实现只适用外层容器大小的图片: 

img {max-width: 100%} 
/* IE 6 hack */ 
<!--[if IE 6]> 
img {width: 100%} 
<![endif]--> 

05.3D按钮 

要想让按钮具有3D效果,可以将它的左上部边框设为浅色,右下部边框设为深色即可。 

div#button { 
   background: #888; 
   border: 1px solid; 
   border-color: #999 #777 #777 #999; 
  } 

06. CSS Font 缩写 

body { 
   font-family: Arial, Helvetica, sans-serif; 
   font-size: 13px; 
   font-weight: normal; 
   font-variant: small-caps; 
   font-style: italic; 
   line-height: 150%; 

/* 可以缩写成以下这种方式 */ 
body { 
   font: font-style font-variant font-weight font-size/line-height font-family; 


详细介绍参见:A Primer on the CSS Font Shorthand Property 
06.可以在DIV上设置多个class 

<div class="class-1 class-2 class-3">content</div> 

  class-2 {color: blue}  
  class-3 {color: green}  
  class-1 {color: red} 

08.圆角 

CSS3中很容易实现圆角: 

.element {border-radius: 5px} 

但是在CSS3还没全民普及之前我在 Safari, Chrome, 之类 webkit 核心的浏览器中使用 -webkit-border-radius 以及在 Firefox 这些基于 Mozilla 的浏览器使用 -moz-border-radius 来实现圆角。 

/* Safari, Chrome */ 
.element { 
   border-radius: 5px 
   -webkit-border-radius: 5px 
   -moz-border-radius: 5px 

/* Firefox */ 
.element { 
   border-top-left-radius: 5px 
   -webkit-border-top-left-radius: 5px 
   -moz-border-radius-top-left 


至于其他的浏览器可以用JQuery 插件来实现圆角。 

$(".element").corner("5px"); 

09.link 状态的设置顺序 

a:link  
a:visited  
a:hover  
a:active 

简单记忆法:love hate (LVHA) 
10.Clearing and Containing Floats 

使用 float 和 clear 设置容器的排序,具体的还是看这篇文章吧。 
11.条件注释 

条件注释只适用于IE这个杯具的浏览器。 

<!--[if IE]> 
<link rel="stylesheet" type="text/css" href="ie-stylesheet.css" /> 
< ![endif]--> 
<!--[if IE 6]> - targets IE6 only --> 
<!--[if gt IE 6]> - targets IE7 and above --> 
<!--[if lt IE 6]> - targets IE5.5 and below --> 
<!--[if gte IE 6]> - targets IE6 and above --> 
<!--[if lte IE 6]> - targets IE6 and below --> 

12.HTML Hack for IE 

IE这个杯具的浏览器可以通过以下方式进行 hack 。被hack的css只会运行在特定的浏览器上。 

/* the following rules apply only to IE6 */ 
* html{ 

* html body{ 

* html .foo{ 


/* the following rules apply only to IE7 */ 
*+html .foo{ 


13.CSS的优先级 

基本规则是:行内样式 > id样式 > class样式 > 标签名样式。 
14.IE中min-height修正 

由于IE6不支持min-height,我们可以通过以下这些方式修正: 

/* 方法一 */ 
.element { 
 min-height: 500px; 
 height: auto !important; 
 height: 500px; 


/* 方法二 */ 
.element { 
 min-height: 500px 
 _height: 500px /* _ 只有IE6才能读取 */ 


15.font-size 基准 

/* 假设浏览器的默认的大小是 16px , 首先将其设置为10px (font-size:10/16) */ 
body {font-size:10/16;} 
/* 然后就可以用em做统一字体单位了 2.4em = 24px */ 
h1 {font-size: 2.4 em} 

16.100% Height 

通过内部容器将页面撑开,在IE中的min-height可以通过上面hack解决: 

  html, body {height: 100%} 
  #content {min-height: 100%} 

17. CSS Drop Caps 

首字母样式定义: 

p:first-letter { 
  display: block; 
  float: left; 
  margin: 5px 5px 0 0; 
  color: red 
  font-size: 1.4em; 
  background: #ddd; 
  font-family: Helvetica; 


18.取消link外面的框框 

a {outline: none} or a {outline: 0} 

19.Text-transform 

p {text-transform: uppercase} /* 全部大写 */ 
p {text-transform: lowercase} /* 全部小写 */ 
p {text-transform: capitalize} /* 首字母大写 */ 

20.Font Variant 

只对英文有效,将字体整成等高的大写字体。 

p {font-variant: small-caps} 

21.移除带有链接的图片的外框 

  a image {border: none} or a image {border: 0} 

22.重置浏览器的CSS 

参考 YUI 和 Eric Meyer 吧。 
23.设置背景图的 Padding 

  /* background-position {top-value left-value} */ 
  {background-position: 5px 5px} 

24.用图片列表标志 

默认情况下,浏览器是用一个黑圆圈作为列表标志,我们用图片取代它: 

  ul {list-style: none} 
  ul li { 
    background-image: url("dot.png"); 
    background-repeat: none; 
    background-position: 0 0.5em; 
  } 

25.透明容器 

如何将容器设置成透明: 

.element { 
  filter:alpha(opacity=50); /* for ie */ 
  -moz-opacity:0.5; /* for ff */ 
  -khtml-opacity: 0.5; /* for webkit as chrome */ 
  opacity: 0.5; /* for opera */ 


26.三角形 

如何使用CSS生成一个三角形?简单方案:将它四个边框中的三个边框设为透明,只剩下一个,就可以生成三角形效果: 

.element { 
  border-color: transparent transparent green transparent; 
  border-style: solid; 
  border-width: 0px 300px 300px 300px; 
  height: 0px; 
  width: 0px; 


27. 禁止自动换行 

h1 { white-space:nowrap; } 

28.用图片替换文字 

为了杯具的SEO,我需要在标题栏里用图片展现,同时也要保证搜索引擎能读到标题。 

h1 { 
  text-indent:-9999px; 
  background:url("h1-image.jpg") no-repeat; 
  width:200px; 
  height:50px; 


29.突显焦点元素 

input:focus { border: 2px solid green; } 

30.!important 

多条CSS语句冲突时,具有!important的语句将覆盖其他语句。由于IE不支持!important,所以也可以利用它区分不同的浏览器。 

/* IE 显示蓝色标题,其他浏览器显示红色标题 */ 
h1 { 
  color: red !important; 
  color: blue; 


31.CSS实现提示框 

当鼠标移动到链接上方,会自动出现一个提示框: 

  <a class="tooltip" href="#">Link<span>Tooltips</span></a> 

  a.tooltip {position: relative} 
  a.tooltip span {display:none; padding:5px; width:200px;} 
  a:hover {background:#fff;} /*background-color is a must for IE6*/ 
  a.tooltip:hover span{display:inline; position:absolute;} 

32.固定页头 

当页面滚动的时候,页首固定在位置不变,适合导航条: 

body{ margin:0;padding:100px 0 0 0;} 
  div#header{ 
  position:absolute; 
  top:0; 
  left:0; 
  width:100%; 
  height:<length>; 


@media screen{ 
 body>div#header{position: fixed;} 


* html body{overflow:hidden;} 

* html div#content{height:100%;overflow:auto;}


本文转自寒意博客园博客,原文链接:http://www.cnblogs.com/hnyei/archive/2011/11/12/2246417.html,如需转载请自行联系原作者

相关文章
静态网页html+css的真ikun网站
静态网页html+css的真ikun网站
|
4天前
|
前端开发 安全 数据安全/隐私保护
Web实战丨基于django+html+css+js的在线博客网站
Web实战丨基于django+html+css+js的在线博客网站
10 2
|
4天前
|
数据库 数据安全/隐私保护 Python
Web实战丨基于django+html+css+js的电子商务网站
Web实战丨基于django+html+css+js的电子商务网站
15 3
|
11天前
|
前端开发 JavaScript
保存网页中的css和js文件,网站保存,复制网站不可复制的文字,网站抠图
保存网页中的css和js文件,网站保存,复制网站不可复制的文字,网站抠图
|
1月前
|
编解码 前端开发 JavaScript
【专栏:HTML与CSS实战项目篇】打造一个动态新闻网站
【4月更文挑战第30天】构建动态新闻网站,运用HTML和CSS提升编程技能和网页设计理解。项目包括首页、新闻列表页和详情页,设计简洁易用,包含顶部导航、轮播图和新闻列表。页面布局注重吸引力和易用性,色彩搭配选用冷色调为主,辅以亮色点缀。字体选择清晰易读,布局保持整洁。交互效果如轮播图、导航栏高亮和响应式设计增强用户体验。本文提供基础新闻网站构建指南,为进一步功能扩展和优化打下基础。
|
1月前
|
前端开发 测试技术 定位技术
【专栏:HTML 与 CSS 实战项目篇】构建一个企业级网站:HTML 与 CSS 实战
【4月更文挑战第30天】本文介绍了使用HTML和CSS构建企业级网站的实战步骤,包括项目概述、页面结构设计、HTML结构搭建、CSS样式设计、具体页面实现、优化与提升。通过合理布局、美观样式和响应式设计,创建现代、简洁的网站,包含主页、关于我们、产品展示、新闻动态和联系我们等页面。优化图片和代码,确保性能,助力企业在数字时代树立良好形象并提升沟通效率。
|
1月前
|
编解码 前端开发 UED
【专栏:HTML与CSS实践篇】HTML与CSS在电商网站中的应用
【4月更文挑战第30天】本文探讨了HTML和CSS在电商网站中的关键作用。HTML作为基础结构,定义网页内容和布局,用于页面布局、内容展示和表单处理;而CSS则负责样式设计和美化,包括响应式设计、交互效果和模块化,两者结合创建出功能齐全、视觉吸引力强的在线购物环境,提升用户体验。
|
1月前
|
编解码 前端开发 UED
【专栏:HTML与CSS实践篇】响应式网站开发实战
【4月更文挑战第30天】本文探讨了响应式网站开发,它能根据用户设备自动调整布局,提供最佳浏览体验。通过HTML和CSS,利用媒体查询、Flexbox和百分比宽度等技术实现响应式设计。媒体查询按屏幕尺寸定义CSS规则,Flexbox处理元素排列。文章通过新闻网站首页设计实例,展示了如何应用这些理论,包括使用Flexbox设计导航栏,使用媒体查询调整轮播图和内容区域,以及创建自适应页脚。遵循移动优先原则,关注性能优化和用户体验,响应式设计是前端开发的关键,为多设备用户提供优质浏览体验。
|
1月前
|
前端开发 搜索推荐 SEO
【专栏:HTML 与 CSS 实践篇】使用 HTML 与 CSS 构建个人博客网站
【4月更文挑战第30天】本文介绍了使用HTML和CSS构建个性化个人博客网站的步骤。首先,规划设计网站主题、风格和结构;接着,利用HTML搭建首页、文章列表页和文章详情页的结构;然后,通过CSS设计整体风格、布局和交互效果;填充内容并进行SEO优化;最后,通过实际案例展示HTML和CSS的应用。构建博客网站不仅是展示自我和分享知识的平台,也是提升技能和创意实践的好机会。
|
1月前
|
前端开发 JavaScript UED
【前端】javascript+html+css 家具销售网站(代码+报告)
【前端】javascript+html+css 家具销售网站(代码+报告)