使用html+css+js制作小米首页

文章目录

使用html+css+js制作小米首页
- 1.html制作小米官网页面结构（`index.html`）
- 2.使用css设置公共样式（`base.css`）
- 3.使用css设置页面元素样式（`index.css`）
- 4.使用js实现切换轮播图效果（`pic_switch.js`）

使用html+css+js制作小米首页

其中

index.html是小米官网页面的基本结构

font-awesome是图标样式

base.css是公共样式

index.css是页面中元素的样式

pic_switch.js是实现切换轮播图的功能

文件夹路径结构

1.html制作小米官网页面结构（`index.html`）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>小米,redmi,小米10,Redmi 10X,小米MIX Alpha,小米商城</title><link rel="stylesheet" href="./css/css_reset.css"><link rel="stylesheet" href="./fa/css/font-awesome.css"><link rel="stylesheet" href="./css/base.css"><link rel="stylesheet" href="./css/index.css"><!-- 网站收藏图标(在标题栏和收藏栏)网站图片一般都存储在网站的根目录下,名字一般都叫做favicon.ico制作也很方便,直接搜索--><link rel="icon" href="./favicon.ico"><script type="text/javascript" src="./js/pic_switch.js"></script>
</head><body style='height:1100px ;'><!-- top-nav --><div class="topbar-wrapper"><!-- container --><div class="topbar w clearfix"><div class='topbar'><ul class='topbar-left'><li><a href="javascript:;">小米商城</a></li><li class="line">|</li><li><a href="javascript:;">MIUI</a></li><li class="line">|</li><li><a href="javascript:;">LoT</a></li><li class="line">|</li><li><a href="javascript:;">云服务</a></li><li class="line">|</li><li><a href="javascript:;">金融</a></li><li class="line">|</li><li><a href="javascript:;">商品</a></li><li class="line">|</li><li><a href="javascript:;">小爱开放平台</a></li><li class="line">|</li><li><a href="javascript:;">企业团购</a></li><li class="line">|</li><li><a href="javascript:;">资质证明</a></li><li class="line">|</li><li><a href="javascript:;">协议规则</a></li><li class="line">|</li><li><a class='app' href="javascript:;">下载app<!-- 添加弹出层 --><div class="qrcode"><img src="./img/小米.png" alt="小米二维码"><span>小米商城app</span></div></a></li><li class="line">|</li><li><a href="javascript:;">智能生活</a></li><li class="line">|</li><li><a href="javascript:;">select location</a></li><li class="line">|</li></ul><div class='shopping-cart'><a href="javascript:;"><i class='fa fa-cart-arrow-down'></i> 购物车（100）</a></div><ul class='user-info'><li><a href="javascript:;">登陆</a></li><li class="line">|</li><li><a href="javascript:;">注册</a></li><li class="line">|</li><li><a href="javascript:;">消息通知</a></li><li class="line">|</li></ul></div></div></div><!-- 头部的外部容器 --><div class="header-wrapper clearfix"><div class="header w"><!-- create logo --><h1 class='logo' title='xiaomi'>小米官网<a class='home' href="/"></a><a class='mi' href="/"></a></h1><!-- 创建中间导航条的容器 --><div class="nav-wrapper"><!-- 创建导航条 --><ul class="nav clearfix"><li class='all-goods-wrapper'><a class='all-goods' href="javascript:;">全部商品分类</a><!-- 创建一个左侧导航栏菜单 --><ul class='left-menu'><li><a class='a-left-menu' href="#">手机 电话卡<i class="fa fa-angle-right" aria-hidden="true"></i></a></li><li><a class='a-left-menu' href="#">电视 盒子<i class="fa fa-angle-right" aria-hidden="true"></i></a></li><li><a class='a-left-menu' href="#">笔记本 平板<i class="fa fa-angle-right" aria-hidden="true"></i></a></li><li><a class='a-left-menu' href="#">家电 插线板<i class="fa fa-angle-right" aria-hidden="true"></i></a></li><li><a class='a-left-menu' href="#">出行 穿戴<i class="fa fa-angle-right" aria-hidden="true"></i></a></li><li><a class='a-left-menu' href="#">智能 路由器<i class="fa fa-angle-right" aria-hidden="true"></i></a></li><li><a class='a-left-menu' href="#">电源 配件<i class="fa fa-angle-right" aria-hidden="true"></i></a></li><li><a class='a-left-menu' href="#">健康 儿童<i class="fa fa-angle-right" aria-hidden="true"></i></a></li><li><a class='a-left-menu' href="#">耳机 音箱<i class="fa fa-angle-right" aria-hidden="true"></i></a></li><li><a class='a-left-menu' href="#">生活 箱包<i class="fa fa-angle-right"aria-hidden="true"></i></a></li></ul></li><li><a href="javascript:;">小米手机</a></li><li><a href="javascript:;">Redmi红米</a></li><li><a href="javascript:;">电视</a></li><li><a href="javascript:;">笔记本</a></li><li><a href="javascript:;">家电</a></li><li><a href="javascript:;">路由器</a></li><li><a href="javascript:;">智能硬件</a></li><li><a href="javascript:;">服务</a></li><li><a href="javascript:;">社区</a></li><!-- 创建弹出层 --><div class="good-info"></div></ul></div><!-- 创建 搜索框的容器 --><div class='search-wrapper'><form class="search" action="#"><input class="search-inp" type="text"><button class="search-btn"><i class="fa fa-search" aria-hidden="true"></i></button></form></div></div></div><!-- 中间显示部分 --><div class="banne-wrapper w"><div class="banner"><ul class='img-list' id='img-list'><li><a href="#"><img id='img1' src="./img/banner1.jpg" alt="banner1" style='display: block;'></a></li><li><a href="#"><img id='img1' src="./img/banner2.jpg" alt="banner2" style='display: none;'></a></li><li><a href="#"><img id='img1' src="./img/banner3.jpg" alt="banner3" style='display: none;'></a></li><li><a href="#"><img id='img1' src="./img/banner4.jpg" alt="banner4" style='display: none;'></a></li><li><a href="#"><img id='img1' src="./img/banner5.jpg" alt="banner5" style='display: none;'></a></li></ul><!-- 小点点 --><div class="point" ><a id='pointc' class='hover' href="javscript:;"></a><a id='pointc' href="javscript:;"></a><a id='pointc' href="javscript:;"></a><a id='pointc' href="javscript:;"></a><a id='pointc'  href="javscript:;"></a></div><!-- 小箭头 --><div class="arrow"><a class='pre-arrow' id='pre-arrow' href="javscript:;"></a><a class='next-arrow' id='next-arrow' href="javscript:;"></a></div></div></div><!-- 固定定位的工具条 回到顶部的元素 --><div class="to-top"><a href="javascript:;"><i class="fa fa-phone"></i></a><a href="javascript:;"><i class="fa fa-user-o" ></i></a><a href="javascript:;"><i class="fa fa-wrench" ></i></a><a href="javascript:;"><i class="fa fa-headphones" ></i></a></div><!-- ad广告容器 --><div class="ad w"><ul class='shortcut'><li><a href="#"><i  class="fa fa-clock-o"></i>小米秒杀</a></li><li><a href="#"><i class="fa fa-building"></i>企业团购</a></li><li><a href="#"><i class="fa fa-fonticons"></i>F码通道</a></li><li><a href="#"><i class="fa fa-id-card-o"></i>米粉卡</a></li><li><a href="#"><i class="fa fa-money"></i>以旧换新</a></li><li><a href="#"><i class="fa fa-share-square"></i> 话费充值</a></li></ul><ul class="ad-img " ><li><a href="#"><img src="./img/1.jpg" alt="show1"></a></li><li><a href="#"><img src="./img/2.jpg" alt="show2"></a></li><li><a href="#"><img src="./img/3.jpg" alt="show3"></a></li></ul></div>
</body></html>

2.使用css设置公共样式（`base.css`）

/* 公共样式 */
.clearfix::before,
.clearfix::after{content: '';display: table;clear:both;
}
/* 去除下划线 */
a{text-decoration:none;
}body {font:14px/1.5 Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;color:#333;/* 这个一定要加上，防止页面在放大时出现的奇怪现象 */min-width: 1226px ;
}
/* 设置一个类，控制网页的宽度 */
.w{width:1226px;/* 设置居中的效果 */margin:0 auto;
}

3.使用css设置页面元素样式（`index.css`）

/* 主页index的样式 *//* 顶部导航条的容器 */
.topbar-wrapper{width:100%;background-color: #333;height:40px;line-height:40px;
}
/* 设置超链接颜色 */
.topbar a{font-size: 12px;color:#b0b0b0;/* 变成block，a标签会被里面的文字撑开高度，所以可以不用指定高度了 */display: block;
}
.topbar a:hover{color:#fff;
}
/* 竖线的设置 */
.line{font-size: 12px;color:#424242;margin: 0 8px;
}/* 设置左侧导航栏 */
.topbar-left,.topbar-left>li{float:left;
}
.shopping-cart,.user-info,.user-info>li{float:right;
}
/* 设置下载app的下拉二维码 */
.app .qrcode{/* display:none; */position: absolute;left: -40px;width: 124px;/* height: 148px; */height:0;overflow:hidden;background-color: #fff;/* 后代元素继承行高 */line-height: 1;text-align: center;box-shadow: 0 0 10px rgba(100, 6, 61, 0.9);/* 给显示的东西添加动画效果 */transition: height 3s;z-index: 50;
}
/* hover app */
.app:hover .qrcode,
.app:hover::after{display:block;height:148px;
}.app .qrcode img{width:90px;height:90px;margin:10px  17px ;
}.app .qrcode span{color:#000;font-size: 1px;
}
.app{position: relative;text-align: center;
}.app::after{display:none;content:"";width:0;height:0;/* 设置app下的小三角 *//* 设置绝对定位 */position: absolute;bottom: 0;left: 0;right: 0;margin:auto;border:5px solid transparent;border-top:none;border-bottom-color: rgb(241, 235, 235);}
/* 设置购物车的样式  */
.shopping-cart a{width: 120px;background-color:#424242;text-align:center;
}.shopping-cart i{margin-right: 8px;
}
.shopping-cart{margin-left:26px;
}/* 购物车hover样式 */
.shopping-cart:hover a{background-color:#fff ;color:#ff6700;
}/* —————————————————— */
.header-wrapper{position:relative;
}/* 设置中间的header */
.header{height:100px;background-color:rgb(255, 255, 255);padding:22px auto;
}.header .logo{float :left;margin-top:22px;width: 55px;height: 55px;position: relative;overflow: hidden;/* 隐藏logo中的文字 */text-indent: -99999px;
}.header .logo a{position: absolute;width: 55px;height: 55px;background-color:#ff6700;background-image:url('../img/mi-logo.png'); background-position: center;transition:left  .5s;left: 0;
}
.header>.logo>.home{left:-55px;background-image:url('../img/mi-home.png'); }
.header .logo:hover .mi{left: 55px;
}
.header .logo:hover .home{left: 0;
}
/* ------------------------------------------- */
/* 设置中间的导航条 */
.header .nav-wrapper{float:left;/* width:850px; */margin-left:7px;}
/* 设置li的布局 */
.nav> li{float:left;}
.nav> .all-goods-wrapper{float:left;}
/* 全部商品的下面导航栏 */
.all-goods-wrapper{position: relative;}
.left-menu{width: 234px;/* height: 460px; */background-color:rgba(0,0,0,.3);position : absolute;left:-120px;z-index:20 ;line-height:1;padding:20px 0;
}
/* 选择器的优先级 */
.nav li .a-left-menu{display: block;height: 42px;line-height: 42px;color:white;padding:0 30px;/* 选择器的优先级，.nav li a已经设置了margin-right:20px;所以我在样式设置中就要重新设置margin-right:0;*/margin-right: 0;font-size: 14px ;}
.nav li .a-left-menu:hover{color:white;background-color:#ff6700;
}.left-menu a i{float: right;color: white;height: 42px;line-height: 42px;
}
/* 设置导航条 */
.nav-wrapper .nav{background-color: rgb(255, 254, 254);height: 100px;line-height:100px;padding-left: 58px;}
.nav li a{display: block;font-size:16px bold;margin-right: 20px;color:#000;
}
.nav li a:hover{color: #ff6700;
}
.nav>.all-goods-wrapper>.all-goods:first-child{/* display:none; */visibility: hidden;
}
.nav .good-info{/* height:228px;  */height: 0px;overflow: hidden;width: 100%; background-color:rgb(252, 252, 252);/* border-top: 1px solid #000;box-shadow: 0 6px 5px rgba(0,0,0,.5); */position: absolute;top:100px;left:0;transition: height .5s;z-index: 99;
}
.nav li:not(:nth-child(1)):not(:nth-child(9)):not(:nth-child(10)):hover ~ .good-info,
.good-info:hover{height:228px; border-top: 1px solid #000;box-shadow: 0 6px 5px rgba(0,0,0,.5);
}/* ---------------------------------- */
/* 右侧搜索框 */
.search-wrapper{float: right;width: 296px;height: 50px;    margin-top: 25px;
}
.search-wrapper .search-inp{border: none;width: 244px;float: left;height: 50px;padding: 0 10px;box-sizing: border-box;border: 1px solid rgb(224,224,224);font-size: 16px;outline: none;}
.search-wrapper .search-inp:focus,
.search-wrapper .search-inp:focus +.search-btn{border-color: #ff6700;
}
.search-wrapper .search-btn{float: left;height:50px;width: 52px;padding: 0px;border:none;/* background-color:rgb(221, 21, 21); */color:#616161; font-size:16px;border:1px solid rgb(224,224,224);border-left:none;outline: none;
}.search-wrapper .search-btn:hover{background-color:#ff6700;color:#fff;border:none;
}
/* ———————————————————————————————————————————— */
/* 中间部分（内容区）的样式 */
/* banner中的图片区域 */.banner{position:relative;/* 指定高度避免高度塌陷 */height: 460px;
}
.banner .img-list li{position:absolute;
}
.banner img{width:100%;/* vertical-align:top; */
}
.point{position: absolute;bottom:22px;right:35px;
}
.point a{float: left; width: 6px;height: 6px;background-color:rgba(0,0,0,.4);border:2px rgba(255,255,255,.4) solid;border-radius: 50%;margin-left:6px;
}
.point a:hover,
.point a:active{background-color:#fff;border:2px rgba(0,0,0,.4) solid;
}
.point a.hover,
.point a.active{background-color:#fff;border:2px rgba(0,0,0,.4) solid;
}.arrow a{width:41px;height: 69px;/* 看不见就是因为没有开启定位 */background-color: rgb(213, 218, 218);position: absolute;top: 0;bottom:0;margin:auto 0;background-image: url(../img/icon-slides.png);
}.arrow  .pre-arrow{left:234px;background-position:-84px 0;
}.arrow  .pre-arrow:hover{background-position:0;
}.arrow .next-arrow{right: 0;background-position:-125px 0;}
.arrow  .next-arrow:hover{background-position:-42px;
}/* ______________________________________ */
/* 设置回到顶部的元素 */
.to-top{width: 26px;height: 206px;position : fixed;bottom:60px;/* 布局的等式left + margin-left + width + margin-right + right = 视口大小*/right: 50%;/* 1224/2+26 */margin-right:-638px;
}
.to-top a{display:block;text-align: center;font-size :40px;color: rgb(211, 211, 216);
}/* ________________________ */
/* 下步广告样式的设置  */
.ad{margin-top:14px;height: 170px;
}
.ad .shortcut,
.ad .ad-img,
.ad li{float:left;
}
/* 设置左侧快捷方式的宽度 */
.ad .shortcut{width: 228px ;height: 168px;padding-top:2px;padding-left: 6px;background-color: #5f5750;margin-right:14px;
}
.ad .shortcut li{position: relative;
}
/*设置上边框*/
.ad .shortcut li::before{content: '';position: absolute;width:64px; height: 1px;background-color:#665e57 ;/* left: 0;top: 0;right: 0;margin:0 auto; */top:-1px;left:6px;
}
.ad .shortcut li a::after{content: '';position: absolute;width:1px; height: 70px;/* background-color: red; *//* top:0;left: 0;bottom: 0;margin:auto 0;   */top: 6px;left: 1px;background-color:#665e57;
}.ad .shortcut a{display:block; height: 84px;width: 76px;color:#cfccca;text-align: center; font-size: 12px; /* 外边距重叠(子元素把父元素的宽高撑开了) */overflow:hidden;
}.ad .shortcut i{display: block;margin-top:20px;font-size: 20px;margin-bottom: 6px;
}.ad .shortcut a:hover{color:white;
}/* 设置图片的样式 */
.ad .ad-img li{width: 316px;margin-right: 15px;
}
/*  解决图片显示的问题 */
.ad .ad-img li:last-child{margin:0;
}.ad .ad-img img{width: 100%;vertical-align:top;
}

4.使用js实现切换轮播图效果（`pic_switch.js`）

window.onload=function() {//需求：自动切换图片//3s间隔自动//按钮点击切换//左右箭头自动切换//附加题：滑轮自动切换//task1:点击按钮切换图片var imgUl=document.getElementById('img-list');var img1=imgUl.querySelectorAll('img#img1');var pointc=document.querySelectorAll('#pointc');console.log(pointc);var index=0;for(var i=0;i<img1.length;i++){pointc[i].num=i;pointc[i].onclick= function (){ index=this.num;                   for(var i=0;i<img1.length;i++){             if (i === index) {img1[i].style.display = "block";setZero();} else {img1[i].style.display = "none";setZero();}}};};//task2:左右箭头切换图片var leftArrow=document.getElementById('pre-arrow');var rightArrow=document.getElementById('next-arrow');leftArrow.onclick=function(){//获取当前的indeximg1[index].style.display = "none";index--;if (index < 0) {index = 4;}img1[index].style.display = "block";setZero();//设置小圆点}rightArrow.onclick=function(){//获取当前的indeximg1[index].style.display = "none";index ++;if (index > 4) {index = 0;}img1[index].style.display = "block";setZero();//设置小圆点}//task3：3s间隔自动切换图片setInterval( function() {img1[index].style.display = "none";index++;if (index > 4) {index = 0;}img1[index].style.display = "block";setZero();}, 3000);//小圆点跟随图片变化function setZero() {for (let [n, a] of pointc.entries()) {if (n === index) {//如果是第index个小圆点，则修改这个小圆点的背景颜色为白色a.className = "hover";} else {//其他小圆点恢复默认样式a.className = a.className.replace("hover", "");}}}}

使用html+css+js制作小米首页相关推荐

html+css+js制作简单网站首页
一个简单的网站主页主要由html+css+js制作 1.图片展示这是首页的上半部分,主要内容有:顶部标头.顶部导航栏.图片轮播图. ```css <!DOCTYPE html> < ...
#3使用html+css+js制作网页制作登录网页
#3使用html+css+js制作网页制作登录网页本系列链接 2制作登录网页 2.1 准备 2.1.1 创建文件夹 2.1.2 创建主文件 2.2 html部分 2.2.1 网站信息 2.2.2 ...
七夕情人节教你如何告白~html+css+js制作唯美满天星3D相册(含音乐)程序员520表白必备
❉ 七夕情人节教你如何告白~html+css+js制作唯美满天星3D相册(含音乐)程序员520表白必备一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/程序员表白,是不是要给女朋友或者正在追 ...
#3使用html+css+js制作网页番外篇使用python flask 框架 (I)
#3使用html+css+js制作网页番外篇使用python flask 框架(I 第一部) 0. 本系列教程 1. 准备 a.python b. flask c. flask 环境安装 d. f ...
利用HTML+css+js制作侧边栏小广告
利用HTML+css+js制作小广告 1.页面效果 2.HTML代码 3.css代码(给广告位设置样式) 4.js代码在这里插入图片描述
#1使用html+css+js制作网站教程准备
#1使用html+css+js制作网站教程准备本系列链接 0 准备 0.1 IDE编辑软件 0.2 浏览器 0.3 基础概念 0.3.1 html 0.3.2 css 0.3.3 js 0.4 文 ...
HTML5|吭哧吭哧制作小米首页一小部分内容
制作小米首页部分(基础中的基础) 最近学校里来了一个培训机构做宣传,我就跟着偷摸地学了一丢丢东西,主要是讲如何用HTML5制作网页. 首先,可以了解一下HTML5与HTML4的区别: 字太多了,还是自 ...
html中各种js效果图,HTML+CSS+JS制作一个漂亮的橙子动态时钟
HTML+CSS+JS制作一个漂亮的橙子动态时钟 1. 效果图: 2. 背景产生: 利用四块与圆同高的矩形转一定的角度将圆切分成八块形成橙子内里,利用径向渐变形成橙皮. background: rad ...
Atitit 使用h5技术( html css js)制作桌面程序gui界面解决方案attilax总结
Atitit 使用h5技术( html css js)制作桌面程序gui界面解决方案attilax总结 1.1. 理解Atwood定律 1 1.2. H5做出个html的ui是很方便的,跨平台 2 1 ...

使用html+css+js制作小米首页

文章目录

使用html+css+js制作小米首页

1.html制作小米官网页面结构（`index.html`）

2.使用css设置公共样式（`base.css`）

3.使用css设置页面元素样式（`index.css`）

4.使用js实现切换轮播图效果（`pic_switch.js`）

使用html+css+js制作小米首页相关推荐

最新文章

热门文章

使用html+css+js制作小米首页

文章目录

使用html+css+js制作小米首页

1.html制作小米官网页面结构（index.html）

2.使用css设置公共样式（base.css）

3.使用css设置页面元素样式（index.css）

4.使用js实现切换轮播图效果（pic_switch.js）

使用html+css+js制作小米首页相关推荐

最新文章

热门文章

1.html制作小米官网页面结构（`index.html`）

2.使用css设置公共样式（`base.css`）

3.使用css设置页面元素样式（`index.css`）

4.使用js实现切换轮播图效果（`pic_switch.js`）