月度存档: 5 月 2019

风变编程服务使用协议

《风变编程服务使用协议》

第一条【协议充分了解】
请您(以下亦称“用户”)仔细阅读本协议全部条款,并确认您已完全了解本协议之规定。未成年人应当在监护人陪同和指导下阅读本协议,并在使用本协议项下服务前取得监护人的同意。请您审慎阅读并选择接受或不接受本协议。除非您接受本协议所有条款,否则您无权注册、登录或使用本协议所涉服务。您的注册、登录、使用等行为将视为对本协议的接受,并同意接受本协议各项条款的约束,本协议将构成您与风变科技(深圳)有限公司及其关联方(以下简称“风变编程”)之间关于您使用风变编程开发及运营的风变编程网站和软件应用(以下简称“‘风变编程’产品”)有约束力的法律文件。
本协议内容包括本协议正文及“风变编程”通过“风变编程”产品已经发布的或将来可能发布的各类规则。所有规则为本协议不可分割的组成部分,与协议正文具有同等法律效力。

第二条【用户充分授权】
您确认您依照中国法律法规及您所在地之法律及您自愿或应当接收其管辖之法律,有权签署并同意接受本协议的约束。如果您代表您的雇主或单位,您确认并保证您已获得签署本协议的充分授权。

第三条 【协议变更修改】
本协议(包括任何规则)如果变更,“风变编程”将尽可能提前在“风变编程”产品中发布通知。但您应了解并同意,“风变编程”有可能未经事先通知,而修改或变更本协议的全部或部分内容,您也应随时关注本协议是否有修改或变更之情形。如果本协议修改或变更,而您不能接受修改或变更后的内容,您应立即停止使用“风变编程”相关产品和服务。如果您继续使用“风变编程”相关产品和服务,则表明您完全接受并愿意遵守修改或变更后的本协议。无论您停止使用或继续使用“风变编程”相关产品和服务,您都承诺不因本协议修改或变更而向“风变编程”要求赔偿或补偿或提出其他权利主张。

第四条 【提供服务的方式】
“风变编程”是网络服务提供者,可针对不同传播渠道用户为其提供内容服务,前述传播渠道包括但不限于:
1) 通过“风变编程”的产品及服务;
2)“风变编程”提供的可以使用的其他传播渠道。 除免费服务外,“风变编程”可能提供部分收费服务。您可以通过付费方式购买收费服务,具体方式为:通过网上银行或其他“风变编程”产品内提供的其他付费途径支付一定数额的人民币,从而获得收费服务使用权限。对于收费服务,“风变编程”会在您使用之前给予明确的提示,只有根据提示确认同意按照前述支付方式支付费用并完成了支付行为,才能使用该等收费服务。支付行为的完成以银行或第三方支付平台生成“支付已完成”的确认通知为准。您应了解“风变编程”相关产品和服务可能对该等服务(含收费服务)进行更改、更新或升级,您同意不因“风变编程”更改、更新或升级其服务而向“风变编程”要求赔偿或补偿或提出其他权利主张。

第五条【善意合法使用】
您同意,遵守法律及本协议规定,秉承善意使用“风变编程”相关产品及服务,且保证:
1)不会利用“风变编程”相关产品及服务进行非法活动、或进行可能侵犯他人权利或损害他人利益的活动;不会以非法方式获取或利用“风变编程”产品及服务其他用户的信息。
2)不会以技术方式攻击或破坏或改变“风变编程”产品及服务的部分或全部、或干扰其运行;不会以非法方式获取或使用“风变编程”产品及服务的任何软件、代码、内容或其他技术或商业信息;不会对“风变编程”产品及服务运行的任何程序进行反向工程、反向编译、反向汇编或改写。
3)不会未经许可使用“风变编程”的网站名称、公司名称、商标、商业标识、网页版式或内容、或其他由“风变编程”享有知识产权或权利的信息或资料;不会侵犯“风变编程”的商标权、著作权、专利权、技术秘密、其他知识产权或其他合法权利或权益。不会以任何方式贬损“风变编程”的商业声誉。
4)不会利用“风变编程”进行其他违背公序良俗的活动。您使用“风变编程”产品及服务的记录,可能被保存作为对您不利的证据。“风变编程”也可能将您违反法律或侵犯第三方权利或权益的记录报告给行政主管部门、司法机关。
您理解并保证您在“风变编程”产品中上传、发布或传输的信息、内容(包括您的账户名称等信息)应当遵守宪法、法律和行政法规,不得含有以下内容,否则,“风变编程”将立即停止传输该信息,采取消除等处置措施,防止信息扩散,保存有关记录,并向有关主管部门报告:
1)反对宪法确定的基本原则的;
2)危害国家统一、主权和领土完整的;
3)泄露国家秘密、危害国家安全或者损害国家荣誉和利益的;
4)煽动民族仇恨、民族歧视,破坏民族团结,或者侵害民族风俗、习惯的;
5)宣扬邪教、迷信的;
6)扰乱社会秩序,破坏社会稳定的;
7)诱导未成年人违法犯罪和渲染暴力、色情、赌博、恐怖活动的;
8)侮辱或者诽谤他人,侵害公民个人名誉、隐私、知识产权和其他合法权益的;
9)危害社会公德,损害民族优秀文化传统的;
10)有关法律、行政法规和国家规定禁止的其他内容。
如果您上传、发布或传输的信息、内容含有以上违反法律法规的信息或内容,或者侵犯任何第三方的合法权益,您将直接承担以上导致的一切不利后果。如因此给“风变编程”造成不利后果的,您应负责消除影响,并且赔偿“风变编程”因此导致的一切损失,包括且不限于财产损害赔偿、名誉损害赔偿、律师费、交通费等因维权而产生的合理费用。

第六条 【注册用户账号】
您需要在“风变编程”产品中注册一个账号,并按照“风变编程”产品公示的要求进行账号设置,才可以使用该账号登录并使用“风变编程”相关产品和服务。您必须是拥有完全民事行为能力的民事主体,提供的信息必须真实合法,遵守法律法规及平台的管理规定;未成年人注册及使用“风变编程”产品须取得监护人的同意。如您违反上述注册规定,因此导致的法律后果、损失、责任将由您自行承担。您可依照“风变编程”产品公示的规则修改您的账号密码,但不可修改账号。 您注册账号时,应按照“风变编程”产品公示的提示及要求填写或提供资料、信息,并确保用户身份及信息的真实性、正确性及完整性;如果资料发生变化,您应及时更改。 您同意并承诺:
1)不故意冒用他人信息为您注册帐号;
2)不未经他人合法授权以他人名义注册帐号;
3)不使用色情、暴力或侮辱、诽谤他人等违反公序良俗的词语注册帐号。
如您违反前述规定,“风变编程”有权随时拒绝您使用该账号,或者限制您使用,或者注销该账号。

第七条 【用户账号使用】
在您完成账号注册后,“风变编程”将向您提供账号及初始登录方式,此后,您应自行保管及维持密码及账号的安全。您应自行使用该账号,并对该账号项下发生的一切行为及活动负完全的责任。您应了解,在账号和密码匹配时,“风变编程”无法对非法或未经您授权使用您账号及密码的行为作出甄别,因此,“风变编程”对任何使用您账号和密码登录并使用“风变编程”产品及服务的行为不承担任何责任。您同意并承诺:

1)当您的账号或密码遭到未获授权的使用,或者发生其他任何安全问题时,您会立即有效通知到“风变编程”;
2)当您每次上网或使用其他服务完毕后,会将有关账号等安全退出。“风变编程”有权根据自己的判定,在怀疑账号被不当使用时,拒绝账号使用或限制账号使用或注销该账号。除有使用期限的付费服务以外,如您连续180天未以账号登录“风变编程”产品,则“风变编程”有权根据自己的判定,注销该账号且无需事先向您发送通知。
您知悉并同意,您仅得依据本协议享有对“风变编程”产品账户及相关功能、服务的使用权,您仅能为自身学习、技术交流等非营利性目的使用账户及功能、服务;您不得出于任何非法或未经“风变编程”授权的目的使用账户或“风变编程”产品提供的功能、服务,包括但不限于,不得恶意注册账号(无论是否以营利为目的),不得利用账户或“风变编程”产品提供的功能、服务从事营利活动,不得以营利或非营利目的以任何方式(包括但不限于转让、借用、出租、共享等)向任何第三方提供账户使用权或“风变编程”产品提供的功能、服务或其任何部分,不得利用账户或“风变编程”产品提供的功能、服务从事任何违法或侵犯第三方知识产权或其他合法权益的活动,否则“风变编程”有权追究您的责任,且由此产生的一切责任均由您承担。

第八条 【发表言论】
用户在使用“风变编程”注册账号后,应遵守法律法规、社会主义制度、国家利益、公民合法权益、公共秩序、社会道德风尚和信息真实七条底线,不得在使用“风变编程”产品及服务时发表、传播、存储含有以下任何内容的信息:
1)违反宪法或法律法规规定的;
2)危害国家安全,泄露国家秘密,颠覆国家政权,破坏国家统一的;
3)损害国家荣誉和利益的,损害公共利益的;
4)煽动民族仇恨、民族歧视,破坏民族团结的;
5)破坏国家宗教政策,重扬邪教和封建迷信的;
6)散布谣言,扰乱社会秩序,破坏社会稳定的;
7)散布淫秽、色情、赌博、暴力、凶杀、恐怖或者教唆犯罪的;
8)侮辱或者诽谤他人,侵害他人合法权益的;
9)含有法律、行政法规禁止的其他内容的;
10)含有“风变编程”认为不适合在“风变编程”产品及服务中发表的其他内容的。

第九条 【个人信息及隐私条款】
“风变编程”收集、存储、使用、处理用户个人信息将遵守相关法律法规,收集、使用个人信息将遵循合法、正当、必要的原则。“风变编程”可能需要搜集能识别用户身份的个人信息以便可以在必要时联系用户,或为用户提供更好的使用体验。“个人信息”包括但不限于用户的姓名、性别、年龄、出生日期、联系电话、身份证号、地址、受教育情况、公司情况、所属行业、兴趣爱好、所处位置信息、个人说明、手机软硬件信息、手机识别码等。“风变编程”承诺,不以非法方式披露您依照“风变编程”规定的方式标明应予保密的用户个人信息。
您了解并同意,“风变编程”可依照法律或司法、行政机关的强制性命令披露您的个人信息且无需事先向您发出通知。您了解并同意,当您在“风变编程”产品中购买第三方商品或服务时,您的信息将被提供给该等商品或服务的提供方,以便其向您提供产品或服务,您与该等第三方商品或服务提供方之间的隐私保护事项由您与该等第三方商品或服务提供方自行解决,“风变编程”不因向该等第三方商品或服务提供方提供您的个人信息而向您承担任何责任。
您了解并同意,除为提供或改进“风变编程”产品及服务合理所需以外,“风变编程”在下述情形下可利用您的个人信息:
1)在紧急情况下,为维护用户及公众的权益。
2)为维护“风变编程”的著作权、商标权、专利权及其他任何合法权利或权益。
3)在进行促销或抽奖时,“风变编程”可能会与赞助商共享用户的个人信息,在这些情况下“风变编程”会在发送用户信息之前进行提示,并且用户可以通过明确表示不参与活动而终止传送过程。
4)为获取第三方数据而将用户信息与第三方数据匹配。
5)将用户数据用于统计,以便向未来的合作伙伴、广告商及其他第三方以及为了其他合法目的而描述“风变编程”的服务。

第十条 【知识产权】
“风变编程”对“风变编程”相关产品和服务及“风变编程”所使用的软件所包含的受知识产权法或其他法律保护的对象享有相应的权利。“风变编程”产品及服务的整体内容及其任何部分(包括但不仅限于网站设计、程序、代码、设计图样以及其他图样、产品及服务名称)的版权、商标权及其他知识产权归“风变编程”享有,任何人不得使用、复制或用作其他用途。经由“风变编程”产品及服务传送的文字、图片、音频、视频及其他内容,受到著作权法、商标法、专利法或其他法律的保护;未经相关权利人书面授权许可,您不得自行或许可第三方进行使用、修改、出租、售卖、传播、衍生其他作品或进行任何其他使用或处分。 “风变编程”对其专有内容、原创内容和其他通过授权取得的内容享有知识产权或相应权利。未经“风变编程”书面许可,任何单位和个人不得私自转载、传播和提供“风变编程”提供的服务或者实施任何其他侵犯“风变编程”知识产权的行为,否则,“风变编程”将依法追究相关法律责任。 为了促进知识的分享和传播,您同意将在“风变编程”产品上发表的全部内容(包括但不仅限于留言、评论和笔记),授予“风变编程”免费的、不可撤销的、非独家使用许可权,“风变编程”有权将该内容用于“风变编程”各种形态的产品和服务上,包括但不限于“风变编程”已经或未来发布的应用或其他互联网产品。您在“风变编程”产品上传或发表的内容,应保证您为著作权人或已取得合法授权,并且该内容不会侵犯任何第三方的合法权益。如果第三方提出关于著作权的异议,“风变编程”有权根据实际情况删除相关的内容,且有权追究用户的法律责任,给“风变编程”或任何第三方造成损失的,用户应负责全额赔偿。 “风变编程”有权对您发布的内容进行审核,有权根据相关证据结合《侵权责任法》、《信息网络传播权保护条例》等法律法规及“风变编程”公开的原则对侵权信息进行处理。

第十一条 【链接使用】
为方便您使用,“风变编程”可能会提供第三方国际互联网网站或资源链接。您应了解,除非另有声明,“风变编程”无法对第三方网站服务进行控制。您因下载或传播或使用或依赖上述网站或资源所生的损失或损害,应由您与第三方网站或相关责任方解决或处理,“风变编程”不承担任何责任。

第十二条 【有限责任及免责条款】
“风变编程”按照“风变编程”产品及服务的“现状”向用户提供产品及服务,“风变编程”不对“风变编程”产品及/或其功能、服务作出任何其他明示或暗示的保证。 对经由“风变编程”产品取得的任何产品、服务(含收费服务)或其他材料可能不符合您的期望;基于不同用户的个人特征和喜好,“风变编程”产品中可能存在一些让您不快、厌恶或难以接受的内容;“风变编程”不因前述情形向您承担任何责任。 用户在“风变编程”上进行的任何行为均是用户的个人行为,由于信息的海量性,“风变编程”无法对信息或内容的权属、合法性、合规性、真实性、科学性、完整权、有效性等进行审查。因用户行为或用户上传、存储、发布、传播的任何信息、内容等引发的任何争议、责任,或由此产生的任何直接、间接、偶然、特殊的损害,均由用户自行承担法律责任,“风变编程”不承担任何责任;如用户行为对“风变编程”造成损失或不良影响,“风变编程”保留追究相关用户法律责任的权利。 “风变编程”对用户所发布信息的删除或储存失败不承担任何法律责任。
不论在何种情况下,“风变编程”均不对由于互联网连接故障,电力故障,罢工,劳动争议,暴乱,起义,骚乱,火灾,洪水,风暴,爆炸,不可抗力,战争,政府行为,国际、国内法院的命令,黑客攻击,互联网病毒,网络运营商技术调整,政府临时管制或任何其他“风变编程”不能合理控制的原因而造成的“风变编程”产品不能访问、产品及服务中断、信息及数据的延误、停滞或错误,不能提供或延迟提供服务而承担责任。 不论是否可以预见,不论是源于何种形式的行为或不作为,“风变编程”不对因任何原因造成的任何特别的、间接的、惩罚性的、突发性的或其他任何损害(包括但不限于利润或其他可得利益的损失)承担责任。除“风变编程”因故意或重大过失损害用户的利益以外,任何情况下,“风变编程”向用户承担的赔偿、补偿或其他任何责任的限额将不超过该等用户就相关服务向“风变编程”支付的服务费用的数额。 基于互联网的开放性属性,用户知悉用户将信息、内容等上传到互联网上,可能会被其他组织或个人复制、转载、修改或进行其他使用(包括用于非法用途),用户必须充分意识到此类风险的存在。用户同意使用“风变编程”产品过程中所存在的上述风险将完全由用户自行承担,“风变编程”对此不承担任何责任。

第十三条 【“风变编程”的商业活动】
您了解并接受,“风变编程”为维护其运营所经营,可能进行下述商业活动:
1) 通过电子邮件、客户端、网页或其他合法方式向用户发送商品促销或其他相关商业信息。
2) 通过增值服务系统或其他方式向用户发送的相关服务信息或其他信息,其他信息包括但不限于通知信息、宣传信息、广告信息等。如您不同意收取此类信息,您可以选择退订相关信息。

第十四条 【非商业使用】
您同意,仅以非商业目的使用“风变编程”产品及服务;不对“风变编程”产品及服务的任何部分或全部进行商业性质利用、复制、拷贝、出售、调查、广告,或将“风变编程”产品及服务用于其他任何商业目的或商业性质的活动;但“风变编程”与您另行签订有协议或“风变编程”另行指定可供您使用的特定商业服务除外。

第十五条 【运行维护】
“风变编程”尽可能保证“风变编程”产品及服务的稳定运行。您应理解并同意,因系统维护、升级、调整,第三方原因如通讯设备故障、计算机病毒或黑客攻击、技术问题、网络、电脑故障、系统不稳定性、台风、地震、海啸、洪水、停电、战争、恐怖袭击、法律、政策、政府管制及其他各种不可抗力或“风变编程”无法合理控制的原因而引发的以下情况及因此导致的一切损失,“风变编程”不承担责任:
1)“风变编程”产品或服务无法使用或中断使用或无法完全适合用户的使用要求。
2)“风变编程”产品或服务受到干扰,无法及时、安全、可靠运行,或出现任何错误。
3)经由“风变编程”产品或服务取得的任何产品、服务(含收费服务)或其他材料不符合您的期望。
4)用户资料遭到未经授权的使用或修改。
“风变编程“对账号上所有服务将尽力维护其安全性、方便性和适用性,但对非因“风变编程”的故意或重大过失,用户资料遭到未经授权的使用或修改不承担责任。 “风变编程”不对您在本协议项下服务中相关数据的删除或储存失败负责。“风变编程”可以根据实际情况自行决定用户在本服务中数据的最长储存期限,并在服务器上为其分配数据最大存储空间等。如您停止使用“风变编程”产品,或“风变编程”所提供的产品或服务终止或中止,“风变编程”可以从服务器上永久地删除用户的数据。“风变编程”没有义务向用户返还任何数据。

第十六条 【服务终止】
本协议或本协议项下“风变编程”所提供的产品使用及服务(含收费服务)可在下述情形下部分或全部中止或终止:
1) 因法律规定,或“风变编程”服从行政命令或司法判令的要求。
2) 用户违反本协议。
3) “风变编程”认为应予终止的其他情形。
在一般情形下,“风变编程”会提前按照您提供的联系方式以电子邮件或短信或其他电子方式通知您产品使用及服务将中止或终止。 您应了解并同意,在紧急情况或特殊下,“风变编程”可不经通知即中止或终止产品使用及服务。在本协议或本协议项下“风变编程”提供的产品使用及服务(含收费服务)中止或终止时,“风变编程”有权 :
1)拒绝用户登录“风变编程”产品及服务;
2)删除用户信息;
3)删除用户购买的内容。
您同意,如因“风变编程”原因导致付费产品在到期前终止使用,“风变编程”仅需按照相关产品规则向您返还未到期部分对应的价款 ,“风变编程”无需承担其他责任或义务,除上述情形外,“风变编程”无需因本协议或本协议项下“风变编程”所提供的产品使用及服务中止或终止,而向您作出赔偿或补偿或承担任何其他责任。

第十七条 【法律适用】
您在使用“风变编程”产品及服务时,应遵守中华人民共和国法律、及您所在地之法律、及您自愿或应当接收其管辖之法律。本协议的解释及履行应按照中华人民共和国(为本协议之目的,不包括港澳台地区)法律进行。

第十八条 【法律责任】
您应就所上传的内容承担全部法律责任;无论前述责任是因侵犯第三方权利所引起的、或因您违反与第三方或本协议引起的、或因您违反法律引起的;前述责任包括对“风变编程”或第三方所承担的民事责任、或行政机关要求承担的行政责任或刑事责任。 您同意,如因您违反法律规定或本协议规定给“风变编程”造成损失,您将充分赔偿“风变编程”所遭受的损失、包括其直接损失、间接损失、预期利益损失等一切损失。 您确认,如因第三方向您主张权利而导致您承担责任,或您承担行政责任或刑事责任的,“风变编程”无需向您承担任何责任。如您应向“风变编程”承担责任,前述责任不因本协议或本协议项下的服务被终止而免除。 如您在使用“风变编程”产品及服务的过程中发生任何违反法律法规或本协议的行为,“风变编程”有权根据行为过错、性质、后果等采取相应措施,包括但不限于删除相关内容、暂停账户使用、解除本协议、终止产品使用及服务、追索赔偿等,由此造成的一切风险、损失及责任将由您自行承担。

第十九条 【协议构成】
“风变编程”可能不时通过“风变编程”产品发布针对用户的相关协议或规则,该等相关协议或规则作为对本协议条款的补充或修改而成为本协议的一部分。请您及时关注并阅读相关协议或规则。

第二十条 【争议解决】
您和“风变编程”均同意,因本协议解释或执行引起的任何争议,双方应首先友好协商解决。协商不成时,争议将提交“风变编程”所在地法院诉讼解决。 请您再次确认您已全部阅读并充分理解上述协议。 如有任何疑问,可通过客服邮箱【code@forchange.cn】与“风变编程”取得联系。

Bootstrap与移动应用开发读书笔记第二章

bootstrap的12栅格系统

<html>
<link href="bootstrap.min.css" rel="stylesheet">
<style>

.col-md-2{
    background:red;
}

.col-md-10{
    background:green;   
}

.col-md-12{
    background:blue;    
}

.col-md-4{
    background:#990;    
}
.col-md-6{
    background:#960;    
}

</style>
<body>
    <div class="container">

        <div class="row">
        <!--列组合-->
        <div class="col-md-2">test2</div>
        <div class="col-md-10">test2</div>
        </div>

        <div class="row">
        <!--列偏移-->
        <div class="col-md-2 col-md-offset-1">test2</div>
        </div>

        <div class="row">
        <!--列嵌套-->
        <div class="col-md-12">
            <div class="row">
            <div class="col-md-4">test2</div>
            <div class="col-md-6">test10</div>
            </div>
        </div>
        </div>

        <div class="row">
        <!--列排序-->
            <div class="col-md-2 col-md-push-10">test2</div>
            <div class="col-md-10 col-md-pull-2">test10</div>

        </div>

    </div>

</body>
</html>

Bootstrap与移动应用开发读书笔记第一章

弹性布局

<html>
<style>
*{
margin:0px;
padding:0px;
}
.box{
    display:flex;

    /*flex-direction伸缩流方向
    row:从左到右排列
    row-reverse,从右到左排列
    column,从上到下排列
    column-reverse;从下到上排列
    */
    flex-direction:row;

    /*flex-wrap伸缩换行
    nowrap:不换行
    wrap:换行
    wrap-reverse:换行并颠倒行顺序
    */
    flex-wrap:wrap;

    /*justify-content水平对齐方式
    flex-start:左对齐
    flex-end:右对齐
    center:居中对齐
    space-between:水平居中分布,两边不留白
    space-around:水平居中分布,两边留白
    */
    justify-content:center;

    /*align-items纵向对齐方式
    flex-start:顶对齐
    flex-end:底对齐
    center:居中对齐
    baseline:第一行文字基线对齐
    stretch:拉伸对齐
    */
    align-items:stretch;

    /*padding:10px;*/
    border:1px solid #f00;
}
#d1{
    /*flex:1;占比*/
    margin:10px;
    background:red;
}
#d2{
    /*flex:2;*/
    margin:10px;
    background:yellow;
}

#d3{
    margin:10px;
    background:blue;
    color:white;
}

.d4{
    margin:10px;
    background:green;
    color:white;
}
</style>
<body>
<div class="box">
    <div id="d1">
    test-div1
    </div>

    <div id="d2">
    test-div2
    </div>

    <div id="d3">
    test-div3
    </div>

    <div class="d4">
    test-div4
    </div>

    <div class="d4">
    test-div5
    </div>

    <div class="d4">
    test-div6
    </div>

    <div class="d4">
    test-div7
    </div>

    <div class="d4">
    test-div8
    </div>

    <div class="d4">
    test-div9<br>test-div9
    </div>

    <div class="d4">
    test-div10
    </div>
</div>
</body>
</html>

图解css3:核心技术与案例实战读书笔记(1~2)

图解css3:核心技术与案例实战读书笔记(第一章和第二章)

css3选择器概览

共分5大类,其中伪类选择器分6小类
一. 基本选择器
二. 层次选择器
三. 伪类选择器
3.1 动态 伪类选择器
3.2 目标
3.3 语言
3.4 UI元素状态
3.5 结构
3.6 否定
四. 伪元素
五. 属性选择器


一.基本选择器(5小类)

通配,元素(body,p,ul,h1,div等),id,class,群组选择器
注意:
1 多类选择器,以及元素和类组合的选择器是并关系
2 群组选择器
selector1,selectorN是群组选择器,表示选择匹配为selector1 和selectorN 的所有
元素;selector1 selectorN是后代选择器(后面介绍),表示选择器selectorN 所有
元素为selector1 的后代元素
/
群组选择器*/
h1,p{
background:blue
}
3 举例

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title> 使用CSS3 基本选择器</title>
<style type="text/css">
*{margin: 0;padding:0;}/*通配*/
/*下面这些后面再解释*/
.clearfix:after,.clearfix:before{display:table;content:""}
.clearfix:after{clear:both;overflow:hidden}
.demo { width: 250px; border: 1px solid #ccc; padding: 10px;margin: 20px auto}
li {list-style:none outside none; float: left; height: 20px;
line-height: 20px; width: 20px;border-radius: 10px;
text-align: center; background: #f36; color: green; margin-right: 5px; }
/*上面这些后面再解释*/
/*匹配同时具有important和item类的元素*/
.important.item{
background:yellow
}

/*匹配class属性包含demo的所有ul元素*/
ul.demo{
background:blue
}

</style>
</head>
<body>
<ul class="clearfix demo">
<li class="first" id="first">1</li>
<li class="active">2</li>
<li class="important item">3</li>
<li class="important">4</li>
<li class="item">5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li class="last" id="last">10</li>
</ul>
</body>
</html>

二. 层次选择器

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title> 使用CSS3 层次选择器</title>
<style type="text/css">
*{margin: 0;padding:0;}
body {width: 300px;margin: 0 auto;}
div{margin:5px;padding:5px;border: 1px solid #ccc;}
div div {background: orange;}/*后代选择器(所有后代全部选择)*/
body > div {background: green;} /*子选择器*/
.active + div {background: lime;}/*相邻兄弟选择器*/
.active ~ div {background: red;}/*通用兄弟选择器(所有兄弟全部选择)*/
</style>
</head>
<body>

<div class="active">1</div>
<div>2</div>
<div>3</div>

<div>4
  <div>5</div>
  <div>6</div>
</div>

<div>7
 <div>8
   <div>9
     <div>10</div>
   </div>
 </div>
</div>

</body>
</html>

三. 伪类选择器

3.1 动态伪类

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title> 使用动态伪类选择器美化按钮</title>
<style type="text/css">
.download-info {
text-align: center;
}
/* 默认状态下的按钮效果*/
.btn{
background: red;
}
/* 悬浮状态下按钮效果*/
.btn:hover{
background: green;
}
/* 点击时按钮效果*/
.btn:active {
background: blue;
}
/* 获得焦点效果*/
.btn:focus{
color: yellow;
}
/*定义了超链接并未被访问过*/
#test:link{
background: blue;
}
/*定义了超链接并已被访问过*/
#test:visited{
color: red;
}
</style>
</head>
<body>

<p>伪类选择器语法书写时和其他的CSS 选择器写法有所区别,都以冒号(:)开头</P>

<div class="download-info">
  <a href="#" class="btn">这是一个按钮</a>
</div>

<div>
<a href="#" id="test">goto my web site1</a>
</div>

</body>
</html>

3.2 target伪类

用户点击后才渲染对应设置的样式

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title> 垂直手风琴</title>
<style type="text/css">
.menu :target h2 a, /* 目标标题的效果*/
.menu h2 a:focus,
.menu h2 a:hover,
.menu h2 a:active {
background: red;
color:#FFF;
}

/* 这部分是显示内容的关键代码*/
.menu :target p {/* 展开对应目标内容*/
height:100px;/* 显示对应目标栏内容*/
}

</style>
</head>
<body>
<div class="menu">
    <div id="t1">
        <h2><a href="#t1">t1</a></h2>
        <p>1...</p>
    </div>
    <div  id="t2">
        <h2><a href="#t2">t2</a></h2>
        <p>2...</p>
    </div id="t3">
    <div>
        <h2><a href="#t3">t3</a></h2>
        <p>3...</p>
    </div>
</div>
</body>
</html>

3.3 语言伪类选择器

一个页面有多国语言用这个来设置不同的样式

<!DOCTYPE html>
<html lang='en'>
<!--html lang='fr'-->
<head>
<meta charset="utf-8"> 
<title>语言伪类选择器</title> 
<style>
p:lang(fr)
{ 
    background:yellow;
}
p:lang(en)
{ 
    background:red;
}
</style>
</head>
<body>
<p></p>
<p>法国</p>
<p>英国</p>
</body>
</html>

3.4 UI元素状态伪类选择器

:enabled 匹配所有启用的表单元素
:disabled 匹配所有禁用的表单元素

<!DOCTYPE html>
<html lang='fr'>
<head>
<meta charset="utf-8"> 
<title>ui伪类选择器</title> 
<style>
input:disabled{
background:red;
}
input:enabled{
background:green;
}

</style>
</head>
<body>
<form>
<input type="text" disabled="">disabled</input>
<br>
<input type="text">enabled</input>
</form>
</body>
</html>

3.5 结构伪类选择器

伪类可以将一段并不存在的html当作独立元素来定位

<!DOCTYPE html>
<html lang='fr'>
<head>
<meta charset="utf-8"> 
<title>结构伪类选择器</title> 
<style>
/*选第一个*/
ul>li:first-child{
background:red;
}
/*选第一个li类型*/
ul>li:first-of-type{
background:red;
}
/*选第3个*/
ul>li:nth-child(3){
background:red;
}
/*选所有*/
ul>li:nth-child(n){
background:blue;
}
/*选偶数行*/
ul>li:nth-child(2n){
background:yellow;
}
/*选奇数行*/
ul>li:nth-child(2n+1){
background:lime;
}

/*从第5个开始往后选*/
ul>li:nth-child(n+5){
background:green;
}

/*从第5个开始往前选*/
ul>li:nth-child(-n+5){
background:#acac1c;
}

/*隔3选1*/
ul>li:nth-child(4n+1){
background:#1cac1c;
}

/*选倒数第一个*/
ul>li:last-child{
background:red;
}
/*选倒数第一个li类型*/
ul>li:last-of-type{
background:red;
}
/*选倒数第一个*/
ul>li:nth-last-child{
background:red;
}

/*选倒数第4个*/
ul>li:nth-last-child(4){
background:red;
}

/*选第4个li类型的元素,如果前面有div或者其他类型的就不计算在内*/
ul>li:nth-of-type(4){
background:red;
}
/*倒数计数*/
ul>li:nth-last-of-type(4){
background:red;
}

/*父元素中只有一个子元素*/
ul>li:only-child{
background:red;
}

/*父元素中只有一个同类型的子元素*/
div>p:only-of-type{
background:blue;
}

/*没有任何内容的元素*/
ul>li:empty{
background:lime;
}
</style>
</head>
<body>

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <div>
        <div>only
        </div>
    </div>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li></li>
</ul>
<div>
<p>p1</p>
</div>
<div>
<p>p2</p>
<p>p3</p>
</div>
</body>
</html>

3.6 否定伪类选择器

<!DOCTYPE html>
<html lang='fr'>
<head>
<meta charset="utf-8"> 
<title>否定伪类选择器</title> 
<style>
input:not([type='text']){
background:green;
}
</style>
</head>
<body>

<form>
<input type="text"></input>
<br>
<input type="button" value="test"></input><br>
</form>
</body>
</html>

四. 伪元素选择器

<!DOCTYPE html>
<html lang='fr'>
<head>
<meta charset="utf-8"> 
<title>伪元素选择器</title> 
<style>


p:first-letter 
{
color:blue;
font-size:xx-large;
}
p:first-line 
{
color:#ff0000;
}

h1:before 
{
content:"\f0c3";
}

h1:after 
{
content:" {" attr(id) "}";
}

::selection{
background:green;
color:blue;
}

</style>
</head>
<body>
<h1 id="ok">This is a heading</h1>
<div>
<p id='t'>it is a sunny day<br>
yes it is

</p><br>

</div>

</body>
</html>

五. 属性选择器

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>属性选择器</title>  
<style>
/*value区分大小写*/
[title=hello]
{
    color:red;
}

h1[title=hello]
{
    color:blue;
}

/*属性中包含 value 是完整单词*/
p[title~=hello]
{
    color:lime;
} 
/*属性以 value 或者value-开头,value是完整单词*/
[lang|=en]
{
    color:#903;
}

/*属性以 value 开头,value是拼接单词*/
p[title^=hello]
{
    color:blue;
}

/*属性以 value 结尾,value是拼接单词*/
p[title$=hello]
{
    color:red;
}

/*属性包含value是拼接单词*/
p[title*=test]
{
    color:green;
}
</style>
</head>

<body>
<h1 title="hello">h1</h1><br>
<h2 title="hello">h2</h2><br>
<hr>
<p title="hello world">start with hello</p><br>
<p lang="en-us">english!</p>
<hr>
<p title="student hello">end with hello</p>
<p title="studenttest">end with ttest</p>
</body>
</html>

图像预载

图像预载

<html><head><title>Preloaded Rollover</title>
<script type = "text/javascript">
<!-- hide me from older browsers

var some_image = new Image();
some_image.src = "happy_face.gif";

// show me -->
</script>
</head>
<body>
<img src = "sad_face.gif" name = "my_first_image" 
  onMouseOver = "window.document.my_first_image.src = 'happy_face.gif';"
  onMouseOut = "window.document.my_first_image.src = 'sad_face.gif';">
</body>
</html>

简单下拉菜单的实现

简单下拉菜单的实现

<html><head><title>Drop-Down Menus</title>
<script type="text/javascript">
<!-- hide me from older browsers
var div_array = new Array("divOne", "divTwo", "divThree");
function changeDiv(the_div, the_change)
{
    document.getElementById(the_div).style.visibility = the_change;
}

function closeAll()
{
    for (var loop=0; loop < div_array.length; loop++)
    {
       changeDiv(div_array[loop], "hidden");
    }
}
// show me -->
</script>
</head>
<body>




<div id="top1" style="position:absolute; top:20; left:0; z-index:1">
<a href="#" 
    onMouseOver="closeAll(); changeDiv('divOne','visible');">Dogs</a>
</div>

<div id="top2" style="position:absolute; top:20; left:40; z-index:1">
<a href="#" 
    onMouseOver="closeAll(); changeDiv('divTwo','visible');">Cats</a>
</div>

<div id="top3" style="position:absolute; top:20; left:80; z-index:1">
<a href="#" 
    onMouseOver="closeAll(); changeDiv('divThree','visible');">Birds</a>
</div>

<div id="rightBorder" style="position:absolute; top:20; left:50;">
<a href="#" onMouseOver="closeAll();"><img src="long_spacer.gif" border=0></a>
</div>

<div id="bottomBorder" style="position:absolute; top:80; left:0;">
<a href="#" onMouseOver="closeAll();"><img src="long_spacer.gif" border=0></a>
</div>

<div id="divOne" style="position:absolute; top:40; left:0; visibility:hidden;">
<a href="#">Collie</a><br>
<a href="#">Puli</a><br>
<a href="#">Corgie</a><br>
</div>

<div id="divTwo" style="position:absolute; top:40; left:40; visibility:hidden">
<a href="#">Siamese</a><br>
<a href="#">Manx</a><br>
<a href="#">Calico</a><br>
</div>

<div id="divThree" style="position:absolute; top:40; left:80; visibility:hidden">
<a href="#">Parakeet</a><br>
<a href="#">Finch</a><br>
<a href="#">Canary</a><br>
</div>
</body>
</html>

浏览器检测

浏览器检测通用代码测试


<html> <head> <title>I Know Which Browser You Are Using!</title> <script type = "text/javascript" src = "brwsniff.js"></script> </head> <body> <script type = "text/javascript"> <!-- hide me from older browsers var browser_info = getBrowser(); var browser_name = browser_info[0]; var browser_version = browser_info[1]; document.write ("You're using " + browser_name + " version " + browser_version); // show me --> </script> </body> </html>

~~~~~~~~brwsniff.js~~~~~~~~~~~

/*
 * jsBrwSniff v0.5
 *
 * A browser sniffer library
 * http://jsbrwsniff.sf.net
 *
 * Released under the GNU LGPL license
 * Author: Pau Garcia i Quiles <paugq AT users DOT sourceforge DOT net>
 *
 */

function getBrowser(obj) {
    var b=new Array("unknown", "unknown", "unknown", "unknown");

    (isEmpty(obj) ? brs=navigator.userAgent.toLowerCase() : brs=obj);

    if (brs.search(/omniweb[\/\s]v?(\d+([\.-]\d)*)/) != -1) {
    // Omniweb
        b[0]="omniweb";
        b[1]=brs.match(/omniweb[\/\s]v?(\d+([\.-]\d)*)/)[1];
        (b[1] > 4.5 ? b[2]="khtml" : b[2]="omniweb");
        (brs.search(/omniweb[\/\s]((\d+([\.-]\d)*)-)?v(\d+([\.-]\d)*)/) == -1 ?       b[3]=brs.match(/omniweb[\/\s](\d+([\.-]\d)*)/)[1] :        b[3]=brs.match(/omniweb[\/\s]((\d+([\.-]\d)*)-)?v(\d+([\.-]\d)*)/)[4]);
        return b;
    } else if (brs.search(/opera[\/\s](\d+(\.?\d)*)/) != -1) {
    // Opera
        b[0]="opera";
        b[1]=brs.match(/opera[\/\s](\d+(\.?\d)*)/)[1];
        b[2]="opera";
        b[3]=b[1];
        return b;
    } else if (brs.search(/crazy\s?browser\s(\d+(\.?\d)*)/) != -1) {
    // Crazy Browser
        b[0]="crazy";
        b[1]=brs.match(/crazy\s?browser\s(\d+(\.?\d)*)/)[1];
        b[2]="msie";
        b[3]=getMSIEVersion();
        return b;
    } else if (brs.search(/myie2/) != -1) {
    // MyIE2
        b[0]="myie2";
        b[2]="msie";
        b[3]=brs.match(/msie\s(\d+(\.?\d)*)/)[1];
        return b;
    } else if (brs.search(/netcaptor/) != -1) {
    // NetCaptor
        b[0]="netcaptor";
        b[1]=brs.match(/netcaptor\s(\d+(\.?\d)*)/)[1];
        b[2]="msie";
        b[3]=getMSIEVersion();
        return b;
    } else if (brs.search(/avant\sbrowser/) != -1) {
    // Avant Browser
        b[0]="avantbrowser";
        b[2]="msie";
        b[3]=getMSIEVersion();
        return b;
    } else if (brs.search(/msn\s(\d+(\.?\d)*)/) != -1) {
    // MSN Explorer
        b[0]="msn";
        b[1]=brs.match(/msn\s(\d+(\.?\d)*)/)[1];
        b[2]="msie";
        b[3]=getMSIEVersion();
        return b;
    } else if (brs.search(/msie\s(\d+(\.?\d)*)/) != -1) {
    // MS Internet Explorer
        b[0]="msie";
        b[1]=getMSIEVersion();
        b[2]="msie";
        b[3]=b[1];
        return b;
    } else if (brs.search(/powermarks\/(\d+(\.?\d)*)/) != -1) {
    // PowerMarks
        b[0]="powermarks";
        b[1]=brs.match(/powermarks\/(\d+(\.?\d)*)/)[1];
        b[2]="msie";
        try {
            b[3]=getMSIEVersion();
        } catch (e) { }
        return b;
} else if (brs.search(/konqueror[\/\s](\d+([\.-]\d)*)/) != -1) {
    // Konqueror
        b[0]="konqueror";
        b[1]=brs.match(/konqueror[\/\s](\d+([\.-]\d)*)/)[1];
        b[2]="khtml";
        return b;
    } else if (brs.search(/safari\/(\d)*/) != -1) {
    // Safari
        b[0]="safari";
        b[1]=brs.match(/safari\/(\d+(\.?\d*)*)/)[1];
        b[2]="khtml";
        b[3]=brs.match(/applewebkit\/(\d+(\.?\d*)*)/)[1];
        return b;
    } else if(brs.search(/zyborg/) != -1) {
    // Zyborg (SSD)
        b[0]="zyborg";
        b[1]=brs.match(/zyborg\/(\d+(\.?\d)*)/)[1];
        b[2]="robot";
        b[3]="-1"
        return b;
    } else if (brs.search(/netscape6[\/\s](\d+([\.-]\d)*)/) != -1) {
    // Netscape 6.x
        b[0]="netscape";
        b[1]=brs.match(/netscape6[\/\s](\d+([\.-]\d)*)/)[1];
        b[2]="gecko";
        b[3]=getGeckoVersion();
        return b;
    } else if (brs.search(/netscape\/(7\.\d*)/) != -1) {
    // Netscape 7.x
        b[0]="netscape";
        b[1]=brs.match(/netscape\/(7\.\d*)/)[1];
        b[2]="gecko";
        b[3]=getGeckoVersion();
        return b;
    } else if (brs.search(/galeon[\/\s](\d+([\.-]\d)*)/) != -1) {
    // Galeon
        b[0]="galeon";
        b[1]=brs.match(/galeon[\/\s](\d+([\.-]\d)*)/)[1];
        b[2]="gecko";
        b[3]=getGeckoVersion();
        return b;
    } else if (brs.search(/nautilus[\/\s](\d+([\.-]\d)*)/) != -1) {
    // Nautilus
        b[0]="nautilus";
        b[1]=brs.match(/nautilus[\/\s](\d+([\.-]\d)*)/)[1];
        b[2]="gecko";
        b[3]=getGeckoVersion();
        return b;
    } else if (brs.search(/firefox[\/\s](\d+([\.-]\d)*)/) != -1) {
    // Firefox
        b[0]="firefox";
        b[1]=brs.match(/firefox[\/\s](\d+([\.-]\d)*)/)[1];
        b[2]="gecko";
        b[3]=getGeckoVersion();
        return b;
    } else if (brs.search(/k-meleon[\/\s](\d+([\.-]\d)*)/) != -1) {
    // K-Meleon
        b[0]="kmeleon";
        b[1]=brs.match(/k-meleon[\/\s](\d+([\.-]\d)*)/)[1];
        b[2]="gecko";
        b[3]=getGeckoVersion();
        return b;
    } else if (brs.search(/firebird[\/\s](\d+([\.-]\d)*)/) != -1) {
    // Firebird
        b[0]="firebird";
        b[1]=brs.match(/firebird[\/\s](\d+([\.-]\d)*)/)[1];
        b[2]="gecko";
        b[3]=getGeckoVersion();
        return b;
    } else if (brs.search(/phoenix[\/\s](\d+([\.-]\d)*)/) != -1) {
    // Phoenix
        b[0]="phoenix";
        b[1]=brs.match(/phoenix[\/\s](\d+([\.-]\d)*)/)[1];
        b[2]="gecko";
        b[3]=getGeckoVersion();
        return b;
    } else if (brs.search(/camino[\/\s](\d+([\.-]\d)*)/) != -1) {
    // Camino
        b[0]="camino";
        b[1]=brs.match(/camino[\/\s](\d+([\.-]\d)*)/)[1];
        b[2]="gecko";
        b[3]=getGeckoVersion();
        return b;
    } else if (brs.search(/epiphany[\/\s](\d+([\.-]\d)*)/) != -1) {
    // Epiphany
        b[0]="epiphany";
        b[1]=brs.match(/epiphany[\/\s](\d+([\.-]\d)*)/)[1];
        b[2]="gecko";
        b[3]=getGeckoVersion();
        return b;
    } else if (brs.search(/chimera[\/\s](\d+([\.-]\d)*)/) != -1) {
    // Chimera
        b[0]="chimera";
        b[1]=brs.match(/chimera[\/\s](\d+([\.-]\d)*)/)[1];
        b[2]="gecko";
        b[3]=getGeckoVersion();
        return b;
    } else if (brs.search(/icab[\s\/]?(\d+(\.?\d)*)/) !=-1) {
    // iCab
        b[0]="icab";
        b[1]=brs.match(/icab[\s\/]?(\d+(\.?\d)*)/)[1];
        b[2]="icab";
        b[3]=b[1];
        return b;
    } else if (brs.search(/netfront\/(\d+([\._]\d)*)/) != -1) {
    // NetFront
        b[0]="netfront";
        b[1]=brs.match(/netfront\/(\d+([\._]\d)*)/)[1];
        b[2]="netfront";
        b[3]=b[1];
        return b;
    } else if (brs.search(/netscape4\/(\d+([\.-]\d)*)/) != -1) {
    // Netscape 4.x
        b[0]="netscape";
        b[1]=brs.match(/netscape4\/(\d+([\.-]\d)*)/)[1];
        b[2]="mozold";
        b[3]=b[1];
        return b;
    } else if ( (brs.search(/mozilla\/(4.\d*)/) != -1) && (brs.search(/msie\s(\d+(\.?\d)*)/) == -1) ) {
        b[0]="netscape";
        b[1]=brs.match(/mozilla\/(4.\d*)/)[1];
        b[2]="mozold";
        b[3]=b[1];
        return b;
    } else if ((brs.search(/mozilla\/5.0/) != -1) && (brs.search(/gecko\//) != -1)) {
    // Mozilla Seamonkey
        b[0]="mozsea";
        b[1]=brs.match(/rv\x3a(\d+(\.?\d)*)/)[1];
        b[2]="gecko";
        b[3]=getGeckoVersion();
        return b;
    } else if (brs.search(/elinks/) != -1) {
    // ELinks
        b[0]="elinks";
        (brs.search(/elinks\/(\d+(\.?\d)*)/) == -1 ?
b[1]=brs.match(/elinks\s\x28(\d+(\.?\d)*)/)[1] :
b[1]=brs.match(/elinks\/(\d+(\.?\d)*)/)[1]);
        b[2]="elinks";
        b[3]=b[1];
        return b;
    } else if (brs.search(/w3m\/(\d+(\.?\d)*)/) != -1) {
    // w3m
        b[0]="w3m"
        b[1]=brs.match(/(^w3m|\sw3m)\/(\d+(\.?\d)*)/)[2];
        b[2]="w3m";
        b[3]=b[1];
        return b;
    } else if (brs.search(/links/) != -1) {
    // Links
        b[0]="links";
        (brs.search(/links\/(\d+(\.?\d)*)/) == -1 ? b[1]=brs.match(/links\s\x28(\d+(\.?\d)*)/)[1] : b[1]=brs.match(/links\/(\d+(\.?\d)*)/)[1]);
        b[2]="links";
        b[3]=b[1];
        return b;
    } else if (brs.search(/java[\/\s]?(\d+([\._]\d)*)/) != -1) {
    // Java (as web-browser)
        b[0]="java";
        b[1]=brs.match(/java[\/\s]?(\d+([\._]\d)*)/)[1];
        b[2]="java";
        b[3]=b[1];
        return b;
    } else if(brs.search(/lynx/) != -1) {
    // Lynx (SSD)
        b[0]="lynx";
        b[1]=brs.match(/lynx\/(\d+(\.?\d)*)/)[1];
        b[2]="libwww-fm";
        b[3]=brs.match(/libwww-fm\/(\d+(\.?\d)*)/)[1];
        return b;
    } else if(brs.search(/dillo/) != -1) {
    // Dillo (SSD)
        b[0]="dillo";
        b[1]=brs.match(/dillo\s*\/*(\d+(\.?\d)*)/)[1];
        b[2]="dillo";
        b[3]=b[1];
        return b;
    } else if(brs.search(/wget/) != -1) {
    // wget (SSD)
        b[0]="wget";
        b[1]=brs.match(/wget\/(\d+(\.?\d)*)/)[1];
        b[2]="robot";
        b[3]="-1"
        return b;
    } else if(brs.search(/googlebot\-image/) != -1) {
    // GoogleBot-Image (SSD)
        b[0]="googlebotimg";
        b[1]=brs.match(/googlebot\-image\/(\d+(\.?\d)*)/)[1];
        b[2]="robot";
        b[3]="-1"
        return b;
    } else if(brs.search(/googlebot/) != -1) {
    // GoogleBot (SSD)
        b[0]="googlebot";
        b[1]=brs.match(/googlebot\/(\d+(\.?\d)*)/)[1];
        b[2]="robot";
        b[3]="-1"
        return b;
    } else if(brs.search(/msnbot/) != -1) {
    // MSNBot (SSD)
        b[0]="msnbot";
        b[1]=brs.match(/msnbot\/(\d+(\.?\d)*)/)[1];
        b[2]="robot";
        b[3]="-1"
        return b;
    } else if(brs.search(/turnitinbot/) != -1) {
    // Turnitin (SSD)
        b[0]="turnitinbot";
        b[1]=brs.match(/turnitinbot\/(\d+(\.?\d)*)/)[1];
        b[2]="robot";
        b[3]="-1"
        return b;
    } else {
        b[0]="unknown";
        return b;
    }
}

// Return browser's (actual) major version or -1 if bad version entered
function getMajorVersion(v) {
    return (isEmpty(v) ? -1 : (hasDot(v) ? v : v.match(/(\d*)(\.\d*)*/)[1]))
}

// Return browser's (actual) minor version or -1 if bad version entered
function getMinorVersion(v) {
    return (!isEmpty(v) ? (!hasDot(v) ? v.match(/\.(\d*([-\.]\d*)*)/)[1] : 0) :
-1)
}

// Return operating system we are running on top of
function getOS(obj) {

    var os=new Array("unknown", "unknown");

    (isEmpty(obj) ? brs=navigator.userAgent.toLowerCase() : brs=obj);

    if (brs.search(/windows\sce/) != -1) {
        os[0]="wince";
        try {
            os[1]=brs.match(/windows\sce\/(\d+(\.?\d)*)/)[1];
        } catch (e) { }
        return os;
    } else if ( (brs.search(/windows/) !=-1) || ((brs.search(/win9\d{1}/) !=-1))
) {
        os[0]="win";
        if (brs.search(/nt\s5\.1/) != -1) {
            os[1]="xp";
        } else if (brs.search(/nt\s5\.0/) != -1) {
            os[1]="2000";
        } else if ( (brs.search(/win98/) != -1) || (brs.search(/windows\s98/)!=
-1 ) ) {
            os[1]="98";
        } else if (brs.search(/windows\sme/) != -1) {
            os[1]="me";
        } else if (brs.search(/nt\s5\.2/) != -1) {
            os[1]="win2k3";
        } else if ( (brs.search(/windows\s95/) != -1) || (brs.search(/win95/)!=
-1 ) ) {
            os[1]="95";
        } else if ( (brs.search(/nt\s4\.0/) != -1) || (brs.search(/nt4\.0/) ) !=
-1) {
            os[1]="nt4";
        }

        return os;
    } else if (brs.search(/linux/) !=-1) {
        os[0]="linux";
        try {
            os[1] = brs.match(/linux\s?(\d+(\.?\d)*)/)[1];
        } catch (e) { }
        return os;
    } else if (brs.search(/mac\sos\sx/) !=-1) {
        os[0]="macosx";
        return os;
    } else if (brs.search(/freebsd/) !=-1) {
        os[0]="freebsd";
        try {
            os[1] = brs.match(/freebsd\s(\d(\.\d)*)*/)[1];
        } catch (e) { }
        return os;
    } else if (brs.search(/sunos/) !=-1) {
        os[0]="sunos";
        try {
            os[1]=brs.match(/sunos\s(\d(\.\d)*)*/)[1];
        } catch (e) { }
        return os;
    } else if (brs.search(/irix/) !=-1) {
        os[0]="irix";
        try {
            os[1]=brs.match(/irix\s(\d(\.\d)*)*/)[1];
        } catch (e) { }
        return os;
    } else if (brs.search(/openbsd/) !=-1) {
        os[0]="openbsd";
        try {
            os[1] = brs.match(/openbsd\s(\d(\.\d)*)*/)[1];
        } catch (e) { }
        return os;
    } else if ( (brs.search(/macintosh/) !=-1) || (brs.search(/mac\x5fpowerpc/)
!= -1) ) {
        os[0]="macclassic";
        return os;
    } else if (brs.search(/os\/2/) !=-1) {
        os[0]="os2";
        try {
            os[1]=brs.match(/warp\s((\d(\.\d)*)*)/)[1];
        } catch (e) { }
        return os;
    } else if (brs.search(/openvms/) !=-1) {
        os[0]="openvms";
        try {
            os[1]=brs.match(/openvms\sv((\d(\.\d)*)*)/)[1];
        } catch (e)  { }
        return os;
    } else if ( (brs.search(/amigaos/) !=-1) || (brs.search(/amiga/) != -1) ) {
        os[0]="amigaos";
        try {
            os[1]=brs.match(/amigaos\s?(\d(\.\d)*)*/)[1];
        } catch (e) { }
        return os;
    } else if (brs.search(/hurd/) !=-1) {
        os[0]="hurd";
        return os;
    } else if (brs.search(/hp\-ux/) != -1) {
        os[0]="hpux";
        try {
            os[1]=brs.match(/hp\-ux\sb\.[\/\s]?(\d+([\._]\d)*)/)[1];
        } catch (e) { }
        return os;
    } else if ( (brs.search(/unix/) !=-1) || (brs.search(/x11/) != -1 ) ) {
        os[0]="unix";
        return os;
    } else if (brs.search(/cygwin/) !=-1) {
        os[0]="cygwin";
        return os;
    } else if (brs.search(/java[\/\s]?(\d+([\._]\d)*)/) != -1) {
        os[0]="java";
        try {
            os[1]=brs.match(/java[\/\s]?(\d+([\._]\d)*)/)[1];
        } catch (e) { }
        return os;
    } else if (brs.search(/palmos/) != -1) {
        os[0]="palmos";
        return os;
    } else if (brs.search(/symbian\s?os\/(\d+([\._]\d)*)/) != -1) {
        os[0]="symbian";
        try {
            os[1]=brs.match(/symbian\s?os\/(\d+([\._]\d)*)/)[1];
        } catch (e) { }
        return os;
    } else {
        os[0]="unknown";
        return os;
    }
}

// Return Gecko version
function getGeckoVersion() {
    return brs.match(/gecko\/([0-9]+)/)[1];
}

// Return MSIE version
function getMSIEVersion() {
    return brs.match(/msie\s(\d+(\.?\d)*)/)[1];
}

// Return full browser UA string
function getFullUAString(obj) {
    (isEmpty(obj) ? brs=navigator.userAgent.toLowerCase() : brs=obj);
    return brs;
}

// Is Flash plug-in installed?
function hasFlashPlugin(obj) {

    (isEmpty(obj) ? brs=navigator.userAgent.toLowerCase() : brs=obj);

    var f=new Array("0", "0");
    var brwEng=getBrowser(obj)[2];

    //if (getBrowser(obj)[2]!="msie") {
        if ( (brwEng=="gecko") || (brwEng="opera") || (brwEng="khtml") || (brwEng="mozold")) {
        // Non-IE Flash plug-in detection

        if (navigator.plugins && navigator.plugins.length) {
            x = navigator.plugins["Shockwave Flash"];
            if (x) {
                f[0] = 2;
                if (x.description) {
                    y = x.description;
                    f[1] = y.charAt(y.indexOf('.')-1);
                }
            } else {
                f[0] = 1;
            }
            if (navigator.plugins["Shockwave Flash 2.0"]) {
                f[0] = 2;
                f[0] = 2;
            }
        } else if (navigator.mimeTypes && navigator.mimeTypes.length) {
            x = navigator.mimeTypes['application/x-shockwave-flash'];
            if (x && x.enabledPlugin) {
                f[0] = 2;
            } else {
                f[0] = 1;
            }
        }

   return f;

  } else if (brwEng=="msie") {
      // IE flash detection.
       for(var i=7; i>0; i--) {
           try {
               var flash = new ActiveXObject("ShockwaveFlash.ShockwaveFlash." + i);
               f[1] = i;
               break;
               //return;
           } catch(e) { }
       }

       if (f[1]>0) {
           f[0]=2
       } else {
           f[0]=1
       }
   return f;
   } else {
       f[0]=0;
       f[1]=0;
       return f;
   }
}

/* FOR INTERNAL USE ONLY. THIS FUNCTIONS ARE SUBJECT TO CHANGE, DON'T TRUST THEM */
// Is input empty?
function isEmpty(input) {
    return (input==null || input =="")
}

// Does this string contain a dot?
function hasDot(input) {
    return (input.search(/\./) == -1)
}
/* END OF FOR INTERNAL USE ONLY FUNCTIONS */