栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > 后端开发 > Java

仿作小米商城页面

Java 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

仿作小米商城页面

历时一周半的时间,终于在我的不懈努力下,完成了小米商城页面的静态仿作。真的,这个过程我觉得极其漫长,到最后也不敢相信自己能够完成。因为自己距上一次html和css的学习已经有好久了。好多好多的知识都已经忘记了,以至于自己在仿作的过程中遇到了许多的困难,而自己却怎么也想不起来怎么去解决,总是觉得自己做的都对,按理论来说不应该出现这些问题的呀!有时候一个问题会卡老旧老旧了。弄得我一点做下去的心情都没有了。开始,无奈的我还是要想办法解决摆在我面前的每一个问题。无论他是难是简,是我还没学到的知识还是已经学会的知识。于是,我开始一点一点的尝试,而那些被遗忘的记忆也一点一点的被我给唤起,在尝试成功时,那种如释重负的感觉真让人觉得轻松,可是,当我继续往下做下一个模块时,又总是会遇到好多的问题。并且,面对如此庞大的页面,我要去完成的内容有好多好多,总是让我觉得前路漫漫,没有信心和耐心走下去,但是,不积跬步,无以至千里。我就是那么一小步一小步的走下去,一点一点的去完成,从框架到样式,现将大体的页面布局给做好后,一点一点的完成样式,最后将内容给填装进去……

虽然这是我奋尽全力完成的,但是我知道,我还有好多不足,在页面的仿作上也有好多问题,所以,欢迎各位大佬,大神批评指正,我一定会及时改正。

上图

 上代码

HTML





    
    
    
    小米商城
    



    
    
        
            
                小米官网
                小米商城
                MlUl
                loT
                云服务
                天星科技
                有品
                小爱开放平台
                企业团购
                资质证照
                协议规则
                下载app
                SelectLocation
            
            
                购物车(0)
            
            
                登录
                注册
                消息通知
            
        
    

    
        
        
        
            
        
        
        
            
  • Xiaomi手机
  • Redmi手机
  • 电视
  • 笔记本
  • 平板
  • 家电
  • 路由器
  • 服务中心
  • 社区
  • 手机 >
  • 电视 >
  • 笔记本 平板 >
  • 出行 穿戴 >
  • 耳机 音响 >
  • 家电 >
  • 智能 路由器 >
  • 电源 配件 >
  • 健康 儿童 >
  • 生活 箱包 >
< >
  • 服务保障
  • 服务保障
  • 服务保障
  • 服务保障
  • 服务保障
  • 服务保障

手机 查看更多 >
  • Xiaomi 12 SUltra

    这真徕卡|专业徕卡影像

    5999元起

  • Xiaomi 12S Pro

    骁龙8+旗舰处理器|徕卡影像

    4699元起

  • Xiaomi 12S

    小尺寸性能旗舰|徕卡影像

    3999元起

  • Xiaomi 12S Pro 天玑版

    全球首发天玑9000+|叶脉冷泵散热系

    3999元起

  • Redim Note 11T Pro+

    天玑8100|真旗舰芯

    2099元起

  • Redim Note 11T Pro

    天玑8100|真旗舰芯

    1799元起

  • Redim Note 11SE

    双卡双5G|极速登录

    999元起

    1099元

  • Xiaomi Civi 1S

    原生美肌人像|奇迹阳光动人新色|

    2299元起

智能穿戴
  • 热门
  • 穿戴
  • Xiaomi Watch S1

    蓝宝石玻璃镜面|不锈钢中框|1.43''A…

    999元起

  • Xiaomi真无线降噪耳机3

    40dB宽屏主动降噪|HiFi高保真品质|

    349元

  • Redmi 手表 2

    1.6''AMOLED大屏|117种运动模式|2…

    399元

  • 小米手环6 NFC 版

    1.56''跑道全面彩屏|30种运动模式|…

    229元

    279元

  • Xiaomi 真无线降噪耳机 3 Pro

    40dB自适应降噪 | 空间音频 | HiFi…

    599元起

  • Redmi Buds 3半入耳真无线蓝牙…

    轻巧半入耳|通话降噪|20小时长续航

    179元

  • Redmi Buds 3 青春版

    轻巧真无线|猫耳状稳固设计|18小时

    99元

  • 浏览更多 热门

笔记本 | 平板 查看更多 >
  • Redmi Book Pro 15 2022

    全新12代英特尔处理器

    5599元起

  • Redmi G 2021 R7/RTX3050Ti/1…

    有光追,才是高性能游戏本

    5799元起

  • Pro 14 增强版 i5 独显-Win11

    2.5K超强视网膜全面屏

    4799元

  • RedmiBook Pro 15 R5/16G/512…

    3.2k超高清视网膜全面屏|微米级一体…

    4699元起

  • Redmi Book Pro 15 2022

    全新12代英特尔处理器,2.5k 120Hz

    5399元起

  • 小米平板5 Pro

    骁龙870芯片|2.5k超高清|120HZ高…

    2349元起

  • RedmiBook Pro 14 R5 16G 512…

    2.5k超强视网膜全面屏

    3999元起

  • Redmi 显示器 23.8英寸 599元
  • 浏览更多 热门

家电
  • 热门
  • 电视影音
  • 小米电视6 65” OLED

    OLED自发光屏|百万级对比度|4.6m…

    6699元

  • 小米电视6 至尊版 65英寸

    百级区分背光|双120Hz高刷|4.5GB…

    7199元

  • 小米电视 ES55 2022款

    多分区背光|MEMC动态补偿|杜比视屏

    2599元

  • 米家直驱洗烘一体机 10kg

    DD直驱电机 安静护衣

    2199元

  • 米家波轮洗衣机 10kg

    全景玻璃阻尼上盖 防夹手

    1099元

  • 米家冰箱无霜三们216L

    风冷无霜 三门三温区

    1499元起

  • 米家冰箱无霜两们186L

    风冷无霜 离子抗菌

    1299元起

  • 米家全自动波
    轮洗衣机8kg 799元
  • 浏览更多 热门

生活电器
  • 扫地机
  • 空净
  • 清洁
  • 风扇
  • 米家全能扫拖机器人

    免洗集尘全自动,一机解放双手

    3999元

  • 米家全能扫拖机器人 2Pro

    扫拖除菌一步到位

    1999元

  • 米家集尘扫拖机器人 2

    金典延续,全面升级

    1499元

  • 米家扫拖机器人1T

    3D精准避障,扫拖不再碰撞

    1299元

  • 米家扫拖机器人1T

    3D精准避障,扫拖不再碰撞

    1299元

  • 米家扫拖机器人 2C

    除菌去渍二合一,开启生活新净界

    1499元

  • 米家扫拖机器人 Pro

    AI智能识别 3D精准避障

    2699元

  • 米家无线吸尘
    器K10 Pro 1599元
  • 浏览更多 热门

厨房家电
  • 净水器
  • 烟灶
  • 电饭煲
  • 微蒸烤
  • 米家智能电饭煲 微压版 3L

    看得见的真微压

    419元

  • 米家智能电压力锅5L

    一锅双胆,9档调节口感

    369元

  • 米家电饭煲C1

    快慢收放自如,小巧身材内有乾坤

    149元起

  • 米家智能小饭煲 1.6L

    小容量不浪费

    179元

  • 米家智能IH电饭煲3L

    多才多艺的智能电饭煲

    349元

  • 米家智能电压力锅2.5L

    煮饭快,焖炖煲煮一机多能

    179元

  • 米家智能调压电压力锅5L

    智能无极调压

    559元

  • 浏览更多 热门

智能家居
  • 小爱音响
  • 门锁
  • 路由器
  • 智能设备
  • Xiaomi智能家庭屏 10

    MIUI Home|10.1" 高清大屏|115°超…

    999元

  • 小米小爱音箱Play 增强版

    是音箱也是床头闹钟

    129元

  • Xiaomi Sound

    小米高保真智能音箱

    449元

  • 小米小爱音箱

    听音乐、语音遥控家电

    99元

  • 小米小爱音箱 Pro

    语音遥控传统家电

    279

  • X小米AI音箱(第二代)

    小米AI音箱(第二代)

    199元

  • 小米小爱触屏音箱

    好听,更好看

    249元

  • 小米小爱音箱 209元
  • 浏览更多 热门

运动出行
  • 平衡车/滑板车
  • 运动健身
  • 箱包配饰
  • 出行工具
  • 九号平衡车

    年轻人的酷玩具

    2199元

  • 九号平衡车燃动版

    燃动升级,随走随停

    2399元起

  • 九号平衡车 Plus

    一个形影不离的新伙伴

    3499元

  • 米家电动滑板车1S

    型出格,行出色

    2199元

  • 小米米家电动滑板车Pro

    性能提升,动力更强劲

    3099元

  • 九号卡丁车Pro兰博基尼汽车定…

    九号卡丁车Pro兰博基尼汽车定版

    9999元

  • 九号平衡车 改装套件(不含平衡…

    小朋友的大玩具,老顽童的小赛车

    2999元

  • 浏览更多 热门

日用百货
  • 个护健康
  • 电源/线材
  • 儿童用品
  • 家具床品
  • 米家声波电动牙刷T700

    智能洁齿丨强劲动力

    299元

  • 米家电动剃须刀S500

    3刀头360°浮动丨超长续航

    169元

  • 米家理发器

    米家理发器

    139元

  • 米家自动洗手机套装

    伸手出泡,抑菌有效

    69元

  • 米家电动冲牙器

    超长待机丨4挡模式

    199元

  • 米家声波电动牙刷T500

    过压提醒丨健康报告

    169元

  • 米家电子体温计

    快速知体温,精准更智能

    99元

  • 米家自动香氛
    机套装 89元
  • 浏览更多 热门

视频 查看全部 >
  • 2021年新品发布会第一场

  • Remin 10X系列发布会 Remin 10X系列发布会
  • 小米10 青春版 发布会

  • 小米10 8K手机拍大片

  • 预约维修服务
  • 7天无理由退货
  • 15天免费换货
  • 满69元包邮
  • 1100余家售后网点
选购指南
手机
电视
笔记本
平板
穿戴
耳机
家电
路由器
音箱
配件
服务中心
申请售后
售后政策
维修服务价格
订单查询
以旧换新
服务保障
防伪查询
F码通道
线下门店
小米之家
服务网点
授权体验店/专区
关于小米
了解小米
加入小米
投资者关系
企业社会责任
廉洁举报
关注我们
新浪微博
官方微信
联系我们
公益基金会

400-100-5678

8:00-18:00 (仅收市话费)

人工客服

小米商城 | MIUI | 米家 | 米聊 | 多看 | 游戏 | 政企服务 | 小米天猫店 | 小米集团隐私政策 | 小米公司儿童信息保护规则 | 小米商城隐私政策 | 小米商城用户协议 | 问题反馈 | Select Location |

北京互联网法院法律服务工作站 | 北京互联网法院法律服务工作站 | 北京互联网法院法律服务工作站 |

© mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2020]0276-042号
(京)网械平台备字(2018)第00005号 互联网药品信息服务资格证 (京)-非经营性-2014-0090 营业执照 医疗器械质量公告
增值电信业务许可证  网络食品经营备案 京食药网食备202010048   食品经营许可证
"违法和不良信息举报电话:171-5104-4404 " 知识产权侵权投诉  本网站所列数据,除特殊说明,所有数据均出自我司实验室测试

手机APP 售后服务 人工服务 购物车 回顶部

CSS

* {
    margin: 0;
    padding: 0;
}

.w {
    width: 1226px;
    margin: 0 auto;
}

a {
    text-decoration: none;
    color: #000;
}

li {
    list-style: none;
}

.nav {
    height: 40px;
    background-color: #333;
}

.container {
    height: 20px;
    border-bottom: 1px;
    line-height: 20px;
    padding: 10px;
}

.nav a {
    padding: 0 5px;
    display: inline-block;
    height: 20px;
    font-size: 12px;
    color: #b0b0b0;
    text-decoration: none;
}

.nav a:hover {
    color: #fff;
}

.left {
    float: left;
}

.middle {
    float: right;
    padding-right: 30px;
}

.right {
    float: right;
}

.header {
    height: 100px;
    
    
    margin: 15px, auto;
}

.logo {
    width: 100%;
    float: left;
    width: 56px;
    height: 56px;
    
    text-align: center;
    line-height: 56px;
    padding-top: 17px;
}

.navv {
    margin-left: 150px;
    float: left;
}

.navv ul li {
    float: left;
}

.navv ul li a {
    display: block;
    height: 56px;
    padding: 26px 10px;
    line-height: 56px;
    font-size: 16px;
    color: #050505;
}

.navv ul li a:hover {
    color: #ff6a00;
}




.search {
    float: right;
    width: 350px;
    height: 56px;
    
    margin-left: 20px;
    padding-left: 10px;
}

.search input {
    float: right;
    width: 200px;
    height: 40px;
    border: 1px solid #e0e0e0;
    border-right: 0;
    color: #e0e0e0;
    font-size: 16px;
    
    margin-top: 32px;
}

.search button {
    float: right;
    width: 50px;
    height: 42px;
    
    margin-top: 32px;
    
    background: url(image/buto.png);
}




.banner {
    margin-top: 10px;
    height: 420px;
}

.banner .w {
    height: 420px;
    
}

.banner .cebianlan {
    padding: 10px 0;
    float: left;
    width: 200px;
    height: 380px;
    background-color: rgba(105, 101, 101, .6);
}

.cebianlan ul li {
    
    width: 200px;
    height: 40px;
}

.cebianlan ul li a {
    font-size: 14px;
    color: #fff;
    padding-left: 30px;
}

.cebianlan ul li a span {
    float: right;
    padding-right: 20px;
}

.cebianlan ul li a:hover {
    background-color: #ff6a00;
}







.tu {
    position: relative;
    float: right;
    width: 1026px;
    height: 400px;
}

.prev {
    position: absolute;
    left: 0;
    
    top: 50%;
    margin-top: -15px;
    color: #e1e1e1;
    
    width: 20px;
    height: 30px;
    background-color: rgb(0, 0, 0, .7);
    text-align: center;
}

.next {
    position: absolute;
    right: 0;
    
    top: 50%;
    margin-top: -15px;
    color: #e1e1e1;
    
    width: 20px;
    height: 30px;
    background-color: rgb(0, 0, 0, .7);
    text-align: center;
}

.promo-nav {
    position: absolute;
    bottom: 10px;
    right: 0;
    width: 70px;
    height: 13px;
    
}

.promo-nav li {
    float: left;
    border-radius: 50%;
    width: 8px;
    height: 8px;
    background-color: #949494;
    margin: 3px;
}




.promo-nav .selected {
    background-color: #fafafa;
}

.banner .w img {
    
    width: 100%;
    height: 400px;
}




.sub_row {
    height: 200px;
    padding: 3px;
    list-style-type: none;
    font-size: 12px;
}

.sub_row .span1 {
    background: #5f5750;
    text-align: center;
}

.span1 {
    float: left;
    width: 200px;
    height: 150px;
}

.span1 li {
    float: left;
    
    height: 82px;
    padding-left: 15px;
}

.span1 a {
    display: block;
    padding-top: 10px;
    color: #fff;
}

.span1 img {
    display: block;
    width: 24px;
    height: 24px;
    margin: 0 auto;
}

.span2 {
    float: left;
    width: 1026px;
    height: 150px;
}

.span2 li {
    float: left;
    padding-left: 20px;
}

.span2 li img {
    width: 322px;
    height: 150px;
}

.main {
    margin-top: 10px;
    height: 6960px;
    background-color: #f5f5f5;
}

.banner-box img {
    width: 100%;
}

.main .w {
    height: 6960px;
}

.box-hd {
    
    margin-top: 10px;
    height: 30px;
}

.box-hd .title {
    font-size: 22px;
    font-weight: 200;
}

.tab-list a {
    font-size: 16px;
}

.tab-list .zuo {
    color: #ff6a00;
    text-decoration: underline;
}

.tab-list a:hover {
    color: #ff6a00;
    text-decoration: underline;
}

.tab-list li {
    display: inline-block;
    padding-left: 30px;
    
}

.iconfont {
    width: 12px;
    height: 12px;
    padding: 4px;
    margin-left: 8px;
    border-radius: 16px;
    font-size: 12px;
    line-height: 12px;
    background: #b0b0b0;
    color: #fff;
    vertical-align: 1px;
}

.phd {
    height: 30px;
}

.title {
    float: left;
}

.more {
    float: right;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    color: #000;
}




.box-bd {
    
    margin-top: 10px;
    height: 645px;
}




.box-bd .rww .span4 ul li {
    float: left;
    
    
    
    
}

.brick-list {
    margin-top: 0;
}

.brick-item {
    float: left;
    height: 300px;
    width: 230px;
    font-weight: 400;
    background-color: #fff;
    margin-left: 26px;
    margin-top: 10px;
    text-align: center;
    padding-top: 10px;
    
}

.brick-item .figure .pic {
    width: 80px;
    height: 80px;
}

.box-bd .rww .span4 ul li img {
    margin-top: 10px;
    width: 200px;
    height: 630px;
}

.brick-item .figure img {
    width: 160px;
    height: 160px;
}




.price {
    text-align: center;
    font-size: 14px;
}

.not {
    display: inline-block;
}

.brick-item .money del {
    color: #b0b0b0;
}

.money {
    text-align: center;
}

.item-more {
    height: 140px;
}

.item-more .lot {
    padding-top: 50px;
    padding-left: 0;
}

.item-more .lot small {
    display: block;
}

.figure-more {
    float: right;
    padding-top: 50px;
    padding-right: 30px;
}

.brick-item .figure-more img {
    width: 48px;
    height: 48px;
}

.brick-list {
    height: 300px;
    padding-left: 20px;
}

.brick-item .title {
    height: 25px;
    width: 100%;
    font-size: 14px;
    font-weight: 400;
    
    margin-top: 20px;
    text-align: center;
}

.brick-item .desc {
    height: 30px;
    font-size: 12px;
    color: #b0b0b0;
    margin-top: 40px;
}

.brick-item .price {
    font-size: 14xp;
    color: #ff6a00;
    margin-top: 10px;
}




.video-item {
    height: 260px;
    display: block;
    float: left;
    
    margin-left: 10px;
    background-color: #fff;
}













.figure h3 {
    margin-top: 20px;
    text-align: center;
    font-size: 14px;
    font-weight: 400;
}

.video .box-bd {
    margin-top: 10px;
    height: 280px;
}

.video-list small {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 12px;
    color: #b0b0b0;
}

.footer-serves {
    margin-top: 10px;
    height: 30px;
    border-bottom: 1px solid #e0e0e0;
}

.list-service {
    display: block;
}

.list-service li {
    float: left;
    width: 19.8%;
    height: 25px;
    font-size: 16px;
    line-height: 25px;
    text-align: center;
}

.footer-links {
    height: 380px;
}

.footer-links .first {
    width: 160px;
}

dl {
    display: block;
    width: 160px;
    margin: 0;
}

dt {
    display: block;
    margin: 26px 0 26px;
    font-size: 14px;
    line-height: 1.25;
    color: #424242;
}

dd {
    display: block;
    margin: 10px 0;
    font-size: 12px;
    color: #f5f5f5;
}

dd a {
    color: #616161;
}

.col-link {
    float: left;
    width: 160px;
    height: 28px;
}

.footer-links dl {
    width: 160px;
}

.col-contant {
    float: right;
    width: 251px;
    border-left: 1px solid #e0e0e0;
    text-align: center;
    color: #616161;
}

.col-contant .phone {
    font-size: 22px;
    line-height: 1;
    color: #ff6700;
}

.col-contant p {
    margin: 0 0 5px 0;
    font-size: 12px;
}

.btn-small {
    border: 1px solid #ff6700;
    
    background-color: #fff;
    color: #ff6700;
    width: 118px;
    height: 28px;
    font-size: 12px;
    line-height: 28px;
}

.bar {
    text-align: center;
    position: fixed;
    top: 70px;
    right: 0;
    z-index: 99;
}

.bar a {
    display: block;
    padding: 10px 0;
}

.bar img {
    
    width: 30px;
    height: 30px;
}

.bar span {
    font-size: 14px;
    color: #757575;
}

.info {
    height: 150px;
    padding: 30px 0;
    font-size: 12px;
    background-color: #fafafa;
}

.info .logo {
    width: 28px;
    height: 28px;
}

.info .info-text {
    color: #b0b0b0;
    padding-left: 77px;
}

.info .info-text .sites a {
    color: #757575;
}

.info .info-links {
    height: 28px;
    margin: 4px 0 15px;
    padding-left: 77px;
}

.info .info-links a {
    display: inline-block;
}

.info .info-links img {
    width: auto;
    height: 28px;
    margin-left: 0;
}

.slogan {
    text-align: center;
}

暑期编程PK赛 得CSDN机械键盘等精美礼品!
转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/1016701.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号