利用html和css仿小米官网

最新推荐文章于 2024-07-24 17:02:26 发布
最新推荐文章于 2024-07-24 17:02:26 发布
阅读量193 收藏 1
点赞数
文章标签： html css javascript html5 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46114567/article/details/117902751
版权

话不多说先上图看效果
在这里插入图片描述
在这里插入图片描述
代码仅供参考

<body>
    <div class="header">
        <div class="container">
            <div class="header-left fl"></div>
            <div class="header-rigth fr"></div>
        </div>
    </div>
    <div class="top">
        <div class="container">
            <div class="top-nav"></div>
            <div class="top-slider">
                <div class="slider-navbar"></div>
            </div>
            <div class="top-recommend">
                <div class="recommend-left fl"></div>
                <div class="recommend-right fr">
                    <ul>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </div>
            </div>
            <div class="top-flashsale">
                <div class="flashsale-title common-title"></div>
                <div class="flashsale-content">
                    <div class="content-timer fl"></div>
                    <ul class="content-shops">
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="center">
        <div class="center-phone module-box">
            <div class="phone-title common-title"></div>
            <div class="phone-content">
                <div class="phone-left fl"></div>
                <ul class="phone-right">
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>
    
        <div class="center-household module-box">
            <div class="household-title common-title"></div>
            <div class="household-content">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li>
                    <p></p>
                    <p></p>
                </li>
            </div>
        </div>
    
        <div class="center-video">
            <div class="video-title common-title"></div>
            <ul class="video-content">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
    <div class="bottom">
        <div class="container">
            <div class="bottom-service">
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
            <div class="bottom-links">
                <div class="links-left fl">
                    <ul>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </div>
                <div class="links-right fr"></div>
            </div>
        </div>
    </div>
    <div class="footer">
        <div class="footer-info">
            <div class="info-left fl"></div>
            <div class="info-right fr"></div>
        </div>
        <div class="footer-slogan"></div>
    </div>
    </body>

    <style>
        /*-------------------抽取公共样式-----------------*/
* { /*为了方便,就这样清空默认样式了*/
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
}
body {
    background-color: #f5f5f5;
}
.container {  /*水平居中的内容盒子*/
    width: 1226px;
    height: 100%;
    margin: 0 auto;
    border: 1px solid #f00;
}
.common-title {
    height: 58px;
    background-color: #000;
}
.fl {float: left;}
.fr {float: right;}
.recommend-right,
.flashsale-content,
.phone-right > li,
.household-content > li:last-child > p,
.video-content > li,
.links-left > ul li,
.footer,
.info-left,
.info-right {border: 1px solid #000;}  /*添加边框样式只是为了方便观察,不是布局必须,可删*/


/*-----header部分-----*/
.header {
    margin-bottom: 20px;
    height: 40px;
    background-color: #333;
}
.header-left {
    width: 380px;
    height: 100%;
    background-color: #0f0;
}
.header-rigth {
    width: 260px;
    height: 100%;
    background-color: #0f0;
}


/*--------top部分--------*/
.top {
    /*height: 1210px;*/
    background-color: #fff;
}
.top-nav {
    height: 100px;
    background-color: #f00;
}
.top-slider {
    margin-bottom: 14px;
    position: relative; /*父相*/
    height: 460px;
    background-color: #00f;
}
.slider-navbar {
    position: absolute; /*子绝*/
    top: 0;
    left: 0;
    width: 234px;
    height: 100%;
    background-color: black;
    opacity: .5;
}
.top-recommend {
    margin-bottom: 26px;
    height: 170px;
    background-color: #0f0;
}
.recommend-left {
    height: 100%;
    width: 234px;
    background-color: skyblue;
}
.recommend-right {
    width: 978px;
    height: 100%;
}
.recommend-right > ul {height: 100%;}
.recommend-right > ul li {
    float: left; /*三列等宽,浮动布局*/
    width: 316px;
    height: 100%;
    background-color: deepskyblue;
}
.recommend-right > ul li + li { margin-left: 14px;}  /*设置浮动间隔*/
.top-flashsale {
    height: 438px;
    background-color: #ff4455;
}
/* .flashsale-title {} */
.flashsale-content {
    padding-bottom: 40px;
    height: 380px;
}
.content-timer {
    margin-right: 14px;
    width: 234px;
    height: 100%;
    background-color: #fff;
}
.content-shops {
    overflow: hidden; /*触发bfc,以达到自适应*/
    height: 100%;
    background-color: #6effb1;
}
.content-shops > li {
    float: left; /*四列等宽,浮动布局*/
    width: 234px;
    height: 100%;
    background-color: #fff;
}
.content-shops > li + li {margin-left: 12.5px;}  /*设置浮动间隔*/


/*--------center部分--------*/
.module-box {  /*类似的模块*/
    margin-bottom: 8px;
    height: 686px;
}
.center {
    margin: 0 auto;
    margin-bottom: 60px;
    padding-top: 60px;
    width: 1226px;
    /*height: 1791px;*/
    background-color: #fff;
}
.center-phone {background-color: yellow;}
/* .phone-title {} */
.phone-content {
    height: 628px;
    background-color: pink;
}
.phone-left {
    width: 234px;
    height: 100%;
    background-color: darkseagreen;
}
.phone-right {
    overflow: hidden; /*触发bfc以达到自适应*/
    height: 100%;
    background-color: #ccc;
}
.phone-right > li {
    margin-bottom: 28px; /*设置下边距*/
    padding-left: 14px; /*用padding模拟盒子间隔*/
    float: left; /*四列等宽,浮动布局*/
    width: 25%;
    height: 300px;
    background-color: #f00;
    background-clip: content-box; /*背景色从content开始绘起*/
}
.center-household {background-color: yellow;}
/* .household-title {} */
.household-content {height: 614px;}
.household-content > li {
    position: relative; /*父相*/
    margin-left: 14px; /*设置浮动间隔*/
    margin-bottom: 28px; /*设置下边距*/
    float: left; /*五列等宽,浮动布局*/
    width: 234px;
    height: 300px;
    background-color: #d7d7d7;
}
.household-content > li:nth-child(1),
.household-content > li:nth-child(6) {margin-left: 0; }  /*消除每行第一个的间隔*/
.household-content > li:last-child p:first-child {
    position: absolute; /*子绝*/
    top: 0;
    left: 0;
    right: 0;
    height: 143px;
}
.household-content > li:last-child p:last-child {
    position: absolute; /*子绝*/
    bottom: 0;
    left: 0;
    right: 0;
    height: 143px;
}
.center-video {
    height: 343px;
    background-color: pink;
}
/* .video-title {} */
.video-content {height: 285px;}
.video-content > li {
    float: left; /*四列等宽,浮动布局*/
    width: 296px;
    height: 100%;
}
.video-content > li + li {margin-left: 14px; }   /*设定浮动间隔*/


/*--------bottom部分--------*/
.bottom {
    /*height: 274px;*/
    background-color: #fff;
}
.bottom-service {
    height: 80px;
    background-color: seagreen;
}
.bottom-service > ul {height: 100%;}
.bottom-service > ul li {
    position: relative; /*父相*/
    padding: 0 50px; /*用padding模拟盒子间隔*/
    float: left; /*五列等宽,浮动布局*/
    width: 20%;
    height: 100%;
    background-color: goldenrod;
    background-clip: content-box; /*背景色从content开始绘起*/
}
.bottom-service > ul li + li::before { /*用伪元素模拟分割线*/
    position: absolute; /*子绝*/
    top: 28px;
    left: 0;
    content: ''; /*伪元素必须有content*/
    width: 1px;
    height: 24px;
    background-color: #999;
}
.bottom-links {
    height: 192px;
    background-color: #8545e0;
}
.links-left {
    width: 960px;
    height: 100%;
    background-color: yellow;
}
.links-left > ul {height: 100%;}
.links-left > ul li {
    padding-right: 60px;
    float: left; /*六列等宽,浮动布局*/
    width: 16.666666666666667%;
    height: 100%;
    background-color: #ff0000;
    background-clip: content-box; /*背景色从content开始绘起*/
}
.links-right {
    width: 252px;
    height: 100%;
    background-color: yellow;
}


/*--------footer部分---------*/
.footer {
    margin: 0 auto;
    padding: 30px 0;
    width: 1226px;
    height: 166px;
}
.footer-info {
    height: 57px;
    background-color: #6effb1;
}
.info-left {
    width: 630px;
    height: 100%;
}
.info-right {
    width: 436px;
    height: 100%;
}
.footer-slogan {
    margin-top: 30px;
    height: 19px;
    background-color: #8545e0;
}


    </style>
旧流年，
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
电商项目：仿小米官网纯HTML+css布局
Monto_student的博客
04-21 1938
纯html和css仿小米商城
教你用html和css仿制小米官网页面！
爬遍所有网站
12-15 2771
一、使用的工具？ 博主使用的是Visual Studio Code。这个是真的方便啊，体型小不说，好用的插件还不少！赞一个。不过为了之后的后端学习，我开始慢慢转向用IDEA 了，这个软件使用起来也是真的不赖啊（想要的小伙伴可以评论区找我哦，我会经常看你们的评论的） 原文地址：教你用html和css仿制小米官网页面_是小瓶子呀的博客-CSDN博客 PS：如有需要Python学习资料的小伙伴可以加点击下方链接自行获取 python免费学习资料以及群交流解答点击即可加入 二、结果展示 .
【HTML、CSS】利用HTML、CSS仿小米商城商品列表
A Lucky Boy的博客
03-12 1078
利用HTML、CSS仿小米商城商品列表
使用HTML+CSS仿写小米官网首页
weixin_53153139的博客
07-09 904
通过学习，仅使用HTML+CSS仿写小米首页，以下是我的制作过程。 1.使用sublime编辑器 2.下载素材 1）.HTML部分 1.通过外链样式将创建好的 index.css文件导入到html文件中 2.导航栏部分 ① 小米logo ② 编写导航栏标题 3.中间部分图片分区 4.尾部 2）.CSS部分1.清除误差 设置默认值 2.设置字体 3.导航栏分区样式 4.导航栏标题下悬浮效
html+css仿写小米商城
fine1998_的博客
04-25 2118
这里是前端小白，刚学前端，利用空余时间仿写了一个小米商城的页面。都是最基础的结构和样式的写法，主要想锻炼自己写代码的能力和熟悉一下PC端网页的布局。等学完其他知识再来做补充。这里先记录一下我的仿写思路，以免忘记。 使用技术：html+css 仿写前准备： 1、将模块分类，使用html5新标签 2、确定版心宽度以及位置 3、观察动态效果，能够使用css做出来的有：鼠标移入、过渡、表单获取焦点 ...
HTML+CSS实现小米官网首页
m0_67401920的博客
03-08 5121
一、HTML+CSS实现小米官网首页 仿写小米官网的页面，熬了两个晚上终于把这个页面做好了，原创不易，欢迎大家点赞和评论， 二、主要内容： 三、学习目标： 四、项目准备： 仿写小米官网 下载图片 下载iconfont 初始化css文件 五、页面结构如下： 六、效果图如下： 七、部分源代码如下（如需要全部的源代码评论区留言，原创不易，记得点赞和收藏哦）。 HTML部分源代码如下： <!DOCTYPE html> <html lang="en"> <hea
实训-利用HTML+CSS制作某米官网首页
m0_64336780的博客
04-08 9162
目录 项目介绍 需求分析 页面布局及样式实现 1.引入css文件及初始化 2.实现顶部广告 3.黑色导航栏 4.白色导航 5.banner 6.广告 7.手机 8.家电 9.视频 10.页脚 11.icon 网页总体效果图 总结 源码 项目介绍 学习HTML和CSS有一段时间了，笔者做了一个相对练习而言较为复杂的网页，某米的官网首页，上一下最终效果图： 这个网页相对来说还是比较有练习意义的，包含导航栏，大量的浮动和弹性布局以及一些细小却重要的知识点...
HTML+CSS制作小米手机产品模块
weixin_47824847的博客
07-31 2111
利用html和css制作小米手机产品模块，展示在网页上，方便推广给客户。
【HTML+CSS练习一】编写小米商城小组件
zyh0815的博客
02-28 1117
本文简单使用了HTML和CSS语言，部分实现了小米商城其中一个组件的页面效果。
2022最新仿小米商城首页html+css+js
09-22
本资源名为“2022最新仿小米商城首页html+css+js”，这是一套完整的前端开发代码，旨在模仿小米商城的首页布局和功能。它包括了HTML、CSS和JavaScript三个主要组成部分，这些都是构建动态、交互式网页的基础技术。 ...
HTML和CSS仿小米网页设计
05-16
【HTML和CSS仿小米网页设计】是一个学习前端开发的实践项目，主要涵盖了HTML与CSS的基础知识，以及如何利用这些技术来构建一个与小米官网类似的页面。在这个项目中，你将有机会深入了解并应用网页布局、响应式设计、...
html+css仿小米商城首页搜索页和商品详情页
12-30
在这个“html+css仿小米商城首页搜索页和商品详情页”的作业中，我们将深入探讨如何利用这两种语言来创建类似于小米商城的页面设计。 首先，HTML（HyperText Markup Language）是用于创建网页内容的标记语言。它...
仿小米官网html源码.zip
09-23
总之，这个仿小米官网的HTML源码提供了一个学习和实践前端基础的平台，尤其是对HTML、CSS和JQuery的综合运用。通过研究这个项目，你可以了解到网页开发的基本流程，并为今后的前端学习打下坚实基础。
纯Html+css仿小米pc官网.rar
10-19
【标题】"纯Html+css仿小米pc官网.rar"揭示了这个压缩包包含的项目是用HTML和CSS语言编写的，目的是复刻小米PC端官方网站的界面设计和交互效果。HTML（HyperText Markup Language）是网页内容的结构标准，而CSS...
【HTML — 构建网络】HTML 中的元数据
07-24 915
这在很多方面都很有用。如果设置了 HTML 文档的语言（例如，允许其在特定语言的结果中正确显示），则搜索引擎将更有效地索引您的 HTML 文档，并且它对使用屏幕阅读器的视觉障碍者很有用（例如，“六”一词在法语和英语中都存在，但发音不同。的链接（如果您选择使用 CSS 设置HTML内容的样式）、指向自定义图标的链接以及其他元数据（有关HTML的数据，例如作者和描述文档的重要关键字）。指定包含与您的页面内容相关的关键字的描述很有用，因为它有可能使您的页面在搜索引擎执行的相关搜索中显示得更高（此类活动称为。
基于 HTML+ECharts 实现监控平台数据可视化大屏（含源码）
柯晓楠
07-24 1201
我们实现了一个基于 HTML 和 ECharts 的监控平台数据可视化大屏。这个大屏不仅能够直观地展示监控数据，还能通过交互功能提升用户体验。希望本文能对你在实现类似项目时提供一些帮助和启发。
Web前端：HTML篇（一）
sjb2274540432的博客
07-22 871
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。
基于 HTML+ECharts 实现智慧景区数据可视化大屏（含源码）
最新发布
柯晓楠
07-24 1321
随着旅游业的蓬勃发展，智慧景区的概念逐渐深入人心。通过数据可视化，景区管理者可以实时监控游客流量、设施使用情况以及环境状况，从而提升游客体验和管理效率。本文将详细介绍如何利用 HTML 和 ECharts 实现一个功能丰富的智慧景区数据可视化大屏。
html➕css仿小米商城购物车
06-22
创建一个HTML和CSS的简单购物车模拟器，你可以使用基本的HTML结构来构建页面布局，结合CSS来美化外观，使其类似小米商城的购物车。以下是一个基础示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>小米商城购物车模拟</title> <style> body { font-family: Arial, sans-serif; } .cart { background-color: #f7f7f7; padding: 20px; border-radius: 5px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } .cart-header { display: flex; justify-content: space-between; align-items: center; } .cart-header h2 { margin: 0; } .cart-items { list-style-type: none; padding: 0; } .item { display: flex; margin-bottom: 15px; } .item img { width: 50px; height: 50px; margin-right: 10px; } .item-name, .item-price { font-weight: bold; } .cart-footer { text-align: right; } </style> </head> <body> <div class="cart"> <div class="cart-header"> <h2>我的购物车</h2> <a href="#" class="cart-empty">清空购物车</a> </div> <ul class="cart-items"> <!-- 添加商品项 --> <li class="item"> <img src="product1.jpg" alt="产品1"> <span class="item-name">产品1</span> <span class="item-price">￥199.00</span> <button class="remove-item">移除</button> </li> <!-- 添加更多商品项 --> </ul> <div class="cart-footer"> <p>总计：￥<span id="total-price">0.00</span></p> </div> </div> <script> // 假设这里有一个数组存储购物车商品数据，需要添加计算总价格的逻辑 const cartItems = [ { name: '产品1', price: 199 }, { name: '产品2', price: 299 }, // ... ]; // 在此处编写代码，动态渲染商品并计算总价 function renderCart() { let totalPrice = 0; cartItems.forEach(item => { totalPrice += item.price; const li = document.createElement('li'); li.classList.add('item'); li.innerHTML = ` <img src="${item.image}" alt="${item.name}"> <span class="item-name">${item.name}</span> <span class="item-price">￥${item.price}</span> <button class="remove-item">移除</button> `; li.querySelector('.remove-item').addEventListener('click', () => { // 移除商品逻辑 }); document.querySelector('.cart-items').appendChild(li); }); document.getElementById('total-price').textContent = totalPrice; } renderCart(); </script> </body> </html> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值