CSS3+背景图片:评星

很久没写技术帖了。写起来太费神,深了不是浅了不是的。

前几天写了一个给课程评定星级的效果,主要使用了CSS3新增伪类[:checked]和CSS2的相邻选择器。

会用此两种选择器的,请直接看实例,很容易。

…阅读全文…

浮动元素的两端对齐

当我们使用float来使元素并排显示的时候,可以使用margin来控制元素之间的距离,而在很多版式里(例如产品图片的列表),需要浮动的元素达到两端对齐的效果,如图1所示。

图1 两端对齐的版式

图1 两端对齐的版式

单纯使用float:left或者float:right,而不添加额外的class区分元素的位置,似乎是无法实现靠左/右的效果。
…阅读全文…

[样@式作业 2009年10月16日]文字列表中日期跟随标题

2009年10月16日作业第一题:日期跟随新闻标题

在此讨论第一题:

图1

图1:题目1需求

此题主要的难点在于:

  1. 标题文字部分不能直接设定width,因为当文字少的时候,需要日期跟随其后;
  2. 标题文字过多时,需要截断多余文字,但是同时不能出现半个中文字的情况。

…阅读全文…

[样@式作业 2009年10月12日]如何实现内容块不换行

2009年10月12日作业:如何实现内容块不换行?
此题原形出自csdn.net

想做到让最外边的 div.wrap 内部不论有多少div(宽/高为100px,1px的边框)都不换行,并且撑开div.wrap,请问有什么办法?

就是说实现下面的效果:

■■■■■■■■■■■■■■■■………..

不要以下,这样就不行了:

■■■■■■■■■■

■■■■■■

要求兼容性:ie6/7/8,ff3,opera 9+

…阅读全文…

CSS双线边框研究

昨天有人在群里问图1的边框效果是否能实现。

input边框效果图

边框效果图

有人给出答案,需要嵌套一个元素实现。我当时粗粗写了个测试页面,但是时间太晚了,也没有细弄,今天把想法写出来。

CSS的边框border属性经常会用到,但是,其参数值到底有几个?未必大家都知道。

…阅读全文…

[js+css]图片自动等比例缩小且垂直居中[v20071208]

前言:这是篇老文,忽然发现在换blog系统的时候,竟然没有转过来,现在补上。

图片自动等比例缩小,其实如果不考虑ie6的话,用css就可以实现,设定img的max-width和max-height,而img标签内不设定widht和height即可。

ie7已经支持max-width和max-height,这是为数不多的好消息之一。但是对于ie6及以前的版本,就只能用js来设置了。

…阅读全文…

标示当前位置的导航

利用CSS在导航条上标示当前所在频道的技术,已经有很长时间了,在很多CSS的书中都介绍过,不过还是总被问到,因此写一个简单的示例来讲解一下。

其实原理非常简单:

…阅读全文…