Punk ProjeKt

简介:看了左边的图就应该很清楚我们需要用CSS实现怎样的效果了。实现原理是: 利用first-letter实现对段落首字的赋予”first-letter” class，从而实现对段落首字的格外控制；而通过first-child来规避每个段落的首字母都被赋予”first-letter” class，使整个文章排版看起来更newspaper。

当然，按照惯例，此文对IE6及其以下版本无效，幸运的是IE7应该是支持的:D。另外，不必担心中文问题，中文字符也能判断出首字母。

first-letter看单词就很清楚，就是用来判断首字母的。使用方法是e:first-letter [e stands for Element,such as P,EM,span..and so on]，譬如说需要为P tag加上first-letter的定义，只需要在CSS里写入p:first-letter，然后定义这个首字母的属性就行了。让我们实际操作以下:

p:first-letter{
text-transform:uppercase; /*如果首字母是英文，则转换为大写*/
font:24px Impact,”黑体”;
color:#000;
float:left; /*这个float很重要，不然就不能实现下沉后被其他文字包围的效果了*/
margin-right:2px;
}

得到的结果是每个P，即每个段落的首字都会放大，下沉。显然我们并不希望每个段落首字母都放大，我们得再加一个first-child的定义，所谓first-child就是用来判断父元素下的第一个子元素用的。我们修改下代码为:

p:first-child:first-letter{ /*先判断是否为父元素第一个元素，再赋予first-letter的class*/
text-transform:uppercase;
font:24px Impact,”黑体”;
color:#000;
float:left;
margin-right:2px;
}

这样就只会出现首段首字下沉效果了，当然怎么让整个效果看起来更newspaper那就看你怎么用CSS精雕细琢了。这是一个示例网页。

需要补充的是，这个方法并不完美，如果文章开头是H3或者其他的tag而不是p的话，那么first-child的判断结果不会是P而是H3了，那么整个效果将会失效。我还没找到一个好的办法避免这个问题，谁有好的方法的话…来给我上一课吧 :D

其他不相关的 :)

强烈推荐一款网页编写IDE，Aptana

按照官方的说法是Aptana is a robust, JavaScript-focused IDE for building dynamic web applications. 。我看了几个视频，写js确实很顺手，而且特别提到了ajax! 当然，我对js基本是一窍不通，拿它来写html,css的也非常顺手，无论是自动补充还是代码排版绝不亚于dreamweaver和topstyle两款软件，没有任何中文问题! 当然最值得称道的是它的多平台支持，Mac,Linux用户也都有相应的版本，这下总算解决了linux下没有一个好的网页编写工具困扰了(甭提gedit啊!gedit和dreamweaver差远了!)。因为支持多平台，毫无疑问的是基于java编写的，所以启动稍微慢点(其实和dreamweaver一个档次)，好在使用过程中还是非常流畅的! 不过Aptana暂时还没有实现php,asp..的高亮显示，不过developers已经着手实现这一must have feature了，对于一个才发展到0.2.4版的开源免费软件你还能要求的更多吗!

另外，想做一个小小调查。虽然本站开始有点RSS Reader了，不过留言情况似乎都是我们自己人小打小闹。并不是强迫大家留言，只是想知道，大家究竟是因为本站的哪部分内容订阅本站的。音乐? 歌词翻译? 电脑技术? 电影? F1? 还是其他的。了解这些我们才能更好的为大家提供想看的内容，扬长避短! 如果您是本站的RSS Reader的话，留下您的意见或者处女评吧:D。或者在本站的留言板发表您的高见也行的。