CSS入门 0x6 布局

cellinlab
114 阅读3分钟

设置基本结构

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

 

avatar
文章
阅读
粉丝