分类目录归档:网站前端开发注意事项

css画三角形边长宽高原理分析

css绘制三角形,已经有很多大神写过很详细的用法,在此不做赘述;http://www.jb51.net/article/42513.htm

最近一个项目需要用到精确到1px的三角形,但是查遍所有教程都只有用法,而没有对边长和宽高进行具体原理分析,导致此处修改数次耽误了挺长时间才做到让设计师同事满意;所以在项目结束后,通过chrome dev tool 详细分析下边长和宽高原理;

先看一段代码:

<div style="width:0;height:0;border-left:60px solid transparent;border-right:40px solid transparent;border-top:50px solid #ddd;"></div>

下面是这个代码在浏览器中的样子:

通过chrome dev tool 查看,这个三角形的宽是100px,高是50px;

由此可知:

此三角形的高(此处所说的高以中学课本定义为准:即顶点到底边的垂线)为有颜色的border(即#ddd)的border-width;

而底边被垂线分成两部分,分别是对应的border的border-width;

底边边长是两个transparent的border的border-width相加之和;

新闻内容页图片水平居中css

为新闻内容页切图的时候,经常会遇到图片居中的问题;

因为要考虑到用户从后台输入的时候不会用class;

解决方案一:点击后台编辑框的居中按钮,生成的代码如下

<div align="center">居中测试</div>

分析:好处是比较符合网站编辑的用户体验;缺点是如果图片多的话,这样点来点去也挺头疼的;

解决方案二:把img设置为块级元素

.news_con img{width:auto;display:block;margin:0 auto;}

Masonry-瀑布流插件(可带jquery也可不带)

前言:很早就想把案例列表用瀑布流布局表现出来,可是试了很多js插件,不是不兼容就是太影响网速;然后发现masonry是最常用的被推荐最多的瀑布流插件,满怀欣喜的试用一番,却仍然出现图片太大而无法加载完全以致影响布局;又经过各种学习和调试,终于搞定了;现在把masonry文档翻译为简体中文版;

大图片在小屏幕居中(兼容ie678)

随着宽带网速的提升,越来越多网站开始用大图片(指超过1024宽),这些大图片在小屏幕中要想居中,最便捷的方法是用background;但是有些地方必须要用img;下面是兼容代码:

html:

<div><img alt="" src="1.jpg" /></div>

css:

div{
width=100%;
position:relative;
left:auto;
top:auto;
}
img{
display:block;
width:1920px;
height:800px;
position:absolute;
left:50%;
top:0;
margin-left:-960px;
}

拓展:img可换为div或别的块状元素,但必须有固定的宽高;

纯CSS实现网页内容悬浮

近来,有很多朋友和客户问到网页内容悬浮的问题,有时是QQ客服(如本站左侧),有时是广告图片;下面我总结两种最常用的方式实现网页内容悬浮(可直接复制使用):

第一种、使用expression(推荐)

.qq {
	top: 200px;
	position: fixed;
	left: 0px;
	_position: absolute;
	_top:expression(eval(document.documentElement.scrollTop + 200));
	z-index: 10000;
}

使用方法:top:200px,意思是离顶部200px,可修改;left:0px,意思是离左边0px,可修改像素值,如果是挨着右边,改为 right:0px;

第二种:html和body(不推荐,容易和别的地方冲突)

.qq{
top:200px;
position:fixed;
left:0px;
z-index:10000;
_position:absolute;
}
html{
height:100%;
overflow:hidden;
}
body{
height:100%;
overflow:auto;
}

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