<!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>HTML+CSS制作---斗鱼部分静态页面
猜你喜欢
转载自blog.csdn.net/qq_36818386/article/details/81191550
今日推荐
周排行