notice

为了避免广告骚扰,论坛开启邀请码注册,您可以加入QQ群:4517434来获得邀请码,谢谢。

《CSS属性、浏览器兼容与网页布局》勘误及下载

2012年10月9日 | 分类: CSS, CSS应用, Web前端技术 | 标签: , ,

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

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

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

阅读全文…

2010年3月16日 | 分类: CSS, CSS应用, Web前端技术 | 标签: , , ,

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

图1 两端对齐的版式

阅读全文…

2010年1月11日 | 分类: Web前端技术, 别具光芒 | 标签: ,

从开始到结束,宛若梦幻。

这句话不是我说的,而是当2002年tom文学频道被解散的时候,乌鸦同学写给文学频道的朋友们的结束语。(不过那篇文,最后没能正式发出来。)
那是互联网的冬天,很多站死去了。
现在,4CSS这个小小的站,由于cn域名的问题,有可能也要面对结束的命运。
阅读全文…

2010年1月5日 | 分类: (X)HTML, Web前端技术 | 标签:

firefox 的附加组件功能很强大。以下是我安装的网页制作常用到的工具,有了工具集,以后再重装系统或者ff,就简单多了。

https://addons.mozilla.org/zh-CN/firefox/collection/tools4webdeveloper/

2009年12月24日 | 分类: 网页设计, 设计基础 | 标签: ,

《写给大家看的设计书》读书笔记

《写给大家看的设计书》是一本普及性的设计入门书籍,它非常适合非设计专业的人员来阅读,书中没有晦涩难懂的术语,读起来很舒畅,所举的例子也很简单明了,能够非常贴切地说明了问题。

有些东西,对于我这样自学的人来说,虽然也知道应用,可是总是一个经验使然,而对原理不甚了解。看过此书,算是对自己这许多年摸索的一个总结。

这本书不是为网页设计而做,而是针对平面设计,但是设计理念是相通的,基本知识是不会过时的。

在此我摘录出书中的要点,作为笔记,如果条件允许,还是买一本来看,书里的插图很值得一看。价钱也不算贵,原价39,人邮翻译出版。

阅读全文…

2009年11月27日 | 分类: 图片制作, 网页设计 | 标签: ,

众所周知,IE 6只支持单通道的PNG图片(即只有透明/不透明2种状态,gif图片的透明单通道透明),因此如果需要使用alpha透明的png图片时,往往需要对IE6设定滤镜来完成。
本文这里介绍一个单通道的PNG-8(gif也可)图片实现半透明效果的方法,不是万能的,在某些情况下适用。

先看下效果图:

设计效果图

a:hover有半透明的背景色,对于大部分浏览器,都可以使用alpha透明的png-32图片来完成此效果,而对于IE6,可以采取一个变通的办法,使用一种栅格的方法来模拟半透明。

阅读全文…

2009年11月10日 | 分类: CSS, CSS基础, CSS应用, Web前端技术 | 标签:

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

在此讨论第一题:

图1

图1:题目1需求

此题主要的难点在于:

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

阅读全文…

2009年10月20日 | 分类: CSS, CSS应用, Web前端技术 | 标签: , ,

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

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

就是说实现下面的效果:

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

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

■■■■■■■■■■
■■■■■■

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

阅读全文…

2009年9月14日 | 分类: CSS, CSS基础, Web前端技术 | 标签: , ,

6. E:last-child

匹配所有E元素,当此元素是其父元素的最后一个子元素时。例如:

li:last-child { …… }

和:first-child类似,这两个伪类在设定菜单样式(特别是导航菜单)的时候很有用,很多情况下,菜单的第1项和最后1项会和其他项稍有不同,例如:(查看示例文件)

阅读全文…