<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } .div1 { width: 1200px; height: 417px; background-color: #f2f2f2; } .div1 .div2 { float: left; width: 587px; height: 417px; background-color: #ffffff; } .div1 .div2 .pic1 { float: left; margin-top: 20px; margin-left: 20PX; } .div1 .div2 .pic2 { float: left; width: 350px; height: 235px; border-radius: 4px; margin-top: 20px; margin-left: 20px; margin-right: 20px; margin-bottom: 20px; } .div1 .div2 .pic3 { float: left; width: 166px; height: 120px; margin-left: 20px; border-radius: 5px; } .div1 .div2 .pic4 { float: left; width: 166px; height: 120px; margin-left: 20px; border-radius: 5px; } .divwenzi { float:left; } .divwenzi dl { padding-left: 20px; padding-top: 20px; padding-right: 20px; } .div1 .divwenzi dl dt { font: 13px/22px "宋体"; color: #3c3c3c; font-weight: bold; } .divwenzi dd { font-size: 12px; font-family: "微软雅黑"; color: #888888; } .div1 .divwenzi .dl3 dd { border-bottom: 1px solid #f3f4f8; } .div1 .divwenzi .ul1 { float: left; list-style: none; } .div1 .divwenzi .ul1 li { font: 12px/14px "微软雅黑"; padding-top: 20px; padding-left: 20px; padding-right: 20px; } .div1 .divwenzi .ul1 li a { color: #b896a5; } /*.div1 .divwenzi dl { background-color: #ffffff; }*/ /* .div1 .divwenzi ul { background-color: #ffffff; }*/ .div1 .three_div { float: left; width: 245px; height: 25px; } .div1 .three_div .two_ul { list-style: none; } .div1 .three_div .two_ul li { float: left; margin-top: 20px; margin-right: 1px; width: 80px; height: 25px; background-color: #dddddd; text-align: center; font: 14px/17px "宋体"; font-weight: 1000px; line-height: 25px; border-radius: 5px; } .div1 .three_div .two_ul .current { background-color: #ff7700; } .div1 .four_div { float: left; width: 102px; height: 330px; margin-top: 20px; /*margin-right: 231px;*/ } .div1 .four_div img { padding-top: 15px; border-radius: 10px; width: 100px; height: 67px; } .div1 .five_div { float: left; width: 123px; height:328px; padding-left: 20px; } .div1 .five_div dl { float: left; margin-top: 40px; } .div1 .five_div dl dt { font: 12px/14px "微软雅黑"; } .div1 .five_div dl dd { font: 12px/14px "微软雅黑"; color: #777777; } .div1 .five_div p { font: 12px/14px "微软雅黑"; color: #3c3c3c; } .div1 .five_div .pc { width: 40px; height: 15px; border: 3px solid #e5e8ef; border-radius: 5px; } .div1 .five_div .ios { width: 75px; height: 15px; border: 3px solid #e5e8ef; border-radius: 5px; } </style></head><body> <div class="div1"> <div class="div2"> <img src="images/pic1.jpeg" class="pic1"> <img src="images/pic2.jpg" class="pic2"> <img src="images/pic3.jpg" class="pic3"> <img src="images/pic4.jpg" class="pic4"> </div> <div class="divwenzi"> <dl class="d11"> <dt>领贵族加热度 暑期活跃BUFF火热开启</dt> <dd>暑期福利！贵族免费发放,直播间热度加成</dd> </dl> <dl class="d12"> <dt>斗鱼DLP全国二次元大赛 盛大开幕！</dt> <dd>想要C位出道的小可爱们 赶紧来报名参赛吧</dd> </dl> <dl class="d13"> <dt>主播变形记 致敬这个夏天最可爱的人</dt> <dd>高温下坚守 最火"热"的皱襞等你来参加</dd> </dl> <ul class="ul1"> <li><a>[新闻] </a>RW侠盗勇士主题日 淑仪疯狂的大炮现场助力</li> <li><a>[新闻] </a>英特尔大师挑战赛火热来袭 等你来嗨</li> <li><a>[新闻] </a>篮球梦之夏 NBA2KOL2活动火热开启</li> <li><a>[新闻] </a>斗鱼《一人之下》首测 主播招募开启</li> <li><a>[新闻] </a>《拳皇命运》S2赛季KOF锦标赛开幕</li> <li><a>[直播指南]</a>斗鱼公会操作指南&指导教程FAQ </li> </ul> </div> <div class="three_div"> <ul class="two_ul"> <li class="current">热门</li> <li>页游</li> <li>手游</li> </ul> </div> <div class="four_div"> <img src="images/pic5.jpg" > <img src="images/pic6.jpg" > <img src="images/pic7.jpg" > <img src="images/pic8.jpg" > </div> <div class="five_div"> <dl> <dt><b>[绝地求生]</b></dt> <dd>大吉大利,今晚吃鸡！</dd> <p class="pc">PC</p> </dl> <dl> <dt><b>[王者荣耀]</b></dt> <dd>2亿玩家"聚"好玩</dd> <p class="ios">IOS/安卓</p> </dl> <dl> <dt><b>[绝地求生,刺激战场]</b></dt> <dd>绝地求生正版手游</dd> <p class="ios">安卓、IOS</p> </dl> <dl> <dt><b>[堡垒之夜]</b></dt> <dd>掌握触头与枪的艺术</dd> <p class="pc">PC</p> </dl> </div> </div> </body></html> 后期我接着修改！~~~