Web前端 小米官网试做

最新推荐文章于 2024-10-03 20:14:40 发布
最新推荐文章于 2024-10-03 20:14:40 发布
阅读量89 收藏
点赞数
文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_80607226/article/details/134714834
版权

样品

代码

<!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;
        }
        .top{
            height: 40px;
            line-height: 40px;
            background-color: rgb(69, 68, 68);
        }
        .top-left{
            float: left;
            padding-left: 200px;
            height: 40px;
            line-height: 40px;
        }
        .a1{
            font-size: 12px;
            text-decoration:none;
            color: rgb(184, 184, 184);
        }
        .a2{
            margin: 0.3em;
        }
        .top-right{
            float: right;
            padding-right: 200px;
            height: 40px;
            line-height: 40px;
        }
        .head{
            height: 100px;
            line-height: 100px;
        }
        .p1{
            float: left;
            padding-top: 22px;
            width: 56px;
            height: 56px;
        }
        .b1{
            font-size: large;
            text-decoration: none;
            color: black;
        }
        .b2{
            margin: 0.5em;
        }
        .p2{
            float: right;
            padding-top: 22px;
            width: 52px;
            height: 50px;
        }
        .b3{
            padding-top: 8px;
            width: 250px;
            height: 50px;
        }
        .head-left{
            float: left;
            padding-left: 200px;
            height: 100px;
            line-height: 100px;
        }
        .head-right{
            float: right;
            padding-right: 200px;
            height: 100px;
            line-height: 100px;
        }
        .body-left{
            float: left;
            margin-left: 200px;
            width: 234px;
            height: 460px;
            background-color: gray;
        }
        .c1{
            padding-top: 20px;
            list-style: none;
        }
        .c2{
            margin-left: 20px;
            width: 234px;
            height: 42px;
        }
        .c1 li{
            color: white;
        }
        .body-right{
            float: right;
            padding-right: 200px;
            width: 1056.6px;
            height: 460px;
        }
        .p3{
            width: 1056.6px;
            height: 460px;
        }
        .foot-left{
            float: left;
            padding-top: 20px;
            padding-left: 200px;
            width: 234px;
            height: 170px;
        }
        .p4{
            width: 234px;
            height: 170px;
        }
        .foot-right{
            float: right;
            padding-top: 20px;
            padding-right: 200px;
            width: 1000px;
            height: 170px;
        }
        .d1{
            margin: 10px;
        }
        .p5{
            width: 316px;
            height: 170px;
        }
    </style>
</head>
<body>
    <div class="top">
        <div class="top-left">
         <a href="#" class="a1">小米官网</a>
         <span class="a2"></span>
         <a href="#" class="a1">小米商城</a>
         <span class="a2"></span>
         <a href="#" class="a1">小米澎湃OS</a>
         <span class="a2"></span>
         <a href="#" class="a1">loT</a>
         <span class="a2"></span>
         <a href="#" class="a1">云服务</a>
         <span class="a2"></span>
         <a href="#" class="a1">天星数科</a>
         <span class="a2"></span>
         <a href="#" class="a1">有品</a>
         <span class="a2"></span>
         <a href="#" class="a1">小爱开发平台</a>
         <span class="a2"></span>
         <a href="#" class="a1">资质证照</a>
         <span class="a2"></span>
         <a href="#" class="a1">协议规则</a>
         <span class="a2"></span>
         <a href="#" class="a1">下载app</a>
         <span class="a2"></span>
         <a href="#" class="a1">Select Location</a>
        </div>
        <div class="top-right">
            <a href="#" class="a1">登录</a>
            <span class="a2"></span>
            <a href="#" class="a1">注册</a>
            <span class="a2"></span>
            <a href="#" class="a1">消息通知</a>
        </div>
    </div>
    <div class="head">
        <div class="head-left">
            <img src="./小米图标.png" class="p1">
            <span class="b2"></span>
            <span class="b2"></span>
            <a href="#" class="b1">Xiaomi手机</a>
            <span class="b2"></span>
            <a href="#" class="b1">Redmi手机</a>
            <span class="b2"></span>
            <a href="#" class="b1">电视</a>
            <span class="b2"></span>
            <a href="#" class="b1">笔记本</a>
            <span class="b2"></span>
            <a href="#" class="b1">平板</a>
            <span class="b2"></span>
            <a href="#" class="b1">家电</a>
            <span class="b2"></span>
            <a href="#" class="b1">路由器</a>
            <span class="b2"></span>
            <a href="#" class="b1">服务中心</a>
            <span class="b2"></span>
            <a href="#" class="b1">社区</a>
        </div>
        <div class="head-right">
            <input type="search" class="b3" placeholder="电视">
            <img src="./搜索标.png" class="p2">
        </div>
    </div>
    <div class="body">
        <div class="body-left">
            <ul class="c1">
                <div class="c2"><li>手机</li></div>
                <div class="c2"><li>电视</li></div>
                <div class="c2"><li>家电</li></div>
                <div class="c2"><li>笔记本 平板</li></div>
                <div class="c2"><li>出行 穿戴</li></div>
                <div class="c2"><li>耳机 音响</li></div>
                <div class="c2"><li>健康 儿童</li></div>
                <div class="c2"><li>生活 箱包</li></div>
                <div class="c2"><li>智能 路由器</li></div>
                <div class="c2"><li>电源 配件</li></div>
            </ul>
        </div>
        <div class="body-right">
            <img src="./照片1.png" class="p3">
        </div>
    </div>
    <div class="foot">
        <div class="foot-left">
            <img src="./照片2.png" class="p4">
        </div>
        <div class="foot-right">
            <img src="./照片3.png" class="p5">
            <span class="d1"></span>
            <img src="./照片4.jpg" class="p5">
            <span class="d1"></span>
            <img src="./照片5.png" class="p5">
        </div>
    </div>
</body>
</html>

成品

Σdoughty
关注
WEB前端小米商城网页制作
jinxiaofei8的博客
05-23 2440
小米商城页面框架： <!DOCTYPE html> <html> <head><title>小米商城</title></head> <body> <div class="box"> <div class="header"> <div class="header_menu"> <ul class="header_left">
web前端期末大作业——仿小米商城电商平台(6页) html+css+javascript网页设计实例 企业网站制作
qq__3200628753的博客
12-08 1094
⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web...
web前端（仿小米页面）
Ajiang421的博客
04-15 480
【代码】web前端（仿小米页面）
小米官网HTML5
12-04
仅供初学者巩固基础，交流和学习。跟案例为模仿小米官网用于传授HTML5基础课程学习。
Pythonweb 小米商城案例 html/css知识点总结
qq_17405059的博客
05-12 1876
input type="checkbox" name="hobby" value="20"> 乒乓球。<input type="checkbox" name="hobby" value="30"> 羽毛球。<input type="checkbox" name="hobby" value="10"> 篮球。<input type="checkbox" name="hobby" value="40"> 足球。<input type="radio" name="gender" value="2">女。
仿小米官网静态页面源码
12-28
仿小米官网静态页面，有首页，注册，登录还有一个全屏商品介绍页面。
web前端期末节课大作业 ~小米商城官网首页模板. (功能齐全)
06-18
在本项目中，我们主要探讨的是一个基于Web前端技术实现的小米商城官网首页模板，它是一个功能齐全的网页设计，适合用作web前端课程的期末大作业，也适合作为HTML网站模板、HTML期末作业或者毕业设计html模板。...
web前端基础实战项目-小米商城
06-21
HTML5是移动端开发最常用的技术，熟悉HTML5新标签和Api以及CSS3的新的Api，可以使你的网页更加的绚丽多彩，并且开发出你意想不到的网页效果。学完此课程，你编写的代码就可以移动设备上完美兼容啦。
Web前端项目之小米SU7官网制作
06-02
总之，通过参与"Web前端项目之小米SU7官网制作"，学习者不仅可以深入理解前端开发的核心技术，还能锻炼实际项目开发的技能，这将对他们的职业发展大有裨益。无论是想要成为一名专业的前端开发者，还是提升自己现有的...
前端web结课作业 小米商城 纯HTML+CSS
06-20
【标题】：“前端Web结课作业 - 小米商城 纯HTML+CSS” 这个项目是基于前端Web技术实现的小米商城的模拟页面，主要采用了HTML和CSS两种基础语言进行开发。HTML（HyperText Markup Language）是网页内容的结构化标记...
【Web前端】小米商城项目实战HTML+CSS+JavaScript
不会敲代码的程序员
09-15 6679
1、小米商城源码html 2、小米商城源码 github 3、小米商城源码项目h5 4、仿小米商城html网页源码 3.1、首页（index.html） 3.2、登录（login.html） 3.3、注册（register.html） 3.4、详情（plus5.html） 3.5、订单（order.html） 3.6、购物车（trolley.html）
WEB前端的第一个项目——小米官网（含源码）
simplyxx的博客
11-24 1万+
使用html、css与简单的javascript实现小米官网的部分页面和功能，包含首页的一小部分，以及登录和注册三个页面。
前端700行代码项目练习--小米官网（仅html、css实现）
comegoing_xin_lv的博客
08-29 949
前端项目，通过html和css实现，共计700行代码
HTML、CSS制作小米商城网页首页源码解析
热门推荐
Etui۹(･༥･´)و的博客
01-29 3万+
简介： 这是我学习前端以来仿写的第一个项目，沿着尚硅谷李立超老师的教学视频学习。 在仿写这个项目的过程中即巩固了这两周以来的知识，也增加了一些小经验（主要是老师传授），同时也让自己更加有信心学习下去。相信自己一定会实现自己的小梦想！加油！ 小米官网效果： 效果图： 文件目录： HTML文件 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &
HTML5作业：实现小米官网静态首页
coding加油站
07-30 5423
小米官网，模仿小米，小米界面作业，小米商城，模仿小米商城
用html作小米官网首页效果,html+css实现小米商城首页静态页面
weixin_42607969的博客
06-03 1370
maven引入的jar带了时间戳正常情况下,我们引入的第三方jar一般都是类似spider-1.0.5-SNAPSHOT.jar的名称,但是有些环境下,我们引入的三方jar会带上了时间戳,如下所示: spider-1.0.5-201 ...MySQL FUNCTION 整理-- 返回最后一个INSERT查询中, AUTO_INCREMENT列设置的第一个表的值. SELECT LAST_INSER...
小米商城网页制作大全-完结篇
tomorrownan的博客
10-17 1万+
时隔多日，小米商城网页基本完成。跳转的第二页面没有做。在这过程中遇到了很多小而细的问题，例如浏览器兼容性、字符图标不显示、动画效果不起作用等。抽时间整理一下，再继续完善。效果图如下： 实际右侧固定栏只有个人中心、购物车、联系客服、回到顶部四项，固定在哪里不动，由于截图是连续的，所以显示出来是连续的。 动态图如下： 完整的工程详见小米网页完整版 https://github.com/wnn08...
HTML+CSS制作小米官网
weixin_45232818的博客
11-08 5409
经过一个星期学习了中国大学MOOC上北京林业大学精品课——《Web前端开发》（对小白来说太友好）。看完之后为了巩固学过的知识点，对着小米官网的布局敲了一遍。本着记录学习的想法发了这篇文章。 以下为小米官网预览图： 这是对着官网写的页面： Html代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>
Javascript数组研究03_手写实现_fill_filter_find_findIndex_findLast_findLastIndex
最新发布
qq_33546823的博客
10-03 1308
fill()方法用一个固定值填充一个数组中从起始索引（默认为 0）到终止索引（默认为）内的全部元素。它返回修改后的数组。输入参数value：用来填充数组元素的值。start（可选）：开始填充的位置，默认值为 0，索引处理方法和copyWithin一致。end（可选）：停止填充的位置（不包含该位置），默认值为，索引处理方法和copyWithin方法一致。输出：修改后的原数组。注意事项该方法会改变原数组，是修改方法。对于稀疏数组，空槽也会被value填充。是通用的方法在空数组上不会有任何处理。
小米官网web前端开发项目实例
10-14
小米官网的web前端开发项目实例包括但不限于以下几个方面： 1. 响应式布局：小米官网采用了响应式布局，能够适应不同屏幕尺寸的设备，提供更好的用户体验。 2. 图片懒加载：小米官网采用了图片懒加载技术，能够提高页面加载速度，减少用户等待时间。 3. 动态效果：小米官网采用了大量的动态效果，如轮播图、下拉菜单、弹出框等，能够提高页面的交互性和美观度。 4. 数据缓存：小米官网采用了数据缓存技术，能够提高页面的加载速度和用户体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值