一、顶部导航栏

制作首页导航栏属性：

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

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

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

代码：

小米官网
|
小米商城
|
MIUI
|
IoT
|
云服务
|
天星数科
|
有品
|
小爱开放平台
|
企业团购
|
资质证照
|
协议规定
|
下载app小米商城APP
|
Select Location
购物车(0)
购物车中还没有商品,赶紧选购吧!
消息通知
|
注册
|
登录

 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、容易改动框架时，直接设子元素为固定值

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！