HTML布局

比眉伴天荒 2021-12-20 15:21 249阅读 0赞

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8"> //元数据标签
    <title>3 colum layout</title>
    <link rel="stylesheet" href="css/3col.css">  //引入外部CSS样式
    </head>
    <body>
    <div class="left">left</div>
    <div class="main">main</div>
    <div class="sider">sider</div>
    </body>
    </html>

3列布局示例HTML

@charset "UTF-8";
    //标签选择器
    body{
        
        margin: 0;  //外边距0
        padding: 0; //内边距0
    }
    //类选择器
    .left{
        
        background-color:#eee;
        width:19.99999%;
        float: left;
    }
    
    .main{
        
        background-color:#555;  //背景颜色
        width:59.99999%;  // 宽度百分比
        float: left;   //左浮动
        height: 900px;  //高度
    }
    
    .sider{
        
        background-color:#999;
        width:19.99999%;
        float: left;
    }
    
    //媒体选择器
    @media (max-width:900px) {  //最大900
        .main{
            width:100%;
        }
        .left,
        .sider{
        
            display: none;  //不显示
        }
    }

3列布局CSS

转载于:https://www.cnblogs.com/TangGe520/p/10409744.html

发表评论取消回复

表情：

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

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

相关阅读

相关 HTML Flex 布局

基本概念采用 Flex 布局的元素，称为 Flex 容器（flex container），简称“容器”。它的所有子元素自动成为容器成员，称为 Flex 项目（flex

ゞ浴缸里的玫瑰/ 2023年09月26日 18:09/ 0 赞/ 156 阅读

相关 html布局

HTML(超文本标记语言)是一种用于创建网页的标准标记语言。它用于描述网页的内容和结构，如文本、图像、视频和链接等。HTML文档由HTML元素组成，每个元素都由开始标签(例如，

约定不等于承诺〃/ 2023年09月25日 16:34/ 0 赞/ 111 阅读

相关 html站点怎么用,HTML 布局

使用元素的 HTML 布局注释：元素常用作布局工具，因为能够轻松地通过 CSS 对其进行定位。这个例子使用了四个元素来创建多列布局：实例 City

﹏ヽ暗。殇╰゛Y/ 2022年10月05日 10:51/ 0 赞/ 162 阅读

相关 Html-响应式布局、弹性布局

一. 响应式布局 1. 移动端响应式布局必须加： <meta name="viewport" content="width=device-width,initia

古城微笑少年丶/ 2022年06月13日 02:58/ 0 赞/ 351 阅读

相关 HTML HTML 布局 (stage1-24)

基础篇-HTML 布局 1.网站布局大多数网站会把内容安排到多个列中（就像杂志或报纸那样）。大多数网站可以使用 `<div>` 或者 `<table>` 元

刺骨的言语ヽ痛彻心扉/ 2022年06月02日 08:50/ 0 赞/ 226 阅读

相关 HTML - 布局div

http://[blog.csdn.net/pipisorry/article/details/78929615][blog.csdn.net_pipisorry_articl

今天药忘吃喽~/ 2022年06月02日 01:28/ 0 赞/ 600 阅读

相关 html浮动布局

浮动布局：之所以要使用到浮动布局，只要是像div等块标签，在网页显示时，无论其宽的大小，都是独占一行。而在网页布局中，我们常常需要将两个或者是多个div并

桃扇骨/ 2022年05月29日 12:56/ 0 赞/ 401 阅读

相关 Html的布局

一、html的简介 html和css是前端的主要框架和样式的，而JavaScript主要是实现一些逻辑的或者改变原来原始的。所以在html+css要学会整体的布局结构，js就

男娘i/ 2022年05月27日 02:23/ 0 赞/ 228 阅读

相关 HTML+CSS布局

一、网页的布局 1.固定布局固定网页布局指网站内容被一个固定宽度的容器包裹起来，容器内的区块都有固定的百分比或者像素宽度值。最重要一点是容器是不能移动。不

电玩女神/ 2022年04月15日 00:15/ 0 赞/ 239 阅读

相关 HTML布局

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> //元数据标签 <title>

比眉伴天荒/ 2021年12月20日 15:21/ 0 赞/ 250 阅读