温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

布局小窍门之----让头部和主干内容居中

发布时间:2020-07-09 00:25:56 来源:网络 阅读:469 作者:027ryan 栏目:开发技术

平时写布局的时候要保证头部标题或者横向的菜单和主体内容居中,可以将定义一个样式,比如:

<style>

.container{

            width: 980px;

            margin: 0 auto;

        }

</style>

头部和主体部分样式都放在带有该样式的标签里:


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        body{

            margin: 0 auto;

            //解决body边框问题

        }

        .header{

            height: 48px;

            background-color: red;

        }

        .body{

            background-color: #dddddd;

        }

        .container{

            width: 980px;

            margin: 0 auto;

        }

    </style>

</head>

<body>

    <div class="header">

        <div class="container">

           <a>头部内容</a>

        </div>

    </div>


    <div class="body">

        <div class="container">

        <p>主干内容</p>

        <p>主干内容</p>

        <p>主干内容</p>

        <p>主干内容</p>

        </div>

    </div>

    <div class="footer"></div>

</body>

</html>

显示效果:

布局小窍门之----让头部和主干内容居中

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI