html+css+jQuery实现文字标签云

1、新建html文档。

3、书写css代码。<style>* { padding: 0px; margin: 0px; list-style-type: none; }body { background: #D5DEE7; }.da_div { width: 306px; margin: 20px auto; height: 110px; overflow: hidden; background: #fff; padding: 5px 5px 0px 5px; }.boxgrid { width: 120px; height: 40px; float: left; background: #125ccb; overflow: hidden; position: relative; color: #fff; font-size: 14px; font-family: "微软雅黑"; text-align: center; padding: 5px }.boxgrid2, .boxgrid3 { width: 72px; margin-left: 6px; background: #17a2b7; }.boxgrid3 { background: #125ccb; }.boxcaption { float: left; position: absolute; background: #000; height: 60px; opacity: .9;/* For IE 5-7 */ filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=90);/* For IE 8 */-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; top: 50px; left: 0; padding: 5px; width: 120px; }.boxcaption2 { width: 82px; padding: 0; }.boxcaption p { color: #fff; line-height: normal; font-size: 15px; position: relative; z-index: 999; }.boxcaption p a { color: #fff; }.reci { margin-left: 0; margin-top: 5px; }.reci2 { margin-left: 6px; margin-top: 5px; }</style>

5、代码整体结构。