xx闪购——顶部的菜单栏

一.做小米商城的菜单栏：

1.页面结构：

1.1.在html的body里面有一个 div 包裹着所有内容与控制背景和高度；

1.2.在用1个 div 标签限制宽度和整体居中；

1.3.在用1个 div 标签让文字靠最左侧 ——>用另1个 div 标签让文字靠最右侧；

<!DOCTYPE html>
<html lang="zh">
<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="shortcut icon" href="favicon.ico" type="image/x-icon"><!--把图片放到cc文件夹下，直接引入图片--><link rel="stylesheet" href="style.css"><!--引入CSS的样式-->
</head>
<body><div><div><div>小米商城|MIUI|IOT|云服务|金融|有品|小爱开放平台|企业服务|Select Region</div><div>登录|注册|消息通知 </div><div>购物车（0）</div></div></div>
</body>
</html>

在浏览器中显示的效果！

2.给div加样式：

2.1.给每个div起名字；

<!DOCTYPE html>
<html lang="zh">
<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="shortcut icon" href="favicon.ico" type="image/x-icon"><!--把图片放到cc文件夹下，直接引入图片--><link rel="stylesheet" href="css/style.css"><!--引入CSS的样式-->
</head>
<body><div class="topbar"><div class="container"><div class="topbar-nav">小米商城|MIUI|IOT|云服务|金融|有品|小爱开放平台|企业服务|Select Region</div><div class="topbar-info">登录|注册|消息通知 </div><div class="topbar-cart">购物车（0）</div></div></div>
</body>
</html>

2.2.给每个div加样式：

2.2.1.

body {/*去掉 body里面的默认属性*/margin:0;padding: 0;
}
.topbar {background-color: #333;height: 40px;
}

在浏览器中显示的效果！

2.2.2

body {/*去掉 body里面的默认属性*/margin:0;padding: 0;
}
.topbar {/*加边框*/border: 1px solid black;/*为了调试方便去掉 背景色*//*background-color: #333;*/height: 40px;
}

在浏览器中显示的效果！

2.2.3 居中效果

body {/*去掉 body里面的默认属性*/margin:0;padding: 0;
}
.topbar {/*加边框*/border: 1px solid black;/*background-color: #333;*/height: 40px;
}
.container {border: 1px solid black;/*居中*/margin: 0 auto;width: 1226px;
}

在浏览器中显示的效果！

2.2.4.把居中的内容，放到对应位置上：

body {/*去掉 body里面的默认属性*/margin:0;padding: 0;
}
.topbar {/*加边框*/border: 1px solid black;/*background-color: #333;*/height: 40px;
}
.container {border: 1px solid black;/*居中*/margin: 0 auto;width: 1226px;
}
.topbar-nav {/*浮动*/float: left;
}
.topbar-info,.topbar-cart {float:right;
}

在浏览器中显示的效果！

2.3.解决浮动所带来的边界塌陷

2.3.1. div边框把具体内容包裹住：

body {/*去掉 body里面的默认属性*/margin:0;padding: 0;
}
.topbar {/*加边框*/border: 1px solid black;/*background-color: #333;*/height: 40px;
}
.container {border: 1px solid black;/*居中*/margin: 0 auto;width: 1226px;
}
/*伪元素 清浮动*/
.container::before,.container::after {content: "";/*把行元素变成块元素 table 固定的给上面加内容*/display: table;
}
.container::after {/*清浮动*/clear: both;
}
.topbar-nav {/*浮动*/float: left;
}
.topbar-info,.topbar-cart {float:right;
}

在浏览器中显示的效果！

3.给页面添加效果：

3.1.给文字添加链接：

***快捷加 a 标签的方式——>把要加 a 标签的内容选好——>编辑(E)——>选择最下面的"Emmet"——>选择" 输入缩写包围个别行"——>输入 a* 回车；

<div class="topbar-nav"><a href="">小米商城</a><a href="">MIUI</a><a href="">IOT</a><a href="">云服务</a><a href="">金融</a><a href="">有品</a><a href="">小爱开放平台</a><a href="">企业服务</a><a href="">Select Region</a></div>

<!DOCTYPE html>
<html lang="zh">
<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="shortcut icon" href="favicon.ico" type="image/x-icon"><!--把图片放到cc文件夹下，直接引入图片--><link rel="stylesheet" href="css/style.css"><!--引入CSS的样式-->
</head>
<body><div class="topbar"><div class="container"><div class="topbar-nav"><a href="">小米商城</a><a href="">MIUI</a><a href="">IOT</a><a href="">云服务</a><a href="">金融</a><a href="">有品</a><a href="">小爱开放平台</a><a href="">企业服务</a><a href="">Select Region</a></div><div class="topbar-info"><a href="">登录</a><a href="">注册</a><a href="">消息通知</a></div><div class="topbar-cart"><a href="">购物车（0）</a></div></div></div>
</body>
</html>

在浏览器中显示的效果！

3.2.初始化a——>文字下面的线就没了;

body {/*去掉 body里面的默认属性*/margin:0;padding: 0;
}
a {text-decoration: none;
}

在浏览器中显示的效果！

3.3

body {/*去掉 body里面的默认属性*/margin:0;padding: 0;
}
a {text-decoration: none;
}
.topbar {/*加边框*//*border: 1px solid black;*/background-color: #333;height: 40px;
}
.container {/*border: 1px solid black;*//*居中*/margin: 0 auto;width: 1226px;
}
/*伪元素 清浮动*/
.container::before,.container::after {content: "";/*把行元素变成块元素 table 固定的给上面加内容*/display: table;
}
.container::after {/*清浮动*/clear: both;
}/*在a标签加颜色 大小*/
.topbar a {color: #b0b0b0;font-size: 12px;
}
/*鼠标点击 a 效果*/
.topbar a:hover {color: #fff;
}.topbar-nav {/*浮动*/float: left;
}
.topbar-info,.topbar-cart {float:right;
}

在浏览器中显示的效果！

3.4.连接的居中

3.4.1. 添加居中效果

.topbar-nav {/*浮动*/float: left;/* 添加居中效果 */height: 40px;line-height: 40px;
}
.topbar-info,.topbar-cart {float:right;
}

在浏览器中显示的效果！

3.5.修改body 里面的字体：

body {/*去掉 body里面的默认属性*/margin:0;padding: 0;
}
/*修改字体 */
body {font: 14px/1.5 "Helvetica Nene",Helvetica,Arial,"Microsoft Yahei","Hiragino SansGB","Heiti SC","WenQuanYi Micro Hei",sans-serif;
}a {text-decoration: none;
}

在浏览器中显示的效果！

3.6.字与字之间的距离调整：

3.6.1.

<div class="topbar-nav"><a href="">小米商城</a><span>|</span><!--spen标签 "|"给加回来--><a href="">MIUI</a><span>|</span><a href="">IOT</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="">Select Region</a><span>|</span></div>

在浏览器中显示的效果！

3.6.字与字之间的距离调整：

3.6.2.

.topbar-nav {/*浮动*/float: left;/* 添加居中效果 */height: 40px;line-height: 40px;/*设计字体大小 空格就消失了*/font-size: 0;
}

在浏览器中显示的效果！

3.6.2.1.

.topbar-nav span{/* 字体大小 颜色 样式 距离*/font-size: 12px;color:#424242;font-family: sans-serif;margin: 0.5em;
}.topbar-info,.topbar-cart {float:right;
}

在浏览器中显示的效果！

3.7.加上滚动条：

body {/*去掉 body里面的默认属性*/margin:0;padding: 0;
}
/*修改字体 */
body {font: 14px/1.5 "Helvetica Nene",Helvetica,Arial,"Microsoft Yahei","Hiragino SansGB","Heiti SC","WenQuanYi Micro Hei",sans-serif;/* 高度 滚动条就有了*/height: 2500px;
}

在浏览器中显示的效果！

4.做topbar-cart的样式：

4.1.

.topbar-info,.topbar-cart {float:right;
}
/* 购物车的 a标签*/
.topbar-cart a {/*改属性变成 块元素*/display: block;height: 40px;/* 字体高度 文本居中*/line-height: 40px;text-align: center;
}

在浏览器中显示的效果！

4.2.

/* 购物车的 a标签*/
.topbar-cart a {/*改属性变成 块元素*/display: block;height: 40px;/* 字体高度 文本居中*/line-height: 40px;text-align: center;/* 加宽高和背景*/width: 120px;background-color: #424242;
}

在浏览器中显示的效果！

4.3.更正购物车的位置：

<!DOCTYPE html>
<html lang="zh">
<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="shortcut icon" href="favicon.ico" type="image/x-icon"><!--把图片放到cc文件夹下，直接引入图片--><link rel="stylesheet" href="css/style.css"><!--引入CSS的样式-->
</head>
<body><div class="topbar"><div class="container"><div class="topbar-nav"><a href="">小米商城</a><span>|</span><!--spen标签 "|"给加回来--><a href="">MIUI</a><span>|</span><a href="">IOT</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="">Select Region</a><span>|</span></div><div class="topbar-cart"><a href="">购物车<span>（0）</span></a></div><div class="topbar-info"><a href="">登录</a><a href="">注册</a><a href="">消息通知</a></div></div></div>
</body>
</html>

body {/*去掉 body里面的默认属性*/margin:0;padding: 0;
}
/*修改字体 */
body {font: 14px/1.5 "Helvetica Nene",Helvetica,Arial,"Microsoft Yahei","Hiragino SansGB","Heiti SC","WenQuanYi Micro Hei",sans-serif;height: 2500px;
}
a {text-decoration: none;
}
.topbar {/*加边框*//*border: 1px solid black;*/background-color: #333;height: 40px;
}
.container {/*border: 1px solid black;*//*居中*/margin: 0 auto;width: 1226px;
}
/*伪元素 清浮动*/
.container::before,.container::after {content: "";/*把行元素变成块元素 table 固定的给上面加内容*/display: table;
}
.container::after {/*清浮动*/clear: both;
}/*在a标签加颜色 大小*/
.topbar a {color: #b0b0b0;font-size: 12px;
}
/*鼠标点击 a 效果*/
.topbar a:hover {color: #fff;
}.topbar-nav {/*浮动*/float: left;/* 添加居中效果 */height: 40px;line-height: 40px;/*设计字体大小 空格就消失了*/font-size: 0;
}
.topbar-nav span{/* 字体大小 颜色 样式 距离*/font-size: 12px;color:#424242;font-family: sans-serif;margin: 0.5em;
}.topbar-info,.topbar-cart {float:right;
}
/* 购物车的 a标签*/
.topbar-cart a {/*改属性变成 块元素*/display: block;height: 40px;line-height: 40px;text-align: center;width: 120px;background-color: #424242;
}/* 通过span给topbar-cart添加样式*/
.topbar-cart span {/* 往左移 */margin-left: -4px;font-size: 12px;
}

在浏览器中显示的效果！

4.4.1.

/* 鼠标点击的效果*/
.topbar-cart a:hover {background-color: #fff;color: #ff6700;
}
/* 通过span给topbar-cart添加样式*/
.topbar-cart span {/* 往左移 */margin-left: -4px;font-size: 12px;
}

在浏览器中显示的效果！

5.做tapbar-info效果：

<div class="topbar-cart"><a href="">购物车<span>（0）</span></a></div><div class="topbar-info"><a href="">登录</a><span>|</span><a href="">注册</a><span>|</span><a href="" class="sep">消息通知</a></div>

.topbar-info span {float: left;/* 字体 */font-family: sans-serif;font-size: 12px;color:#424242;line-height: 40px;height: 40px;
}
/*重新设置 消息通知 效果*/
.topbar-info .sep {padding: 0 10px;
}

在浏览器中显示的效果！

5.1.完整代码：

<!DOCTYPE html>
<html lang="zh">
<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="shortcut icon" href="favicon.ico" type="image/x-icon"><!--把图片放到cc文件夹下，直接引入图片--><link rel="stylesheet" href="css/style.css"><!--引入CSS的样式-->
</head>
<body><div class="topbar"><div class="container"><div class="topbar-nav"><a href="">小米商城</a><span>|</span><!--spen标签 "|"给加回来--><a href="">MIUI</a><span>|</span><a href="">IOT</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="">Select Region</a><span>|</span></div><div class="topbar-cart"><a href="">购物车<span>（0）</span></a></div><div class="topbar-info"><a href="">登录</a><span>|</span><a href="">注册</a><span>|</span><a href="" class="sep">消息通知</a></div></div></div>
</body>
</html>

body {/*去掉 body里面的默认属性*/margin:0;padding: 0;
}
/*修改字体 */
body {font: 14px/1.5 "Helvetica Nene",Helvetica,Arial,"Microsoft Yahei","Hiragino SansGB","Heiti SC","WenQuanYi Micro Hei",sans-serif;height: 2500px;
}
a {text-decoration: none;
}
.topbar {/*加边框*//*border: 1px solid black;*/background-color: #333;height: 40px;
}
.container {/*border: 1px solid black;*//*居中*/margin: 0 auto;width: 1226px;
}
/*伪元素 清浮动*/
.container::before,.container::after {content: "";/*把行元素变成块元素 table 固定的给上面加内容*/display: table;
}
.container::after {/*清浮动*/clear: both;
}
/*在a标签加颜色 大小*/
.topbar a {color: #b0b0b0;font-size: 12px;
}
/*鼠标点击 a 效果*/
.topbar a:hover {color: #fff;
}
.topbar-nav {/*浮动*/float: left;/* 添加居中效果 */height: 40px;line-height: 40px;/*设计字体大小 空格就消失了*/font-size: 0;
}
.topbar-nav span{/* 字体大小 颜色 样式 距离*/font-size: 12px;color:#424242;font-family: sans-serif;margin: 0.5em;
}.topbar-info,.topbar-cart {float:right;
}
/* 购物车的 a标签*/
.topbar-cart a {/*改属性变成 块元素*/display: block;height: 40px;line-height: 40px;text-align: center;width: 120px;background-color: #424242;
}
/* 鼠标点击的效果*/
.topbar-cart a:hover {background-color: #fff;color: #ff6700;
}
.topbar-info {margin-right: 15px;
}
/* 通过span给topbar-cart添加样式*/
.topbar-cart span {/* 往左移 */margin-left: -4px;font-size: 12px;
}
.topbar-info a {float: left;/* 上下不动 左右是 */padding: 0 5px;/* 居中 */line-height: 40px;height: 40px;
}
.topbar-info span {float: left;/* 字体 */font-family: sans-serif;font-size: 12px;color:#424242;line-height: 40px;height: 40px;
}
/*重新设置 消息通知 效果*/
.topbar-info .sep {padding: 0 10px;
}

在浏览器中显示的效果！

xx闪购——顶部的菜单栏相关推荐

做xx闪购网站准备工作
1. 创建文件夹cc -->cc中创建 css,img,js 文件夹与 index.html文件: 2.在 css 文件夹-->创建文本文档--> 重命名为 style.cs ...
xx闪购——商品信息
1.把图片放在 cc/img 的文件夹里:D:\cc\img 2.把图片显示出来: <ul class="clearfix"><li><div cla ...
Bifrost微前端框架及其在美团闪购中的实践
Bifrost(英 ['bi:frɔst])原意彩虹桥,北欧神话中是连通天地的一条通道.而在漫威电影<雷神>中,Bifrost是神域--阿斯加德(Asgard)的出入口,神域的人通过它自由 ...
闪购网站Gilt从Rails迁移到Scala
闪购网站Gilt.com是一个新生的电子商务模式,其特点是在几秒钟内流量爆棚100倍,每天大概持续15分钟,这家网站的首席架构师Eric Bowman谈了如何从Ruby On Rails迁移到Scal ...
PHP版本美团闪购开放平台sdk
对接美团闪购开放平台美团闪购开放平台只有java的sdk,特此封装php板sdk 美团闪购平台开发文档:https://open-shangou.meituan.com/home/doc/marke ...
小荷特卖：切中女装童装品类、聚焦三线以下城镇市场的闪购平台
说到闪购模式的电商,国外比较有名的有Gilt(唯品会的师傅).Amazon旗下的Myhabit.专注母婴市场的Zulily.前阵子刚爆出被收购传闻的Fab等.而在国内,闪购做的好的可能要数唯品会.聚美 ...
小米在英国的1英镑闪购活动凸显其不熟悉欧洲市场
在印度市场大获成功,让小米的信心膨胀了,其在今年开始强势进军欧洲市场,希望在该市场取得同样的成功,然而近日小米在英国的1英镑闪购活动惹怒英国消费者却凸显出这家企业不熟悉欧洲市场. 欧洲市场与新兴市场不 ...
“闪购”神话的牛皮吹出了泡沫
昨天创业家杂志一篇<神秘公司"闪购"估值百亿调查>亮瞎了众多人的"势利眼",很多电商公司对这家突然估值"百亿"的公司投去羡慕嫉妒 ...
美团闪购：闪电仓商户如狼似虎，传统商超便利店坐享其成？
近日,考研网红教师张雪峰一句"外卖员这个职业5-10年内可能会消失"再度登上热搜. 其实,他的这个推论,只是看到了目前外卖骑手的保有量,截至2021年,中国外卖骑手约1300万名. ...
微信小程序之创建顶部tab菜单栏切换（新手学习）
关于顶部菜单tab菜单栏切换,可以有两种写法,但是都是用到swiper这个视图插件.插件介绍可以查看微信小程序开放文档. 第一种方式: 效果图 .wxml <view>tap切换方法一& ...

xx闪购——顶部的菜单栏

xx闪购——顶部的菜单栏相关推荐

最新文章

热门文章