小米官网布局首页

最新推荐文章于 2024-07-20 18:16:53 发布
最新推荐文章于 2024-07-20 18:16:53 发布
阅读量895 收藏 17
点赞数 20
文章标签： 前端 css javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2302_79895666/article/details/138821361
版权

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            *{
                            padding: 0;
                            margin: 0;
                        }
                        .ziti{
                            width:100%;
                            height: 50px;
                            background-color: black;
                        }
                         .zi1{
                            width: 1050px;
                            height: 50px;
                            background-color: black;
                            margin: auto;
                            float: none;
                        }
                        .fziti1{
                            width: 400px;
                            height: 50px;
                            background-color: aquamarine;
                            float: left;
                        }
                        .fziti2{
                            width: 100px;
                            height: 50px;
                            background-color: aqua;
                            float: right;
                        }
                        .zi2{
                            width: 1050px;
                            height: 80px;
                            background-color: aqua;
                            border: 2px solid rebeccapurple;
                            margin: auto;
                        }
                        .sziti1{
                            width:100px ;
                            height:80px;
                            background-color: aqua;
                            border:2px solid red;
                            float: left;
                        }
                        .sziti2{
                            width:600px ;
                            height:80px;
                            background-color: aquamarine;
                            border:2px solid green;
                             margin: auto; 
                        }
                        .sziti3{
                            width: 100px;
                            height:80px;
                            background-color: aquamarine;
                            border: 2px solid goldenrod;
                            float: right;
                            margin-top: -85px;
                        }
                        .zi3{
                            width: 1050px;
                            height: 400px;
                            background-color: aquamarine;
                            border: 2px solid red;
                            margin: auto;
                        }
                        .tziti1{
                            width: 200px;
                            height: 400px;
                            background-color: aqua;
                            border: 2px solid pink;
                            float: left;
                        }
                        .tziti2{
                            width: 835px;
                            height: 400px;
                            border: 2px solid gold;
                            float: right;
                        }
                        .zi4{
                            width: 1050px;
                            height: 200px;
                            background-color: aqua;
                            border: 2px solid green;
                            margin: auto;
                        }
                        .oziti1{
                            width:200px;
                            height: 200px;
                            background-color: aqua;
                            border: 2px solid hotpink;
                            float: left;
                        }
                        .lziti1   {
                            width: 64px;
                            height: 100px;
                            background-color: aqua;
                            border: 1px solid rebeccapurple;
                            float: left;
                        }
                        .oziti2{
                            width:260px;
                            height: 200px;
                            background-color: aqua;
                            border: 2px solid hotpink;
                            float: left;
                            margin-left: 15px;
                        }
                        .oziti3{
                            width:260px;
                            height: 200px;
                            background-color: aqua;
                            border: 2px solid hotpink;
                            float: left;
                            margin-left: 15px;
                        }
                        .oziti4{
                            width:260px;
                            height: 200px;
                            background-color: aqua;
                            border: 2px solid hotpink;
                            float: left;
                            margin-left: 15px;
                        }
                        .zi5{
                            width: 1050px;
                            height: 150px;
                            background-color: aqua;
                            border: 2px solid chartreuse;
                            margin: auto
        </style>
    </head>
    <body>
    <div class="ziti">
                <div class="zi1">
                    <div class="fziti1"></div>
                    <div class="fziti2"></div>
                </div>
            </div>
            <div class="zi2">
                <div class="sziti1"></div>
                <div class="sziti2"></div>
                <div class="sziti3"></div>
            </div>
            <div class="zi3">
                <div class="tziti1"></div>
                <div class="tziti2"></div>
            </div>
            <div class="zi4">
                <div class="oziti1">
                    <div class="lziti1"></div>
                    <div class="lziti1"></div>
                    <div class="lziti1"></div>
                    <div class="lziti1"></div>
                    <div class="lziti1"></div>
                    <div class="lziti1"></div>
                </div>
                <div class="oziti2"></div>
                <div class="oziti3"></div>
                <div class="oziti4"></div>
            </div>
            <div class="zi5"></div>    
    </body>
</html>

王欢欢~(¯▽¯~)
关注
  • 20
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
小米网页布局小案例
敦煌壁画的博客
04-14 719
小米网页布局小案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="keywords" content=""> <meta name="description" content=""> <title></title> <
小米工具栏响应式布局.zip
12-24
小米工具栏响应式布局则特别关注在小米设备上，如何使工具栏在不同环境下提供优秀的用户体验。下面将详细阐述响应式布局的基本原理、重要性，以及小米工具栏响应式布局的实现方法。 响应式布局的核心在于媒体查询...
flex布局 （实战小米官网）
老段的CSDN的博客
07-20 512
flex布局
小米官网移动端布局
富在术数不在劳身,利在势局不在力耕。
05-22 982
效果演示 <!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"> <link
小米官网布局
weixin_42280470的博客
11-09 1793
主要了解CSS中的浮动问题 运行效果如图所示 主要代码如下所示需要自己独立分析去学习，图片资源可以去官方区内去复制 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } #.
小米首页布局案例
weixin_45542045的博客
10-14 1969
小米首页布局案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>小米布局案例</title> // 通过link标签引入外链css文件中的样式 <link rel="stylesheet" href="...
HTML-小米布局
m0_74014745的博客
07-10 176
小米官网-手机布局
【无标题】小米官网布局设计框架
2302_79888558的博客
05-10 80
【代码】【无标题】小米官网布局设计框架。
小米官网网页布局
m0_72275912的博客
04-17 72
小米官网——简单产品模块布局实现
剑来的博客
03-23 1262
前端
小米官网布局完整代码jq特效加分析
05-26
【小米官网布局完整代码jq特效加分析】 在网页设计领域，布局和动态效果是至关重要的元素，能够极大地提升用户体验。小米官网的布局以其简洁而高效的设计赢得了用户的喜爱，其中运用了HTML和jQuery（jq）技术来实现...
仿小米官网html源码.zip
09-23
在仿小米官网的源码中，可能会包含`.css`文件，用于设置颜色、字体、布局等样式。通过选择器（如类选择器、ID选择器等）选定HTML元素并应用样式。了解如何使用盒模型（包括边距、内边距、宽度和高度）调整元素大小和...
小米主页CSS布局源码.zip
08-04
【小米主页CSS布局源码.zip】是一个包含小米主页样式的HTML5和CSS源代码资源，主要涉及网页设计和前端开发领域的知识。这个压缩包中的核心文件名为"MI（完整布局源码）"，我们可以从这个文件中学习到关于网页布局、...
小米官网源码.rar
12-01
在小米官网源码中，CSS被用来设置颜色、字体、大小、间距、布局等视觉效果。学习者可以研究CSS选择器的使用，如类选择器、ID选择器、元素选择器等，以及如何使用盒模型（Box Model）来调整元素的尺寸和位置。此外，...
前端面试题日常练-day97 【Less】
最新发布
qq_44640575的博客
07-20 280
border-radius()函数用于在Less中生成圆形边框效果。通过设置border-radius()函数，我们可以为元素的边框添加圆角效果，使边框呈现圆形的外观，从而美化页面元素的边框样式。
TinyVue v3.17.0 正式发布，推出了一款基于 Quill 2.0 的富文本编辑器，功能强大、开箱即用！
OpenTiny的博客
07-17 1033
本文由体验技术团队Kagol老师原创~我们非常高兴地宣布，2024年6月26日，TinyVue 发布了 v3.17.0 🎉。TinyVue 每次大版本发布，都会给大家带来一些实用的新特性，上一个版本我们重构了 chart-core，新增 CircleProcessChart 圆环进度图等6个新的图表组件，并增加了 Statistic 数据统计组件。表格图片超链接复制粘贴插入表情文件上传@提醒斜杆菜单v-auto-tip。
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 500
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
博客前端项目学习day03——框架页
qq_53237241的博客
07-19 273
【代码】博客前端项目学习day03——框架页。
小米官网flex布局
07-30
引用\[2\]:通过实际测试可以知道，小米官网使用了flex布局。Flex布局是一种用于页面布局的CSS3属性，它可以使元素在容器中自动调整大小和位置。通过设置容器的display属性为flex，可以将容器内的元素按照一定的规则...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值