web前端 不要用table标签做
展开全部
这个效果如何：
如下是代码（基本效果出来了，内容你自己加吧）
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html,body{
height: 100%;
}
#container{
width: 90%;
height: 100%;
background-color: #F9F9F9;
padding: 10px;
margin: 0 auto;
}
.logo{
background: url(163.png) no-repeat;
width: 160px;
height: 200px;
float: left;
margin-left: 20px;
margin-top: 20px;
}
.box{
width: 160px;
height: 200px;
background-color: #E8E8E8;
float: left;
margin-left: 20px;
margin-top: 20px;
}
.box dl{
width: 140px;
list-style: none;
float: left;
margin: 10px;
}
.box dl dt{
width: 100px;
font-weight: bold;
font-size: 14px;
margin: 10px;
}
.box dl dd{
width: 40px;
float: left;
font-size: 12px;
margin: 10px 12px;
}
.box:hover{
background-color: #206F96;
color: #FEFEFE;
}
</style>
</head>
<body>
<div id="container">
<div class="logo"></div>
<div class="box">
<dl>
<dt>新闻</dt>
<dd>国内</dd>
<dd>国际</dd>
<dd>社会</dd>
<dd>军事</dd>
<dd>图片</dd>
<dd>评论</dd>
<dd>探索</dd>
<dl>
</div>
<div class="box">
<dl>
<dt>新闻</dt>
<dd>国内</dd>
<dd>国际</dd>
<dd>社会</dd>
<dd>军事</dd>
<dd>图片</dd>
<dd>评论</dd>
<dd>探索</dd>
<dl>
</div>
<div class="box">
<dl>
<dt>新闻</dt>
<dd>国内</dd>
<dd>国际</dd>
<dd>社会</dd>
<dd>军事</dd>
<dd>图片</dd>
<dd>评论</dd>
<dd>探索</dd>
<dl>
</div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
