html+css实战121-综合案例-小米产品-左右结构

html

前端歌谣

98人浏览 · 2022-06-16 12:54:57

前端歌谣 · 2022-06-16 12:54:57 发布

<!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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .top {
            /* 宽度高度背景色 */
            height: 40px;
            background-color: #333;
        }

        .header {
            width: 1226px;
            height: 100px;
            background-color: #ffc0cb;
            margin: 0 auto;
        }

        .content {
            width: 1226px;
            height: 460px;
            background-color: green;
            margin: 0 auto;
        }

        .left {
            float: left;

            width: 234px;
            height: 460px;
            background-color: #ffa500;

           
        }

        .right {
            float: left;
            
            width: 992px;
            height: 460px;
            background-color: #87ceeb;

           
        }

        /* CSS书写顺序: 浏览器执行效率更高
            1. 浮动 / display
            2. 盒子模型: margin border padding 宽度高度背景色
            3. 文字样式
        */
    </style>
</head>
<body>
    <!-- 通栏的盒子: 宽度和浏览器宽度一样大 -->
    <div class="top"></div>
    <div class="header">头部</div>
    <div class="content">
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>
</html>

运行结果

openvela

openvela 操作系统专为 AIoT 领域量身定制，以轻量化、标准兼容、安全性和高度可扩展性为核心特点。openvela 以其卓越的技术优势，已成为众多物联网设备和 AI 硬件的技术首选，涵盖了智能手表、运动手环、智能音箱、耳机、智能家居设备以及机器人等多个领域。

更多推荐

DeepSeek V4 与 MiMo V2.5 发布后，品牌 GEO 策略需要重新校准吗？

据 DeepSeek 官方文档与小米技术公告披露的发布信息显示，2026 年 4 月开源大模型生态进入了"百万上下文 + 极低成本推理 + 原生多模态"的新阶段。对品牌方而言，GEO 的核心方法论——意图覆盖、可引用结构、权威实体——并未失效，但执行规则需要按照本文表格做局部校准。本文内容基于 2026 年 4 月数据，建议每两周复测一次引用情况以反映模型生态最新动态。