Html5 1.4 figure和figcaption的实例
一、figure和figcaption元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--让当前viewport的宽度等于设备的宽度,同时不允许用户手动缩放--> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <title>Title</title> <style type="text/css"> hgroup{ position: relative; top: 10px; left: 10px; } body{ margin: 0px; width: auto; height: 736px; } a{ text-decoration: none; } h4{ display: inline; } header{ width: 100%; height: 10%; background: gainsboro; float: left; } aside{ width: 20%; height: 80%; background: cornflowerblue; float: left; text-align: center; } section{ width: 80%; height: 80%; background: lightcyan; float: left; overflow: auto; } footer{ width: 100%; height: 10%; background: peachpuff; clear: left; } #e { list-style: none; position: relative; right: 15px; } #f{ list-style: none; position: relative; bottom: -15px; left: 50px; } #f li{ display: inline; } hgroup img{ width: 30px; height: 30px; position: relative; top: 15px; } </style> </head> <body> <header> <hgroup><!--<hgroup> 标签对网页或区段(section)的标题进行组合--> <img src="imges/ss.png" alt=""> <input type="text" placeholder="请输入搜索"> </hgroup> </header> <aside> <ul id="e"> <li><a href=""><img src="imges/ding.png" width="44px" height="44px" alt=""></a></li> <li><a href="" alt=""><img src="imges/cu.png" width="44px" height="44px" alt=""></a></li> <li><a href="" alt=""><img src="imges/ding.png" width="44px" height="44px"alt=""></a></li> <li><a href="" alt=""><img src="imges/dl.png" width="44px" height="44px" alt=""></a></li> <li><a href="" alt=""><img src="imges/qq.png" width="44px" height="44px" alt=""></a></li> <li><a href="" alt=""><img src="imges/ka.png" width="44px" height="44px" alt=""></a></li> </ul> </aside> <section > <figcaption>食品/家电</figcaption> <figure><!--标签规定独立的流内容--> <img src="sp/sp1.png" width="50%" alt=""><img src="sp/sp2.png" width="50%" alt=""> </figure> <figcaption>汽车/居家</figcaption><!--应该被置于 "figure" 元素的第一个或最后一个子元素的位置,定义figure元素标题--> <figure> <img src="sp/sp3.png" width="50%" alt=""><img src="sp/sp4.png" width="50%" alt=""> </figure> <figcaption>数码/珠宝</figcaption> <figure> <img src="sp/sp5.png" width="50%" alt=""><img src="sp/sp6.png" width="50%" alt=""> </figure> </section> <footer> <nav><!--用于存放超链接--> <ul id="f"> <li><a href=""><img src="imges/zy.png" alt="" width="40px"%></a> </li> <li><a href=""><img src="imges/zhi.png" alt="" width="40px"></a></li> <li><a href=""><img src="imges/vip.png" alt="" width="40px"></a></li> <li><a href=""><img src="imges/tuan.png" alt="" width="40px"></a></li> <li><a href=""><img src="imges/sc.png" alt="" width="40px"></a></li> </ul> </nav> </footer> </body> </html>
二、效果展示