前端学习day 10--小米商城首页的制作

经过一段时间学习后，我已经能通过css和html制作一些简单的静态网页，以下是我简单制作的小米商城的首页，可能有点粗糙，相信以后能更加完善。

一、项目搭建

我使用的编辑器是vscode，刚开始是用webstorm但是不知道为什么css修改之后浏览器打开样式却没变，最终还是决定用vscode

我创建了mi文件夹用来存放项目，mi.html、mi.css分别用来写该网页的结构和样式，fontawesome是我从网上下载的图标字体库，可以直接在项目里使用图标字体，img用来存放一些背景图片，base.css用来存放一些公共样式,reset.css用于清除默认样式。

二、项目代码

html部分：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="reset.css"><link rel="stylesheet" href="base.css"><link rel="stylesheet" href="mi.css"><link rel="stylesheet" href="fontawesome/css/all.css">
</head>
<body><div class="beijing"><div class="daohang w"><a href="#">小米商城</a><span>|</span><a href="#">MIUI</a><span>|</span><a href="#">loT</a><span>|</span><a href="#">云服务</a><span>|</span><a href="#">金融</a><span>|</span><a href="#">有品</a><span>|</span><a href="#">小爱开放平台</a><span>|</span><a href="#">企业团购</a><span>|</span><a href="#">资质证照</a><span>|</span><a href="#">协议规则</a><span>|</span><a href="#" class="xiazai">下载app<!--设置下拉二维码 --><div class="yincang"><div class="sanjiao"></div><!-- 为二维码和文字设置一个白色背景 --><div class="baisebeijing"><div class="erweima"></div><span>小米商城app</span></div></div></a><span>|</span><a href="#">智能生活</a><span>|</span><a href="#">Select Location</a><!--设置右侧导航条--><div class="daohanglang-right"><a href="#">登陆</a><span>|</span><a href="#">注册</a><span>|</span><a href="#">消息通知</a></div><!-- 设置右侧购物车 --><div class="gouwuche"><a href="#"><span class="fas fa-shopping-cart"></span>购物车</a><!-- 设置购物车下拉条 --><div class="xialatiao">购物车中还没有商品，赶紧选购吧</div></div></div>
</div>
<!-- 头部导航栏设置结束 -->
<!-- 以下设置头部内容 -->
<header class="w clearfix"><!-- 左上角小米logo --><div class="logo"></div><!-- 头部导航栏 --><div class="daohanglan-head"><a href="#">小米手机</a><a href="#">Redmi 红米</a><a href="#">电视</a><a href="#">笔记本</a><a href="#">家电</a><a href="#">路由器</a><a href="#">智能硬件</a><a href="#">服务</a><a href="#">社区</a></div><!--设置头部右侧搜索框--><div class="sousuokuang"><!-- 设置文本框 --><form action="#"><input type="text" class="text"><button class="button"><i class="fas fa-search"></i></button></form><!-- 设置搜索按钮 --></div>
</header>
<!-- 设置主要内容 -->
<main class="w clearfix"><div class="left"><div class="a"><a href="#">手机 电话卡<span class="fas fa-angle-right"></span></a><a href="#">电视盒子<span class="fas fa-angle-right"></span></a><a href="#">笔记本 显示器<span class="fas fa-angle-right"></span></a><a href="#">家电 插线板<span class="fas fa-angle-right"></span></a><a href="#">出行 穿戴<span class="fas fa-angle-right"></span></a><a href="#">智能 路由器<span class="fas fa-angle-right"></span></a><a href="#">电源 配件<span class="fas fa-angle-right"></span></a><a href="#">健康 儿童<span class="fas fa-angle-right"></span></a><a href="#">耳机 音箱<span class="fas fa-angle-right"></span></a><a href="#">生活 箱包<span class="fas fa-angle-right"></span></a></div></div>
<!-- 设置左侧导航条-->
<a href="#" class="tupianlianjie">
</a>
<!--设置左右两个方向图标 -->
<div class="leftangle"><a href="#"><span class="fas fa-chevron-left"></span></a></div>
<div class="rightangle"><a href="#"><span class="fas fa-chevron-right"></span></a></div>
</main>
<!--设置底部 -->
<div class="footer w"><div class="zuoxia"><a href="#" class="box1">小米秒杀</a><a href="#" class="box2">企业团购</a><a href="#" class="box3">F码通道</a><a href="#" class="box4">米粉卡</a><a href="#" class="box5">以旧换新</a><a href="#" class="box6">话费充值</a></div><div class="picture1"></div><div class="picture2"></div><div class="picture3"></div>
</div>
<!-- 右侧固定条 -->
<div class="guding"><div class="hezi1"><a href="#">手机app</a></div><div class="hezi1"><a href="#">个人中心</a></div><div class="hezi1"><a href="#">售后服务</a></div><div class="hezi1"><a href="#">人工客服</a></div><div class="hezi1"><a href="#">购物车</a></div>
</div>
</body>
</html>

base.css:

/* 该样式表用于存放一个公共的样式 */
.clearfix::before,
.clearfix::after{content: '';display: table;clear: none;
}
body{min-width: 1226px;
}
.w{width: 1226px;margin: 0 auto;
}

mi.css:

/* 该样式表用于存放该网页本身的样式 */
/*顶部黑色背景 */
.beijing{width: 100%;height: 40px;background-color:#333;line-height: 40px;
}
/* 顶部黑色背景结束 */
/* 顶部导航条 */
.beijing .daohang{height: 100%;
}
/* 去下划线 */
.daohang a,.daohang span{text-decoration:none;color:#b0b0b0;font-size: 13px;padding:2px;
}
/* 去下划线结束 */
/* 覆盖链接时样式*/.daohang a:hover{color:white;}/* 覆盖样式结束 *//*设置下拉二维码 */.xiazai .yincang{width:106px;height:0px;background-color:transparent;position:absolute;box-shadow:  0 0 3px #333;top:20px;left:-30px;text-align: center;overflow: hidden;transition: height 300ms;z-index:4;}/* 设置下拉二维码内文字位置 */.xiazai .yincang span{font-size: 15px;color:black;position: relative;bottom: -10px;}/* 文字设置结束 *//* 为下载开启BFC */.xiazai{position: relative;}/* 设置三角形 */.sanjiao{height: 0px;width: 0px;border:solid;border-width: 10px;border-color: white transparent;border-top:none;margin:0 auto;}/* 三角形设置结束 *//* 为二维码和文字设置白色背景 */.baisebeijing{height: 125px;background-color: white;}/* 设置下拉二维码 */.erweima{width: 75px;height: 75px;background-color: white;background-image: url('img/download.png');background-size: 75px 75px;position: relative;top:15px;left: 15px;}/* 二维码设置结束 */
/* 设置覆盖下载时二维码的浮现 */
.xiazai:hover .yincang{height: 135px;
}
/* 二维码下拉设置结束 */
/* 设置右侧导航栏 */
.daohanglang-right{width: 240px;height: 100%;position: relative;right: -950px;top:-40px;
}
/* 右侧导航栏设置结束 */
/* 设置右侧购物车 */
.gouwuche{width: 120px;height: 40px;position: relative;left:1107px;top:-81px;
}
.gouwuche a{width: 100%;height: 100%;position: absolute;background-color:#424242;text-align: center;z-index: 4;padding:0px;
}
/* 购物车设置结束 */
/* 设置覆盖购物车时样式 */
.daohang .gouwuche:hover a,.daohang .gouwuche:hover span{background-color: white;color:#ff6700;
}
/* 覆盖购物车样式设置结束 */
/* 设置购物车下拉条样式 */
.xialatiao{width:300px;height: 0px;position: absolute;top:40px;right:0px;background-color:white;line-height: 100px;text-align: center;font-size:14px;color:#b0b0b0;box-shadow: 0 0 3px #424242;z-index: 3;overflow: hidden;transition: height 400ms;
}
/* 购物车样式设置结束 */
/* 设置覆盖购物车时出现效果 */
.gouwuche:hover .xialatiao{height: 100px;
}
/* 覆盖购物车样式设置结束 */
/* 设置header样式 */
header{width: 100%;height:100px;background-color: white;
}
/* header样式设置结束 */
/* 设置logo样式 */
.logo{width:50px;height: 50px;background-color: black;margin-top:26px;background-image:url('img/logo.png');
}
/* logo样式设置结束 */
/* 设置覆盖时切换效果 */
.logo:hover{background-image: url('img/logo1.png');background-size: 50px 50px;
}
/* 设置头部导航栏*/
.daohanglan-head{width:540px;height:30px;position: relative;bottom:40px;left:240px;
}
/*去链接下划线 */
.daohanglan-head a{text-decoration: none;color:#333;padding-left:7px;
}
/* 设置覆盖链接时样式 */
.daohanglan-head a:hover{color:tomato;
}
/*为搜索框设置样式 */
.sousuokuang{width: 300px;height: 50px;background-color: white;position: relative;left: 927px;top:-80px;
}
/* 设置文本框大小 */
.text{width: 250px;height: 50px;line-height:48px;font-size: 14px;padding:0px;outline: none;border:solid;border-width:1px;border-color: rgb(193, 193, 193);
}
/* 设置按钮大小 */
.button{height:53px;width:50px;position:absolute;right:0px;top:0px;padding:0px;border:solid;border-width: 1px;background-color: white;border-color: rgb(193 , 193, 193);font-size: 15px;
}
/* 设置鼠标移入出现橙色边框效果 */
.text:focus,.text:focus + .button{border-color: tomato;
}
.button:hover{background-color: tomato;color:white;
}
/* 设置主要内容背景 */
main{height: 460px;background-color: rgb(223, 12, 12);position: relative;
}
/* 设置左侧导航条 */
.left{height: 460px;width: 236px;background-color:rgba(105,101,101,.6);position: absolute;z-index: 2;
}
/* 设置链接样式 */
.a{height:90%;padding-top:10%;position: relative;
}
.left a{display: block;height:42px;line-height: 42px;text-decoration: none;color:white;font-size: 14px;padding-left: 30px;position: relative;
}
.left a span{font-size:20px;float: right;margin-right:30px;margin-top:10px;
}
/* 设置覆盖时样式*/
.left a:hover{background-color: tomato;
}
/* 设置背景图片 */
.tupianlianjie{display: block;height: 100%;width: 100%;background-image: url(img/5.jpg);background-size:100% 100%; position: relative;
}
/*设置左右两个隐藏图标 */
.leftangle{width:40px;height: 70px;background-color: black;position: absolute;top:195px;left: 236px;background-color: transparent;
}
.leftangle a{font-size: 30px;line-height: 70px;color:rgba(207, 201, 201, 0.726)
}
.rightangle{width:40px;height: 70px;background-color: black;position: absolute;top:195px;left: 1187px;background-color: transparent;
}
.rightangle a{font-size: 30px;line-height: 70px;color:rgba(207, 201, 201, 0.726)
}
.rightangle a span{position: absolute;right: 0px;top:15px;
}
/* 设置覆盖时样式 */
.leftangle:hover,.rightangle:hover{background-color: rgba(105,101,101,.6);
}
/* 设置底部 */
.footer{height: 170px;background-color: white;margin-top:20px;
}
/* 设置左下链接样式 */
.zuoxia{width: 234px;height: 100%;background-color:rgb(76, 69, 63);position: relative;
}
.zuoxia a{text-decoration: none;float: left;width: 33%;height: 50%;line-height: 150px;color:#fff;vertical-align: baseline;text-align: center;
}
.box1{background-image: url('img/miaosha.png');background-size:50px 50px;background-position: center center;background-repeat: no-repeat;
}
.box2{background-image: url('img/qiye.png');background-size:50px 50px;background-position: center center;background-repeat: no-repeat;
}
.box3{background-image: url('img/F.png');background-size:50px 50px;background-position: center center;background-repeat: no-repeat;
}
.box4{background-image: url('img/mifen.png');background-size:50px 50px;background-position: center center;background-repeat: no-repeat;
}
.box5{background-image: url('img/yijiuhuanxinpng.png');background-size:50px 50px;background-position: center center;background-repeat: no-repeat;
}
.box6{background-image: url('img/huafei.png');background-size:50px 50px;background-position: center center;background-repeat: no-repeat;
}
.picture1{width: 316px;height: 100%;background-color: red;position: relative;top:-170px;left: 250px;background-image: url('img/tupian1.jpg');background-size: 316px 170px;
}
.picture2{width: 316px;height: 100%;background-color: red;position: relative;top:-340px;left: 580px;background-image: url('img/tupian2.jpg');background-size: 316px 170px;
}
.picture3{width: 316px;height: 100%;background-color: red;position: relative;top:-510px;left:910px;background-image: url('img/tupian3.jpg');background-size: 316px 170px;
}
/* 右侧固定条 */
.guding{width: 85px;height: 365px;background-color:white;position: fixed;right: 0px;top:30%;box-shadow: 0 0 4px grey;
}
/* 固定条内容 */
.hezi1{width: 100%;height: 20%;background-color: white;box-shadow: 0 0 2px grey;vertical-align: bottom;
}
.hezi1 a{display:block;width: 100%;height: 100%;text-decoration: none;line-height:100px;text-align: center;color:grey
}

reset.css:

/* v2.0 | 20110126http://meyerweb.com/eric/tools/css/reset/ License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {display: block;
}
body {line-height: 1;
}
ol, ul {list-style: none;
}
blockquote, q {quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {content: '';content: none;
}
table {border-collapse: collapse;border-spacing: 0;
}
/*为文字设置样式*/
.yingcangkuang .wenzi{padding-bottom:20px;
}

图标字体网上能下载到，可以自己百度下载然后引入

三、效果

前端学习day 10--小米商城首页的制作相关推荐

Web前端学习笔记10：移动web开发流式布局_flex布局
文章目录移动web开发之rem布局 1 rem基础 1.1 rem单位 2 媒体查询 2.1 什么是媒体查询 2.2 媒体查询语法规范 3 less 基础 3.1 维护css弊端 3.2 Less ...
（前端学习）07 使用vue框架制作购物车小球动画效果
最近在学习前端制作了一个购物车小球的动画效果直接上图看看效果下面介绍一下制作这个动画的详细过程: 1.因为使用vue所以需要使用transition标签包裹并指定动画三个动画生命周期函数 < ...
【融职培训】Web前端学习第10章小程序开发4 小程序开发
一,数据绑定 VUE:vue动态绑定一个变量的变量元素的某个属性的时候,会在变量前面加上冒号:,例: <p:title="tit">我的title属性绑定了数据< ...
前端学习（419）：京东制作页面27左侧分类上
index.css /* 中间模块 */ .grid{height: 480px;} .grid-coll1{width: 190px;height: 100%;background-color: p ...
前端学习（418）：京东制作页面26中间模块划分
index.css /* 中间模块 */ .grid{height: 480px;} .grid-coll1{width: 190px;height: 100%;background-color: p ...
前端学习（417）：京东制作页面25中间部分的准备工作
引入index.css作为中部样式 <!DOCTYPE html> <html lang="en"> <head><meta charse ...
前端学习（395）：京东制作页面4自己制作icon图标
生成网址
前端学习（392）：京东制作页面1京东项目项目介绍
css重置类库
前端学习（10）：HTML语义化
我理解的HTML语义化经过查看别人博文中的一些描述,我将HTML的语义化总结为: 用最恰当的标签来标记内容. 该如何理解呢?比如需要加入一个标题,这个标题的字体比正文的要大写,还要加粗.能够实现这种 ...
【前端学习之路】——使用jQuery制作放大镜
效果如图所示: 可根据选择切换至上一张下一张话不多说,放代码: <!DOCTYPE html> <html><head><meta charset=&quo ...

前端学习day 10--小米商城首页的制作

一、项目搭建

二、项目代码

三、效果

前端学习day 10--小米商城首页的制作相关推荐

最新文章

热门文章