以下是个人对多人协作完成前端制作的一点初浅的想法,仅作记录,日后继续完善。
多人共同完成一个页面的制作。
例如3个人同时开发一个页面:
首先编写一个总页面,引入四个CSS,一个是初始化CSS,剩下三个是三个人的专属CSS。
页面预先给三个人分配好模块,然后include引入三个人的专属页面,此时就可以进行同步开发了。
以下是个人对多人协作完成前端制作的一点初浅的想法,仅作记录,日后继续完善。
多人共同完成一个页面的制作。
例如3个人同时开发一个页面:
首先编写一个总页面,引入四个CSS,一个是初始化CSS,剩下三个是三个人的专属CSS。
页面预先给三个人分配好模块,然后include引入三个人的专属页面,此时就可以进行同步开发了。
演示主页:http://www.imf7.com/code/tab/
博客介绍:http://www.imf7.com/archives/154
选项卡解说:
1、支持一个页面多次引用;
2、一次引用实现多次切换;
3、点击/滑过等切换方式自定义;
4、自动播放+鼠标动作切换;
5、自动播放时鼠标移向内容区域暂停播放;
6、切换完成后回调函数。
函数引用说明:
slide({handle:elems, content:elems, current:”current”, mode:”click”, delay:5000, fn:function(){…} });
引用基本格式 slide({…}); 中间的“…”所代表的就是参数内容。
参数说明:
handle:表示选项卡分组名称的节点数组
content:表示与分组名称对应的内容的节点数组
current:表示当前分组名称的样式名称
mode:表示切换方式,支持“click/mouseover/…”等鼠标事件
delay:表示自动播放的间隔时间,有值则自动播放,单位毫秒
fn:表示切换完成一次后的回调函数
完整版下载TAB.rar
完整JS下载tab.full.rar
压缩JS下载tab.min.rar
演示主页:http://www.imf7.com/code/tab/
博客介绍:http://www.imf7.com/archives/154
模块的透明设置:filter:alpha(opacity=80); opacity:0.8;
PNG的透明设置:直接在制作PNF-24模式的图时留有透明度就可以
问题:
今天在处理F7Dialog2.0项目时发现一个问题,那就是在IE中设置了一个模块的透明度后如果该模块内有插入或者设置背景的图片中带有半透明的PNG-24图片时此时的半透明就会渲染错误,造成图片很难看的后果。
原因:
经过研究判断,是filter属性的问题,至于其中的参数和浏览器的渲染模式我搞不清楚,这个有点深,IE专属filter的参数我也只用过alpha的opacity这个,其他的也没有兴趣搞清楚。
虽然现在表格用的很少了,但是某些写东西还是需要用到的。
今天在做F7Dialog2.0项目的时候遇到了要获取表格单元格的CSS宽高。自认为获取宽高很简单,直接写了代码获取,后来那部分代码写完后测试时才发现chrome执行结果不同,很是郁闷啊。
找了足足有半个小时原因,终于找到了,在chrome中获取单元格CSS高度时出现了不同。
这个问题在网络上曾经谈论过无数次了,今天我又拿出来讲。主要是警戒喜欢使用ID的朋友。
正常情况下的HTML+CSS是不需要使用ID的,除非与JS挂钩时才使用,也就是说我们在编码过程中除非有JS要用到,就尽量不要使用ID。
尤其要注意的是在非特殊情况下编写CSS是千万不要使用 #Name 来定义CSS。 为什么这么说呢,在前几天因为自己的一个疏忽,使用了ID去定义CSS,还得我们的开发在套用页面时出现了排版错误的BUG,足足花了3天才找到问题,可真是害惨了,开发的MM都要哭了。。。。作为工作多年的我来说,犯这样的错误真是无脸面对开发啊!
getElementsByClassName() 是一个老的方法了,将其优化整理后给大家提供。
代码如下:
// 批量获取class命名节点
function getElementsByClassName(className, tag, parent){
var parent = parent || document;
var tag = tag||"*";
if(!(parent = F$(parent))){return false;}
// 查找所有匹配标签
var allTags = (tag == "*" && parent.all) ? parent.all : F$$(tag, parent);
var classElements = [];
// 创建一个正则表达是来判断className的正确性
className = className.replace(/\-/g, "\\-");
var regex = new RegExp("(^|\\s)" + className + "(\\s|$)");
var elenemt;
// 检查每个元素
for(var i=0; i<allTags.length; i++){
elem = allTags[i];
if(regex.test(elem.className)){
classElements.push(elem);
}
}
return classElements;
};
今天在蓝色论坛上看到这个,特转过来给需要的朋友分享:
[HTML && CSS]
1.Doctype? 严格模式与混杂模式-如何触发这两种模式,区分它们有何意义?
2:行内元素有哪些?块级元素有哪些?CSS的盒模型?
3.CSS引入的方式有哪些? link和@import的区别是?
4.CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先级高?
5:前端页面有哪三层构成,分别是什么?作用是什么?
6:css的基本语句构成是?
8:你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?经常遇到的浏览器的兼容性有哪些?怎么会出现?解决方法是什么?
9.如何居中一个浮动元素?
10.有没有关注HTML5和CSS3?如有请简单说一些您对它们的了解情况!
11.你怎么来实现下面这个设计图,主要讲述思路 (效果图省略)
13:如果让你来制作一个访问量很高的大型网站,你会如何来管理所有CSS文件、JS与图片?
14:你对前端界面工程师这个职位是怎么样理解的?它的前景会怎么样?
Read the rest of this entry »
你曾经被CSS的优先级困扰么?为什么执行这条而不执行那条呢,很奇怪是么?
其实了解优先级后一切一目了然。
今天有点时间,就来整理一下CSS属性优先级,希望能对想要了解这个的朋友给予一些帮助。
普通情况下『只有外部CSS样式时』优先级是按照CSS选择符的长度来决定的,长度越长,权重就越高『也就是执行选择符最长的那条语句』
还有一种情况则不是这样,那就是出现 !important ,它表示重要的,先执行的。 这是一种特殊的情况,它的权重是最大的。
另外,一种过时的就是内联样式,也就是写在页面标签内的样式,这中样式也有普通和important之分,其权重分别和外联[外部样式]一样。
注:内联样式权重高于外部样式。
本期交流会,北京报名人数达到了141人,但是实在没有办法满足所有人的参会需求。
我们会尽快做好分会场的分流工作,争取能让每一个人参与到其中。
本次交流的“会后总结、视频、图片”,会陆续发布在Web标准化交流会官方网站,届时可以重温一下会议过程。
希望大家继续关注交流会,带更多的PPT、更多的想法、更多的问题来讨论,共同提高我们的从业水平,共同提高前端开发的能力。
第一次参加这个交流会,感觉还是很不错的,里面不光有很多牛人,还能学到很多不同层面的知识,也能让你更了解其他各门户站点的工作情况等等信息,受益颇多!建议有时间的同学都去参加,报名地址http://www.w3ctech.com 呵呵,不是打广告,就是觉得不错才让参加的。
看看参会照片吧: