CSS用dl定义列表实现冒号后折行
12月 08
在写武大讲座网的讲座信息详情时,对于冒号后折行的问题,折腾了许久~ 写下来,分享下~
效果图:
查看演示
HTML
<!--CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt--> <div class="lecture_info"> <dl class="speaker"> <dt>主讲人: </dt><dd>巫世晶巫世晶巫世晶巫世晶巫世晶巫世晶巫世晶巫世晶巫世晶巫世晶巫世晶巫世晶巫世晶巫世晶 </dd></dl> <dl class="time"> <dt>时 间: </dt><dd>2010-11-22日2010-11-22日2010-11-22日2010-11-22日2010-11-22日2010-11-22日2010-11-22日2010-11-22日2010-11-22日 </dd></dl> <dl class="place"> <dt>地 点: </dt><dd>文理学部教五楼文理学部教五楼文理学部教五楼文理学部教五楼文理学部教五楼文理学部教五楼文理学部教五楼文理学部教五楼 </dd></dl> </div> |
CSS
body { font-family:Microsoft YaHei;,Tahoma,Arial; font-size: 12px; color:#666; } *{ margin:0px; padding:0px; } .lecture_info { width:490px; } .lecture_info dt { float:left; } .lecture_info dl { padding-left:35px; } .lecture_info dd { padding-left:48px; } .speaker { min-height:35px; padding-top:12px; background:url(images/speaker.gif) no-repeat; color:#3c99c9; } .time { min-height:28px; padding-top:8px; background:url(images/time.gif) no-repeat; } .place { min-height:28px; padding-top:8px; background:url(images/place.gif) no-repeat; } |
12月 25, 2010 @ 22:28:10
恭祝博主圣诞快乐~
1月 01, 2011 @ 22:32:44
博客不常打理~ 回复的时候只能祝您新年新气象啦~ 哈哈~
3月 10, 2011 @ 10:03:58
这方法真不错
11月 20, 2022 @ 08:36:51
Artificial intelligence creates content for the site, no worse than a copywriter, you can also use it to write articles. 100% uniqueness :). Click Here: https://stanford.io/3FXszd0
12月 25, 2022 @ 20:22:03
промокод на 1xbet. Click Here: http://www.newlcn.com/pages/news/promo_kod_1xbet_na_segodnya_pri_registracii.html
1月 10, 2023 @ 00:11:44
Code Promo 1xBet. Click Here: https://popvalais.ch/wp-includes/inc/?code-promo-1xbet-burkina-faso-78-000xof.html
1月 27, 2023 @ 05:15:25
промокод 1хбет. Click Here: https://www.medtronik.ru/images/pages/bonus_kod_na_1xbet_pri_registracii_6500_rubley.html
2月 08, 2023 @ 23:17:25
Artificial intelligence creates content for the site, no worse than a copywriter, you can also use it to write articles. 100% uniqueness,5-day free trial of Pro Plan :). Click Here: https://whitestudios.ru/kassa/incs/1xbet_besplatno_stavka-2021.html
2月 09, 2023 @ 12:08:07
Artificial intelligence creates content for the site, no worse than a copywriter, you can also use it to write articles. 100% uniqueness,5-day free trial of Pro Plan :). Click Here: https://dakelin.ru/news/promokod_143.html
2月 09, 2023 @ 20:11:14
Artificial intelligence creates content for the site, no worse than a copywriter, you can also use it to write articles. 100% uniqueness,5-day free trial of Pro Plan :). Click Here: https://ceramicinspirations.co.uk/articles/promokod_191.html
2月 11, 2023 @ 22:17:37
melbet promo code registration Click Here: https://www.nationallobsterhatchery.co.uk/news/melbet_promo_code__sign_up_offer.html
2月 12, 2023 @ 13:21:52
code promo 1xbet abidjan Click Here: https://www.lafp.org/includes/pages/1xbet-promo-code-1xbet-bonus.html
2月 12, 2023 @ 13:22:55
promo code for 1xbet india Click Here: https://www.lafp.org/includes/pages/1xbet-promo-code-1xbet-bonus.html
2月 12, 2023 @ 19:43:06
промокод на мел бет Click Here: https://caravela.coffee/pages/promokod_melbet_pri_registracii_na_pervuy_depozit.html
3月 01, 2023 @ 22:57:46
Phone Number For Reservations: http://rentry.co/wgt3w
3月 03, 2023 @ 09:44:12
Phone Number For Reservations: http://pastelink.net/8bdcysco
3月 07, 2023 @ 04:08:33
1xbet registration promo code. Click Here: https://www.aamas.org/news/1xbet_free_code_registration.html
3月 07, 2023 @ 18:01:33
promo codes for 1xbet. Click Here: https://www.lafp.org/includes/pages/1xbet-promo-code-1xbet-bonus.html
3月 08, 2023 @ 06:50:43
девушки видеочат порно. Click Here: https://rt.beautygocams.com/
3月 08, 2023 @ 23:21:39
melbet промокод на сегодня. Click Here: https://mebel-3d.ru/libraries/news/?melbet_2020_promokod_dlya_registracii_besplatno.html