常见的网页布局（HTML、CSS）

秒速五厘米 2023-10-03 13:04 41阅读 0赞

### 常见的网页布局（HTML、CSS） ###

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>常见的网页布局</title>
        <style>
            * {
        
                margin: 0;
                padding: 0;
            }
    
            .top {
        
                height: 50px;
                background-color: gray;
    
            }
    
            .banner {
        
                width: 980px;
                height: 150px;
                background-color: gray;
                margin: 10px auto;
                /*  居中 */
            }
    
            .box {
        
                width: 980px;
                height: 300px;
                margin: 0 auto;
                background-color: #fff;
            }
    
            .box li {
        
                width: 237px;
                height: 300px;
                float: left;
                background-color: gray;
                list-style: none;
                margin-right: 10px;
            }
    
            .box .last {
        
                margin-right: 0px;
            }
    
            /* 只要是通栏的盒子 不需要设置宽度 */
            .footer {
        
                height: 200px;
                background-color: gray;
                margin-top: 10px;
            }
        </style>
    </head>
    
    <body>
        <div></div>
        <div class="top">top</div>
        <div class="banner">banner</div>
        <div class="box">
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li class="last">4</li>
    
            </ul>
            box
        </div>
        <div class="footer">footer</div>
    </body>
    
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，41人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS 网页布局基础

阅读目录基础布局 1 一行布局 2 二行布局 3 一列布局 4 二列布局 5 混合布局

阳光穿透心脏的1/2处/ 2023年10月07日 20:04/ 0 赞/ 159 阅读

相关 HTMLCSS学习笔记（二十三）GRID布局

GRID布局它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局 Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的

拼搏现实的明天。/ 2023年10月06日 15:28/ 0 赞/ 192 阅读

相关常见的网页布局（HTML、CSS）

常见的网页布局（HTML、CSS） <!DOCTYPE html> <html lang="en"> <head> <m

秒速五厘米/ 2023年10月03日 13:04/ 0 赞/ 42 阅读

相关 css布局方式(CSS网页布局)

CSS网页布局有何技巧？ Example Source Code .left-blue \{ color: \369; \} 你可能立即知道这个类选择符是为左侧边栏的

╰半橙微兮°/ 2023年09月26日 13:10/ 0 赞/ 113 阅读

相关网页布局的方式

第一种：DIV+CSS 利用div的方式来划分页面布局，很简单，主要是对样式的运用，这里先来普及下margin标签和padding标签的作用，这两个标签都是相对而言的，容

淡淡的烟草味﹌/ 2022年11月19日 04:30/ 0 赞/ 246 阅读

相关 CSS 网页布局

网页布局网页布局有很多种方式，一般分为以下几个部分：头部区域、菜单导航区域、内容区域、底部区域。 ![17d96443520bbf4facda9904c13a7d85

雨点打透心脏的1/2处/ 2022年09月12日 01:46/ 0 赞/ 362 阅读

相关网页布局基础

1 CSS 规定的定位机制有三种，分别是标准文档流(Normal folw) 浮动(Floats) 绝对定位(Abso

亦凉/ 2022年06月14日 06:25/ 0 赞/ 331 阅读

相关网页布局

布局方式 > 静态布局：网页上所有元素尺寸使用px为单位。 > 流式布局：屏幕分辨率变化时，页面里元素的大小会变化而但布局不变。 > 自适应布局：自适应布局的特点

落日映苍穹つ/ 2022年05月17日 01:22/ 0 赞/ 359 阅读

相关网页布局方式

<table> <tbody> <tr> <td><img alt="" height="252" src="https://img-blog.csdnimg

àì夳堔傛蜴生んèń/ 2022年02月28日 11:38/ 0 赞/ 389 阅读

相关网页布局方式

总结一下下网页布局的几种方式： 1. 流式布局：为网页设置一个相对的宽度，通常以百分比%做为长度单位。更加适合屏幕变化。 2. 栅格化布局：将网页宽度人为的划分成均等的长

偏执的太偏执、/ 2021年11月29日 10:10/ 0 赞/ 460 阅读