css ul 叠在一起_前端css布局篇（一）普通布局

最新推荐文章于 2021-06-04 22:28:56 发布

賴明宗

最新推荐文章于 2021-06-04 22:28:56 发布

阅读量237

点赞数

文章标签： css ul 叠在一起

本文链接：https://blog.csdn.net/weixin_29064103/article/details/112116838

版权

本文探讨了CSS布局中的版心概念和布局流程，强调了确定版心和遵循布局步骤的重要性。文章详细讲解了一列固定宽度居中、左右布局以及通栏布局的方法，适合前端开发者学习。

摘要由CSDN通过智能技术生成

版心和布局流程

“版心”（可视区）是指网页中主体内容所在的区域。一般在浏览器窗口水平居中显示。常见的宽度为：960px ,980px,1000px,1200px等；

布局流程

为了提高网页制作效率，布局时通常需要遵守一定布局流程：

确定页面的版心（可视区）
分析页面中的行模块，以及每个行模块中的列模块。
制作HTML结构
CSS初始化，然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块

一列固定宽度且居中

<style>
 /*并集选择器，将共同属性写在一起，减少代码冗余;*/
        .top,
        .banner,
        .main,
        .footer{
            width: 900px;
            background:#ccc;
            border:1px solid #000000;
            text-align: center;
        }
        .top{
            height: 80px;
            margin: 0 auto;
        }
        .banner{
            height: 120px;
            margin:5px auto;

        }
        .main{
            height: 120px;
            margin: 0 auto;
        }
        .footer{
            height: 120px;
            margin:5px auto 0;

        }
    </style>
    
<div class="top">top</div>
<div class="banner">banner</div>
<div class="main">main</div>
<div class="footer">footer</div>

左右布局

<style>
        .top,
        .banner,
        .main,
        .footer{
            width: 900px;
            background:#ccc;
            border:1px solid #000000;
            text-align: center;
        }
        .top{
            height: 80px;
            margin: 0 auto;
        }
        .banner{
            height: 120px;
            margin:5px auto;

        }
        .main{
            height:500px;
            margin: 0 auto;
            background: #fff;
        }
        .left{
            width: 278px;
            height: 500px;
            background:orange ;
            float: left;
            border:1px solid #000 ;
        }
        .right{
            width: 600px;
            height: 500px;
            background:#b1dfbb ;
            float: right;
        }
        .footer{
            height: 120px;
            margin:5px auto 0;

        }
    </style>
    
    
    <div class="top">top</div>
    <div class="banner">banner</div>
    <div class="main">
           <div class="left">left</div>
           <div class="right">right</div>
    </div>
    <div class="footer">footer</div>

通栏布局

<style>
        *{
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
        }
        .banner,
        .main,
        .footer{
            width: 900px;
            background:#ccc;
            border:1px solid #000000;
            text-align: center;
        }
        .top{
            background:#ccc;
            height: 80px;
            text-align: center;
        }
        .top-inner{
            width: 900px;
            background:pink;
            height: 80px;
            margin: 0 auto;
            text-align: center;
        }
        .banner{
            height: 150px;
            margin:5px auto;

        }
        .banner li{
            float: left;
            width: 217px;
            height: 150px;
            margin-right: 10px;
        }
        .one{
            background: orange;
        }
        .two{
            background: yellow;
        }
        .three{
            background: orangered;
        }
        .banner .for{
            background: blueviolet;
            margin-right: 0;
            float: right;
        }
        .main{
            height:500px;
            margin: 0 auto;
            background: #fff;
        }
        .left{
            width: 278px;
            height: 500px;
            background:orange ;
            float: left;
            border:1px solid #000 ;
        }
        .right{
            width: 600px;
            height: 500px;
            background:#b1dfbb ;
            float: right;
        }
        .footer{
            height: 120px;
            margin:5px auto 0;

        }
    </style>


<div class="top">
    <div class="top-inner">
        top
    </div>
</div>
<div class="banner">
    <ul>
        <li class="one">1</li>
        <li class="two">2</li>
        <li class="three">3</li>
        <li class="for">4</li>
    </ul>
</div>
<div class="main">
    <div class="left">left</div>
    <div class="right">right</div>
</div>
<div class="footer">footer</div>