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

发布时间:2020-07-09 00:25:56 作者:027ryan
来源:网络 阅读:443

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

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

显示效果:

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

推荐阅读:
  1. bootstrap之怎样让图片居中
  2. css里面如何让body内容居中

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

标签 dddddd 窍门

上一篇:springmvc+spring+mybatis+maven项目集成shiro进行用户权限控制【转】

下一篇:Android的四种启动模式

相关阅读

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

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