码迷,mamicode.com
首页 > Web开发 > 详细

html5中不同内核与分栏的综合应用

时间:2016-07-08 16:32:58      阅读:478      评论:0      收藏:0      [点我收藏+]

标签:

    在现在的html5和CSS3中有许多新增的内容,作为前端,我感觉用的最多的就是兼容问题与分栏布局了,如果把兼容与分栏布局混合应用,会让我们很快做一些瀑布流之类的网站,以少的代码做多的是,提高工作效率,但有些新的特性还不能在每个浏览器上都适应。

图1(谷歌浏览器):

技术分享

图2(移动端):

 

技术分享

 具体代码如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            .div3{
                border: 1px solid cornflowerblue;
                margin-top: 50px;
                /*设置分栏后每一列的宽度*/
                -moz-column-rule-width: 150px;        /*适应火狐浏览器*/
                -o-column-rule-width: 150px;        /*适应open浏览器*/    
                -webkit-column-rule-width: 150px;    /*适应谷歌浏览器*/
                -ms-column-rule-width: 150px;        /*适应IE浏览器*/
                /*设置分多少栏*/
                -moz-column-count: 4;
                -webkit-column-count: 3;
                -o-column-count: 3;
                -ms-column-count: 3;
                /*设置每一列间隔*/
                -moz-column-gap: 15;
                -webkit-column-gap: 50px;
                -moz-column-gap: 15;
                /*设置分割线*/
                -moz-column-rule: 5px solid gold;
                -webkit-column-rule: 3px dashed red;
            }
            h1{
                background-color: green;
                color: white;
                -webkit-column-span: all;  /*使标题跨列居中*/
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div class="div3">
            <h1>龙的传说</h1>
            龙
是传说中的神异动物,在中国传统文化中,它具有虾眼、鹿角、牛嘴、狗鼻、鲶须、狮鬃、蛇尾、鱼鳞、鹰爪,九种动物合而为一之九不像之形象。作为中华民族信奉的图腾,龙身上寄寓了美好的品质和神奇的传说。龙是原始人的图腾,是一种只存在于图腾中而不存在于生物界的虚幻生物。有研究指,龙的形象是经过不断发展变化的,在漫长的历史过程中经过战争和联合,信奉龙图腾的民族逐渐成为领导,龙的图腾逐渐成为整个中华民族信奉的旗帜。其他民族原来信奉的图腾的形象逐渐被吸收、被充实到龙的形象中去,因此龙的特征愈来愈多,形象日益复杂和威武,龙成为了皇帝的代表。人们还把各种美德和优秀的品质都集中到龙的身上。我们从许多故事和传说中看到∶龙是英勇善战的,它什么强暴也不怕;龙是聪明多智的,它甚至能预见未来;龙的本领高强,它能大能小,变化多端,兴云布雨,鸣雷闪电,开河移山,法力无边;龙是富裕的,龙宫成了宝藏的集中地;龙又是正直的、能为人民著想的,为了解救人间干旱之苦,它甚至不惜冒犯天条。在龙的身上集中了人们美好的愿望,也常把世间的杰出人物称为人中之龙,诸葛亮号称卧龙先生就是大家熟识的例子。
日常生活中也有龙的踪迹。衣有龙袍;食有龙虾、龙眼、龙须面、龙冠;建筑有龙宫、龙亭;行有龙舟、龙车。家具有龙椅、龙床。正月十五要舞龙灯,五月端午要赛龙船。动物有龙马、龙蚤;植物有龙葵、龙舌兰、龙须草、龙须菜、龙柏、龙爪槐。风水宝地叫龙脉,抽水的水车叫龙骨水车,大吊车叫龙门吊。天上和龙有关的名词不下数百。一千年前编辑的《太平广记》搜集的龙的神话小说,就有八十一则。在中国,龙简直无所不在。龙的文化,源远流长。
龙
并不是中国特有的,许多民族都有关于龙的神话传说。但是像中国这样,以龙为荣、为尊,而且各种事物都多少跟龙有点关系的国家却是绝无仅有的。在中国,带有龙名的地方数以千计,其中又有以数字为题的,如吉林省的二龙、江西省的三龙、辽宁省的四龙;有些以龙的身体为题,如江西省的龙头、四川省的龙角、贵州省的龙额、黑龙江省的龙爪;有些以龙群为题,可以组成龙王、龙母、大龙、小龙、金龙、木龙、水龙、土龙等等。中国含“龙”字的江河,可查的就有四十多个,而我们熟识的黄、青、赤、白、黑龙,就分别在四川省(黄龙河)、河北省(青龙河和赤龙河)、天津(青龙湾河和黑龙港河)、甘肃省(白龙江)、上海(白龙港河)和黑龙江省(黑龙江),有以他们命名的江河。几乎每一省都有龙江、龙湖、龙山、龙洞、龙泉、龙潭,还有数不清的龙王庙。
古人把龙看成神物、灵物,而且变化无常,缩小如蚕蚁,伸展能遮天。有时显露于云端,有时隐形入深渊。关于龙的传说,在中国古代经典著作中几乎每一本书都有,而关于龙的传说和神话亦不胜枚举。经典如《易经》,便将龙作了一完整系统的论述,并赋以哲学的含义。八卦中整体用龙来说明的就是乾卦,也是《易经》的第一卦。除这之外,历朝历代都不断有龙的传说和神话出现,不少以“龙”字命名的地方亦有其龙的传说。上至黄帝的时代,便有黄帝乘龙升天、应龙助黄帝战胜蚩尤的传说;夏禹治水,传说便有神龙以尾巴画地成河道,疏导洪水;汉高祖刘邦,传说便是其母梦见与赤龙交配而怀孕出生。从许多故事和传说中看到人们常把各种美德和优秀的品质都集中到龙的身上。传说中每年二月初二炒玉米的传统,就是纪念义龙为解人间乾旱之苦,甚至不惜冒犯天条。传说玉龙因不忍人民受乾旱之苦,义助人民降雨而被玉帝所囚,并立下规条,只有金豆开花才会予以释放。人民因感激玉龙义举而齐集一起炒玉米,因样子像金豆开花而令看管的太白金星看错,并释放了玉龙。而每年二月初二炒玉米的传统亦保留了下来。
当然,传说里有义龙为善,便自然亦有恶龙为祸。随著民智开启,佛教信仰开始传入等因素,民间对龙王的形象有了改变,作为道教传统之一的龙王,亦开始出现反派的角色。在中国不少以“龙”字命名的地方亦有其龙的传说,其中亦不乏恶龙肆虐的故事。就像黑龙江,传说以前便有白龙为祸,后来江边的一个村中,有一家人临产,并诞下了一黑龙。原来黑龙是来帮助除掉白龙的,村民依照其指示支持,最后白龙被除,人们为纪念黑龙而将江取名黑龙江。四川省的九寨沟有一卧龙湖,湖底有一金黄色石梁,传说是白龙的化身。九寨沟附近有两条大河,一条叫黑水河,传说以前住著一条大黑龙;一条白龙江,住著一条小白龙。传说黑龙因妒忌九寨沟的风光而将那里的水吸乾,小白龙知道后,便将白龙江的水喷洒到九寨沟,回复其美景。黑龙知道后便跟白龙展开恶斗,黑龙在不敌时使计放毒,小白龙被逼逃到九寨沟其中一个湖泊中。黑龙为查白龙的下落而惊动了藏族的万山之神,最后被山神所囚,不能再作恶。万山之神为表彰白龙而给它一套金黄色的铠甲,这就是卧龙湖的传说由来。
  龙帝,亦即天帝,也叫玉皇大帝,传说就是华夏民族的始祖——黄帝的化身。在《史记.封禅书》中记载,黄帝和老百姓在首山采掘铜矿,把开采出来的铜铸成一只很大的铜鼎,放在荆山脚下。铜鼎铸成时,有龙垂胡髯下迎黄帝升天。黄帝就骑到龙背上去,他手下的群臣还有妻儿也都纷纷往上爬,一共上了七十多人。这时,龙升上天去,剩下的小臣挤不上,一个个都抓着龙的胡须。龙髯受不了重量而断了,黄帝带著的弓也被拉落下来,臣僚们只得抱著龙髯和弓号哭。黄帝升了天后便成为了天帝。
在《史记.天官单点》,就是说黄帝就是黄龙的化身。黄龙即是龙帝,五行属土,位居中央,是龙族之首,也是道教的宗教观中天庭的主宰。在汉代的典籍中亦有提及:“黄龙者,四方之长,四方之正色,神灵之精也。能巨,能细,能幽,能明,能短,能长,乍存,乍亡。王者不滤池而渔,德达深渊,则应和气而游于池沼。”说明了黄龙的形象。
龙是中国古代神话的四灵之一。《太上洞渊神咒经》中有“龙王品”,列有以方位为区分的“五帝龙王”,以海洋为区分的“四海龙王”,以天地万物为区分的54名龙王名字和62名神龙王名字。唐玄宗时,诎祠龙池,设坛官致祭,以祭雨师之仪祭龙王。宋太祖沿用唐代祭五龙之制。宋徽宗大观二年(1108年)诎天下五龙皆封王爵。封青龙神为广仁王,赤龙神为嘉泽王,黄龙神为孚应王,白龙神为义济王,黑龙神为灵泽王。清同治二年(1863年)又封运河龙神为“延庥显应分水龙王之神”,令河道总督以时致祭。在《西游记》中,龙王分别是∶东海敖广、南海敖钦、西海敖闰、北海敖顺,称为四海龙王。由此,龙王之职就是兴云布雨,为人消灭炎热和烦恼,龙王治水成了民间普遍的信仰。道教《太上洞渊神咒经》中的“龙王品”就称,“国土炎旱,五榖不收,三三两两莫知何计时”,元始天尊乘五色云来临国土,与诸天龙王等宣扬正法,普渡众生,大雨洪流,应时甘润。
东海敖广、南海敖钦、西海敖闰、北海敖顺。青脸红须为东,白发须为西,橘黄发须是南,黑发须者为北 
龙并不是中国特有的,许多民族都有关于龙的神话传说。但是像中国这样,以龙为荣、为尊,而且各种事物都多少跟龙有点关系的国家却是绝无仅有的。
        </div>
    </body>
</html>

主要知识点:(html5一些新特性还不能完全适配各个浏览器)

      1、-webkit-            用它来解决以谷歌为首的webkit内核浏览器;

      2、-moz-        用它来解决以火狐为首的gecko内核浏览器;

      3、-o-        用它来解决以open为首的presto内核浏览器;

      4、-ms-       用它来解决以IE为首的Trident内核浏览器;

      5、-column-width   分栏后每一列的宽度;

      6、-column-count      分栏数量;

      7、-column-gap         每一列间隔距离;

      8、-column-rule   间隔线;

      9、-column-span   横跨整列;

关于浏览器内核:

Trident

代表浏览器:IE4,IE5,IE6,IE7,IE8,IE9,Maxthon,The World,GreenBrowser,腾讯TT等。

Gecko

代表浏览器:Netscape,Mazilla Firefox;

Presto

代表浏览器:Opera,NDSBrowser,Wii Internet Channle,Nokia 770;

Webkit

代表浏览器:Safari,Chrome;

html5中不同内核与分栏的综合应用

标签:

原文地址:http://www.cnblogs.com/ssf369369/p/ssf.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!