web前端不要用table标签做





 我来答

3个回答

#热议# 上班途中天气原因受伤算工伤吗？

mikemelon2012
推荐于2017-09-12 · TA获得超过3633个赞

知道大有可为答主

回答量：938

采纳率：87%

帮助的人：381万

我也去答题访问个人页

关注

展开全部

这个效果如何：

如下是代码（基本效果出来了，内容你自己加吧）

<!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>