小米官网首页效果

最新推荐文章于 2022-09-25 16:39:11 发布
最新推荐文章于 2022-09-25 16:39:11 发布
阅读量1.4k 收藏 1
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lanfuA/article/details/108467236
版权

小米官网首页效果

效果图

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=375,user-scalable=no, initial-scale=1.0">
    <title>xiaomi</title>
    <link rel="stylesheet" href="css/baes.css">
    <link rel="stylesheet" href="css/xhk.css">
</head>

<body>
    <!-- hender -->
    <div class="header">
        <div class="headerTop">
            <div class="logo"></div>
            <div class="search">
                <div class="icon"></div>
                <input type="text" placeholder="搜索商品">
            </div>
            <div class="user"></div>
        </div>
        <div class="headerNav">
            <a href="">推荐</a>
            <a href="">手机</a>
            <a href="">电视</a>
            <a href="">笔记本</a>
            <a href="">智能</a>
            <a href="">家电</a>
            <input type="checkbox" name="choose" id="choose" hidden="hidden">
            <label for="choose" name="choose" class="xhicon"></label>
            <div class="xhk">
                <div class="xhkMain">
                    <div class="xhkTop">
                        <span class="title">全部</span>
                        <!-- <input type="checkbox" name="choose" id="choose" hidden="hidden">
                        <label for="choose" name="choose" class="xhicon"></label> -->
                    </div>
                    <div class="xhkList">
                        <a href="">推荐</a>
                        <a href="">手机</a>
                        <a href="">电视</a>
                        <a href="">笔记本</a>
                        <a href="">智能</a>
                        <a href="">家电</a>
                        <a href="">生活周边</a>
                    </div>


                </div>
            </div>
        </div>
    </div>
    <!-- 轮播图 -->
    <div class="swiper"> </div>

    <div class="iconList">
        <a href="" class="iconItem"><img src="img/icon1.png" alt="" /></a>
        <a href="" class="iconItem"><img src="img/icon2.webp" alt="" /></a>
        <a href="" class="iconItem"><img src="img/icon3.gif" alt="" /></a>
        <a href="" class="iconItem"><img src="img/icon4.webp" alt="" /></a>
        <a href="" class="iconItem"><img src="img/icon5.webp" alt="" /></a>
        <a href="" class="iconItem"><img src="img/icon6.png" alt="" /></a>
        <a href="" class="iconItem"><img src="img/icon7.jpg" alt="" /></a>
        <a href="" class="iconItem"><img src="img/icon8.png" alt="" /></a>
        <a href="" class="iconItem"><img src="img/icon9.png" alt="" /></a>
        <a href="" class="iconItem"><img src="img/icon10.png" alt="" /></a>
    </div>


    <!-- banner -->
    <div class="banner">
        <div class="lbanner"></div>
        <div class="rbanner">
            <div class="rtbanner"></div>
            <div class="rbbanner"></div>
        </div>
    </div>
    <!--  -->
    <div class="swiper2"> </div>
    <!-- 每日精选 -->
    <!-- 第一个div jx为父级 jxad pdList 为子级 垂直结构  -->
    <div class="jx">
        <div class="jxad"></div>
        <div class="pdList">
            <!--  -->
            <div class="pdItem">
                <img src="img/jx1.jpg" alt="" />
                <div class="title">Redmi Note 8 Pro</div>
                <div class="brief">6400万全场景四摄</div>
                <div class="price">1399</div>
                <div class="buyBtn"> 立即购买</div>
            </div>
            <div class="pdItem">
                <img src="img/jx2.jpg" alt="" />
                <div class="title">Redmi Note 8 Pro</div>
                <div class="brief">6400万全场景四摄</div>
                <div class="price">1399</div>
                <div class="buyBtn"> 立即购买</div>
            </div>
            <div class="pdItem">
                <img src="img/jx3.jpg" alt="" />
                <div class="title">Redmi Note 8 Pro</div>
                <div class="brief">6400万全场景四摄</div>
                <div class="price">1399</div>
                <div class="buyBtn"> 立即购买</div>
            </div>
            <div class="pdItem">
                <img src="img/jx4.webp" alt="" />
                <div class="title">Redmi Note 8 Pro</div>
                <div class="brief">6400万全场景四摄</div>
                <div class="price">1399</div>
                <div class="buyBtn"> 立即购买</div>
            </div>
        </div>
        <!--底部
				.footer>(.fIcon>(.img+span))*4
			-->
        <div class="footer">
            <div class="fIcon">
                <div class="img"></div><span>首页</span></div>
            <div class="fIcon">
                <div class="img"></div><span>分类</span></div>
            <div class="fIcon">
                <div class="img"></div><span>购物车</span></div>
            <div class="fIcon">
                <div class="img"></div><span>我的</span></div>
        </div>
</body>

</html>

 

技术总结

 flex 弹性布局的使用

 flex-direction: column垂直布局 ; 

flex-direction: row;水平布局

 justify-content: //用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。

flex-start默认值。项目位于容器的开头。 
flex-end项目位于容器的结尾。 
center项目位于容器的中心。 
space-between项目位于各行之间留有空白的容器内。 
space-around项目位于各行之前、之间、之后都留有空白的容器内。 
   

定位

position 的四个值：static、relative、absolute、fixed，sticky .

static: HTML 元素的默认值，即没有定位，遵循正常的文档流对象。静态定位的元素不会受到 top, bottom, left, right影响。

relative:  相对定位元素的定位是相对其正常位置。

absolute:  绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>:

sticky:  

基于用户的滚动位置来定位。

粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。

它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。

元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。注意:   Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix 

参考：https://www.runoob.com/css/css-positioning.html#position-sticky

lanfuA
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
结合Bootstrap实现一点点奶茶加盟官网首页页面效果
梨柚的博客
09-27 1430
学完bootstrap3后，找了一个简单的网站进行实战练习，只实现了网站首页的效果。用上bootstrap基本的栅格布局，轮播图和几个常用的样式类，适合小白练手。 整个完整首页的实现效果是这样的： 这里粘贴两个关键文件的代码：（完整项目资源放github，文末有地址。） 1、index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>一点点官网|一点点.
小米官网首页效果图
L221545的博客
06-11 338
小米官网首页效果图 1、 2、 3、 4、 5、
官网首页淡出效果
weixin_30909575的博客
07-03 75
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> ...
仿小米官网(html+js+css)，html5+jq+css 做的小米官网首页，实现le小米官网所有特效，有需要的小伙伴赶紧下载吧
12-21
学习前端知识时写的一个仿小米官网的一些页面+css样式+js验证代码 学习前端知识时写的一个仿小米官网的一些页面+css样式+js验证代码
小米官网竖直导航栏html,演示：小米首页纵向导航栏特效(上)
weixin_32019361的博客
06-03 445
课程目标：本季课程引入了CSS3众多功能中的新特性，让设计和开发人员能够轻松的创作出各种精美的界面效果。整合 HTML5 & CSS3，有的是网站开发中常用的、实用的功能，有的是先进的 Web 技术的应用演示。不管哪一种，这些案例中的技术都值得我们去探究和学习。适合人群：1. 零基础，对WEB前端开发感兴趣的朋友2. WEB全栈开发人员、拓展知识面和能力的朋友3. 高校计算机相关专业的大学...
小米官网轮播效果jquery实现
09-27
小米官网轮播效果利用jquery实现，细节太多，就不解释了，学的好的话也不难，有需要的铁子们可以看看
前端 VS 仿小米官网 添加动态效果
08-29
使用了大量的动态效果，鼠标移入显示，移出隐藏，鼠标悬停，移入放大等js效果。请合理参考。 /* 以下是动态页面 */ .content { width: 200px; height: 200px; position: relative; overflow: hidden; /* 超出...
小米官网首页(高仿)初学者实战练习 html+css+javascript带动画效果
12-23
js学了一段时间了，拿小米的官网练练手，这些代码是实战练习时写的，动画效果基本实现，包含导航栏下拉切换，商品橱窗切换等。本人也是初学者，代码仅供参考，欢迎大家点赞和评论。
jquery轮播图-小米官网效果
03-26
jquery轮播图-小米官网效果，网络上看到的，觉得不错就上传出来，供大家一起共同分享学习。
前端项目——小米官网首页
11-15
使用div+css实现小米官网首页内容，其中使用css3动画做了轮播图，以及鼠标悬停的动画效果，未涉及到js等逻辑内容，适合前端初期学习的小伙伴们参考借鉴
小米官网布局完整代码jq特效加分析
05-26
小米官网完整布局html加分析，jq轮播特效，自动定时，左右切换，京东轮播，调试加笔记分析
仿小米官网HTML+css,有特效小米.zip
10-09
仿小米官网HTML+css,有特效小米.zip
小米官网-基本功能全部实现，总体和官网一模一样
08-06
北大青鸟的网页比赛项目，一定要用谷歌浏览器打开，当初就是用谷歌写的，别的浏览器不敢保证会不会出问题。
前端移动Web第二天：Flex伸缩布局-携程首页案例.zip
04-16
携程首页源代码
根据小米商城官网首页效果敲写页面
weixin_41227874的博客
11-11 1253
闲暇之余对照了小米商城官网首页的展示效果，自己仿写了首页的头部页面，渲染图为下： 不知道小米商城用的是什么框架，我这里使用的是vue + element，由于是单页面，且没有添加图片以及调用接口，所以页面时静态的。 其中有部分细节需要注意： 1、下载APP这里，有一个动态的效果，鼠标放上去会出现一张二维码，位置正好是在下载APP下面，且是由上往下滑出，小米这种大厂的效果还是很丝滑的，我参考了别人的思路，可以同过css的属性以及结合js来实现： css属性为：height：0; overFlow：
小米官网手机显示布局
fujiaxu666的博客
03-14 153
效果图： <!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&
【Web】HTML+CSS（No.55）实现小米官网首页静态效果
Sherry带你学Web
08-12 1743
模仿实现小米官网首页静态布局 需要素材点击图片联系我或私信、评论 效果图 HTML代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>小米官网</title> <link rel="stylesheet...
基于HTML+CSS+JavaScript的MIUI10官网网站设计与开发
毕业作品网站
09-25 4181
当亲自动手自己做网页的时候并没有自己想想的那么简单也没有那么的难，从一开的无从下手到最后的完成，中间我在网上搜索大量的知识和操作，还在书上资料寻找那些解决问题的办法。素养目标：课程设计为学生提供了一个既动手又动脑，独立实践的机会，将课本上的理论知识和实际有机的结合起来，锻炼学生的分析 解决实际问题的能力。能力目标：理解网站设计的四个阶段：网站的前期准备、网站的结构架设、网站的效果设计和网站的人机交互，综合应用 HTML、CSS、JavaScript等技术来开发网站；1、先用html写出结构。
模仿小米商城浮动效果
zhongshuying的博客
09-02 1513
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; .father:hover {
小米官网flex布局
最新发布
07-30
- *1* [小米官网首页效果](https://blog.csdn.net/lanfuA/article/details/108467236)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值