html和css在小米官网的应用

最新推荐文章于 2023-05-09 15:48:43 发布
最新推荐文章于 2023-05-09 15:48:43 发布
阅读量268 收藏 2
点赞数 1
文章标签： 大数据
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62720219/article/details/125839023
版权

 

<!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>
</head>
<style>
    .daohang {
        height: 50px;
        width: 1400px;
        background-color: black;
        position: fixed;
        margin-top: 0px;
        margin-left: 0px;
    }

    .back {
        background-repeat: no-repeat;
        background-image: url(第一张.jpg);
        background-size:cover;
        height: 750px;
        width:1430px;
    }
    .back1 {
        background-repeat: no-repeat;
        background-image: url(第二张.jpg);
        background-size:cover;
        height: 750px;
        width:1430px;
    }
    .back2 {
        background-repeat: no-repeat;
        background-image: url(罗大佑.jpg);
        background-size:cover;
        height: 750px;
        width:1430px;
    }
    .back3 {
        background-repeat: no-repeat;
        background-image: url(大赛.jpg);
        background-size:cover;
        height: 750px;
        width:1430px;
    }
    .back4 {
        background-repeat: no-repeat;
        background-image: url(女孩.jpg);
        background-size:cover;
        height: 800px;
        width:1430px;
    }
    .zhuanhuan{
        display: inline-block;
        width: 80px;
        height: 50px;
        vertical-align: middle;
        text-align: center;
        line-height: -100px;
        color:white;
        font-size: 13px;
        font-weight: 900;
    
    }
    .zhuanhuan1{
        display: inline-block;
        width: 30px;
        height: 50px;
        vertical-align: middle;
        text-align: center;
        line-height: -100px;
        color:white;
        font-size: 8px;
    
    }
    .h{
        text-decoration: none;
        color:black;
        margin-bottom: 70px;
        text-align: right;
        
    }
    .hh:hover{
      color:orange;
    }
    .hh{
        text-decoration: none;
        font-size: 12px;
        color:silver; 
        padding: 15px;
        text-align: center;
    }
    .t{
        display: inline-block;
        margin-left: 250px;
        margin-top: 70px;
        height: 50px;
        vertical-align: bottom;
        border-spacing:20px 10px;
    }
    .huan{
        display: inline-block;
    }
</style>

<body>
    <!--第一个盒子导航栏-->
<div class="daohang">
        <span><img src="mi.jpg" style="height: 40px;width: 50px;margin-left: 70px;margin-top: 10px;"></span>
        <div style="display: inline-block;">
        <span class="zhuanhuan" style="margin-left: 70px;color:orange;">小米官网</span>
        <span class="zhuanhuan"style="margin-left: 10px;">小米商城</span>
        <span class="zhuanhuan"style="margin-left: 10px;">小米影像</span>
        <span class="zhuanhuan"style="margin-left: 10px;">MIUIMIUI</span>
        <span class="zhuanhuan"style="margin-left: 10px;">IOT</span>
        <span class="zhuanhuan"style="margin-left: 10px;">云服务</span>
        <span class="zhuanhuan"style="margin-left: 10px;">天星数科</span>
        <span class="zhuanhuan"style="margin-left: 10px;">有品</span>
        <span class="zhuanhuan"style="margin-left: 10px;">小爱开放平台</span>
        <span class="zhuanhuan"style="margin-left: 10px;">企业团购</span>
        <span class="zhuanhuan1" style="margin-left: 100px;">登录</span>
        <span class="zhuanhuan1"style="margin-left:3px;">|</span>
        <span class="zhuanhuan1"style="margin-left:3px;">注册</span>
    </div>
</div>
<div class="back" style="margin-left: 0px;"></div>
<div class="back1"></div>
<div class="back2"></div>
<div class="back3"></div>
<div class="back4"></div>
<div>
    <div class="huan">
        <table class="t">
            <tr style="text-align: center;">
                <td><a href="#"class="h">选购指南</a></td>
                <td><a href="#"class="h">服务中心</a></td>
                <td><a href="#"class="h">线下门店</a></td>
                <td><a href="#"class="h">关于小米</a></td>
                <td><a href="#"class="h">关注我们</a></td>
            </tr>
            <tr style="text-align: center;">
                <td><a href="#" class="hh">手机</a></td>
                <td><a href="#"class="hh">申请售后</a></td>
                <td><a href="#"class="hh">小米之家</a></td>
                <td><a href="#"class="hh">了解小米</a></td>
                <td><a href="#"class="hh">新浪微博</a></td>
            </tr>
            <tr style="text-align: center;">
                <td><a href="#"class="hh">电视</a></td>
                <td><a href="#"class="hh">售后政策</a></td>
                <td><a href="#"class="hh">服务网点</a></td>
                <td><a href="#"class="hh">加入小米</a></td>
                <td><a href="#"class="hh">官方微信</a></td>
            </tr>
            <tr style="text-align: center;">
                <td><a href="#"class="hh">笔记本</a></td>
                <td><a href="#"class="hh">维修服务价格</a></td>
                <td><a href="#"class="hh">授权体验店/专区</a></td>
                <td><a href="#"class="hh">投资者关系</a></td>
                <td><a href="#"class="hh">联系我们</a></td>
            </tr>
            <tr style="text-align: center;">
                <td><a href="#"class="hh">平板</a></td>
                <td><a href="#"class="hh">订单查询</a></td>
                <td></td>
                <td><a href="#"class="hh">企业社会责任</a></td>
                <td><a href="#"class="hh">公益基金会</a></td>
            </tr>
            <tr style="text-align: center;">
                <td><a href="#"class="hh">穿戴</a></td>
                <td><a href="#"class="hh">以旧换新</a></td>
                <td></td>
                <td><a href="#"class="hh">廉洁举报</a></td>
                <td></td>
            </tr>
            <tr style="text-align: center;">
                <td><a href="#"class="hh">耳机</a></td>
                <td><a href="#"class="hh">保障服务</a></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr style="text-align: center;">
                <td><a href="#"class="hh">家电</a></td>
                <td><a href="#"class="hh">防伪查询</a></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr style="text-align: center;">
                <td><a href="#"class="hh">路由器</a></td>
                <td><a href="#"class="hh">F码通道</a></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr style="text-align: center;">
                <td><a href="#"class="hh">音箱</a></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr style="text-align: center;">
                <td><a href="#"class="hh">配件</a></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
    </div>
    <div class="huan" style="margin-left: 150px;">
      <div style="color:orange;font-size: 20px;">400-100-5678</div>
      <div style="color:silver;font-size: 15px;">8:00-18:00（仅收市话费）</div>
      <div >
          <table style=" border: 1px solid orange;"><tr ><td style="color:orange;font-size: 10px;"> 人工客服</td></tr></table>
      </div>
    </div>
</div>
<div>
    <div class="huan"style="margin-top: 380px;margin-left: 100px;"><img src="mimi.png" style="height: 60px;width: 60px;"></div>
    <p style="font-size: 10px;margin-left: 200px;margin-top:-60px">小米商城 | MIUI | 米家 | 米聊 | 多看 | 游戏 | 政企服务 | 小米天猫店 | 小米集团隐私政策 | 小米公司儿童信息保护规则 | 小米商城隐私政策 | 小米商城用户协议 | 问题反馈 | Select Location</p>
    <p style="font-size: 10px;margin-left: 200px;">北京互联网法院法律服务工作站 | 中国消费者协会 | 北京市消费者协会</p>
    <p style="font-size: 10px;margin-left: 200px;color: silver;">© mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2020]0276-042号</p>
    <p style="font-size: 10px;margin-left: 200px;color: silver;">（京）网械平台备字（2018）第00005号 互联网药品信息服务资格证 (京)-非经营性-2014-0090 营业执照 医疗器械质量公告</p>
    <p style="font-size: 10px;margin-left: 200px;color: silver;">增值电信业务许可证 网络食品经营备案 京食药网食备202010048   食品经营许可证</p>
    <p style="font-size: 10px;margin-left: 200px;color: silver;">违法和不良信息举报电话：171-5104-4404 知识产权侵权投诉 本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>
    <img src="隐私认证.png" class="huan" style="margin-left: 200px;height:50px;width:130px;">
    <img src="诚信网站.png" class="huan" style="margin-left: 0px;height:50px;width:130px;">
    <img src="可信网站.png" class="huan" style="margin-left: 0px;height:50px;width:130px;">
    <img src="诚信经营.png" class="huan" style="margin-left: 0px;height:50px;width:130px;">
    <img src="已服务.png" class="huan" style="margin-left: 0px;height:50px;width:130px;">
</div>
<p style="text-align: center;font-size: 17px;color:silver;" >让全球每个人都能享受科技带来的美好生活</p>
</body>

</html>

本次作业是小米官网的制作，在假期的时候正好可以借此对知识点进行巩固，还有新知识的学习，但是本次作业还是存在缺点，图片切换和视频播放还是没有学习到未进行完善，。我会抓紧时间学习并且补足，在假期时间学习JAVAscript，然后将自己本次作业进行修改已达到尽善尽美的效果。

不想敲代码1
关注
用css仿写小米手机端官网
唯唯同学
06-19 555
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <!-- 设置浏览器窗口分辨率 --> <meta name="viewport" content="width=375,user-scalable=no" /> <link rel="stylesheet" type="text/css" href="css/header.css"/> &l
天星数科首页CSS布局回顾
weixin_61571492的博客
07-23 729
天星数科首页仿制，使用吸顶定位，两端对齐，绝对定位相对定位，固定定位，弹性布局，背景定位与高级选择器
小米官网前端页面代码
01-10
小米官网前端页面代码
前端700行代码项目练习--小米官网（仅html、css实现）
comegoing_xin_lv的博客
08-29 1072
前端项目，通过html和css实现，共计700行代码
探究CSS如何实现远程加载字体的方法
weixin_41888295的博客
05-09 986
但是，本地缓存需要用户手动将需要加速的CSS文件加载到本地，并且在访问网站时需要手动加载缓存中的文件，因此相对于CDN来说，使用本地缓存的性能可能不如CDN。但是，预加载器需要用户手动将需要加速的CSS文件加载到本地，并且在访问网站时需要手动加载缓存中的文件，因此相对于CDN来说，使用预加载器的性能可能不如CDN。但是，自定义的加载器需要用户自行开发和维护，因此相对于CDN和预加载器来说，使用自定义的加载器的性能可能不如CDN和预加载器。最后，还可以使用自定义的加载器来实现CSS远程加载字体。
HTML+CSS实现小米官网顶部导航栏（代码与静态资源）
最新发布
01-04
在本项目中，我们主要探讨如何使用HTML和CSS来实现类似小米官网的顶部导航栏。这个练习涵盖了网页设计的基础知识，包括结构化HTML元素、CSS样式表的应用以及静态资源的组织。 首先，让我们从HTML部分开始。HTML...
动态小米官网(html+css+js)
04-24
总的来说，“动态小米官网(html+css+js)”项目是前端开发的一个实践示例，它综合运用了HTML、CSS和JavaScript三大核心技术，构建了一个具有实际功能的动态网页应用。通过对这些技术的深入理解和实践，开发者可以提升...
小米官网主页html和css全代码.rar
04-09
【小米官网主页html和css全代码.rar】是一个包含有实现小米官网主页的HTML和CSS源码的压缩包。这个资源对于学习网页设计、前端开发，尤其是对小米网站界面设计感兴趣的开发者来说，是一份宝贵的参考资料。它揭示了...
html+css+小米官网.zip
12-29
【HTML+CSS构建小米官网】 在Web开发领域，HTML（HyperText Markup Language）和CSS（Cascading Style Sheets）是构建网页的基础技术。本压缩包文件“html+css+小米官网.zip”提供了一个简单的静态网页，模拟了小米...
html+css仿小米商城首页搜索页和商品详情页
12-30
在这个“html+css仿小米商城首页搜索页和商品详情页”的作业中，我们将深入探讨如何利用这两种语言来创建类似于小米商城的页面设计。 首先，HTML（HyperText Markup Language）是用于创建网页内容的标记语言。它...
TL摄像头如何放到html去直播,教程丨怎么把摄像头的画面，传到抖音直播里？
weixin_39839541的博客
05-31 906
所需设备：安装抖音直播伴侣软件的PC一台。美乐威视频采集设备一个(视频采集棒或者视频采集卡)。美乐威标配USB 3.0线缆一根，HDMI线缆若干(根据需要采集的视频源数量而定)。专业摄像机一台或多台。操作步骤：登录抖音官网，下载抖音直播伴侣软件，并注册账号。抖音直播伴侣下载地址：https://www.douyin.com/falcon/webcast_openpc/pages/streaming...
Css 几种常用的font-family字体设置
两鬓已不能斑白的专栏
01-29 7702
HTML5时代已经不知不觉的到来了，看到好多电商的网站都设计的非常漂亮，特别是文字部分都不是图片，而是直接用CSS来设计的，真心不错，研究了一下他们的CSS代码，拿来分享下。 我看了下小米的CSS字体代码，觉得挺好，这里贴出来： 代码如下: body{font-family: arial,"Hiragino Sans GB","Microsoft Yahei",sa
HTML+CSS实现小米官网首页
热门推荐
道阻且长，行则将至。
12-28 3万+
一、HTML+CSS实现小米官网首页 仿写小米官网的页面，熬了两个晚上终于把这个页面做好了，原创不易，欢迎大家点赞和评论，需要源代码的评论区留言或者加我QQ（2997381395），大家记得关注我哦！我会不定期的跟大家分享文章。 二、页面结构如下： 三、效果图如下： 四、部分源代码如下（如需要全部的源代码请加我QQ或者评论区留言，原创不易，记得点赞和收藏哦）。 HTML部分源代码如下： <!DOCTYPE html> <html lang="en"> <head>
CSS项目基础实战：实现小米官网+详细步骤分析+出错问题总结
尚墨1111的博客
08-25 2528
1.有关项目的基本结构： |--html 文件与 CSS 文件单独设置分开。 |--在html中引入： |--重置样式表 |--网页基本样式表:所有网页所共有使用的部分:网页宽度、网页字体、颜色、设置最小宽度、clearfix，消除浮动带来的影响 |--图标字体库 |--结构： |--CSS：文件夹（bace.css、index.css、reset.css、all.css） ...
HTML+CSS 小米官网案例
qq_46040633的博客
07-08 1591
#TML+CSS 小米官网案例
小米官网临摹版html+css
11-25
【小米官网临摹版html+css】项目是一个前端学习与实践的示例，旨在帮助初学者掌握HTML5、CSS3以及少量JavaScript的基础应用。在这个项目中，开发者通过模仿小米官网的首页布局和样式，来提升自己的网页设计技能。...
HTML+CSS购物网站——小米有品
03-23
HTML和CSS是构建网页的基本技术，本项目是一个以"小米有品"为主题的购物网站实现，涵盖了用户在在线购物过程中可能遇到的各种页面。下面将详细解释这些知识点。 首先，HTML（HyperText Markup Language）是用于创建...
使用html和css的一些案列（小米官网）
shzbbsns的博客
07-24 1019
这些就是仅用html和css所做的一些案例，对空间的布局，对元素的理解.....
【前端实战项目】手把手教你做出小米商城官网（HTML+CSS）
N_01040709的博客
06-21 1837
今天给大家带来小米商城的网页设计教程，有兴趣的小伙伴们可以点击下方视频学习哟~~~ 【web前端实战练习】小米商城项目，（HTML+css）网页制作https://www.bilibili.com/video/BV1r34y1W7Tr?spm_id_from=333.999.0.0&vd_source=3dc17743417209d9d759a231450c3c50 HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet
HTML+CSS+JavaScript仿京东购物商城网站 web前端制作服装购物商城 html电商购物网站
VX_WJ88950106的博客
08-06 2万+
⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web......
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值