Pivot Code

头：header 内容：content/container 尾：footer 导航：nav 侧栏：sidebar 栏目：column 页面外围控制整体布局宽度：wrapper 左右中：left right center 登录条：loginbar 标志：logo 广告：banner 页面主体：main 热点：hot 新闻：news 下载：download 子导航：subnav 菜单：menu 子菜单：submenu 搜索：search 友情链接：friendlink 页脚：footer 版权：copyright 滚动：scroll 内容：content 标签页：tab 文章列表：list 提示信息：msg 小技巧：tips 栏目标题：title 加入：joinus 指南：guild 服务：service 注册：regsiter 状态态：status 投票：vote 合作伙伴：partner

CSS Attribute ：text-shadow 近期在自己的项目中用到了这个属性，以前经常见到在精彩网页设计中以文字搭配阴影呈现的立体文字效果彰明较著，自己也曾有过跃跃欲试的冲动，后来在网上查了下它的兼容性，结果对IE所有版本浏览器都不兼容，由于IE浏览器的市场份额还是占多数，因此对于这个属性只是简单了解，没有深入研究并使用。 而现在，在项目中需要用到这个属性，那么就不得不为此细究一下了。 text-shadow属性在Firefox 3.5+，Safari 1.1+/chrome 2.0+和opera 9.5下被支持，对于IE只能期盼下一个版本了（对于IE浏览器的阴影效果微软提供了官方的解决方案，请继续往下看）。 此属性基本写法： text-shadow:[颜色 x轴 y轴 模糊半径] x,y轴控制阴影的偏移位置 颜色代表阴影的颜色 模糊半径可以控制阴影的模糊与不模糊 另外某些浏览器支持多层阴影，而对于多层阴影的表现方式是用逗号隔开在加一组属性，例如： text-shadow:[颜色 x轴 y轴 模糊半径],[颜色 x轴 y轴 模糊半径] (注：safari4.0后才支持多层阴影) 示例： text-shadow:black 2px 2px 0 DEMO 那么IE浏览器该怎么办呢？毕竟多数人还在使用IE。 IE浏览器对于好多css的新特性支持都不是很好，尤其是IE6（警告大家IE6不要再用了，否则你的电脑会成为病毒的温床）那么有个什么好的方案解决IE对于这个属性的兼容性问题呢？尤其是IE6！ 对于这个疑问，微软提出了官方的解决方案——利用shadow滤镜来实现： filter: dropshadow(OffX=1, OffY=1, Color=’#f5f5f5′, Positive=’true’) OffX对应text-shadow属性的X轴 OffY对应text-shadow属性的y轴 Color对应text-shadow属性的颜色 Positive设置为true就可以了 欲了解更多关于IE的这个滤镜，请查看官网介绍： Dropshadow ok，现在可以放心的使用文字阴影来实现你想要的效果了。

最近做的一个项目经常会用到块级元素（block）浮动定位（float）的方式做的一个类似于BBS文章列表多行多列的布局方案。 我大概看了一下网上对于此种布局的布局办法，发现大多都是用表格来做的。连豆瓣、discuz的论坛也都是表格布局。 但是我对表格的布局有种敬而远之的畏惧感，一个是它的代码量很大，虽然用DW里添加表格的工具很快的添加，但是对于它的自适应元素的问题，我始终难以控制的行云流水。因此，我还是决定用css来做。 我选择用ul元素做列表框架，li元素做列表行，span元素做各列的容器的布局方式实现。 【css部分】 @charset "utf-8"; /* CSS Document */ ul li{margin:0; padding:0; list-style:none; font-size:12px; color:#333}/*初始化ul,li元素，让我们更方便使用*/ ul li{width:800px; height:35px; line-height:35px; border-bottom:1px dashed #ccc}/*定义高35像素的li元素，宽是布局的宽，还定义了一个虚线的下边框*/ ul li span{display:block; float:left; height:35px; line-height:35px;}/*定义span元素为块级元素，左浮动，高为li元素的高*/   /*分别定义需要的列span元素的宽度*/ ul li span.listOne{width:300px;} ul li span.listTwo{width:200px;} ul li span.listThr{width:100px;} ul li span.listFou{width:100px;} ul li span.listFiv{width:100px;} 【html部分】             <ul> [...]

即使是CSS高手，也难免在书写CSS代码的时候出一些小错误，或者说，任何一种代码都是如此。小错误却往往造成大问题，浪费很多无辜的时间来调试和排错。查看下面这份CSS网页布局中易犯的10个小错误，努力的修正你可能会犯的错误，加速你的前端开发效率。 1. 检查HTML元素是否有拼写错误、是否忘记结束标记 即使是老手也经常会弄错div的嵌套关系。可以用dreamweaver的验证功能检查一下有无错误。 2. 检查CSS是否书写正确 检查一下有无拼写错误、是否忘记结尾的 } 等。可以利用CleanCSS来检查 CSS的拼写错误。CleanCSS本是为CSS减肥的工具，但也能检查出拼写错误。 3. 用删除法确定错误发生的位置 如果错误影响了整体布局，则可以逐个删除div块，直到删除某个div块后显示恢复正常，即可确定错误发生的位置。 4. 利用border属性确定出错元素的布局特性 使用float属性布局一不小心就会出错。这时为元素添加border属性确定元素边界，错误原因即水落石出。 5. float元素的父元素不能指定clear属性 MacIE下如果对float的元素的父元素使用clear属性，周围的float元素布局就会混乱。这是MacIE的著名的bug，倘若不知道就会走弯路。 6. float元素务必指定width属性 很多浏览器在显示未指定width的float元素时会有bug。所以不管float元素的内容如何，一定要为其指定width属性。 另外指定元素时尽量使用em而不是px做单位。 7. float元素不能指定margin和padding等属性 IE在显示指定了margin和padding的float元素时有bug。因此不要对float元素指定margin和padding属性（可以在float元素内部嵌套一个div来设置margin和padding）。也可以使用hack方法为IE指定特别的值。 8. float元素的宽度之和要小于100% 如果float元素的宽度之和正好是100%，某些古老的浏览器将不能正常显示。因此请保证宽度之和小于99%。 9. 是否重设了默认的样式？ 某些属性如margin、padding等，不同浏览器会有不同的解释。因此最好在开发前首先将全体的margin、padding设置为0、列表样式设置为none等。 10. 是否忘记了写DTD？ 如果无论怎样调整不同浏览器显示结果还是不一样，那么可以检查一下页面开头是不是忘了写下DTD声明。 注: 本文来源于网络，出处不明。

最近应合作人要求，需要一个‘分享到SNS’功能的代码。后经几番周折，百度了，也谷歌了，偌大的网络竟然没有找到一个合适的，写的话不知道需要多少的光阴，没办法，只能自己来抠了，这也是网络存在的好处吧。‘ChinaDaily-中国日报’网上有一个很好的效果，而且搜罗的SNS网站也很全，就抠它的了。 找到效果的页面，查看源代码！呃，框架的，根本找不到对应代码，无奈之下想起谷歌可以查看单个元素的代码，试之，可行！新的问题出现了，谷歌的代码查看器不能复制代码，照抄吧，我一层层的打开那个分享功能的代码，晕，哭了，不知道做这个功能的美工是何居心,竟然每个元素都嵌套了N（N>10）层代码，抄吧，我就不信了！ 收工的那一刻，我哭了。为胜利的喜悦哭了。 测试吧，又哭了，为没能达到预期效果哭了。 怎么办，我回去重新看了看代码，不是很多，看来只能撇去效果要功能自己做一个好了！ 于是，我把关键代码抠下来，自己做了一个没有动态效果的导航列表，插入对应JS代码，测试，我哭了，这次为成功而哭了！ 现在把这个功能代码奉上，我哭了，为我的无私精神哭了。开玩笑哈！ Enjoy it…… 下载：分享到sns网站源代码

昨天刚建好的站点，然后忙于给自己的博客找一套合适的衣服。 最近在网上散步的时候，见到一个很不错的网站效果，于是就收藏了起来，今天打开一看，恰好也是wordpress的博客，呵呵值得庆幸！wordpress是开源的，那么这个模板便也共享咯！ 页脚处找到了该风格的设计网站，打开，小费气力的找到了此风格，然后兴致勃勃的上传。过后一看效果，不尽人意，远不如我收藏网站的效果精彩，一个是动态效果没有，再一个它的宽度是固定的，不像我看到的那个那样自动适应屏幕宽度。 即使该风格的蓝色配色风格很经典，但我更喜欢的那个网页边栏的动态效果和顶上的云标签效果。若色彩能让人感到受到情感，而效果展现给人的便是活力了。小费气力，终于在原收藏的博客里找到了这个主题，原来这个主题是由博主做过改进的！呵呵，找到了下载文件——download！ 文件并不大，很快就下完了，我已是迫不及待，进入后台立即开始上传。可惜美梦总是不长，上传失败，会提示错误！后来再看收藏博客时，才发现原来他的WP版本和我的不一样！他的是2.7，很失落，我感觉我可能要和这个皮肤说再见了！难不成让我降级WP的版本？或许是个办法，不过可惜的是我耗费在先前的时间！ 我还是下载了2.7，谁叫我喜欢这个风格，继续吧！ 我本机已架设了php服务器，我把2.7版挂在自己电脑,现在本机测试,不能再往复先前的失误了，我这网速很慢，上传版本的全部文件的时间对我来说是奢侈的！一切就绪，数据库还是老的，后来证实WP的兼容性是超赞的,我登陆到前台，默认皮肤等一切正常，然后我进行后台登陆，WP只提示数据库需要更新，然后只需点更新便可，2.8的数据库就可以为2.7版所用了！ 进入后台才发现，2.8版的确有很大的提升，原来2.7版是没有皮肤上传功能的，而且编辑器也没有代码的分色显示功能！看过2.7的后台后，大打折扣了我的信心，它后台没有上传皮肤功能，这该如何是好？我足在外观所提供的3个功能按钮上点了N遍，我坚信，上传皮肤是存在的，只是我没发现而已！ 我还是认输了，我确认没有后，开始找其他方案。在‘外观’菜单的‘主题’项中的主题列表，原来它都提示了皮肤的具体路径，我按那个路径把这个风格放到指定目录，然后再打开‘主题’项。皇天不负有心人，它终于出现了，闪念中，我已经点下了应用！ 回到首页看效果，没有问题，哈哈，我成功了！但是有个问题，是不是2.8直接在后台上传也能用呢？说做就做，我把2.8文件替换2.7，然后皮肤放进指定目录，127.0.0.1回车，除了进入后台数据库提示升级外，没别的问题！wp的上下兼容性真的是值得超赞的，呵呵！好了，这样就搞定了！开始上传2.8到服务器！ 一切就绪，只是貌似少了几个效果——顶上的云标签。继续挖坟，在收藏博客的文章里，原来它需要调用一个插件–Simple Tags 1.5.7，把这个插件装上后，那个效果便出来了，但是新的问题也出来了，我的标题太长，因此标签的位置不合适！于是我到页面编辑里找它的代码。 在header.php里只能找到<div id=”tag-cloud” ></div>这行代码，在40行。没办法只能在这个里面做文章了，我遇到问题时，只想以最简单的方式解决它，来吧！我给它设置了外补丁<div id=”tag-cloud” style=”margin:0px 0 10px 100px;”></div>改成了这样的代码，ok！回到前台，没有问题，位置动了。在我的博客里还有个新问题，就是标题字母如果有占4格的单词它便会和说明重叠，我又找到了说明的标签对，在45行<p class=”Desc” ><?php bloginfo(‘description’); ?></p>我在class后面定义了外补丁向上5像素style=”margin-top:5px，这样以上问题也得到了解决。如此，我暂时遇到的问题都搞定了，我喜欢的东西都出来了，呵呵！接下来是换logo了，logo是div css调用，logo的图像路径在样式表中，打开样式表（style.css）56行找到background:url(./images/a.png)这行代码，把括号中的图像路径换成自己的便搞定。还有其他的一些图标陆续找到替换就可以了，至此我所遇到的问题就这些。为此风格的设计者Design Disease和动态效果设计者cbm致敬！ 另附此风格下载和介绍（转自cbm的博客） 主要新特性： 自适应1024*768以上的任何分辨率，最大测试支持1920×1200 动画效果滑动侧边栏 随机显示标签云 放大模式的Feed项 显示滔滔最近一条签名 支持Widgets模式 内建cache模式，选择性静态化（建议配置好后再开启） 其他的小细节 兼容多种浏览器下的表现： IE 6.0 或更高 Safari 3.0 FireFox 2.0 或更高 Chrome 1.0 Opera 8.0 或更高 内部支持的插件（带 * 需要改动部分代码，以协调CSS样式）： Gravatars2 2.7.0 Paged [...]

Today,I finally have a own web site. 值得庆祝的一天，我有了自己的网站并使用独立域名mingsenliu.com