小米商城实战0327——d1导航栏

Amor_1998

已于 2022-03-27 22:38:10 修改

阅读量548

点赞数

分类专栏：学习日志文章标签： javascript

于 2022-03-27 22:37:21 首次发布

本文链接：https://blog.csdn.net/Amor_1998/article/details/123778744

版权

学习日志专栏收录该内容

10 篇文章 0 订阅

订阅专栏

今天跟着b站实战项目做一个小米商城，第一天的进度远远低于我的逾期，敲代码这玩意，知易行难，勉强做出一个导航栏，明天要加快进度了

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米商城</title>
    <link rel="icon" href="images/favicon.ico">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/mi.css">
</head>
<body>
<!--头部开始-->
<div class="header">
    <div class="wrap">
        <ul class="header-left">
            <li><a href="#">小米商城</a> <span>|</span></li>
            <li><a href="#">MIUI</a><span>|</span></li>
            <li><a href="#">loT</a><span>|</span></li>
            <li><a href="#">云服务</a><span>|</span></li>
            <li><a href="#">天星数科</a><span>|</span></li>
            <li><a href="#">有品</a><span>|</span></li>
            <li><a href="#">小爱开放平台</a><span>|</span></li>
            <li><a href="#">企业团购</a><span>|</span></li>
            <li><a href="#">资质证照</a><span>|</span></li>
            <li><a href="#">协议规则</a><span>|</span></li>
            <li><a href="#">下载app</a><span>|</span></li>
            <li><a href="#">智能生活</a><span>|</span></li>
            <li><a href="#">Select Location</a><span>|</span></li>
        </ul>

        <ul class="header-right">
            <li><a href="#">登录</a><span>|</span></li>
            <li><a href="#">注册</a><span>|</span></li>
            <li><a href="#">消息通知</a></li>
            <li class="cart">
                <a href="#"><i class="iconfont"></i>购物车(0)
				</a>
				<div class="cart-list">购物车中还没有商品，赶紧选购吧 </div>
         <!--   <div class="cart-list">                购物车中还没有商品，赶紧选购吧！
            </div> -->
            </li>
        </ul>
    </div>
</div>
<!--头部结束-->


</body>
</html>

css

/*pc段布局
1）浮动
2）布局思路：从外到里，div嵌套
*/

/*头部样式开始*/
.header{
    width: 100%;
    height: 40px;
    line-height: 40px;
    /*//设置height和line-height相等，这样文字就居中了*/
    background-color:#333;
    font-size: 12px;

}
.wrap{
    width: 1226px;
    margin: 0 auto;
}

.header-left{
    float: left;  //导航栏左浮
}

.header-right{
    float: right;  //购物车那四个导航栏右浮
}
.header li{
    float: left;  // 把所有有序列表向左浮动
}
.header a {
    color: #b0b0b0;
}

.header a:hover{
    color: #fff;
}
.header span{
    color: #424242;
    margin: 0 6px;
}

/*购物车*/
.cart{
    position: relative;
    height: 40px;
    width: 120px;
    background-color: #424242;
    margin-left: 25px;
    cursor: pointer; //将鼠标转换成小手
}

/*点击购物车，背景变白*/
.cart:hover{
    background-color: #fff;

 }
/*鼠标悬停在li上，里面的a字体变为橘色，不能直接用.cart:hover（因为字体有颜色不会继承父元素的） */
.cart:hover>a{
    color: #ff6700;
}

/*购物车、下载app思路
1） 绝对定位到正常的位置
2）隐藏
3）鼠标悬停显示
*/
.cart-list{
				  /*   display: none;
				 隐藏自己，隐藏购物车下面模块  */
    position: absolute; 
	/* //绝对定位相对于父元素定位 */
   top : 40px;
    right:  0;
    width: 316px;
    height: 0; 
	/* //元素中高度设置为0，元素中内容溢出 */
    overflow: hidden; 
	/* //？溢出的部分隐藏掉 */
    line-height: 100px;
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0 ,0,0, .15);
	 /* //阴影 */
/* // */  transition:all .3s;
}
/*可以过渡的属性
1）颜色
2）数值
3）阴影
4）转换
 */

/*鼠标悬停在cart上，子元素cart-list显示*/
.cart:hover >.cart-list{
     height: 100px;
	 /* //高度取值为数值，可以过渡 */
	 /* display: block; */
}

/*头部样式结束*/

知识点

padding（填充，上下左右的内边距）
margin（外边距）
- 行内元素margin和padding上下不生效，但左右生效

margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。

margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。

hover 选择器用于选择鼠标指针浮动在上面的元素

.header a:hover{  //鼠标悬停变白
    color: #fff;
}

css过渡属性

/*可以过渡的属性
1）颜色
2）数值
3）阴影
4）转换
*/

写多个无序列表的简易方式

ul>li*数字>a[href=#]

Amor_1998

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
小米商城实战0327——d1导航栏

知识点padding（填充，上下左右的内边距） margin（外边距）行内元素margin和padding上下不生效，但左右生效 margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。 hover选择器用于选择鼠标指针浮动在上面的元素.header a:hover{ //鼠标悬停变白 color: #fff;}...
复制链接

扫一扫

专栏目录