d3_0330_打造小米商城官网 Html+css+JS练手项目实战

最新推荐文章于 2024-03-10 18:07:31 发布

Amor_1998

最新推荐文章于 2024-03-10 18:07:31 发布

阅读量287

点赞数

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

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

版权

学习日志专栏收录该内容

10 篇文章 0 订阅

订阅专栏

行内元素a不能包含块级元素p，否则会失效

.download >a{
display: block; //转换成块级元素
}

绘制一个三角形 (不知道为什么，在模块里，功能没实现)

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style>
           .box{
               width: 0;
               height: 0;
               border-top: 10px solid red;
           //   border-bottom:10px solid blue;
               border-left: 10px solid transparent;
               border-right: 10px solid transparent; //变为透明
           }
       </style>
   </head>
   <body>
       <div class="box">

       </div>
   </body>
</html>

至此，头部模块结束

<!--头部开始-->
<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>
				<div class="download">	
					<a href="#">
					 <img src="img/download.png"  alt="">
					<p>	小米商城APP</p>
				 </a>
				</div>
				<div class="triangle"> </div>
			</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>
<!--头部结束-->

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;  // 把所有有序列表向左浮动
	position: relative;  
}
.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; */
}

.download{
	position: absolute;
	top: 40px;  //绝对定位
	/* 水平居中 */
	left: 50%;
	margin-left: -62px;
	width: 124px;
	height: 0px;
	
	background-color: #fff;
	box-shadow: 0 1px 5px #aaa;
	overflow: hidden;
	transition: all .3s;  //延缓出现0.3s
	
}

.download img
{
	width: 90px;
	margin: 18px  0 12px ;
}
/* 重新设置a的行高 */
.download >a{
	display: block;  //转换成块级元素
	 
}


.download p{
	color: #333;
	font-size: 14px;
	line-height: 14px;
	position: relative;
	top: -15px;
}

.header-left>li:hover>.download{ 
	height: 148px;
} 

/* 绘制三角形 */
.triangle{
	display: none;
	position: absolute;
	 bottom: 0;
	left: 50%;
	margin-left: -8px;
	width: 0;
	height: 0;
	border-bottom: 8px solid red;
	border-right: 8px solid transparent; 
	border-left: 8px solid transparent;
	
}

/*头部样式结束*/

.header-left>li:hover>.triangle{
	display: block;
}

Amor_1998

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
d3_0330_打造小米商城官网 Html+css+JS练手项目实战

行内元素a不能包含块级元素p，否则会失效.download >a{ display: block; //转换成块级元素}绘制一个三角形 (不知道为什么，在模块里，功能没实现)<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style&gt...
复制链接

扫一扫