console
<title>仿豆瓣4</title>
<div>
<p class="p1">豆品</p>
<div class="div1">
<p class="p2">热卖商品......(<a href="#">更多</a>)</p>
<div class="img">
<a target="_blank" href="http://5b0988e595225.cdn.sohucs.com/images/20190401/153a99b89d6b491fad39395b035c16b7.jpg">
<img src="http://5b0988e595225.cdn.sohucs.com/images/20190401/153a99b89d6b491fad39395b035c16b7.jpg" width="340" height="340">
</a>
<p class="p3">
<a href="#">豆瓣冻顶乌龙茶</a>
¥95
</p>
</div>
<div class="img1">
<a target="_blank" href="http://image3.buy.ccb.com/merchant/201411/176785636/1431151628571_4.jpg">
<img src="http://image3.buy.ccb.com/merchant/201411/176785636/1431151628571_4.jpg" width="340" height="340">
</a>
<p class="p3">
<a href="#">豆瓣软面笔记本</a>
¥39
</p>
</div>
<div class="img2">
<a target="_blank" href="https://i02piccdn.sogoucdn.com/addfc8625116e669">
<img src="https://i02piccdn.sogoucdn.com/addfc8625116e669" alt="图片文本描述" width="340" height="340">
</a>
<p class="p3">
<a href="#">豆瓣收藏夹</a>
¥99
</p>
</div>
<div class="img3">
<a target="_blank" href="http://img007.hc360.cn/y4/M07/1E/0F/wKhQiFW7JeWEOQQfAAAAAB7SMmQ087.jpg..220x220a.jpg">
<img src="http://img007.hc360.cn/y4/M07/1E/0F/wKhQiFW7JeWEOQQfAAAAAB7SMmQ087.jpg..220x220a.jpg" width="340" height="340">
</a>
<p class="p3">
<a href="#">豆瓣经典帆布包</a>
¥149
</p>
</div>
</div>
</div>
<div class="div2">
<p class="p2">热门活动......</p>
<div class="img4">
<a target="_blank" href="http://pic34.nipic.com/20131017/11541888_143032532115_2.jpg">
<img src="http://pic34.nipic.com/20131017/11541888_143032532115_2.jpg" width="380" height="120">
</a>
<p>
<a href="#">我的豆瓣收藏夹里有什么</a>
</p>
</div>
<h4 class="p2">热门活动......(更多)</h4>
</div>
<div class="div3">
<h1 class="p4">同城</h1>
<p class="p5">近期活动</p>
<p class="p5">主办方</p>
<p class="p5">舞台剧</p>
</div>
<div class="div4">
<p class="p2">广州.本周热门活动......(<a href="#">更多</a>)</p>
<div class="img5">
<a target="_blank" href="http://img01.hc360.com/home/201310/201310240914242579.jpg">
<img src="http://img01.hc360.com/home/201310/201310240914242579.jpg" width="100" height="130">
</a>
<p>
<h4 class="p6">刘德华演唱会广州站</h4>
<p class="p6">4月2日 周四 - 4月4日 周六 广州宝能观致文化中心 广东...</p>
<h5 class="p6">98人关注</h5>
</p>
</div>
<div class="img6">
<a target="_blank" href="http://file.piaochong.com/project/2020/01/14/79c2da0ff45cce2d.jpg">
<img src="http://file.piaochong.com/project/2020/01/14/79c2da0ff45cce2d.jpg" width="100" height="130">
</a>
<p>
<h4 class="p6">女王凯伦索萨 《爱的语言》 演唱会</h4>
<p class="p6">4月30日 周四 20：00 - 22：00 星海音乐厅 （交响乐演奏厅...</p>
<h5 class="p6">2人关注</h5>
</p>
</div>
<div class="img7">
<a target="_blank" href="http://imgbdb2.bendibao.com/gzbdb/tour/20193/11/2019311181901_10782.jpg">
<img src="http://imgbdb2.bendibao.com/gzbdb/tour/20193/11/2019311181901_10782.jpg" width="100" height="130">
</a>
<p>
<h4 class="p6">从星之声到你的名字 动漫音乐会</h4>
<p class="p6">4月5日 周日 20：00 - 22：00 星海音乐厅 （交响乐演奏厅...</p>
<h5 class="p6">15人关注</h5>
</p>
</div>
<div class="img8">
<a target="_blank" href="http://file.piaochong.com/project/2019/05/08/f28fa41487aa4ac4.jpg">
<img src="http://file.piaochong.com/project/2019/05/08/f28fa41487aa4ac4.jpg" width="100" height="130">
</a>
<p>
<h4 class="p6">《四月是你的谎言》唯美经典音乐集</h4>
<p class="p6">4月10日 周五 20：00 - 22：00 星海音乐厅 广州市越秀区二...</p>
<h5 class="p6">6人关注</h5>
</p>
</div>
</div>
<div class="div5">
<p class="p2">活动标签......</p>
<div>
<p>音乐》</p>
<a href="#" class="p6">小型现场</a>
<a href="#" class="p6">音乐会</a>
<a href="#" class="p6">演唱会</a>
<a href="#" class="p6">音乐节</a>
</div>
<div>
<p>戏剧》</p>
<a href="#" class="p6">话剧</a>
<a href="#" class="p6">音乐剧</a>
<a href="#" class="p6">舞剧</a>
<a href="#" class="p6">歌剧</a>
<a href="#" class="p6">戏曲</a>
<a href="#" class="p6">其他</a>
</div>
<div>
<p>聚会》</p>
<a href="#" class="p6">生活</a>
<a href="#" class="p6">集市</a>
<a href="#" class="p6">摄影</a>
<a href="#" class="p6">外语</a>
<a href="#" class="p6">桌游</a>
<a href="#" class="p6">夜店</a>
<a href="#" class="p6">交友</a>
<a href="#" class="p6">美食</a>
<a href="#" class="p6">派对</a>
</div>
<div>
<p>电影》</p>
<a href="#" class="p6">主题放映</a>
<a href="#" class="p6">影展</a>
<a href="#" class="p6">影院活动</a>
</div>
<div>
<p>其他》</p>
<a href="#" class="p6">讲座</a>
<a href="#" class="p6">展览</a>
<a href="#" class="p6">运动</a>
<a href="#" class="p6">旅行</a>
<a href="#" class="p6">公益</a>
</div>
</div>
<div class="div6">
<p class="p6">© 2005 - 2020 douban.com,all rights reserved 北京豆网科技有限公司</p>
<p class="p6"><a href="#">京ICP证000015号</a>京ICP备110272288号 网络视听许可证<a href="#">0110418</a>号</p>
<p class="p6">京网文[2015]2016-368号 ㊣ <a href="#">京公网安备11010502000728</a> 新出网证(京)字129号</p>
<p class="p6">违法和不良信息举报电话：4008353331-9 hubao@douban.com</p>
<p class="p6"><a href="#">◪中国互联网举报中心</a> 电话：12377 <a href="#">新出发京批字第直160029号</a></p>
<div class="div7">
<a href="#">关于豆瓣.</a>
<a href="#">在豆瓣工作.</a>
<a href="#">联系我们.</a>
<a href="#">法律声明.</a>
<a href="#">帮助中心.</a>
<a href="#">移动应用.</a>
<a href="#">豆瓣广告</a>
<div class="img9">
<a target="_blank" href="http://5b0988e595225.cdn.sohucs.com/images/20190413/95430fa1fd9e4fee9d60a46b90039f50.jpeg">
<img src="http://5b0988e595225.cdn.sohucs.com/images/20190413/95430fa1fd9e4fee9d60a46b90039f50.jpeg" width="200" height="90">
</a>
</div>
</div>
</div>
</div>
a{
text-decoration:none;
}
.p1{
color: green;
font-size: 30px;
}
.p2{
color: green;
}
.p3{
color: red;
}
.p4{
color: rgb(233, 127, 27);
}
.p5{
color: rgb(114, 85, 58);
}
.p6{
color: rgb(202, 195, 195);
}
.div1 p{
float: left;
margin: -200px 0px 0px -200px;
}
.div2 p{
float: left;
margin: -200px 0px 0px -200px;
}
.div2 h4{
float: left;
margin: 10px 0px 0px -200px;
}
.div1{
float: left;
margin: -60px 0px 0px 100px;
padding: 200px;
width: 360px;
height: 440px;
}
.div2{
float: right;
margin: -840px -112px 0px 0px;
padding: 200px;
width: 100px;
height: 100px;
}
.div3{
float: left;
margin: 100px 0px 0px 0px;
width: 100px;
height: 200px;
}
.div4{
float: left;
margin: 100px 0px 0px 60px;
width: 760px;
height: 460px;
}
.div5{
float: right;
margin: 100px -112px 0px 0px;
width: 380px;
height: 460px;
}
.div6{
float: left;
margin: 100px -112px 0px 0px;
width:100%;
height: 200px;
}
.div7{
float: right;
margin: -185px -80px 0px 0px;
width:600px;
height: 200px;
}
div.img {
margin: -170px 0px 0px -200px;
padding: 1px;
float: left;
width: 300px;
}
div.img1{
margin: -366px 0px 0px 180px;
padding: 1px;
float: left;
width: 300px;
}
div.img2{
margin: 30px 0px 0px -200px;
padding: 1px;
float: left;
width: 300px;
}
div.img3{
margin: 30px -120px 0px 0px;
padding: 1px;
float: right;
width: 300px;
}
div.img4{
margin: -170px -1px 0px 0px;
padding: 1px;
float: right;
width: 300px;
}
div.img5 {
margin: -10px 0px 0px 0px;
padding: 1px;
float: left;
width: 320px;
}
div.img6{
margin: -138px 0px 0px 360px;
padding: 1px;
float: left;
width: 320px;
}
div.img7{
margin: 30px 0px 0px -1px;
padding: 1px;
float: left;
width: 320px;
}
div.img8{
margin: 30px 78px 0px 0px;
padding: 1px;
float: right;
width: 320px;
}
div.img9{
margin: 20px 280px 0px 0px;
padding: 1px;
float: right;
width: 320px;
}
div.img:hover .img1:hover
.img2:hover .img3:hover
.img4:hover .img5:hover
.img6:hover .img7:hover
.img8:hover .img9:hover {
border: 1px solid #777;
}
div.img .img1
.img2 .img3
.img4 .img5
.img6 .img7
.img8 .img9 img {
width: 100%;
height: 40%;
}
div.img p{
float: left;
margin: 0px 2px 0px 0px;
}
div.img1 p{
float: left;
margin: 0px 2px 0px 0px;
}
div.img2 p{
float: left;
margin: 0px 2px 0px 0px;
}
div.img3 p{
float: left;
margin: 0px 2px 0px 0px;
}
div.img4 p{
float: left;
margin: 0px 2px 0px 0px;
}
div.img5 h4{
float: left;
margin: -130px 0px 0px 110px;
}
div.img5 h5{
float: left;
margin: -50px 0px 0px 110px;
}
div.img5 p{
float: left;
margin: -100px 0px 0px 110px;
}
div.img6 h4{
float: left;
margin: -130px 0px 0px 110px;
}
div.img6 h5{
float: left;
margin: -24px 0px 0px 110px;
}
div.img6 p{
float: left;
margin: -86px 0px 0px 110px;
}
div.img7 h4{
float: left;
margin: -130px 0px 0px 110px;
}
div.img7 h5{
float: left;
margin: -24px 0px 0px 110px;
}
div.img7 p{
float: left;
margin: -86px 0px 0px 110px;
}
div.img8 h4{
float: left;
margin: -130px 0px 0px 110px;
}
div.img8 h5{
float: left;
margin: -24px 0px 0px 110px;
}
div.img8 p{
float: left;
margin: -86px 0px 0px 110px;
}