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;
}
效果图：
时间： 2024-12-11 02:11:05