定位position和浮动float

2010/02/20 14:34  |  分类：Css

        CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。
定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。显然，这个功能非常强大，也很让人吃惊。要知道，用户代理对 CSS2 中定位的支持远胜于对其它方面的支持，对此不应感到奇怪。
另一方面，CSS1 中首次提出了浮动，它以 Netscape 在 Web 发展初期增加的一个功能为基础。浮动不完全是定位，不过，它当然也不是正常流布局。我们会在后面的章节中明确浮动的含义。

一切皆为框

　　div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容 ，即“块框”。与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。
　　您可以使用 display 属性 改变生成的框的类型。这意味着，通过将 display 属性设置为 block，可以让行内元素（比如

标签：、、、 31 views  |  发表评论

一张背景图的自适应按钮

2010/02/10 09:20  |  分类：Css

其实很多时候都是用到自适应，用的最多的也就是导航，按钮的。根据实际字数需要，扩展或者缩小宽度。

hmtl代码:

<span>
<button>确定充值，去网银付款</button>
</span>

css代码：

span {
 background:url(bg_comb.png) 100% 0;
 height:32px;
 display:inline-block;
 padding:0 5px 0 0;
 text-align:center;
 font-size:14px !important;
 vertical-align:middle;
 width:auto;
}
button {
 display:inline-block;
 border:0;
 background:url(bg_comb.png) 0 0;
 height:32px;
 line-height:30px;
 padding:0 10px 5px 15px;
 color:#fff;
 vertical-align:middle;
 white-space:nowrap;
 overflow:visible;
}

其实我也是个懒人，这里不给出图片和预览了，如果又需要的。可以自己按照样式，亲自测试下。

标签：、、 56 views  |  发表评论

[CSS]贴在底部的布局

2009/12/03 16:00  |  分类：Css

对于前端开发人员来说，页脚的处理时常让我们比较头痛。因为，如果页面比较长还好说，如果页面比较短，则页脚则会跑到页面的中间部位，十分的不雅观。

那么有什么办法能让页脚乖乖的出现在每页的最下方呢？方法当然是有的，一种是使用js+css的方法,这种办法比较好理解，实现也比较的简单，这也是大家用的比较多的办法。但是，如果用户禁用了js，那么这种方法自然也就不再能够实现。那我们自然的想到了使用纯css。

 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“> 
<html  xmlns=”http://www.w3.org/1999/xhtml“> 
<head> 
<title>我个是非常好的小页脚</title> 
<meta http-equiv=”Content-Type” content=”text/html” charset=”utf-8″    /> 
<style type=”text/css”> 
html{height:100%;overflow:auto;}  
body{margin:0;padding:0;position:relative;height:auto !important;height:100%;min-height:100%;text-align:center;}  
.main{border-bottom:60px solid #fff;}  
#footer{position:absolute;width:100%;clear:both;height:25px;border-bottom:1px solid #e0e0e0;border-top:1px solid #e0e0e0;margin-top:20px;bottom:0;left:0;}  
</style> 
</head> 

全文阅读 »

标签：、、 188 views  |  发表评论

CSS样式表的优化技巧

2009/11/09 17:40  |  分类：Css

一、使用css缩写

　　使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则请参看《常用css缩写语法总结》，这里就不展开描述。

　　二.明确定义单位，除非值为0

　　忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写width=100，但是在CSS中，你必须给一个准确的单位，比如:width:100px width:100em。只有两个例外情况可以不定义单位:行高和0值。除此以外，其他值都必须紧跟单位，注意，不要在数值和单位之间加空格。

　　三.区分大小写

　　当在XHTML中使用CSS，CSS里定义的元素名称是区分大小写的。为了避免这种错误，我建议所有的定义名称都采用小写。

　　class和id的值在HTML和XHTML中也是区分大小写的，如果你一定要大小写混合写，请仔细确认你在CSS的定义和XHTML里的标签是一致的。

　　四.取消class和id前的元素限定

　　当你写给一个元素定义class或者id，你可以省略前面的元素限定，因为ID在一个页面里是唯一的，鴆las s可以在页面中多次使用。你限定某个元素毫无意义。例如:
全文阅读 »

标签：、 201 views  |  发表评论

汇总IE8以及其他的浏览器兼容hack

2009/10/20 18:13  |  分类：Css

网上很多，这类的兼容问题的汇总.
#box{
color:red; /* 所有浏览器都支持 */
color:red !important;/* Firefox、IE7支持 */
_color:red; /* IE6支持 */
*color:red; /* IE6、IE7支持 */
*+color:red; /* IE7支持 */
color:red\9; /* IE6、IE7、IE8支持 */
color:red\0; /* IE8支持 */
}

标签：、、、 193 views  |  发表评论

总结：css布局常犯的9中错误

2009/10/19 10:17  |  分类：Css

对于初学的同学来说会遇到的问题肯定会不少，当然问题也是五花八门，这里大概总结了几种常见的出现错误的地方，还有排除错误的简单的方法：
1. 检查HTML元素是否有拼写错误、是否忘记结束标记
　 即使是老手也经常会弄错div的嵌套关系。可以用dreamweaver的验证功能检查一下有无错误。

2. 检查CSS是否书写正确
　 检查一下有无拼写错误、是否忘记结尾的 } 等。可以利用CleanCSS来检查 CSS的拼写错误。CleanCSS本是为CSS减肥的工具，但也能检查出拼写错误。

全文阅读 »

标签：、、 144 views  |  发表评论

ie 和ff对css的缩写都存在的问题

2009/10/14 11:15  |  分类：Css

1. 在IE里用body {text-align: center;}就可以居中对齐.到了firefox里总是在左边.但是如果加了float: right;还能到右边就是不能到中间..FF下面设置容器的左右外补丁为auto就可以了，如: margin:0 auto;
2. 是 ie对于css的magin padding 等默认值为0px，但ff却不一样，为了保持外观的统一性，即使padding为0你也要写上，以免ff在浏览中的错位。
3. 对css缩写的支持问题：不论是ie 还是ff对css的缩写都有一小点问题,比如:border: 0xp solid #fff;两个浏览器支持都没有问题,但如果四个边的magin不同情况下，就不能用这种缩写了，无论是ie还是ff又会出现边界解释错误，而导致页面变形
全文阅读 »

标签：、、 193 views  |  发表评论

CSS Sprites的优缺点

2009/10/12 13:29  |  分类：Css

说起CSS Sprites我想大家肯定不陌生，因为它并不是一门新技术，目前它已经在网页开发中发展得较为成熟，但CSS Sprites并不是什么金科玉律，但在很多情况下，它有着一定的优势，最重要的是它可以减轻服务器的负载，提高网页加载速度。随着Web设计向着精致、巧妙的方向发展，设计师们开始考虑使用非Javascript的方 式制作鼠标滑过、悬停菜单的效果，这时CSS Sprite应运而生。
　　说白了，CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。
　　当页面加载时，不是加载每个单独图片，而是一次加载整个组合图片。这是一个了不起的改进，它大大减少了HTTP请求的次数，减轻服务器压力，同时缩短了悬停加载图片所需要的时间延迟，使效果更流畅，不会停顿。
CSS Sprites优点
　　CSS Sprites为什么突然跑火，跟能够提升网站性能有关。显而易见，这是它的巨大优点之一。
　　1.利用CSS Sprites能很好地减少了网页的http请求，从而大大的提高了页面的性能，这是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
　　2.个人认为CSS Sprites能减少图片的字节，我曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。
全文阅读 »

标签：、、 155 views  |  发表评论

HTML4.0与XHTML1.0的区别

2009/09/22 12:17  |  分类：Xhtml

XHTML是XML的一个应用，一些在基于SGML的HTML 4中完全合法的习惯在XHTML中必须改变。编排良好性Well-formedness是[XML]引入的一个新概念。从本质上说，这意味着元素必须有结束标签，或者必须以特殊方式书写(在下面说明)。

　　元素必须嵌套，尽管SGML规定层叠非法，但现有的浏览器普遍允许层叠。

　　正确：嵌套元素。
　　<p>here is an emphasized <em>paragraph</em>.</p>

　　不正确：层叠元素。
　　<p>here is an emphasized <em>paragraph.</p></em>

　　元素和属性名必须小写
　　对所有HTML元素和属性名，XHTML 文档必须使用小写。 因为XML是大小写敏感的，所以这个差别是必须的。如 <li> 和 <LI> 是不同的标签。

　　对非空元素，必须使用结束标签
　　在基于 SGML的 HTML 4 中，一些隐含结束意义的元素允许忽略结束标签。而在基于XML的XHTML中，这种忽略不被允许。除了在DTD中被声明为空的元素，所有元素必须有结束标签。

　　正确：结束了的元素。
　　<p>here is a paragraph.</p><p>here is another paragraph.</p>
全文阅读 »

标签：、、 196 views  |  发表评论

父容器内子容器浮动的高度自适应

2009/09/10 11:29  |  分类：Css

这是一个很简单的BUG，高手请绕行。

当一个子块浮动的时候，外面的父块高度就不以子块高度为标准了，也就是说，当子块浮动后，它不能够撑开父块，这个问题很容易解决。

方法是在父元素加上
overflow:auto;
zoom:1;  
解释一下：overflow:auto;是让高度自适应，zoom:1;是为了兼容IE6(注：在本人机子上IE6可以不加这句话)，也可以用height:1%;的方式来解决。

最近确实比较忙，也没太多时间来认真写一篇文章了。哎，努力吧，为了生存。

标签：、、 294 views  |  2 条评论
Pages: 1 2 3 4 5 6 7 Next


©2008 容我织梦 All Rights Reservied

Powered by WordPress. Theme by Prower

京ICP备09041474号  迅雷统计