你的位置:首页 > 网页设计

[网页设计]HTML5+Bootstrap 学习笔记 4


HTML5 <map> <area> 标签

<map> 标签定义客户端的图像映射。图像映射是带有可点击区域的图像。

<area> 标签定义图像映射内部的区域(图像映射指的是带有可点击区域的图像)。

area 元素始终嵌套在 <map> 标签内部。

1 <img src ="planets.gif" alt="Planets" usemap ="#planetmap" />2 3 <map id ="planetmap">4 <area shape ="rect" coords ="0,0,82,126" href ="sun.htm" alt="Sun" />5 <area shape ="circle" coords ="90,58,3" href ="mercur.htm" alt="Mercury" />6 <area shape ="circle" coords ="124,58,8" href ="venus.htm" alt="Venus" />7 </map>

参考资料:HTML 5 <map> 标签 http://www.w3school.com.cn/html5/html5_map.asp

     HTML 5 <area> 标签 http://www.w3school.com.cn/html5/html5_area.asp


HTML5 <section> 标签

<section> 标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。

1 <section>2  <h1>PRC</h1>3  <p>The People's Republic of China was born in 1949...</p>4 </section>

section会影响整个文档大纲的生成,切忌将section理解为一个语义化的div。

参考资料:HTML 5 <section> 标签 http://www.w3school.com.cn/html5/html5_section.asp


Bootstrap glyphicon glyphicon-chevron-right ">" 垂直居中的问题(单元高不固定)

该问题并未找到好的解决方案,在此记录参考资料,以备进一步研究。

http://stackoverflow.com/questions/21749372/how-to-center-an-icon-vertically-when-using-bootstrap-3-grid

http://stackoverflow.com/questions/21588819/twitter-bootstrap-carousel-arrows-not-centered-vertically-depending-on-glyphicon

http://jsfiddle.net/AdF6b/2/

http://jsfiddle.net/KyleMit/Z9ZFr/

http://stackoverflow.com/questions/21460610/centering-a-glyphicon-inside-a-div

http://stackoverflow.com/questions/22719315/vertical-align-glyphicon-in-bootstrap-3


 Bootstrap 使整个 panel 作为链接

参考资料:http://stackoverflow.com/questions/20364512/how-do-i-make-entire-bootstrap-panel-as-hyperlink


Bootstrap 3.3.4下,glyphicon无法加载?

本地部署Bootstrap 3.3.4,但 span glyphicon 无法正常加载。原因不明,但换做使用CDN加速服务,正常使用。

1 <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">


 Bootstrap 2 升级 3

参考资料:从 Bootstrap 2.x 版本升级到 3.0 版本 http://v3.bootcss.com/migration/

       升级到Bootstrap 3 http://www.berlinix.com/web/uptobs3.php