搞过了很多前端，用过不少的表格优化代码，今天整理的这段代码可以说是最实用的一段，喜欢的可以拿去用。本文代码可以实现效果如下： 如果你喜欢上面的样式，就可以动手复制下面的代码了。 <!– Javascript goes in the document HEAD –> <script type=”text/javascript”> function altRows(id){ if(document.getElementsByTagName){ var table = document.getElementById(id); var rows = table.getE […]
本来没打算买书的，因为前段时间买的两本，还没看完，其中一本《高效能人士的七个习惯》已经分享。但今天从微博上看到有网友推荐，就去了解了一下，于是乎就手痒了，在亚马逊买了一册，保证此书不会让我失望！建议准备学习HTML5、CSS、JS等语言的朋友关注一下。 新书介绍： 《html5秘籍》共包括四个部分，共12 章。第一部分介绍了html5 的发展历程，利用html5 重新构造网页，以及html5 的语义元素。第二部分介绍了html5 对传统web 表单的翻新、html5 中的音频与视频、canvas 绘图技术、css3 等内容。第三部分介绍了数据存储、离线应用、与web 服务器通信，以及html5与javascript 技术的强大结合等 […]
菠萝对兼容性绝对是个外行，今天才开始正式学习这方面的知识，把今天学到的判断IE6/IE7/IE8/Firefox浏览器兼容性的方法整理到这，方便以后学习查阅之便。 1.区别IE和非IE浏览器CSS HACK代码： #divcss5{ background:blue; /*非IE 背景藍色*/ background:red \9; /*IE6、IE7、IE8背景紅色*/ } 2.区别IE6,IE7,IE8,FF CSS HACK 【区别符号】：「\9」、「*」、「_」 【示例】： #divcss5{ background:blue; /*Firefox 背景变蓝色*/ background:red \9; /*IE8 背景变红色*/ […]
1.960 Grid System 960网格系统是一个通过提供通常使用的尺寸简化网站开发流程的努力的结果，基于960像素的页面宽度。它有两种类型，12和16列，他们可以独立使用或是协同使用。 2.WYMstyle CSS Framework 这个项目的目的是提供一组经过良好测试的模块化的CSS文件，能够用于网站的快速设计。WYMstyle是一组CSS文件，你可以很容易的组合这些文件来快速的创建你的网站的布局。通过提供可靠的、经过良好测试的CSS模块，WYMstyle 力求让每个网站防止枯燥的跨浏览器兼容性测试。 3.YAML CSS Framework Dirk Jesse的强大的(X)HTML/CSS框架为许多的简 […]
无论我们是在制作网站还是博客，我们都会使用导航菜单来切换网页内容，本文与大家分享52个干净的基于CSS标签的导航代码。 jQuery Coda-Slider Nice sleek tabs that slides through each tab. [demo] Perspective Tabs Simple mootools plug-in that allows for a large number of tabs to fit into a small space. [demo] jQuery idTabs It makes adding tabs into a website super simple. But it can […]
今天折腾了一下博客的评论CSS，其实WordPress最复杂的就是这个评论样式CSS了，得弄清楚这个CSS类才可以设计出自己喜欢的样式： ol.commentlist {} ol.commentlist li {} ol.commentlist li.alt {} ol.commentlist li.bypostauthor {} ol.commentlist li.byuser {} ol.commentlist li.comment-author-admin {} ol.commentlist li.comment {} ol.commentlist li.comment div.comment-author {} ol.com […]
因为折腾主题和设计网页一直需要与字体打交道，字体选得不好，整个页面看起来都会蛋疼，把一些漂亮页面的CSS字体样式收集整理于此，大家可以试着选择自己喜欢的。 本内容会一直更新： font-family: ‘Century Gothic’,”Microsoft YaHei”, Trebuchet MS, Arial, Verdana, Tahoma, “DejaVu Sans”, “Liberation sans”, “Bitstream Vera Sans”, sans-serif;background-color:#F0F0F0; font-family:”Lucida Sans Unicode”,Microsoft YaHei, […]
现在你已经掌握熟练地设计PSD平面作品，但也许你在PSD转CSS/XHTML文件上还有些麻烦，那就好好研究以下25个有用的PSD转CSS/XHTML教程，学好这些教程，你就是高手了！ Build a Sleek Portfolio Site from Scratch In this tutorial you are going to learn how to take PSD file and build it with some nice clean HTML and CSS. Encoding a Photoshop Mockup into XHTML & CSS In this tutorial you will le […]
一.每个psd源图都有三种配色方案，要求按照同样规格分别切图，且三种配色切出的同一区域图片命名必需相同； 二.按照配色方案建立三个以颜色命名的文件夹，每个文件夹里面放置“配色方案”制作成网页所需的资料； 三.每种配色方案文件夹中包含的必需内容：images，css，headers，buttons文件夹和二个html文件以及两张大小网页效果图；所有命名按照样例进行，自定义内容可以自由命名。 四.网页布局，所有网页都由以下几部分组成： 页头（logo、headers） 1级导航条（buttons） 2级导航条（buttons） 页面内容区（ 内容区用于显示英文网页） 页脚（底部菜单、copyright） 根据psd文件决定制作的区域，源 […]
在中国，很多前端开发初学者都会把xHTML+CSS页面制作说成DIV+CSS，甚至很多人都还不知道xHTML+CSS是 什么意思，只知道盲目的追求DIV+CSS，但在国外，是没有DIV+CSS这个概念的，很明显如果单从字面上去理解，DIV+CSS的网页就要全都是 div，很明显是无法达到语义化标准的。在国外xHTML+CSS（DIV+CSS）也可以叫做PSD2XHTML。 以下是43个PSD to XHTML及CSS教程： 1.将 PSD 源文件转换 XHTML 教程 2.叫你如何创建水平滚动网站布局 3.从PSD到xHTML,按部就班教你创建DIV+CSS布局 4.从零开始创建CSS布局 5.从零开始教您创建一个华丽高档的网页-x […]