现代 CSS

CSS3 Buttons框架

现在使用CSS3属性制作Buttons越来越普及了。早前在站上也放了一些相关方面的制作方法,在《CSS3 Gradient Buttons》一文中第一使用CSS3GradientBorder-radiusbox-shadow等属性制作了Buttons。

如何用CSS实现大背景样式

Web页面的大背景制作有时的确烦人,今天看到了web designer wall写了一篇有关于这方面的教程《How to: CSS Large Background 》。从中学习了一下,特意整理一下贴上来与大家分享。

美化表单——自定义checkbox和radio样式

如果你对本站比较观注的话,应该很清楚,前面就有这方面的介绍。因为大家都知道表单中的部分元素如果单单使用CSS是没办法完成的,所以最近花全力在学习这方面的制作。在本站有关于这样制作有好几个教程了,比如说:

让你的CSS更尽完美的技巧

CSS要学会并不是一件难事,但要在一个大项目中写好CSS和管理好CSS还是有一定的难度的。不过并不可怕,如果你遵循一定的方法,还是很容易写出一个较好的CSS,也能很好的管理好你的CSS样式。下面搜集了几个这方面的技巧,希望能帮助大家写出一个更好的CSS样式。

美化表单——自定义单选按钮和复选按钮

大家都知道,在Web的Form中美化是最头痛的,尤其是表单中的“input[type=checkbox]”、“input[type="radio"]”、“input[type=file]”和select这些元素我们单单只使用CSS是无法匹配设计图的,像背景颜色或者背景图片,甚至说margin和padding等等在各浏览器下都没法实现一致的效果,具体大家可以看看这里所展示的页面效果。为了解决这样的问题,我们只有另选其他的途径。使用CSS和js配合,使用他们实现各浏览器的统一样式。

玩转CSS3的颜色

前面我们整了一个有关于CSS3的颜色属性的教程《CSS3 RGBA》,在这个教程中主要介绍了CSS3的RGBA属性的使用。传统上,我们给CSS设置颜色一般都是十六进制和rgb格式,比如“#abcdef”,而使用相对应的RGB应该就是“brg(171,205,239)”。

CSS3的到来,在CSS样式中,我们增加了一些其他的颜色控制方式,比如:HSL(H:色调,S:饱和度,L:亮度)和透明度apacity。不幸的是,现在CSS3的这些属性只有Firefox3+,Opera10+,Chrome1.0+和Safari3+支持,而在IE6-8是不支持这些属性,但Internet Explorer 9开始支持这些属性。

自定义表单——美化你的文件载入框

表单的制作常常给我们带来无比的烦恼,比如说表单中的“input[type="radio"]、input[type="checkbox"]、select和input[type="file"]”之类,我们都无法直接通过样式来达到设计的设计要求,如果为了实现设计的设计的优美效果,我们必须通过CSS和js来实现。前面我们在《自定义表单——jQuery制作个性化Checkbox》一文中一起学习了通过jQuery和CSS3来美化表单中的“input[type="radio"]”和“input[type="checkbox"]”。

11个让你代码整洁的原则

写Web页面就像我们建设房子一样,地基牢固,房子才不会倒。同样的,我们制作Web页面也一样,一个良好的HTML结构是制作一个美丽的网站的开始,同样的,良好的CSS只存在同样良好的HTML中,所以一个干净的,语义的HTML的优点很多,那么平时制作中,我们做到了这一点吗?我们一起来看一张图片:

上图展示了两段代码,我想大家都只会喜欢第一种,我们先不说其语义,至少他的结构让我们看上去清爽,而第二种呢?一看就是糟糕的代码的代码,让人讨厌的代码。那么要怎么样才能写出一个好的代码,整洁的代码呢?下面我们就从以下十二个方面一起来学习,只要大家以后在写代码的时候能坚持下面的十二个原则,保准 你的代码质量能上去,而且你写的代码会人见人爱。

一、DOCTYPE的声明

如果我们想做好一件事情,首先要知道我们有哪些权利去做,就如“DOCTYPE”的声明,我们没有必要去讨论是否使用HTML4.01或者XHTML1.0或者说现在的HTML5都提供了严格版本或者过渡版本,这些都能很好的支持我们写的代码:

CSS布局——左定宽度右自适应宽度并且等高布局

今天有位朋友一早从妙味课堂转来一个有关于CSS布局的面试题,需要解决,花了点时间写了几个DEMO,放上来与大家分享受。那么我们在看DEMO之前一起先来看看这个面试题的具体要求吧:

  1. 左侧固定宽,右侧自适应屏幕宽;
  2. 左右两列,等高布局;
  3. 左右两列要求有最小高度,例如:200px;(当内容超出200时,会自动以等高的方式增高)
  4. 要求不用JS或CSS行为实现;

仔细分析试题要求,要达到效果其实也并不是太难,只是给人感觉像有点蛋疼的问题一样。但是你仔细看后你会觉得不是那么回事:

十个CSS小技巧

最近一直在整理一些CSS的知识,稍加整理放上来与大家分享,希望对有需要的朋友有所帮助,别的不说,感兴趣的就接着往下看吧:

一、默认边框植

通常我们写一个元素的border属性会这样的写:

		border: border-width border-style border-color;
	

例如“border:3px solid #000;”我们将元素的边框值设置为3px的黑色实线边框效果,然而这里唯一需要的值是“border-style”,因此,你要是这样写边框样式将会没有任何效果:

		.elm {border: 3px red;}
	

此时浏览器将“border-style”解析成“none”。如果你这样设置又是一个不同的效果:

		.elm {border: solid;}
	

此时元素的边框是实线效果,粗线将是其默认值。但是,什么是其默认值呢?边框border-width的默认值是“medium(大约等于3px~4px)”;而其默认颜色border-color将和字体颜色是一样的。

页面

返回顶部