特别实用灵活多选项卡示例(原生javascript)

星期日 2015年8月2日 风羽 前端 javascript  DIV CSS   0人
特别实用灵活多选项卡示例(原生javascript)

实用灵活多选项卡示例,一段简洁的原生javascript,只需要对应DIV的id即可灵活多用,同一个页面无需要写重复加js,非常的实用!如果项目里只需要选项卡效果,不管多少个这小段代码就搞定!不用加载jquery等冗余插件才是最优的方案。

先来看JS代码:

function nTabs(thisObj,Num){    
	if(thisObj.className == "active")return;    
		var tabObj = thisObj.parentNode.id;    
		var tabList = document.getElementById(tabObj).getElementsByTagName("li");    
		for(i=0; i <tabList.length; i++)    
		{    
			if (i == Num)    
			{    
			thisObj.className = "active";    
			document.getElementById(tabObj+"_Content"+i).style.display = "block";    
			}else{    
		tabList[i].className = "normal";    
		document.getElementById(tabObj+"_Content"+i).style.display = "none";    
		}    
	}    
}

浏览器重置CSS代码

星期一 2015年6月8日 风羽 前端 DIV CSS  资源文档   0人
浏览器重置CSS代码
/* reset */
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;word-wrap:break-word}
body,html,input{color:#000000;font:12px/1.5 Tahoma,Arial,"\5B8B\4F53",Sans-serif;}
img,fieldset,abbr,acronym{border:0;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;}
ol,ul,li{list-style:none;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:700;}
input,button,textarea,select{font-size:inherit;*font-size:100%;font-family:inherit;}
address,cite,dfn,em,code,var,caption,th,i{font-style:normal;font-weight:normal;}
input,label,th{vertical-align:middle;}
pre{white-space: pre-wrap; /* css-3 */white-space: -moz-pre-wrap; /* Mozilla, since 1999 */white-space: -pre-wrap; /* Opera 4-6 */white-space: -o-pre-wrap; /* Opera 7 */	word-wrap: break-word; /* Internet Explorer 5.5+ */}
/*通用样式*/
.ib,.ib-a a{display:inline-block;zoom:1;*display:inline;}
.f12{font-size: 12px !important;}.f14{font-size: 14px !important;}.f16{font-size: 16px !important;}.f18{font-size:18px}.f20{font-size:20px}
.fb{ font-weight:bold}.fn{ font-weight:normal}
.text-c{text-align: center}.text-l{text-align: left}.text-r{text-align: right}
.lf{float: left}.rt{float: right}.pr{ position:relative}.pa{ position:absolute}
.fl,.lf{float:left !important;}.fr,.rt{float:right !important;}
.cl{ clear:both; height:0; margin:0; padding:0; font-size: 1px; line-height: 0px; }
.z{_zoom:1;}

新手收藏:顶级经典常用的CSS属性

星期一 2015年6月8日 风羽 前端 DIV CSS  资源文档   0人
新手收藏:顶级经典常用的CSS属性

去掉a链接虚线

/*去掉a链接虚线*/
a{outline:none;}
a:active{star:expression(this.onFocus=this.blur());}/*IE*/
a:focus{outline:none;}/*FF*/

CSS屏蔽Webkit浏览器input高亮

/*CSS屏蔽Webkit浏览器input高亮*/
input {outline:none;}
textarea {outline:none;}

培训机构:荒川学苑

星期五 2015年5月29日 风羽 设计 作品  DIV CSS   0人
培训机构:荒川学苑

这类小站做得很多的,用ASP开源程序,作为个人的优势就是服务好价格合适,刚开始知道软件公司报价觉得真的很高,但要真开软件公司时有才知道大多还是相对合理的。

做这类小项目最重要的是建立信任,总的来说一定要预付款到位才开始做设计,尾款到了交代码,沟通好的大多也不需要合同或者协议,有一大半是直接付全款的,这类小站点全款也就差不多软件公司的五分之一,都爽快的。

做这个网站有个小插曲,当时这个日本人觉得要签合同,分2次付款。但我到罗湖面谈后沟通后,他直接全款打过来了,朋友推荐的没见面前信任没那么容易建立的。

项目:深圳市清溢和衡管理咨询有限公司

星期四 2015年5月28日 风羽 设计 作品  DIV CSS   0人
项目:深圳市清溢和衡管理咨询有限公司

这是一个独立完成的项目站点,从需求分析开始就很详细的进行了长时间的沟通,然后到签合同协议,收到预付款后准备素材做初稿风格设计,风格的确定:要求一屏内展示原站点所有的内容,且要考虑当时的小分辨率笔记本。最终确定了这样的风格首页,后来上线后效果还不错,无论是技术上代码上的SEO优化,还是整体的进站咨询情况,都比旧版有很大的提升。

(过了这么多年,现在站点也关了,拿出来展示到博客没问题了)

DIV+CSS 命名规范

星期三 2015年3月18日 风羽 前端 DIV CSS   0人
DIV+CSS 命名规范

 常用的CSS命名规则:

头:header  内容:content/container  尾:footer  导航:nav  侧栏:sidebar

栏目:column  页面外围控制整体布局宽度:wrapper  左右中:left right center

登录条:loginbar  标志:logo  广告:banner  页面主体:main  热点:hot

新闻:news  下载:download  子导航:subnav  菜单:menu

分享文档:Div+CSS布局入门教程

星期四 2015年3月5日 风羽 前端 DIV CSS   0人
分享文档:Div+CSS布局入门教程

 这是刚入门DIV+CSS标准W3C布局的入门文档,很有价值的文档一直保存着。示例是一个经典的Blog页面,把它理解并做出来也就算是入门了。以下是详细内容:

在网页制作中,有许多的术语,例如:CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。

所有的设计第一步就是构思,构思好了,一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来,以下是我构思好的界面布局图。