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

HTML5中section、article、figure的区别及使用介绍

时间:2016-04-18 20:48:31      阅读:1453      评论:0      收藏:0      [点我收藏+]

标签:

html代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>河南焦作景点介绍</title>
    <link type="text/css" rel="stylesheet" href="css.css">
</head>
<body>
<section>
    <h5>景点介绍</h5>
    <article>
        <figure>
            <img src="http://h.bytravel.cn/www/2/heads/2337.gif" width="220" height="140"/>
            <figcaption>
                云台山
            </figcaption>
        </figure>
        <p>
            云台山位于河南省焦作市修武县境内,拥有十一大景点,2004年2月13日,中国十大影视城——焦作影视城位于中国优秀旅游城市之一的河南省西北部的焦作市,是中原地区唯一著名的影视基地,为焦作市十大景点之首。距市区仅1公里。北依太行,南临黄河,地理位置优越,新焦铁路、焦枝铁路、焦太铁路及焦郑、焦晋高速公路交汇于此,交通便利,四通八达。
            焦作影视城是1995年由焦作市人民政府投资2.3亿元兴建而成,2011年被联合国教科文组织评选为全球首批世界地质公园。同时,还是国家级风景名胜区、全国文明风景旅游区、首批国家AAAA-旅游景区、国家自然遗产、国家森林公园、国家级猕猴自然保护区、国家水利风景区、国家文化产业示范基地,荣获了世界杰出旅游服务品牌等多项荣誉。2010年3月,“云台山”被国家工商总局认定为中国驰名商标。2010年7月,被河南省人民政府授予2010年度(首届)河南省省长质量奖。2011年9月,被国家质量监督检验检疫管……
        </p>
    </article>
    <article>
        <figure>
            <img src="http://h.bytravel.cn/www/11/heads/10809.gif" width="220" height="140"/>
            <figcaption>
                神农山
            </figcaption>
        </figure>
        <p>
            圆融无碍禅寺位于河南省焦作市修武县西村乡当阳峪村,始建于东晋永和七年(公元351年),为“民间东传佛教第一僧”的西晋、
            后赵僧人佛图澄国师(二三一~三五一)所创建的八百九十三座寺庙之一,为十一进计十九殿、两塔院、七堂、二院落、一馆及十七处泉,在建“圆融国际禅修中心”及“五百罗汉洞”,为韩国圆融宗祖庭。现为国家AAAA级旅游景区、焦作市佛教协会驻地。是“圆融寺文化旅游园区”核心部分。故观前的黄河堤坝,至今仍称御坝。观内现存殿宇100余间,皆采用清代宫式建筑形制规模雄巨,结构谨严。观前山门正中嵌石,上刻敕建嘉应观。门周石雕五条奔龙和海水、云气等,技巧颇精。门左右有掖门,山门内两侧为重檐歇山式钟鼓楼。轴线建筑有御碑亭、天王殿、大王殿和禹王殿。天王殿和大王殿两圆融无碍禅寺(以下简称圆融寺)是中国唯一一处以佛教圆融思想而命名的千年古刹;韩国圆融宗祖庭;国家AAAA级旅游景区。坐……
        </p>
    </article>
    <article>
        <figure>
            <img src="http://h.bytravel.cn/www/11/heads/10821.gif" width="220" height="140"/>
            <figcaption>
                群英湖
            </figcaption>
        </figure>
        <p>焦作黄河文化影视城位于焦作市北郊凤凰山上,是中央电视台 与焦作市政府合作修建的大型影视剧拍摄制作基地,距焦作市 区1公里,占地面积2平方公里,建筑面积15万平方米,居全国
            四大影视城之首。它气势恢弘,设施完善,内容丰富,环境优 美集中体现了华夏文化在春秋战国时期历史风貌,再现了东周 夯土筑台之风。  整个影视分为四个区,即城门区,周王宫区、
            楚王宫区和市井区。城门座北面南,宽阔宏大,风景名胜区,因炎帝神农在此播五谷、尝百草而得名,由紫金顶、云阳河、仙神河、黑龙潭、白松岭、临川寺、悬谷山、尧舜路八大景区组成。  神农坛风景区集旷、奥、幽、美于一体,既有北方的粗犷雄健,又有南方的秀丽阴柔,汇集了太行山的精粹,峰峦叠嶂,洞幽林翠,草药繁多,气象万千,猕猴戏峰间,仙境胜蓬莱。城门中央的上
            方为铜铸方鼎,两恻为表现西周东迁个大秦统一……

        </p>
    </article>
</section>
</body>
</html>

css.css文件

*{font-size: 10px}
    /*设置页面背景颜色*/
body { background-color:#ddfcca;}
/*设置section区块的属性*/
section{
    width:760px;
    margin: 0px;
    padding: 0px 20px;
    border:1px #50ad44 solid;
}
/*标题设置*/
h5{
    margin: 10px 20px;
    height: 23px;
    border-bottom: 3px #50ad44 solid;
    text-indent: 2em;
}
/*为照片设置属性*/
figure{
    padding-right: 22px;
    display: block;
    float: left;
    width: 220px;
}
/*文章*/
article{
    border-bottom: 1px solid #50ad44;
    line-height: 20px;
    margin-bottom: 10px;
}
/*段落*/
p{
    margin: 10px 13px;
    text-indent: 2em;
}
figcaption{
    text-align: center;
    color: #003300;
    text-decoration: underline;
}
img{
    margin-left: 10px;
}

效果图:

http://b.picphotos.baidu.com/album/s%3D1100%3Bq%3D90/sign=0a2f71a75dafa40f38c6cadc9b54383e/d1a20cf431adcbef0fd6b893abaf2edda2cc9f41.jpg

 

HTML5中section、article、figure的区别及使用介绍

标签:

原文地址:http://www.cnblogs.com/xiaobijia/p/5405716.html

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