22222222

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        .总目录{

            background-color: aquamarine;

            height: 40px;

            width: 1500px;

            display: flex;

        }

        .left1{

            height: 40px;

            width: 1000px;

            background-color:grey;

            list-style-type: none;

            display: flex;

            justify-content: space-around;

            align-items: center;

        }

        .right1{

            height: 40px;

            width: 500px;

            background-color: gray;

            float: left;

            list-style-type: none;

            display: flex;

            justify-content: space-around;

            align-items: center;

           

        }

        .主体{

            width: 1500px;

            height:460px ;

            background-color: white;

            display: flex;

        }

        .left2{

            list-style-type: none;

            height: 460px;

            width: 200px;

            background-color: darkgrey;

            display: flex;

            justify-content: space-around;

            flex-direction: column;

            align-items: center;

        }

        .right2{

            height: 460px;

            width: 1300px;

            background-color: aquamarine;

            background-image: url(./4962de27885a8eb6b437a2ec63e0e9ec.jpg);

        }

        .导航{

            display: flex;

            height: 60px;

            width: 1500px;

            background-color: white;  

        }

        .m1{

            height: 30px;

            width: 30px;

            background-color: aliceblue;

            background-image: url(./屏幕截图\ 2023-11-29\ 143538.png);

        }

        .m2{

           

            height: 60px;

            width: 1000px;

            background-color:white);

            display: flex;

           

        .hh{

            list-style-type: none;

            display: flex;

            justify-content: space-around;

            align-items: center;

           

        }


 

    </style>

</head>

<body>

    <div class="总目录">

        <ul class="left1">

            <li>小米官网</li>

            <li>小米商城</li>

            <li>小米澎湃OS</li>

            <li>loT</li>

            <li>云服务</li>

            <li>天星数科</li>

            <li>有品</li>

            <li>小爱开放平台</li>

            <li>资格证照</li>

            <li>协议规则</li>

            <li>下载APP</li>

            <li>Select Location</li>

        </ul>

        <ul class="right1" >

            <li>登入</li>

            <li>注册</li>

            <li>消息通知</li>

            <li>购物车</li>

        </ul>

       

   

    </div>

    <div class="导航">

        <div class="m1"></div>

        <div class="m2">

            <ul class="hh">

                <li>小米手机</li>

                <li>Redmi手机</li>

                <li>笔记本</li>

                <li>平板</li>

                <li>电视</li>

                <li>家电</li>

                <li>路由器</li>

            </ul>

            <div>

                <input type="text" placeholder="请输入">

            </div>

        </div>

       


 

    </div>

    <div class="主体">

        <ul class="left2">

            <li>手机</li>

            <li>电脑</li>

            <li>家电</li>

            <li>笔记本 平板</li>

            <li>出行 穿搭</li>

            <li>耳机 音箱</li>

            <li>健康 儿童</li>

            <li>生活 箱包</li>

            <li>智能 路由器</li>

            <li>电源 配件</li>

        </ul>

        <div class="right2"></div>

    </div>

</body>

</html>

CJisOP0
关注
刘政阳22222222
08-14
很抱歉，但根据您给出的信息，标题和描述中并没有提及任何具体的IT知识点或者主题，只是重复了一串数字"22222222"，同时标签为"资料"，而压缩包子文件的文件名称列表只包含"刘政阳2"，这同样没有提供足够的信息来...
车牌插件22222222
04-16
总结起来，"车牌插件22222222"是一款专用于车牌识别的软件工具，具有高效、精准的识别能力，并能够与各类系统集成，提升工作效率和管理水平。同时，它注重数据安全，满足不同场景的需求，是现代智能交通体系中的重要...
resnet22222222
qq_54251541的博客
07-03 118
【代码】resnet22222222。
lqm22222222
Re_Joker的博客
06-07 94
lqm222222222222
作业22222222
lllzhou的博客
09-26 63
测试22222222
rfvfdext的博客
03-21 110
测试。
CFG桩地基处理施工方案22222222.pdf
10-14
CFG桩地基处理施工方案是针对特定工程项目的一种地基加固技术，主要应用于改善地基条件，提高地基的承载能力和稳定性。本方案是中国外运公司厂区内的一项工程，涉及柳钢库一号、二号及开平库一号，总面积约为75400...
renwu任务22222222
09-21
renwu任务22222222
22222222J组答案7.pdf
09-15
22222222J组答案7.pdf
CSS中的flex概述
学无止境
10-02 320
例如，当容器空间小于子元素的总宽度（或高度）时，子元素将按照。（默认值，当子元素未设置交叉轴方向的尺寸时）：子元素沿交叉轴方向拉伸，填满容器。：行（列）沿交叉轴均匀分布，每行（列）之间以及与容器边缘的间隔都相等。：子元素沿主轴均匀分布，每个子元素之间以及与容器边缘的间隔都相等。：行（列）沿交叉轴均匀分布，两端的行（列）与容器边缘对齐。：行（列）沿交叉轴均匀分布，每行（列）两侧都有相等的间隔。：子元素沿主轴均匀分布，每个子元素两侧都有相等的间隔。：子元素沿主轴均匀分布，两端的子元素与容器边缘对齐。
CSS彩虹按钮设计demo
m0_53253682的博客
10-09 375
【代码】CSS彩虹按钮设计demo。
【CSS】水平垂直居中
小秀的博客
10-02 528
容器设置position: relative。子元素设置 position: absolute;left: 50%;需要给子元素设置 position: absolute;设置固定宽度和高度;top、left、bottom、right都设置为0;margin设置为auto；给容器设置 display: flex;子项设置 margin: auto;给父盒子设置属性 flex。给父盒子和子盒子设置属性。flex:1 的作用。
【CSS】flex: 1； 的意思
小秀的博客
10-09 143
flex: 1;是的简写。它表示元素可以根据容器的剩余空间进行扩展（或缩小），并且在布局中按比例分配空间。
241006-Gradio中Chatbot通过CSS自适应调整高度
专注机器学习之路
10-06 346
【代码】241006-Gradio中Chatbot通过CSS自适应调整高度。
前端通过 CSS 为 ＜i＞ 标签（图标）和 ＜span＞ 标签（文本）设置不同的样式
susu1083018911的博客
10-09 170
前端通过 CSS 为 标签（图标）和 标签（文本）设置不同的样式
CSS基础中padding详解
ning的博客
10-09 745
通过本文的介绍，我们深入了解了padding的基本概念、简写方法以及它对元素尺寸的影响。掌握这些知识，可以帮助我们在布局设计中更加灵活和精确地控制元素的显示效果。版权声明：本博客内容为原创，转载请保留原文链接及作者信息。参考文章CSS基础：最详细 padding的 4 种用法解析。
CSS基础中margin详解
最新发布
ning的博客
10-09 420
外边距是元素盒子模型的一部分，位于边框（border）之外。它定义了元素与其他元素之间的距离。外边距不会影响元素的宽度和高度，但它会影响元素的总占用空间。外边距是CSS布局中一个非常强大的工具，合理使用外边距可以创建出更加美观和响应式的网页设计。通过理解外边距的基本概念和高级应用，我们可以更好地控制元素之间的空间，提升页面的整体布局效果。版权声明：本博客内容为原创，转载请保留原文链接及作者信息。参考文章如何设置 CSS 的外边距和内填充（附布局小技巧）
CSS响应式布局
2401_82561004的博客
10-09 518
CSS 响应式布局也称自适应布局，是 Ethan Marcotte 在 2010 年 5月份提出的一个概念，简单来讲就是一个网站能够兼容多个不同的终端（设备），而不是为每个终端做一个特定的版本。这个概念是为解决移动端浏览网页而诞生的。响应式布局能够为使用不同终端的用户提供很好的用户体验，而且随着大屏智能手机的普及，用“大势所趋”来形容也不为过。接下来我们以媒体查询为例来具体演示一下响应式布局的实现。
2+22+222+2222+22222+222222+2222222+22222222的代码
04-25
这个代码的功能是计算2+22+222+2222+22222+222222+2222222+22222222的结果。下面是代码的实现： ``` int sum = 0; int num = 2; for (int i = 0; i < 8; i++) { sum += num; num = num * 10 + 2; } ``` 这段代码使用了一个循环来依次计算每个数并将其累加到总和上。变量`num`初始值为2，每次循环都将`num`乘以10并加上2，这样就可以得到下一个要相加的数。循环执行8次，即可得到最终的结果。在代码中，变量`sum`用于保存累加的结果。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值