admin管理员组文章数量:1567915
行内元素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;
}
版权声明:本文标题:d3_0330_打造小米商城官网 Html+css+JS练手项目实战 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dianzi/1726415423a1069752.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论