html中插入flash的最佳解决方案-swfobject.js

新项目中,客户说html中插入flash用object的话,对SEO会有不利影响,所以决定采用swfobject.js;

swfobject.js下载:swfobject

本次项目中的使用:

<div id="logo">logo</div>
<script type="text/javascript">
   var so = new SWFObject("images/logo.swf", "logoswf", "200", "100%", "7", "#336699");
   so.addParam("quality", "low");
   so.addParam("wmode", "transparent");
   so.addParam("salign", "t");
   so.write("logo");
</script>

其中"images/logo.swf"为swf的路径,"logoswf"为最终生成的embed的id,"200"、"100%"分别为宽高;so.write("logo"),此处logo为要放swf容器的id,要和前面div的id对应

ie6兼容png透明-DD_belatedPNG.js

最近做的一个游戏网站,需要用到很多透明png24,用了DD_belatedPNG.js处理了ie6兼容;使用过程中遇到了一个小插曲,从网上下载了几个DD_belatedPNG.js,都不能用,焦急之余想到项目完成后一定要把好用的发布成“以后直接能用的”,就能提高效率;

DD_belatedPNG.js下载:DD_belatedPNG

备注:此版本加入了调用代码,所以你使用时,无论是img还是背景png,只需要做一件事:为需要png透明的标签添加:class="pngFix"

兼容ie67及标准浏览器的背景透明内容不透明css整理

今天打开W3Cfuns,看到一篇文章:背景透明内容不透明的css生成器(链接:http://www.w3cfuns.com/blog-4447-5397764.html),不觉欣喜若狂;曾记得以往多次遇到此种情况,都要建两个div,然后用opacity和filter解决,总感觉像是夏天贴膏药;

马上试用了一下,兼容性很好,于是想要存到硬盘中方便以后随时用,但是这是一个用js写的css生成器,不方便存放,无奈只能一点点分析css组成;

又百度了下,查到小虾对于该css的详细分析(链接:http://www.xiaoboy.com/detail/1341545064.html),小虾对该css背景透明的兼容做了具体解释,在此我不详细赘述;

以下是整理好的两个版本css(可直接用):

W3Cfuns版:

#content{
background:rgba(51,51,51,0.5);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f333333,endColorstr=#7f333333);
zoom:1;
}
:root #content{
filter:none\9;
}

备注:其中 rgb(51,51,51)、#333333  是背景色的十进制、十六进制表达;

小虾版:html:

<!--[if lt IE 9]>
<style>
#content{
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#77000000, endColorstr=#77000000);
}
</style>
<![endif]-->

css:

#content{
background:rgba(0,0,0,0.5);
}

怎样为一个原生系统(非套用CMS)做前端切图[适用大站切图]

做前端切图有三四年了,大大小小的网站也切了几百个了,有企业站、门户站、电商站,但基本都是和CMS对接,后台的界面直接用CMS默认的,所以即使门户站再复杂,也能比较快速容易的解决;

最近接到一个订单,是做一个原生网站系统,所有页面都是从无到有,所有页面都要设计、切图然后做php;开始时把他当作平常的企业站来切,后来出现各种问题,经过几周的无数次删删改改,总算可以看得过去了;下面说一下自己的经验与教训;

一、提前规划很重要:由于网站的策划一般是由策划人员和设计师协商确定了,而切图人员除了一堆psd外,对要做的网站系统一无所知;有几点需要特别注意:哪些页面有共同元素(有可能前端一套header、footer,后端有另外一套,而注册登录又有第三套header、footer),有哪些是同类页面,样式完全一样,只是内容变了而已(由于审题不清,我的psd文件还是按照时间而不是名称排序的,所以有很多完全同样式的页面重新写了很多次,浪费时间精力还给php程序员带来麻烦);该系统中,设计师设计了几套分页导航,但和php程序员沟通了知道只会用一种,做成组件后全站调用,然后我就顿感轻松了一些;

二、CSS命名组合方式:常用的有驼峰法(mainContainer)、下划线(main_container)、横线间隔(main-container),选择一种最喜欢的方式一直用下去,千万不要混用;如果php程序员累死都看不懂,他们就会把界面弄乱之后全部让你重新调整;

三、CSS命名规则:该系统设计psd,前端有15个页面,后台有60个页面,即使把某些样式相同的去掉,还有将近70个页面都要用不同的css来装饰;所以要有一定的规则(千万不要像我,最开始用英文,英文不够用了,开始用英文缩写,又不够了,中英文混拼,一周后再去看连我都不知道是什么意思,php程序员看到绝对会抓狂);由于在此项目中吃了太多苦头,过后便潜心研究猪八戒网、淘宝网、京东的css命名,发现这些大站在css方面最重要的就是“有相似的元素尽量复用,然后为每一个拥有此样式的元素添加多个class”;

四、左、右浮动及清除浮动:为每一个需要左浮动的元素添加class="lt",为每一个需要右浮动的元素添加class="rt",为每一个左、右浮动的父级元素添加清除浮动class="cf",对应css:

.lt{
float:left;
}
.rt{
float:right;
}
.cf:before, .cf:after {  
content:"";  
display:table;  
}  
.cf:after {  
clear:both;  
}  
.cf {  
zoom:1;  
}

五、表单提交:php程序员要求form表单中的提交用input type="submit",但是这个不兼容,需要一套兼容代码;

.sub{
border:none;
display:inline-block;
font-size:0;
line-height:0;
*font-size:0;
*line-height:normal;
*padding-left:999px;
*overflow:hidden;
cursor:pointer;
}

以前写企业站时,经常为每一个submit命名一个class,列表页就叫listSub,内容页叫conSub,首页叫indexSub,然后为每一个的css里加上上面一段代码;可是这个就行不通了,基本上有60多个页面有表单,大部分提交按钮的背景都不一样;命名到第十个左右的时候,发现再也无法做到不重名了;我的解决方案从这时开始为每个页面一个总ID,然后所有页面的提交按钮都给一个class="sub",添加css背景时,用该页面ID和.sub识别;这样不但可以缓解命名危机,也为css减轻了不少负担;

六、小图标:小于50px*50px的小图标是设计师为了修饰网站特意设计的,如果用img太容易被盗取(新版百度分享、花瓣等可以直接分享网页内所有img),所以一般用背景完成;而i这个html标签不是太常用,毕竟现在很少有人用斜体,用来做小图标正好(此处学自新浪),下面是i做为图标的兼容代码

display:inline-block;
vertical-align:middle;
margin:0 5px;

每个图标只要添加背景和宽高即可使用了;

七、图片和表单兼容:经常用line-height做兼容的切图人员,会对img与文字不兼容、input与文字不兼容、display=inline-block的元素与文字不兼容的情况印象特别深,其实W3C在设计css时是有这个考虑的,当img、input、inline-block设置为vertical-align=middle时,line-height就可以正常使用了(float=left除外,浮动元素尽量别用line-height,让整行高度尽量小,然后用margin或padding隔开整行间距);兼容代码:

*{
padding:0;
margin:0;
}
ol,ul,li{
list-style:none;
}
img{
border:none;
vertical-align:middle;
}
h1,h2,h3,h4,h5,h6{
font-size:12px;
font-weight:normal;
}
input,select{
vertical-align:middle;
}
table {
border-collapse: collapse;
border-spacing: 0;
empty-cells:show;
}

感悟:html和css最大的特点“能复用尽量复用”;不要迷信各种权威重置css,把项目中可能用到的或正在用到的复用代码提取出来,就是最适合你的重置css

wordpress从本地上传到服务器完整流程

经常用wordpress在本地测试之后再上传到服务器,但总是忘掉某个流程,而导致上线之后还存在许多问题;在此总结上传流程中的所有注意事项,前事不忘,后事之师;

一、本地导出数据库:在浏览器地址栏输入“ http://localhost/phpmyadmin ”,点击左侧对应的数据库名称;然后是顶部导航中的“操作”,此页面有一个“整理”,在此选择你用的编码(我用的是utf8_unicode_ci),点击“执行”;接下来点击顶部导航中的“导出”,直接点击“执行”;

二、数据库上传到服务器:各个主机商的控制面板不太一样,我简要说下我用的万网主机;输入账号密码进入数据库时,一定要选择对应的编码(我还选utf8,如果选错,后边上传时会报错);然后点击“导入”,选择刚才本地导出的.sql;

三、数据库修改:点击数据库左侧的wp-options,再点击顶部导航“浏览”,在下边表格中寻找localhost(有两个),改成现在的网址

三、上传主题及附加:把themes文件夹下的主题上传;然后和themes文件夹并列的plugins文件夹和uploads文件夹也要上传(此处易忘);

四、配置wp-config.php:wordpress安装后,根文件夹下会有一个wp-config.php,把里边本地的值改为服务器的;如果虚拟主机原来是空的,这次整个wordpress一块上传的,必须要配置wp-config.php,(在主机上安装wordpress完成后上传主题数据库的也建议配置一下,本人曾遇到过没配置wp-config.php导致无法安装插件的问题)

五、修改图片链接:所有页面和文章的图片都还是localhost,所以要挨个修改成现在的网址;

贝漾美容

设计效果图:贝漾美容联系我们产品详细页产品展示页新闻列表

 

案例简介:深圳贝漾美容健康管理是业界领先的医学美容、整形外科用品及化妆品供应商。作为一家有全球背景的企业,我们在世界各地都能及提供令人满意的医疗美容产品及服务。

前端切图-首页:http://www.chongyuan.cc/case/szbeyond/index.html

前端切图-联系我们:http://www.chongyuan.cc/case/szbeyond/call.html

前端切图-产品详情:http://www.chongyuan.cc/case/szbeyond/detail.html

前端切图-资讯中心:http://www.chongyuan.cc/case/szbeyond/info.html

前端切图-产品介绍:http://www.chongyuan.cc/case/szbeyond/product.html

上线后网址:http://www.szbeyond.net/

wordpress添加链接的完整流程(包括function、插件和前端展示)

情景描述:客户想要添加一组热门点击链接,需要自己编辑;[你遇到的也许是友情链接等]

解决方案:第一种,function.php;第二种,link manager插件;

function.php:在function.php总加入以下代码(如果你使用的主题中没有function.php,就在主题下新建一个,和header.php并列,系统会默认读取)

add_filter( 'pre_option_link_manager_enabled', '__return_true' );

link manager 插件:可在后台“安装插件”输入“link manager”搜索,或直接下载(http://wordpress.org/plugins/link-manager/  )上传到plugin文件夹下;然后启用插件

前端展示:

wp_list_bookmarks('between=&title_li=&categorize=0&limit=-1&category=&orderby=rand&before= &after=,  &show_private=0&hide_invisible=0');

关于wp_list_bookmarks函数的更多参数调整,可点击http://rxshc.com/archives/214.html