017常见网页布局

最新推荐文章于 2024-04-26 17:20:09 发布

小何在线

最新推荐文章于 2024-04-26 17:20:09 发布

阅读量1.8k

点赞数 7

分类专栏： HTML5 文章标签： HTML布局浮动布局网页设计 CSS样式前端开发

本文链接：https://blog.csdn.net/hyc_cheng/article/details/122907347

版权

HTML5 专栏收录该内容

41 篇文章 0 订阅

订阅专栏

一、常见的布局方式

1、第一种
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>常见网页布局1</title>

    <style>
        .top{
            height: 200px;
            background-color: #bfbfcc;
            text-align: center;
            line-height: 200px;
            margin-bottom: 10px;
        }
        .banner{
            height: 100px;
            background-color: #bfbfcc;
            text-align: center;
            line-height: 100px;   
            margin-bottom: 10px;         
        }  
        .main{
            height: 600px;
            background-color: #bfbfcc;
            text-align: center;
            line-height: 600px;    
            margin-bottom: 10px;        
        }
        .footer{
            height: 300px;
            background-color: #bfbfcc;
            text-align: center;
            line-height: 300px;    
               
        }   
    </style>
</head>
<body>
    <div class="top">top</div>
    <div class="banner">banner</div>
    <div class="main">main</div>
    <div class="footer">footer</div>
</body>
</html>

2、第二种
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>常见网页布局1</title>

    <style>
        .top{
            height: 200px;
            background-color: #bfbfcc;
            text-align: center;
            line-height: 200px;
            margin-bottom: 10px;
        }
        .banner{
            height: 100px;
            background-color: #bfbfcc;
            text-align: center;
            line-height: 100px;   
            margin-bottom: 10px;         
        }  
        .main{
            height: 600px;
            background-color: transparent;
            text-align: center;
            line-height: 600px;    
            margin-bottom: 10px;        
        }
        .main .left{
            float: left;
            width: 35%;
            height: 600px;
            background-color: #bfbfcc;
            text-align: center;
            line-height: 600px;  
        }
        .main .right{
            float: right;
            width: 64%;
            height: 600px;
            background-color: #bfbfcc;
            text-align: center;
            line-height: 600px;  
        }
        .footer{
            height: 300px;
            background-color: #bfbfcc;
            text-align: center;
            line-height: 300px;    
               
        }   
    </style>
</head>
<body>
    <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>
</body>
</html>

3、第三种
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>常见网页布局1</title>

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
        }
        /* 只要是通栏的盒子(和浏览器一样宽) 不需要指定宽度 */
        .top{
            height: 50px;
            background-color: #bfbfcc;
            line-height: 50px;
            text-align: center;
            margin-bottom: 10px;
        }
        .banner{
            width: 980px;
            height: 150px;
            background-color: #bfbfcc;
            line-height: 150px;
            text-align: center;         
            margin: 0 auto;
            margin-bottom: 10px;
        }
        .box-t{
            width: 980px;
            height: 150px;  
            background-color:#transparent;         
            margin: 0 auto;
            margin-bottom: 10px;
        }

        .box-t li{
            float: left;
            width: 237px;  
            height: 150px;  
            background-color: #bfbfcc;  
            margin-right: 10px;
        }

        .box-b{
            width: 980px;
            height: 350px;  
            background-color:transparent;         
            margin: 0 auto;
            margin-bottom: 10px;
        }
        .box-b li{
            float: left;
            width: 237px;  
            height: 350px;  
            background-color: #bfbfcc;  
            margin-right: 10px;
        }
        .box-t .last,.box-b .last{
            margin-right: 0px;
        }
        .footer{
            height: 300px;
            background-color: #bfbfcc;
            line-height: 300px;
            text-align: center;
           
        }
    </style>
</head>
<body>
    <div class="top">top</div>
    <div class="banner">banner</div>
    <div class="box-t">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li class="last"></li>
        </ul>
    </div>

    <div class="box-b">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li class="last"></li>
        </ul>
    </div>

    

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