console
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img{
height: 200px;
font-weight: 100px;
}
.mod{
float: right;
}
ul{
list-style: none;
}
img{
float: right;
}
blockquote {
margin: 0;
padding: 0;
}
body {
display: block;
padding-top: 30px;
}
body,
td,
th {
font: 12px Helvetical, Arial, sans-serif;
font-stretch: 100%;
line-height: 1.62;
}
html {
color: #111;
}
h2 {
font: 15px Arial, Helvetica, sans-serif;
color: #072;
margin: 0 0 12px 0;
line-height: 150%;
-webkit-margin-before: 0.83em;
-webkit-margin-after: 0.83em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}
ul,
ol {
list-style: none;
display: block;
}
li {
display: list-item;
text-align: -webkit-match-parent;
}
a {
cursor: pointer;
}
a:visited {
color: #669;
text-decoration: none;
}
a:link {
color: #37a;
text-decoration: none;
}
.section {
padding: 10px 0;
margin-bottom: 30px;
min-height: 200px;
}
.section .wrapper:before,
.section .wrapper:after {
content: "\0020";
display: block;
clear: both;
}
.section .wrapper {
zoom: 1;
}
.wrapper {
width: 950px;
margin: 0 auto;
}
.section .side {
float: right;
width: 265px;
margin-left: 30px;
}
.section .main {
overflow: hidden;
zoom: 1;
}
.section .sidenav {
float: left;
width: 100px;
margin-right: 20px;
}
#dale_anonymous_homepage_right_top {
display: block;
}
.mod {
margin-bottom: 30px;
width: auto;
}
.mod:after {
content: '\0020';
display: block;
clear: both;
}
.rec_topics {
line-height: 1;
margin-bottom: 15px;
}
#anony-sns .online li {
margin-top: 10px;
color: #999;
}
.rec_topics_name {
display: inline-block;
margin-bottom: 6px;
font-size: 14px;
line-height: 1.3;
color: #3377aa;
}
.rec_topics_subtitle {
display: block;
margin-bottom: 15px;
font-size: 13px;
line-height: 1;
color: #aaaaaa;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pl {
font: 12px Arial, Helvetica, sans-serif;
line-height: 150%;
color: #666;
}
.albums {
float: left;
width: 350px;
margin-right: 30px;
color: #999999;
font-size: 0;
letter-spacing: -0.31em;
}
#anony-sns .albums ul {
margin: -10px 0 0 -10px;
}
#anony-sns .albums li {
display: inline-block;
zoom: 1;
letter-spacing: normal;
word-spacing: normal;
width: 170px;
vertical-align: top;
font-size: 12px;
margin: 10px 0 0 10px
}
#anony-sns .notes {
overflow: hidden;
zoom: 1;
color: #666666;
}
#anony-sns .notes .first {
margin-top: 0;
}
#anony-sns .notes li {
margin-top: 12px;
word-wrap: break-word;
}
#anony-time .section-title a {
color: #494949;
}
.section-title a:link,
.section-title a:visited {
font-size: 24px;
}
#anony-time .time-list li {
display: inline-block;
width: 100px;
vertical-align: top;
margin-right: 60px;
text-align: center;
margin-bottom: 30px;
}
#anony-time .time-list li .cover {
display: block;
margin-bottom: 10px;
position: relative;
}
#anony-time .time-list li img {
width: 100px;
height: 141px;
}
#anony-time .time-list li .title {
color: #333;
font-size: 13px;
line-height: 1.38;
}
#anony-time .time-list li .type {
color: #999;
line-height: 1;
margin-top: 10px;
display: block;
}
a img {
border-width: 0;
vertical-align: middle;
}
fieldset,
img {
border: 0;
}
.list {
font-size: 0;
letter-spacing: -.31em;
}
.list ul {
margin-top: -40px;
}
.tags ul {
margin-top: -4px;
}
.list li {
display: inline-block;
zoom: 1;
width: 24.8%;
margin-top: 40px;
vertical-align: top;
text-align: center;
font-size: 12px;
letter-spacing: normal;
word-spacing: normal;
}
.tags li {
width: 4em;
margin-top: 4px;
text-align: left;
}
#annoy-movie .movie-charts ol {
margin: 0;
padding: 0;
}
#annoy-movie .movie-charts li {
margin-bottom: 6px;
padding-bottom: 5px;
list-style-type: decimal;
list-style-position: inside;
border-bottom: 1px solid #eaeaea;
}
#annoy-movie .movie-list .pic {
height: 145px;
overflow: hidden;
}
#annoy-movie .movie-list img {
width: 100px;
}
a img {
border-width: 0;
vertical-align: middle;
}
#annoy-movie a:link,
#annoy-movie a:visited {
color: #27a;
}
#annoy-movie .movie-list .title a:link,
#annoy-movie .movie-list .title a:visited {
color: #333;
}
.list .pic {
margin-bottom: 10px;
}
.list .title {
line-height: 1.45;
font-size: 13px;
margin-bottom: 4px;
word-wrap: break-word;
}
.rating {
margin-bottom: 4px;
}
#annoy-movie .bn-link:link,
#annoy-movie .bn-link:visited {
background: #1c8bd0;
color: #fff;
}
.bn-link {
display: inline-block;
zoom: 1;
vertical-align: middle;
padding: 2px 10px;
border-radius: 2px;
}
</style>
</head>
<body>
<div class="sidenav">
<h2 class="section-title">
<a href="https://market.douban.com?dcs=anonymous-home-sidenav&dcm=douban">
豆品
</a>
</h2>
</div>
<div class="side">
<div class="mod">
<h2>
热门活动
· · · · · ·
</h2>
<ul class="market-topics">
<li class="market-topic-item" >
<a href="https://www.douban.com/gallery/topic/761/?index=2&r=topic?dcm=douban&dcs=anonymous-home-topic"
target="_blank">
<div class="market-topic-pic"
style="background-image:url(https://img3.doubanio.com/img/files/file-1513305186-3.jpg)">
</div>
</a>
<p class="market-topic-footer">
<a href="https://www.douban.com/gallery/topic/761/?index=2&r=topic?dcm=douban&dcs=anonymous-home-topic"
target="_blank">
我的豆瓣收藏夹里有什么
</a>
</p>
</li>
</ul>
</div>
<div class="mod"></div>
<h2>
官方小组
· · · · · ·
<span class="pl"> (
<a href="https://www.douban.com/group/588598?dcs=anonymous-home-more-shops&dcm=douban#hot-shop-wrapper" target="_self">更多</a>
) </span>
</h2>
<ul class="market-group-topics">
</ul>
</div>
</div>
<div class="main">
<h2>
热卖商品
· · · · · ·
<span class="pl"> (
<a href="https://market.douban.com?dcs=anonymous-home-more-skus&dcm=douban" target="_self">更多</a>
) </span>
</h2>
<ul class="market-spu-list">
<li class="main-sku">
<a href="https://market.douban.com/campaign/oolongtea?dcm=douban&dcs=anonymous-home-spu"
target="_blank">
<div class="market-spu-pic"
style="background-image: url(https://img3.doubanio.com/img/files/file-1546855945-0.jpg)">
</div>
</a>
<div class="market-spu-footer">
<span class="market-spu-price">
￥59
</span>
<a href="https://market.douban.com/campaign/oolongtea?dcm=douban&dcs=anonymous-home-spu"
target="_blank"
class="market-spu-title">
豆瓣冻顶乌龙茶
</a>
</div>
</li>
<li class="main-sku">
<a href="https://market.douban.com/campaign/softcovernotebook?dcm=douban&dcs=anonymous-home-spu"
target="_blank">
<div class="market-spu-pic"
style="background-image: url(https://img3.doubanio.com/img/files/file-1545819571-0.jpg)">
</div>
</a>
<div class="market-spu-footer">
<span class="market-spu-price">
￥39
</span>
<a href="https://market.douban.com/campaign/softcovernotebook?dcm=douban&dcs=anonymous-home-spu"
target="_blank"
class="market-spu-title">
豆瓣软面笔记本
</a>
</div>
</li>
<li class="main-sku">
<a href="https://market.douban.com/campaign/collection?dcm=douban&dcs=anonymous-home-spu"
target="_blank">
<div class="market-spu-pic"
style="background-image: url(https://img9.doubanio.com/img/files/file-1513305186-4.jpg)">
</div>
</a>
<div class="market-spu-footer">
<span class="market-spu-price">
￥89
</span>
<a href="https://market.douban.com/campaign/collection?dcm=douban&dcs=anonymous-home-spu"
target="_blank"
class="market-spu-title">
豆瓣收藏夹
</a>
</div>
</li>
<li class="main-sku">
<a href="https://market.douban.com/campaign/canvastotebag?dcm=douban&dcs=anonymous-home-spu"
target="_blank">
<div class="market-spu-pic"
style="background-image: url(https://img3.doubanio.com/img/files/file-1544439702-0.jpg)">
</div>
</a>
<div class="market-spu-footer">
<span class="market-spu-price">
￥129
</span>
<a href="https://market.douban.com/campaign/canvastotebag?dcm=douban&dcs=anonymous-home-spu"
target="_blank"
class="market-spu-title">
豆瓣经典帆布包
</a>
</div>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>