css练习-小米官网首页静态页面制作

部分代码如下：

快捷导航区域代码

<!-- 头部 --><header><!-- 快捷导航 --><div class="shortcut"><div class="wrapper"><!-- 快捷导航左部 --><div class="left com"><ul><li><a href="#">小米商城</a></li><li><a href="#">MIUI</a></li><li><a href="#">loT</a></li><li><a href="#">云服务</a></li><li><a href="#">天星科技</a></li><li><a href="#">有品</a></li><li><a href="#">小爱开放平台</a></li><li><a href="#">企业团购</a></li><li><a href="#">资质证照</a></li><li><a href="#">协议规则</a></li><li><a href="#">下载app</a></li><li><a href="#">Select Location</a></li></ul></div><!-- 快捷导航右部 --><div class="right com"><ul><li><a href="#">登录</a></li><li><a href="#">注册</a></li><li><a href="#">消息通知</a></li><li><a href="#"><span class="iconfont icon-cart"></span><span>购物车</span><i>0</i><p class="hov">您的购物车还没有加购</p></a></li></ul></div></div></div><!-- 快捷导航 -->

// 头部
// 快捷导航
.shortcut{font-size: 12px;background: #333;.wrapper{display: flex;justify-content: space-between;// 公共样式.com{ul{display: flex;li{// 最后一个li不显示border&:last-child a{border: 0;}}a{line-height: 40px;padding: 0 8px;border-right: 1px solid #424242;color: #b0b0b0;&:hover{color: #fff;}}// 购物车图标.icon-cart{vertical-align: middle;color: #b0b0b0;font-size: 27px;}}}// 右部样式调整.right{ul{li{&:last-child{position: relative;background-color: rgb(121, 119, 119);&:hover{background-color: #fff;a{color: rgb(231, 91, 26);p{display: block;}}}}&:last-child a{height: 100%;p{position: absolute;display: none;top: 42px;right: 0px;padding: 10px;width: 150px;font-size: 14px;line-height: 20px;background-color: rgb(241, 240, 240);}}}}}}
}

banner区域

<!-- banner --><div class="banner wrapper"><div class="pic"><img src="./uploads/banner.webp" alt=""><img src="./uploads/banner2.webp" alt="" class="bpic2"></div><div class="left"><a href="#">手机<i class="iconfont icon-arrow-right"></i></a><a href="#">电视<i class="iconfont icon-arrow-right"></i></a><a href="#">笔记本 平板<i class="iconfont icon-arrow-right"></i></a><a href="#">家电<i class="iconfont icon-arrow-right"></i></a><a href="#">出行 穿戴<i class="iconfont icon-arrow-right"></i></a><a href="#">智能 路由器<i class="iconfont icon-arrow-right"></i></a><a href="#">电源 配件<i class="iconfont icon-arrow-right"></i></a><a href="#">健康 儿童<i class="iconfont icon-arrow-right"></i></a><a href="#">耳机音响<i class="iconfont icon-arrow-right"></i></a><a href="#">生活 箱包<i class="iconfont icon-arrow-right"></i></a></div></div><!-- banner -->

产品区域-手机

<div class="content"><div class="wrapper"><!-- 插播广告 --><div class="cut"><img src="./uploads/cut.webp" alt=""></div><!-- 插播广告 --><!-- 手机 --><div class="mobile order"><div class="title"><h2>手机</h2><a href="#"><span>查看更多<i class="iconfont icon-next"></i></span></a></div><div class="goods"><div class="left"><a href="#"><img src="./uploads/fold.webp" alt=""></a></div><div class="right"><a href="#"><img src="./uploads/phone1.webp" alt=""><h3>Redmi K50 电竞版</h3><p>全线拉满的冷血旗舰</p><p class="price"><i>3200</i>元起</p></a><a href="#"><img src="./uploads/phone2.webp" alt=""><h3>Redmi K50 电竞版</h3><p>全线拉满的冷血旗舰</p><p class="price"><i>3200</i>元起</p></a><a href="#"><img src="./uploads/phone3.webp" alt=""><h3>Redmi K50 电竞版</h3><p>全线拉满的冷血旗舰</p><p class="price"><i>3200</i>元起</p></a><a href="#"><img src="./uploads/phone4.webp" alt=""><h3>Redmi K50 电竞版</h3><p>全线拉满的冷血旗舰</p><p class="price"><i>3200</i>元起</p></a><a href="#"><img src="./uploads/phone4.webp" alt=""><h3>Redmi K50 电竞版</h3><p>全线拉满的冷血旗舰</p><p class="price"><i>3200</i>元起</p></a><a href="#"><img src="./uploads/phone3.webp" alt=""><h3>Redmi K50 电竞版</h3><p>全线拉满的冷血旗舰</p><p class="price"><i>3200</i>元起</p></a><a href="#"><img src="./uploads/phone2.webp" alt=""><h3>Redmi K50 电竞版</h3><p>全线拉满的冷血旗舰</p><p class="price"><i>3200</i>元起</p></a><a href="#"><img src="./uploads/phone1.webp" alt=""><h3>Redmi K50 电竞版</h3><p>全线拉满的冷血旗舰</p><p class="price"><i>3200</i>元起</p></a></div></div></div><!-- 手机 -->

.content{margin-top: 20px;padding-bottom: 20px;background-color: #f5f5f5;
}// 中部插播广告区域
.cut{padding-top: 20px;padding-bottom: 20px;
}// 产品区域布局一致的order
// 手机区域css和order完一致
.order{padding: 10px 0;// 标题.title{display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;h2{font-size: 24px;font-weight: 500;}a{&:hover{color: #ff6700;}span{font-size: 14px;i{margin-left: 3px;width: 14px;height: 14px;background-color: #b0b0b0;color: #fff;border-radius: 50%;font-weight: bold;&:hover{color: #ff6700;}}}}}// 产品.goods{display: flex;.left{margin-right: 10px;transition: transform 1s;img{width: 234px;}&:hover{transform: translateY(-5px);box-shadow: -5px 5px 3px #bdbdbd;}}.right{display: flex;flex-wrap: wrap;justify-content: space-between;perspective: 1000px;a{margin-top: 10px;padding: 20px 35px;text-align: center;background-color: #fff;transition: transform 1s;&:nth-child(-n+4){margin-top: 0;}&:hover{transform: translateY(-5px);box-shadow: -5px 5px 3px #bdbdbd;}img{margin-bottom: 20px;width: 160px;}p{color:#b0b0b0}.price{margin-top: 20px;color: #ff6700;font-size: 14px;font-weight: bold;}}}}
}

css练习-小米官网首页静态页面制作相关推荐

【Web】HTML+CSS（No.55）实现小米官网首页静态效果
模仿实现小米官网首页静态布局需要素材点击图片联系我或私信.评论效果图 HTML代码 <!DOCTYPE html> <html lang="en"> & ...
用html和css仿作小米官网（静态）
目录一:准备工作二:头部导航栏部分三:中间照片部分四:尾部文字部分准备工作: 首先我们需要从小米官网的网页源文件上下载需要的图片等素材,其次我们需要准备一个reset.css的 ...
HTML+CSS小米官网首页 (1页侧拉菜单)
⛵ 源码获取文末联系 ✈ Web前端开发技术描述网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 公司官网网站 | 企业官网 | 酒店官网 | 等网站的设计与制 ...
教你用html和css仿制小米官网页面！
一.使用的工具? 博主使用的是Visual Studio Code.这个是真的方便啊,体型小不说,好用的插件还不少!赞一个.不过为了之后的后端学习,我开始慢慢转向用IDEA 了,这个软件使用起来也是真 ...
用html+css实现小米官网的模拟
小米官网制作 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF ...
html css 模仿小米官网搜索框
写网页效果,掌握html,css,唯一的捷径就是多模仿,多练习.小米官网的搜索框效果看似简单,实际写代码的时候才发现要掌握好多css知识才能完成效果.浮动.导航条.鼠标经过.定位.文字框效果实现.js ...
css:动画小米官网盒子阴影心跳动画
小米官网盒子阴影 <!DOCTYPE html> <html lang="en"><head><meta charset="UT ...
web前端项目（一）做一个网易考拉官网常规静态页面 + 页面放到http服务 + 前后端分离
1 新建文件夹分css img 文件夹 index.html 静态页面 2 将本地做的静态页面放到 http 服务 localhost:8080 设置nodejs静态目录 npm install e ...
HTML/CSS实现小米官网搜索框效果
效果图: 需求分析: 1.输入框焦点事件 onfocus:成为焦点, 点击输入框的时候,出现闪烁光标,此时可以输入内容. onblur :失去焦点, 点击页面空白区域,光标消失.此时不可以输入内容. ...
HTML+CSS实现小米官网顶部导航栏
效果图效果图 html代码 <!DOCTYPE html> <html lang="en"> <head><meta charset=& ...

css练习-小米官网首页静态页面制作

css练习-小米官网首页静态页面制作相关推荐

最新文章

热门文章