这些区块变成CSS代码,怎么弄 ?数字代表大小

不会弄,区块移动居中,求大神帮助... 不会弄,区块移动居中,求大神帮助 展开
 我来答
guichun68
2017-06-09 · TA获得超过1046个赞
知道小有建树答主
回答量:724
采纳率:93%
帮助的人:175万
展开全部
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>baidu知道问题</title>
    <style type="text/css">
        /*网页整体样式:去掉默认padding和margin*/
        html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin:0; padding:0; }
        /*设置宽度值,高度自适应,版心居中*/
        .root{
            width: 970px;
            margin: 0 auto;
            background-color: rgba(222,222,222,.9);
        }
        /*顶部整个横条banner###########################*/
        .top{
            width: 970px;
            overflow: hidden;
        }
        /*顶部banner左侧*/
        .tLeft{
            float: left;
            width: 277px;
            height: 103px;
            background-color: #FE0000;
            margin-right: 14px;
        }
        /*顶部banner右侧*/
        .tRight{
            float: left;
            width: 679px;
        }
        /*顶部banner右侧 上部*/
        .trTop{
            float: right;
            width: 137px;
            height: 49px;
            background: #00FF01;
        }
        /*顶部banner右侧 下部*/
        .trBottom{
            float: right;
            width: 679px;
            height: 46px;
            margin-top: 8px;
            background-color: #00FF01;
        }
        /*中心主内容区########################################*/
        .main{
            width: 970px;
            margin-top: 10px;
            overflow: hidden;
        }
        .mLeft{
            float: left;
            width: 310px;
            height: 435px;
            background-color: #FC0;
        }
        .mRight{
            float: right;
            width: 650px;
        }
        .mrTop{
            width: 650px;
            height: 400px;
            margin-bottom: 10px;
        }
        .mrBottom{
            width: 650px;
            height: 25px;
            background-color: #329900;
        }
        .mrtLeft{
            float: left;
            width: 450px;
        }
        .mrtRight{
            float: right;
            width: 190px;
            height: 100%;
            background-color: #CB3398;
        }
        .m1{
            width: 450px;
            height: 240px;
            background-color: #39f;
        }
        .m2{
            width: 450px;
            height: 110px;
            background-color: #39f;
            margin-top: 10px;
        }
        .m3{
            width: 450px;
            height: 30px;
            background-color: #39f;
            margin-top: 10px;
        }
        /*底部banner#################################*/
        .bottom{
            width: 970px;
            height: 35px;
            background-color: #009;
            margin-top: 10px;
        }

    </style>
</head>
<body>

<div class="root">
    <div class="top">
        <div class="tLeft"></div>
        <div class="tRight">
            <div class="trTop"></div>
            <div class="trBottom"></div>
        </div>
    </div>
    <div class="main">
        <div class="mLeft"></div>
        <div class="mRight">
            <div class="mrTop">
                <div class="mrtLeft">
                    <div class="m1"></div>
                    <div class="m2"></div>
                    <div class="m3"></div>
                </div>

                <div class="mrtRight"></div>
            </div>
            <div class="mrBottom"></div>
        </div>
    </div>
    <div class="bottom"></div>
</div>
</body>
</html>
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式