仿小米商城电脑官网-纯HTML+CSS（含轮播图）
2024-06-15 15:01:58
来自作者的话
这是我第一次写博客，也是为了激励自己学习，分享一些前端学习的知识，有写的不好的多多包涵。下面是参考的一些博客的链接
https://blog.csdn.net/weixin_43976890/article/details/89473101
下面先放上成品网页图（个别字体图标因本人过懒简略了）
1.网页的布局分析
一个网页拿到手，首先看它的整体布局，分为哪几部分，然后我们一部分一部分地去完成，对于这次的小米商城官网我们主要就考虑它的前面一小部分，如上图所示
总的来看我们把它分为五个部分：
（每个人想法都是不一样的，不必一定要跟我的一致，说不定我的想法还繁杂了些）
- 页眉的的宣传广告栏
- 快速导航栏
- LOGO+小导航栏+搜索栏
- 中间分类栏+轮播图
- 模块栏+3张图片
分好部分就可以开始逐个去写代码了。
2.网页代码部分
HTML部分
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>仿小米商城官网</title><link rel="stylesheet" href="css/index.css"><!-- 引用添加ico图标（就是网页标题栏前的小图标） --><link rel="shortcut icon" href="favicon.ico">
</head>
<body><!-- 1.页眉部分 --><header><a href="#"></a></header><!-- 2.导航栏 --><div class="shortcut"><div class="base"><ul class="fl"><li><a href="#">小米商城</a></li><li class="space"></li><li><a href="#">MIUI</a></li><li class="space"></li><li><a href="#">云服务</a></li><li class="space"></li><li><a href="#">IoT</a></li><li class="space"></li><li><a href="#">金融</a></li><li class="space"></li><li><a href="#">有品</a></li><li class="space"></li><li><a href="#">小爱开发平台</a></li><li class="space"></li><li><a href="#">企业团购</a></li><li class="space"></li><li><a href="#">资质证照</a></li><li class="space"></li><li><a href="#">协议规则</a></li><li class="space"></li><li><a href="#">下载app</a></li><li class="space"></li><li><a href="#">Select Location</a></li></ul><ul class="fr"><li><a href="#">登录</a></li><li class="space"></li><li><a href="#">注册</a></li><li class="space"></li><li><a href="#">消息通知 </a> <!-- 此处偷工减料了，就直接加空白符了 --></li><div class="shopcar"><a href="#"><i></i>购物车(0)</a></div></ul></div></div><!-- 3.LOGO+小导航栏+搜索栏--><div class="sitebar base"><!-- LOGO部分 --><div class="logo"><a href="#"><img src="data:images/logo.png" alt=""></a></div><!-- 小导航栏部分 --><div class="navbar"><ul><li><a href="#">小米手机</a></li><li><a href="#">Redmi红米</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></ul></div><!-- 搜索栏部分 --><div class="form"><input type="text" placeholder="小米9 Pro Redmi Note 8"><button><i></i></button></div></div><!-- 4.分类区域+轮播图 --><div class="center base"><!-- 左侧分类区域 --><div class="navleft"><a href="#">手机 电话卡<span>></span></a><a href="#">电视 盒子<span>></span></a><a href="#">笔记本 显示器 平板<span>></span></a><a href="#">家电 插线板<span>></span></a><a href="#">出行 穿戴<span>></span></a><a href="#">智能插 路由器<span>></span></a><a href="#">电源 配件<span>></span></a><a href="#">健康 儿童<span>></span></a><a href="#">耳机 音箱<span>></span></a><a href="#">生活 箱包<span>></span></a></div><!-- 轮播图 --><div class="sliding"></div></div><!-- 5.模块栏+图片 --><div class="last base"><div class="module"><ul><li><a href="#"><img src="data:images/m1.png" alt=""><p>小米秒杀</p></a></li><li><a href="#"><img src="data:images/m2.png" alt=""><p>企业团购</p></a></li><li><a href="#"><img src="data:images/m3.png" alt=""><p>F码通道</p></a></li><li><a href="#"><img src="data:images/m4.png" alt=""><p>米粉卡</p></a></li><li><a href="#"><img src="data:images/m5.png" alt=""><p>以旧换新</p></a></li><li><a href="#"><img src="data:images/m6.png" alt=""><p>话费充值</p></a></li></ul></div><div class="picture"><a href="#"><img src="data:images/z1.png" alt=""></a><a href="#"><img src="data:images/z2.png" alt=""></a><a href="#"><img src="data:images/z3.png" alt=""></a></div></div>
</body>
</html>
CSS部分
/* 公共样式 */
* {margin: 0;padding: 0;
}
.base {width: 1227px;margin: 0 auto;
}
/* 1.header部分 */
header a{height: 120px;display: block;background-image: url(../images/top.png);background-position: center;
}
/* header部分end */
/* 2.导航栏start */
.shortcut {height: 40px;line-height: 40px;background-color: #333333;font-size: 12px;
}
ul {list-style: none;
}
a {text-decoration: none;color: #B0B0B0;
}
a:hover {color: #fff;
}
.shortcut li {float: left;
}
.fl {float: left;
}
.fr {float: right;
}
.space { /* 小竖线 */width: 1px;height: 12px;background-color: #424242;margin: 15px 7px 0; /* 上是15 左=右是12 下是0 */
}.shopcar {width: 120px;background-color: #424242;float: right;text-align: center;
}
/* 导航栏end */
/* 3. LOGO+小导航栏+搜索栏 */
.sitebar {height: 100px;
}
.logo {display: block;position: absolute;padding: 22px 0;}
.logo a {display: block;width: 55px;height: 55px;
}.navbar {width: 620px;height: 50px;position: absolute;top: 185px;left: 565px;line-height: 50px;
}
.navbar li {float: left;font-size: 16px;margin-left: 20px;
}
.navbar li a {color: #000;
}
.navbar li a:hover {color: #FF0000;
}.form {width: 300px;height: 48px;position: absolute;border: 1px solid #E0E0E0;top: 185px;right: 350px;
}
.form input {width: 190px;height: 48px;border: none;float: left;font-size: 12px;padding-left: 60px;}
.form button {width: 50px;height: 48px;cursor: pointer; /*鼠标经过的时候变成小手*/background-color: #fff;border-left: 1px solid #E0E0E0;border-right: none;border-top: none;border-bottom: none;}
/* LOGO+小导航栏+搜索栏end */
/* 4.分类区域+轮播图start */
.center {height: 460px;position: relative;
}
.navleft {width: 235px;height: 420px;background-color: rgba(0, 0, 0, 0.2);position: absolute;float: left;padding: 20px 0;}
.navleft a {width: 100%;height: 42px;line-height: 42px;color: #fff;float: left;font-size: 14px;padding: 0 0 0 30px;box-sizing: border-box;
}
.navleft a:hover {background-color: #ff6700;
}
.navleft span {font-size: 16px;font-weight: bold;float: right;padding: 0 20px;
}
/* 轮播图 */
.sliding {width: 1226px;height: 460px;cursor: pointer;/*鼠标经过的时候变成小手*/ animation-name: move;animation-duration: 40s;animation-iteration-count: infinite;
}
@keyframes move {0% {background-image: url(../images/s1.png);background-size: cover;}20% {background-image: url(../images/s2.png);background-size: cover;}40% {background-image: url(../images/s3.png);background-size: cover;}60% {background-image: url(../images/s4.png);background-size: cover;}80% {background-image: url(../images/s5.png);background-size: cover;}100% {background-image: url(../images/s1.png);background-size: cover;}
}
/* 分类区域+轮播图end */
/* 模块栏+图片start */
.last {height: 170px;margin-top: 15px;
}
.module {width: 234px;height: 170px;float: left;margin-right: 2px;
}
.module ul {list-style: none;
}
.module ul a {width: 78px;height: 85px;background-color: #5f5750;color: rgba(255, 255, 255, 0.6);float: left;font-size: 40px;line-height: 40px;text-align: center;border: 1px solid rgba(255, 255, 255, 0.2);border-width: 0 0.3px 0.3px 0;padding-top: 10px;box-sizing: border-box;
}
.module ul img {width: 24px;height: 24px;
}
.module ul a:hover {color: rgba(255, 255, 255, 1);
}
.module ul a p {font-size: 12px;line-height: 12px;
}
.picture a{float: left;margin-left: 14px;
}
.picture img {width: 316px;height: 170px;vertical-align: bottom;
}
/* 模块栏+图片end */以上就是所有代码了
感谢浏览。
仿小米商城电脑官网-纯HTML+CSS（含轮播图）相关推荐
- 怎样实现banner自动播放html,纯css实现轮播图banner自动轮换效果
话不多说 直接上代码 * { margin: 0; padding: 0; } .container { margin:300px auto; height: 400px; width: 1146px ...
- c语言实现图片轮播,纯css实现轮播图
轮播图的实现原理其实是比较简单的 举个例子 main的宽度是100px div-main的宽度是500px 我们用js控制div-main往左或往右移动,这样就实现了轮播,简单把 好了,先介绍个 cs ...
- CSS——网易云音乐首页之轮播图的实现（完整版）
文章目录 前言 一.结构的分析 二.使用步骤 1.HTML结构 2.CSS样式 总结 前言 本文主要介绍的是网易云音乐首页之轮播图的实现,细心的小伙伴会发现,之前有发过网易轮播图的制作方法,但并没有完 ...
- html中轮播图跳转,纯 CSS 实现轮播图
大家好,我是 Steven. 今集我们会尝试只用 HTML 和 CSS,实现基础的轮播图效果,当然会有一些功能的缺失,例如不能自动跳转,但我们来看看用 CSS 可以实现到多少. HTML 的部分 打开 ...
- 纯CSS实现轮播图（结合动画）
图片自动切换实现原理:使用一个div(class="out")并设置溢出隐藏保证每次只显示一张,在内部设置另一个div.outer包裹所有的图片,图片均水平排列,包裹图片的div使 ...
- HTML5+CSS3+JS小实例：仿制网易云音乐网站的轮播图
实例:仿制网易云音乐网站的轮播图 技术栈:HTML+CSS+JS 字体图标库:font-awesome 效果: 源码: <!DOCTYPE html> <html><he ...
- html百叶窗切换效果,纯CSS3百叶窗式切换轮播图特效
这是一款使用纯CSS3制作的百叶窗式切换轮播图特效.该特效使用背景图片来制作,在轮播图切换时,通过一组div元素来制作百叶窗效果,非常的炫酷. 使用方法 HTML结构 该轮播图特效中使用了6张背景图片 ...
- 纯css3实现无缝轮播图效果
主要就是利用css3中的动画了,看完整实现代码如下: <!DOCTYPE html> <html lang="en"> <head><me ...
- HTML+CSS实现轮播图效果
HTML+CSS实现轮播图效果 效果图如下(想要源码或者感兴趣的小伙伴可以评论区留言哦!) HTML部分源代码如下: <!DOCTYPE html> <html ><he ...
最新文章
- 机器学习算法基础——逻辑回归
- 彩色图像分割MATLAB代码
- KDD 18论文解读 | 斯坦福大学提出全新网络嵌入方法 — GraphWave
- Mysql-innoDB存储引擎(事务，锁，MVCC)
- 腾讯游戏数据应用微服务实战
- iScroll学习笔记
- java设计模式face_java设计模式之-------原型模式
- 高通8X25Q wifi BT 调试文档
- Markdown--绘制流程图(flowchart)
- 小米MIX 4真机亮屏照曝光？真全面屏 边框窄到窒息
- redis学习-列表（list）常用命令
- Y15BeTa蜂鸣器-演奏版-简化版
- 全双工音频播放器在c#中使用waveIn / waveOut api
- android 获取emui版本,华为手机为什么有EMUI版本和Android版本？
- 妙不可言的JASTVIN云域网，用过的都说好！你怎么看
- 在英文论文写作中，什么时候该用斜体？
- 怎么识别手写的文字？办公常备软件说明
- 大数据面试重点之hive(五)
- input输入框限制（座机，手机号码）
- 新加坡国立大学尤洋：我的四个选择，本质的喜欢催动长久的坚持丨青源专栏...