使用html写一个图文介绍框，可扩展的，像豆瓣这样_随笔

随便写了一下结构，细节你自己再调整，如图：

html如下：

<h1>西虹市首富 <span>(2018)</span></h1>

<dl>

<dd>语言: 汉语普通话</dd>

<dd>又名: 资本接班人 / Hello Mr. Billionaire</dd>

</dl>

</div>

css如下：

*{margin: 0padding: 0font-size: 14px}

.demo{width: 500pxpadding: 20pxmargin: 20pxborder: 1px solid #ddd}

.demo h1{font-size: 26pxline-height: 1.6emmargin-bottom: 10px}

.demo h1 span{font-size: 26pxcolor: #999}

.demo dl{max-width: 333pxlist-style: noneposition: relativepadding-left: 150px}

.demo dt{position: absoluteleft: 0top: 0}

.demo dt img{max-width: 135px}

.demo dd{font-size: 12pxline-height: 1.4emmargin-bottom: 5px}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<head>

<title>

豆瓣

</title>

.anony-nav { margin-bottom:20px}

.anony-nav .hd a:link,

.anony-nav .hd a:visited,

.anony-nav .hd a:hover,

.anony-nav .hd a:active { background-color:transparent}

.anony-nav .hd { height:74px}

.anony-nav .hd,

.anony-nav .bd { clear:bothwidth:950pxmargin:0 auto}

#db-sidesrh { float:leftmargin-bottom:20px}

#db-sidesrh:after,

.anony-nav .hd:after,

.anony-nav .bd:after,

.anony-nav .login .item:after { content:'\0020'display:blockclear:both}

.anony-nav .logo { float:leftmargin-top:23px}

.anony-nav .logo a { display:blockwidth:168pxheight:34pxbackground:transparentoverflow:hiddenline-height:10embackground:url(http://t.douban.com/pics/nav/ui_nav_logo_4.png) no-repeat 0 -3px}

.anony-nav .top-nav-items { float:rightmargin:37px 0 0 0}

.anony-nav .top-nav-items li { margin:0 0 0 44px}

.anony-nav a.lnk-book:link,

.anony-nav a.lnk-book:visited,

.anony-nav a.lnk-book:hover,

.anony-nav a.lnk-book:active,

.anony-nav a.lnk-movie:link,

.anony-nav a.lnk-movie:visited,

.anony-nav a.lnk-movie:hover,

.anony-nav a.lnk-movie:active,

.anony-nav a.lnk-music:link,

.anony-nav a.lnk-music:visited,

.anony-nav a.lnk-music:hover,

.anony-nav a.lnk-music:active,

.anony-nav a.lnk-9:link,

.anony-nav a.lnk-9:visited,

.anony-nav a.lnk-9:hover,

.anony-nav a.lnk-9:active,

.anony-nav a.lnk-srh:link,

.anony-nav a.lnk-srh:visited,

.anony-nav a.lnk-srh:hover,

.anony-nav a.lnk-srh:active { display:-moz-inline-boxdisplay:inline-block*display:inlinezoom:1width:100pxheight:24pxoverflow:hiddenline-height:10embackground:transparent url(http://t.douban.com/pics/nav/ui_nav_logo_4.png) no-repeat -177px 0vertical-align:text-bottom}

.anony-nav a.lnk-srh:link,

.anony-nav a.lnk-srh:visited,

.anony-nav a.lnk-srh:hover,

.anony-nav a.lnk-srh:active { width:14pxheight:14pxmargin-left:5pxbackground-position:0 -48px}

.anony-nav a.lnk-movie:link,

.anony-nav a.lnk-movie:visited,

.anony-nav a.lnk-movie:hover,

.anony-nav a.lnk-movie:active { background-position: -283px 0}

.anony-nav a.lnk-music:link,

.anony-nav a.lnk-music:visited,

.anony-nav a.lnk-music:hover,

.anony-nav a.lnk-music:active { background-position: -385px 0}

.anony-nav a.lnk-9:link,

.anony-nav a.lnk-9:visited,

.anony-nav a.lnk-9:hover,

.anony-nav a.lnk-9:active { width:80pxbackground-position: -485px 0}

.anony-nav fieldset { border:0padding:0margin:0}

.anony-nav legend { display:none}

.anony-nav .reg { float:leftposition:relativewidth:590pxheight:134pxfont-size:14pxcolor:#666line-height:1.6background:#e9eef2 url(http://t.douban.com/pics/nav/ui_b_2.png) no-repeat -12px 0}

.anony-nav .reg div { padding:22px 0 18px 0}

.anony-nav .reg strong { float:leftwidth:200pxheight:80pxtext-align:centerfont-size:24pxpadding-top:46px}

.anony-nav .reg em { font-size:12pxfont-style:normalcolor:#666}

.anony-nav .reg b { font-size:16pxfont-weight:400margin-right:5px}

a.lnk-reg:link,

a.lnk-reg:visited,

a.lnk-reg:hover,

a.lnk-reg:active { display:-moz-inline-boxdisplay:inline-block*display:inlinezoom:1font-size:12pxtext-align:leftwidth:130pxheight:27pxline-height:28pxcolor:#fffbackground:url(http://t.douban.com/pics/nav/ui_nav_logo_4.png) no-repeat -120px -48px}

.anony-nav .reg .lnk-reg strong { float:nonecolor:#fffpadding:0font-size:16pxfont-weight:400margin:0 10px 0 16px}

.anony-nav .login { float:rightwidth:356pxheight:134pxfont-size:14pxbackground:#e9eef2 url(http://t.douban.com/pics/nav/ui_b_2.png) no-repeat 348px 0}

.anony-nav .login form { position:relativepadding:23px 0 0 20pxpadding:16px 0 0 20px\9}

.anony-nav .item label { float:leftwidth:4em}

.anony-nav .item input { border:1px solid #cccwidth:200pxpadding:3px 2px}

.anony-nav .login .item { margin-bottom:10px}

.anony-nav .login .item a { font-size:12px}

.anony-nav .login .item1 { float:leftfont-size:12pxmargin:0 20px 10px 0color:#666}

.anony-nav .login .item1 label { display:-moz-inline-boxdisplay:inline-blockdisplay:inline\9*zoom:1margin-left:4.5emmargin-top:4px}

.anony-nav .login .item1 label input { *float:leftmargin-right:2px\9_margin-right:-4px}

.anony-nav .bn-submit { width:80pxheight:28pxcolor:#FFFfont-size:14pxline-height:28pxpadding-bottom:3pxpadding:0\9border:nonebackground:transparent url(http://t.douban.com/pics/nav/ui_nav_logo_4.png) no-repeat -23px -48pxcursor:pointer}

#nav-vsrh-bn { position:absolutewidth:29pxheight:25pxoverflow:hiddenline-height:10embackground:url(http://t.douban.com/pics/nav/ui_sl_bn.png) no-repeat_background:none_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://t.douban.com/pics/nav/ui_sl_bn.png', sizingMethod='scale')}

#nav-vsrh { position:absolutewidth:211pxheight:50px}

#nav-vsrh .bd { height:47pxcolor:#fffbackground:url(http://t.douban.com/pics/nav/ui_sl_bbd_1.png) no-repeat}

#nav-vsrh form { padding:5px 10px}

#nav-vsrh .search-btn,

.anony-nav .vsrh { display:none}

#nav-vsrh input { width:94%}

#nav-vsrh .option input { width:auto}

#nav-vsrh .x1 { position:absoluteleft:209pxtop:0width:2pxheight:47pxoverflow:hiddenbackground:url(http://t.douban.com/pics/nav/ui_sl_br_1.png) no-repeat_background:none_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://t.douban.com/pics/nav/ui_sl_br_1.png', sizingMethod='scale')}

#nav-vsrh .x2 { position:absolutetop:47pxleft:0width:211pxheight:3pxoverflow:hiddenbackground:url(http://t.douban.com/pics/nav/ui_sl_bb.png) no-repeat_background:none_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://t.douban.com/pics/nav/ui_sl_bb.png', sizingMethod='scale')}

#nav-vsrh .wrapinp { padding:12px 10px}

.wrapinp input{ padding:2px}

#page_focus { width:220px}

.intro1 { padding:8px 2px 0 8pxline-height:1.4}

.movie_headerline ul.menu li,

.movie_headerline ul.menu li div,

.movie_headerline ul.menu li .on { height:54px*height:50px !important_height:42px !important}

.movie_headerline .content .title:after { content:'\0020'display:blockclear:bothzoom:1margin-bottom:5px}

.movie_headerline .content .headerline_img { width:140px}

.movie_headerline .content .headerline_img img { width:130px}

.movie_headerline .content .headerline_content { width:250px}

.anony-nav .nav-tip { position:relativewidth:960pxmargin:0 auto}

.movie_headerline .content .headerline_img { height:185px}

.movie_headerline .content { height:190px*height:180px}

.movie_headerline ul.menu { height:218px*height:203px*overflow:hidden}

#db-sidesrh { width:100%}

#db-sidesrh form { float:rightwidth:100%}

#db-sidesrh input { float:left}

#db-sidesrh .inp input { width:246pxpadding:0 2pxvertical-align:baseline}

#db-sidesrh input { height:24pxline-height:24pxborder:1px solid #c3c3c3}

#db-sidesrh .bn-srh { width:50pxheight:26pxmargin:0 0 0 2px*margin:0padding-bottom:2pxpadding-bottom:0\9letter-spacing:3pxpadding-left:1pxcursor:pointerborder:nonebackground:transparent url(http://t.douban.com/pics/nav/ui_ns_sbg3.png) no-repeat -360px -100px}

#db-sidesrh .submenu .menu { width:60px}

#db-sidesrh .submenu .selected span { background-image:url(http://t.douban.com/pics/nav/ui_ns_sbg3.png)background-position:-450px -124px}

#db-sidesrh .submenu .open span { background-position:-450px -100px}

#db-sidesrh .submenu .line { height:1pxfont-size:0line-height:0margin-bottom:1pxoverflow:hiddenborder-bottom:1px solid #c3c3c3}

#db-sidesrh .submenu,#db-sidesrh .submenu .selected,#db-sidesrh .submenu .menu { border-color:#c3c3c3}

进入设置效果点击：>>控制面板>>个人首页维护>>自定义空白面板>>新增空白面板，命名‘豆瓣’，勾选源代码，把以下代码粘贴到独立合适的位置，保存。第二步，进行定制首页模块：>>控制面板>>定制首页的内容模块>>添加，勾选“豆瓣”，点击下方的选取按钮，保存定制首页模块。完成。如果豆瓣提供的调用，那就需要做一个页，然后采用iframe嵌入。也可以前面再加一些，不过这样要快速一次完成。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zaji/7623401.html

使用html写一个图文介绍框，可扩展的，像豆瓣这样

发表评论

评论列表（0条）