一、顶部导航栏

制作首页导航栏属性：

float:（浮动）display: block;（显示块元素）display: none;（隐藏块元素）margin（外边距）

:hover（悬浮变色）border（边框） line-height:（行高） padding（内边距）border-style（边框样式）

text-shadow: 1px 1px 1px red(红); 阴影效果
可选值: 水平效果(必填)，垂直效果(必填)，模糊半径(选填)，颜色(选填)

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="./项目1.修改.css"><link rel="stylesheet" href="./font-awesome-4.7.0/css/font-awesome.min.css"><title>Document</title>
</head>
<body><header id="Container"><div class="nav"><ul class="sub_nav"><li class="hover_white"><a href="#" class="zt _left">小米官网</a></li><li class="sg">|</li><li class="hover_white"><a href="#" class="zt">小米商城</a></li><li class="sg">|</li><li class="hover_white"><a href="#" class="zt">MIUI</a></li><li class="sg">|</li><li class="hover_white"><a href="#" class="zt">IoT</a></li><li class="sg">|</li><li class="hover_white"><a href="#" class="zt">云服务</a></li><li class="sg">|</li><li class="hover_white"><a href="#" class="zt">天星数科</a></li><li class="sg">|</li><li class="hover_white"><a href="#" class="zt">有品</a></li><li class="sg">|</li><li class="hover_white"><a href="#" class="zt">小爱开放平台</a></li><li class="sg">|</li><li class="hover_white"><a href="#" class="zt">企业团购</a></li><li class="sg">|</li><li class="hover_white"><a href="#" class="zt">资质证照</a></li><li class="sg">|</li><li class="hover_white"><a href="#" class="zt">协议规定</a></li><li class="sg">|</li><li class="xzm"><div class="hover_white"><a href="#" class="zt">下载app</a></div><div class="Caret"></div><div class="QR"><img src="./小米二维码1.PNG" alt="下载app"><span class="app">小米商城APP</span></div></li><li class="sg">|</li><li class="hover_white"><a href="#" class="zt">Select Location</a></li><li class="float_right gwc_hover"><div class="gwxl"><a href="#" class="zt g"><i class="fa fa-cart-arrow-down" aria-hidden="true"></i>购物车(0)</a><div class="gwc"><p>购物车中还没有商品,赶紧选购吧!</p></div></div></li><li class="float_right _right"><a href="#" class="zt">消息通知</a></li><li class="sg_right">|</li><li class="float_right"><a href="#" class="zt">注册</a></li><li class="sg_right">|</li><li class="float_right"><a href="#" class="zt">登录</a></li></ul><!-- <ul class="search"><li></li></ul> --></div><!-- <div class="search"><ul><li></li></ul></div> --></header>
</body>
</html>

1、浮动可以先全部浮动到左边，在选中要浮动到右边的。（内容正序）

2、也可以分两部分浮动。（最后浮动的内容是倒序的）

css样式：

*{margin: 0;padding: 0;
}
/* 去除默认样式 */
li{list-style: none;
}
/* 去除项目符号 */
a{ text-decoration: none;
}
/* 去除超链接下划线 */
#Container{width: 100%;height: 240px;background-color: #f19292;margin: 0px auto;
}
/* 头部盒子 */
.nav{width: 100%;height: 40px;background-color: #383737;
}
/* 子导航 */
.sub_nav{width: 1226px;height: 40px;/* background-color: #e9baba; */margin: 0px auto;
}
/* 导航栏 */
.sub_nav>.hover_white,li>.hover_white{height: 40px;line-height: 40px;float: left;
}
/* 左侧导航栏 */
.sub_nav>.float_right,.sub_nav>.sg_right{float: right;line-height: 40px;
}
/* 右侧导航栏 */
/* ._left{margin-left: 100px;
} */
/* 左外边距 */
.sub_nav>.sg{float: left;padding-top: 10px;margin: 0 4px;color: #424242;
}
/* 左浮动、内上边距、外边距、字体色 */
.sub_nav>.sg_right{padding-top: 0px;margin: 0 4px;color: #424242;
}
/* 竖线：内上边距、外边距、颜色 */
.sub_nav>li>a,.sub_nav>li>div>a{color: #8e8b84;font-size: 13px;
}
/* 字体颜色、大小 */
.sub_nav>li>a:hover,.sub_nav>li>div>a:hover{color: white;
}
/* 导航栏字体hover效果 */
.xzm{ position: relative;}
/* 父元素相对定位 */
.Caret{width: 0px;height: 0px; border: 8px solid #fefefe;border-color: transparent transparent rgb(255, 255, 255)  transparent;position: absolute;left: 656px;top: 24px;
}
/* 制作二维码小三角形 */
.QR{width: 130px;height: 160px;background-color: rgb(255, 255, 255);position: absolute;z-index: 1;top: 40px;left: 600px;box-shadow: 0px 3px 12px 4px rgba(112, 111, 111, 0.5);
}
/* 二维码外壳 */
.QR>img{width: 90px;padding: 15px 20px;
}
/* 二维码图片大小、内边距 */
.app{margin-left: 18px;
}
/* 左外边距 */
.Caret,.QR{display: none;
}
/* 隐藏二维码 */
.xzm:hover .Caret,.xzm:hover .QR{display: block;
}
/* 悬停显示二维码 */
.gwc_hover{width: 115px;height: 40px;margin-left: 30px;background-color:hsla(0, 15%, 75%, 0.349);position: relative;border-color: white;
}
/* 购物车 */
.gwc_hover>.gwxl>a{margin-left: 25px;
}
/* 左外边距 */
.gwc_hover>.gwxl>a>i{margin-right: 5px;
}
/* 右外边距 */
.gwc{width: 300px;height: 100px;position: absolute;z-index: 1;top: 40px;right: 0px;background-color: rgb(255, 255, 255);display: none;box-shadow: 0px 5px  6px rgba(112, 111, 111, 0.5);
}
/* 购物车下拉框、display: none;(隐藏下拉框) */
.gwc_hover>.gwxl:hover a{color: red;
}
/* 鼠标悬停字体变红 */
.gwxl:hover{background-color: white;
}
/* 悬停背景变白 */
.gwc>p{text-align: center;line-height: 100px;font-size: 13px;
}
/* 居中、行高、字体大小 */
.gwc_hover:hover .gwc{display: block;
}
/* 鼠标悬停显示下拉框 */

实现效果图：

二维码下拉框：（加阴影效果）

购物车下拉框：（加阴影效果）

注意点：浏览器缩小放大 css布局乱了，框架错位，内容浮动。原因一般都是父元素、子元素的宽都同时设的是100%

最简单的解决方式就是：

1、不容易改动框架时多套一层盒子，改子元素宽为固定值

2、容易改动框架时，直接设子元素为固定值

css、HTML制作小米商城网页（一）相关推荐

基于HTML+CSS+JavaScript制作学生网页——龙猫 -宫崎骏 5页带轮播带js校验
⛵ 源码获取文末联系 ✈ Web前端开发技术描述网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 网页设计作业 | 动漫网页设计 | 动漫网页设计成品 | 动漫 ...
基于HTML+CSS+JavaScript制作学生网页——外卖服务平台10页带js 带购物车
⛵ 源码获取文末联系 ✈ Web前端开发技术描述网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | HTML期末大学生网页设计作业 HTML:结构 CSS:样式 ...
基于HTML+CSS+JavaScript制作学生网页——海贼王网站 4页
⛵ 源码获取文末联系 ✈ Web前端开发技术描述网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 网页设计作业 | 动漫网页设计 | 动漫网页设计成品 | 动漫 ...
css、HTML制作小米商城网页（二）
一.快速导航搜索区 input:(输入) button(按钮) :focus(选取获得焦点) float:(浮动)display: block;(显示块元素)display: none;(隐藏块元素) ...
css、HTML制作小米商城网页（三）
input:(输入) button(按钮) :focus(选取获得焦点) float:(浮动)display: block;(显示块元素)display: none;(隐藏块元素)margin(外边距 ...
中秋之美——html+css+js制作中秋网页
前言八月十五,秋已过半,是为中秋. "但愿人长久,千里共婵娟",中秋时节,气温已凉未寒,天高气爽,月朗中天,正是观赏月亮的最佳时令.古人把圆月视为团圆的象征,因此,又称八月十五为 ...
html和css如何制作小球,[网页设计]使用CSS3动画模拟实现小球自由落体效果
[网页设计]使用CSS3动画模拟实现小球自由落体效果 0 2015-07-20 14:00:03 使用纯CSS代码模拟实现小球自由落体效果: html代码如下:1 2 CSS样式代码:/*ball样式 ...
css选择器制作一个网页,CSS选择器和做网页思路
这节要做出以下效果的网页其实,做网页就像画画一样,要分为一个一个的区域制作当把基本的区域确定好后,我们才能开始制作网页拿我们今天要做的这种个网页为例,我们可以先把它分为三个区域分别为蓝绿黄区域 ...
基于HTML+CSS+JavaScript制作学生网页——斗破苍穹动漫(6页) 排版整洁，内容丰富，主题鲜明
HTML实例网页代码, 本实例适合于初学HTML的同学.该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代 ...

css、HTML制作小米商城网页（一）

一、顶部导航栏

css、HTML制作小米商城网页（一）相关推荐

最新文章

热门文章