CSS入门 0x6 布局

最新推荐文章于 2019-08-29 09:29:11 发布

cellinlab

最新推荐文章于 2019-08-29 09:29:11 发布

阅读量156

点赞数

分类专栏： CSS 前端基础文章标签：弹性布局流式布局 css布局

本文链接：https://blog.csdn.net/funkstill/article/details/88708405

版权

前端基础同时被 2 个专栏收录

167 篇文章 0 订阅

订阅专栏

CSS

29 篇文章 0 订阅

订阅专栏

设置基本结构

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>博客布局</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            body {
                font: 62.5%/1.6 "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, sans-serif;
                background-color:#D4D4D4;
            }
            h1 {
                font-size: 2.4em;
                font-weight: normal;
            }
            h2 {
                font-size: 2.0em;
                font-weight: normal;
            }
            p, li {
                font-size: 1.4em;
            }
            h1, h2, p {
                margin: 1em 0;
            }
            .branding h1 {
                margin: 0;
            }
            .wrapper {
                background-color: #fff;
            }
            .header {
                height: 50px;
                background-color:#b0b0b0;
                padding: 20px;
            }
            .nav {
                list-style: none;
                background-color:#eee;
                padding: 20px;
            }
            .content .secondary .promo {
                padding-left: 20px;
            }
            .footer {
                background-color:#b0b0b0;
                padding: 1px 20px;
            }

            /*让主题标签所有内容居中*/
            body {
                text-align-last: center;
            }
            /*设置容器宽度*/
            .wrapper {
                width: 920px;
                margin: 0 auto;
                text-align: left;/*容器内容向左对其*/
            }
           
            .content .primary{
                width: 670px;
                float:right;
                display: inline;
            }
            .content .secondary {
                width: 230px;
                float: left;
                display: inline;
            }
            .content .primary .primary {
                width: 400px;
                float:left;
                display: inline;;
            }
            .content .primary .secondary {
                width: 230;
                padding-right: 20px;
                float: right;
                display: inline;
            }
            .content {
                overflow: hidden;/*防止页脚上升*/
            }
        </style>
    </head>
    <body>
        <div class="wrapper">
            <div class="header">
                <!--顶部内容-->
                <h1>Branding</h1>
            </div>
            <div class="content">
                <!--页面内容-->
                <div class="primary">
                    <!--主内容-->
                    <div class="primary">
                        <!--主要内容的主要内容-->
                        <h1>Lorem ipsum dolor</h1>
                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
                        <h2>Ea commodo consequat</h2>
                        <p>Ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.</p>
                        <p>Ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
                        <h2>Magna aliquam erat volutpat</h2>
                        <p>Magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
                        <p>Aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
                    </div>
                    <div class="secondary">
                        <!--主要内容的次要内容-->
                        <h2>Magna aliquam erat volutpat</h2>
                        <p>Magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
                        <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
                    </div>
                </div>
                <div class="secondary">
                    <!--导航和次要内容-->
                    <ul class="nav"> 
                        <li class="first"><a href="#">Home</a></li> 
                        <li><a href="#">About</a></li> 
                        <li><a href="#">News</a></li> 
                        <li><a href="#">Products</a></li> 
                        <li><a href="#">Services</a></li> 
                        <li><a href="#">Clients</a></li> 
                        <li><a href="#">Case Studies</a></li> 
                    </ul>
                </div>
            </div>
            <div class="footer">
                <!--底部内容-->
                <p>Footer</p>
            </div>
        </div>
    </body>
</html>

流式布局

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>博客布局</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            body {
                font: 62.5%/1.6 "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, sans-serif;
                background-color:#D4D4D4;
            }
            h1 {
                font-size: 2.4em;
                font-weight: normal;
            }
            h2 {
                font-size: 2.0em;
                font-weight: normal;
            }
            p, li {
                font-size: 1.4em;
            }
            h1, h2, p {
                margin: 1em 0;
            }
            .branding h1 {
                margin: 0;
            }
            .wrapper {
                background-color: #fff;
            }
            .header {
                height: 50px;
                background-color:#b0b0b0;
                padding: 20px;
            }
            .nav {
                list-style: none;
                background-color:#eee;
                padding: 20px;
            }
            .content .secondary .promo {
                padding-left: 20px;
            }
            .footer {
                background-color:#b0b0b0;
                padding: 1px 20px;
            }

            /*让主题标签所有内容居中*/
            body {
                text-align-last: center;
            }
            /*设置容器宽度*/
            .wrapper {
                width: 76.8%;
                margin: 0 auto;
                text-align: left;/*容器内容向左对其*/
            }
           
            .content .primary{
                width: 72.82%;
                float:right;
                display: inline;
            }
            .content .secondary {
                width: 25%;
                float: left;
                display: inline;
            }
            .content .primary .primary {
                width: 59.7%;
                float:left;
                display: inline;;
            }
            .content .primary .secondary {
                width:34.33%;
                padding-right: 2.63%;
                float: right;
                display: inline;
            }
            .content {
                overflow: hidden;/*防止页脚上升*/
            }
        </style>
    </head>
    <body>
        <div class="wrapper">
            <div class="header">
                <!--顶部内容-->
                <h1>Branding</h1>
            </div>
            <div class="content">
                <!--页面内容-->
                <div class="primary">
                    <!--主内容-->
                    <div class="primary">
                        <!--主要内容的主要内容-->
                        <h1>Lorem ipsum dolor</h1>
                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
                        <h2>Ea commodo consequat</h2>
                        <p>Ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.</p>
                        <p>Ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
                        <h2>Magna aliquam erat volutpat</h2>
                        <p>Magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
                        <p>Aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
                    </div>
                    <div class="secondary">
                        <!--主要内容的次要内容-->
                        <h2>Magna aliquam erat volutpat</h2>
                        <p>Magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
                        <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
                    </div>
                </div>
                <div class="secondary">
                    <!--导航和次要内容-->
                    <ul class="nav"> 
                        <li class="first"><a href="#">Home</a></li> 
                        <li><a href="#">About</a></li> 
                        <li><a href="#">News</a></li> 
                        <li><a href="#">Products</a></li> 
                        <li><a href="#">Services</a></li> 
                        <li><a href="#">Clients</a></li> 
                        <li><a href="#">Case Studies</a></li> 
                    </ul>
                </div>
            </div>
            <div class="footer">
                <!--底部内容-->
                <p>Footer</p>
            </div>
        </div>
    </body>
</html>

cellinlab

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS入门 0x6 布局

设置基本结构<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>博客布局</title> <style> * { margin: ...
复制链接

扫一扫

专栏目录