随便写了一下结构,细节你自己再调整,如图:
html如下:
<div class="demo"><h1>西虹市首富 <span>(2018)</span></h1>
<dl>
<dt><img src="https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2529206747.webp" ></dt>
<dd>导演: 闫非 / 彭大魔</dd>
<dd>编剧: 闫非 / 彭大魔 / 林炳宝</dd>
<dd>主演: 沈腾 / 宋芸桦 / 张一鸣 / 张晨光 / 常远</dd>
<dd>类型: 喜剧</dd>
<dd>制片国家/地区: 中国大陆</dd>
<dd>语言: 汉语普通话</dd>
<dd>上映日期: 2018-07-27(中国大陆)</dd>
<dd>片长: 118分钟</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"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
</title>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="Sun, 6 Mar 2005 01:00:00 GMT" />
<meta content="提供图书、电影、音乐唱片的推荐、评论和价格比较,以及城市独特的文化生活。" name="description"/>
<meta name="google-site-verification" content="xFZT7kAiT6BneZzRQdbBNYLrgylmrMHECP5lfsORqhc" />
<script type="text/javascript" src="http://t.douban.com/js/packed_jquery0.js"></script>
<link rel="shortcut icon" href="http://t.douban.com/favicon.ico" type="image/x-icon" />
<link href="http://img2.douban.com/css/packed_douban223.css" rel="stylesheet" type="text/css" />
<link href="http://img2.douban.com/css/separation/packed__all62.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://img2.douban.com/js/packed_douban73.js"></script>
<script type="text/javascript" src="http://img2.douban.com/js/separation/packed__all7.js"></script>
<style type="text/css">
.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嵌入。也可以前面再加一些,不过这样要快速一次完成。欢迎分享,转载请注明来源:内存溢出
评论列表(0条)