当前位置:首页 > 开发 > Web前端 > Css > 正文

CSS排版

发表于: 2015-11-13   作者:互联网   来源:转载   浏览:
css
摘要: CSS样式菜单:    <style type="text/css">        #form1        {      &nbs

CSS样式菜单:   

<style type="text/css">
        #form1
        {
            width: 100%; /*如果要让form1居中显示,需要设置一个常规宽度不能设置为100%,否则在IE里面form1将会满屏显示*/
            background-color: Gray;
            padding-top: 10px;
            min-width: 760px;
            max-width: 984px;
            margin-left: auto;
            margin-right: auto;
            height: 700px;
        }
        /*Left包括在Main当中*/
        .Left
        {
            float: left;
            width: 200px;
            background-color: Green;
        }
        /*Right与Main是并列的*/
        .Right
        {
            float: left;
            width: 190px;
            background-color: Blue;
            margin-left: -190px;
        }
        /*主体部分,包括着,Left Content*/
        .Main
        {
            float: left;
            width: 100%;
            background-color: Maroon;
        }
        .Content
        {
            /*是左右的边缘偏移,200px 表示离 Right的宽度+10px的间隔,210是Left的宽度+10px的间隔*/
            margin: 0px 200px 0px 210px;
            background-color: Silver;
        }
        .Main
        {
            height: 600px;
            overflow: hidden;
        }
        .Content, .Right, .Left
        {
            height: 500px;
            margin-top: 20px;
        }
    </style>

调用:

    <div id="form1">
        form1
        <div class="Main">
            <div class="Left">
                Left</div>
            <div class="Content">
                Content</div>
            This is Main
        </div>
        <div class="Right">
            Right</div>
    </div>

CSS排版

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号