美文网首页
CSS布局

CSS布局

作者: _源稚生 | 来源:发表于2018-12-13 16:01 被阅读0次

    布局方式

    一列布局
    <!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>一列布局</title>
<style type="text/css">
body{ margin:0; padding:0; font-size:30px}
div{ text-align:center; font-weight:bold}
.main,.footer{ width:960px; margin:0 auto;}
.head{ width:100%; height:100px; background:#ccc}
.main{ height:600px; background:#FCC}
.footer{ height:50px; background:#9CF}
</style>
</head>

<body>
<div class="head">head</div>
<div class="main">main</div>
<div class="footer">footer</div>
</body>
</html>

    效果：


    二列布局
    <!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>二列布局</title>
<style type="text/css">
body{ margin:0; padding:0; font-size:30px; font-weight:bold}
div{ text-align:center; line-height:50px}
.main{ width:100%; height:600px; margin:0 auto}
.left{ width:38%; height:600px;background:#ccc; float:left;text-align:left; }/*左浮动样式*/
.right{ width:60%; height:600px; background:#FCC; float:right;text-align:left;}/*右浮动样式*/
</style>
</head>

<body>
<div class="main">
    <div class="left">left</div>
    <div class="right">right</div>
</div>
</body>
</html>

    效果：


    三列布局
    <!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>三列布局</title>
<style type="text/css">
body{ margin:0; padding:0; font-size:30px; font-weight:bold}
div{ line-height:50px}
.left{ width:200px; height:600px; background:#ccc; position:absolute; left:0; top:0}
.main{ height:600px; margin:0 310px 0 210px; background:#9CF}
.right{ height:600px; width:300px; right:0;top:0; position:absolute; background:#FCC;}
</style>
</head>

<body>
    
    <div class="left">left</div>
    <div class="main">设计首页的第一步是设计版面布局。就象传统的报刊杂志编辑一样，我们将网页看作一张报纸，一本杂志来进行排版布局。 虽然动态网页技术的发展使得我们开始趋向于学习场景编剧，但是固定的网页版面设计基础依然是必须学习和掌握的。它们的基本原理是共通的，你可以领会要点，举一反三。</div>
    <div class="right">right</div>
</body>
</html>

    效果：


    混合布局
    <!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>混合布局</title>
<style>
body{ margin:0; padding:0; font-size:30px; font-weight:bold}
div{ text-align:center; line-height:50px}
.top{ height:100px;background:#9CF}
.head,.main{ width:960px; margin:0 auto;}
.head{ height:100px; background:#F90}
.left{ width:220px; height:600px; background:#ccc; float:left;}
.right{ width:740px; height:600px;background:#FCC; float:right}
.r_sub_left{ width:540px; height:600px; background:#9C3; float:left}
.r_sub_right{ width:200px; height:600px; background:#9FC; float:right;}
.footer{ width:960px; height:50px; background:#9F9;clear:both; margin: 0 auto;}
</style>
</head>

<body>
<div class="top">
    <div class="head">head</div>
</div>
<div class="main">
    <div class="left">left</div>
    <div class="right">
        <div class="r_sub_left">sub_left
        </div>
        <div class=" r_sub_right">sub_right
        </div>
    </div>
</div>
<div class="footer">footer</div>
</body>
</html>

    效果：


    布局分析

    1、标准流

    • 常见块级元素：div,H1~H6,table,p,ol,ul,li（独占一行）

    • 常见内联元素：a,span,img,input（当前一行位置不够时被挤到下一行）

    2、定位布局

    • static 标准文档流，默认设置的值

    • relative 相对于自己原来的位置进行定位

    • absolute 相对于父类元素（非static）进行定位。父类元素需要是absolute或者relative。

    • fixed 相对于窗口进行定位，不受限于父元素。

    • inherit 继承父元素的定位。

    3、z-index

    z-index只作用于带有定位属性的元素（position:static除外），普通元素中也存在层级关系（margin-top:-50px）

    • z-index可以设置元素的叠加顺序，但是要依赖定位属性

    • z-index大的元素会覆盖z-index小的元素

    • z-index为auto的元素不参与层级比较

    • z-inde为负值，元素被普通流中的元素覆盖

    注意：父元素的层级大于相邻元素的层级 不论层级多小,都可以继承父元素的层级,大于相邻元素层级。

    4、盒子模型和定位

    • 盒子模型：通过改变盒子的外边或者内边来实现元素的移动

    • 定位：通过元素的位置移动来改变出现在网页的相对位置中

    例如：实现登录页面水平和垂直居中，div先相对于网页left和top50%fixed定位，然后使用margin-left和margin-top负div宽和高的一半，可以得到居中的登录页面

    侧边栏案例案例分析：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>侧边栏案例分析</title>
    <!--<link rel="stylesheet" href="css/bootstrap.css">-->
    <!--<script src="jquery/jquery-3.3.1.js"></script>-->
    <!--<script src="js/bootstrap.js"></script>-->
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .page {
            width: 100%;
            height: 1400px;
            background: url("image/time.jpg") center top no-repeat;
        }
        .nav {
            width: 160px;
            height: 205px;
            position: fixed;
            left: 0;
            top: 50%;
            margin-top: -103px;
            font-family: 'Microsoft YaHei';
        }
        .nav-li {
            width: 160px;
            height: auto;
            border-bottom: 1px solid #FFF;
            background: #333;
            text-align: center;
            line-height: 40px;
            color: #FFF;
            font-size: 16px;
            cursor: pointer;
        }

        .tit {
            width: 160px;
            height: 40px;
        }

        /*鼠标移动到ul才显示*/
        .nav-li:hover ul{
            display: block;
        }

        .nav-li ul{
            width: 160px;
            height: auto;
            display: none;
        }

        .nav-li ul li{
            width: 160px;
            height: 40px;
            border-bottom: 1px dashed #666;
            color: #FFF;
            background: grey;
            font-size: 16px;
            position: relative;
        }

        .nav-li ul li:hover .list-3{
            display: block;
        }

        .list-3 {
            width: 160px;
            height: auto;
            position: absolute;
            left: 160px;
            top: 0;
            display: none;
        }
        
        .list-3Dom {
            width: 160px;
            height: 40px;
            background: #444;
            border-bottom: 1px solid #FFF;
            text-align: center;
            line-height: 40px;
            color: #FFF;
        }
    </style>
</head>
<body>
    <div class="page">
        <div class="nav">
            <div class="nav-li">
                <div class="tit">侧边栏导航</div>
                <ul>
                    <li>
                        二级栏目
                        <div class="list-3">
                            <div class="list-3Dom">三级栏目</div>
                            <div class="list-3Dom">三级栏目</div>
                            <div class="list-3Dom">三级栏目</div>
                        </div>
                    </li>
                    <li>二级栏目
                        <div class="list-3">
                            <div class="list-3Dom">三级栏目</div>
                            <div class="list-3Dom">三级栏目</div>
                            <div class="list-3Dom">三级栏目</div>
                        </div>
                    </li>
                    <li>二级栏目
                        <div class="list-3">
                            <div class="list-3Dom">三级栏目</div>
                            <div class="list-3Dom">三级栏目</div>
                            <div class="list-3Dom">三级栏目</div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="nav-li">
                <div class="tit">侧边栏导航</div>
                <ul>
                    <li>二级栏目</li>
                    <li>二级栏目</li>
                    <li>二级栏目</li>
                </ul>
            </div>
            <div class="nav-li">
                <div class="tit">侧边栏导航</div>
                <ul>
                    <li>二级栏目</li>
                    <li>二级栏目</li>
                    <li>二级栏目</li>
                </ul>
            </div>
            <div class="nav-li">
                <div class="tit">侧边栏导航</div>
                <ul>
                    <li>二级栏目</li>
                    <li>二级栏目</li>
                    <li>二级栏目</li>
                </ul>
            </div>
            <div class="nav-li">
                <div class="tit">侧边栏导航</div>
                <ul>
                    <li>二级栏目</li>
                    <li>二级栏目</li>
                    <li>二级栏目</li>
                </ul>
            </div>
        </div>
    </div>
</body>

    效果：

    （内容参考慕课网）

    相关文章

      网友评论

          本文标题：CSS布局

          本文链接：https://www.haomeiwen.com/subject/mlrbhqtx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|CSS布局|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！