admin管理员组文章数量:1530518
小米官网练习
html样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小米商城 - 小米10 Pro、Redmi K30 Pro、小米MIX Alpha,小米电视官方网站</title>
<link rel="stylesheet" href="./mi.css">
<link rel="stylesheet" href="./base.css">
<!-- 设置网站的图标(在标题栏和收藏栏)
-网站图片一般储存在网站的根目录下,名字一般叫做favicon.ico
-->
<link rel="icon" href="./photo/favicon.ico">
</head>
<body>
<!-- 外部容器 -->
<div class="top_bar_wrapper">
<!-- 内部镶嵌容器 -->
<div class="bar_wrapper">
<!-- 左侧头部列表 -->
<div class="left_list">
<ul>
<li><a href="javascript">小米商城</a></li>
<li class="line"></li>
<li><a href="javascript">MIUI</a></li>
<li class="line"></li>
<li><a href="javascript">loT</a></li>
<li class="line"></li>
<li><a href="javascript">云服务</a></li>
<li class="line"></li>
<li><a href="javascript">金融</a></li>
<li class="line"></li>
<li><a href="javascript">有品</a></li>
<li class="line"></li>
<li><a href="javascript">小爱开放平台</a></li>
<li class="line"></li>
<li><a href="javascript">企业团购</a></li>
<li class="line"></li>
<li><a href="javascript">资质证照</a></li>
<li class="line"></li>
<li><a href="javascript">协议规则</a></li>
<li class="line"></li>
<li>
<a class="box3" href="javascript">
下载app
<div class="code">
<img src="./photo/二维码.jpg">
<span class="box2">小米商城app</span>
</div>
</a>
</li>
<li class="line"></li>
<li><a href="javascript">智能生活</a></li>
<li class="line"></li>
<li><a href="javascript">Select location</a></li>
</ul>
</div>
<div class="right_list">
<ul>
<li><a href="javascript">登录</a></li>
<li class="line"></li>
<li><a href="javascript">注册</a></li>
<li class="line"></li>
<li><a href="javascript">消息通知</a></li>
<li class="box1"><a href="javascript">购物车(0)</a></li>
</ul>
</div>
</div>
</div>
<!-- 第二块容器 -->
<div class="first">
<div class="second_bar_wrapper">
<!-- 左侧小米图标 -->
<div class="xbt_box">
<a href="javascript">
<img src="./photo/小米图标.png">
</a>
</div>
<!-- 中间部分 -->
<div class="middle_wrapper">
<!-- 中间列表 -->
<div class="middle_list">
<ul class="middle_menu">
<li>
<a class="hidden" href="javascript">全部商品分类</a>
<!-- 创建左侧菜单栏 -->
<ul class="left_menu">
<li><a class="left_border"href="javascript"></a>手机 电话卡</li>
<li><a class="left_border"href="javascript"></a>电视 盒子</li>
<li><a class="left_border"href="javascript"></a>笔记本 显示器</li>
<li><a class="left_border"href="javascript"></a>家电 插线板</li>
<li><a class="left_border"href="javascript"></a>出行 穿戴</li>
<li><a class="left_border"href="javascript"></a>智能 路由器</li>
<li><a class="left_border"href="javascript"></a>电源 配件</li>
<li><a class="left_border"href="javascript"></a>健康 儿童</li>
<li><a class="left_border"href="javascript"></a>耳机 音响</li>
<li><a class="left_border"href="javascript"></a>生活 箱包</li>
</ul>
</li>
<li><a class="xiala_shows" href="javascript">小米手机</a></li>
<li><a class="xiala_shows" href="javascript">Redmi红米</a></li>
<li><a class="xiala_shows" href="javascript">电视</a></li>
<li><a class="xiala_shows" href="javascript">笔记本</a></li>
<li><a class="xiala_shows" href="javascript">家电</a></li>
<li><a class="xiala_shows" href="javascript">路由器</a></li>
<li><a class="xiala_shows" href="javascript">智能硬件</a></li>
<li><a href="javascript">服务</a></li>
<li><a href="javascript">社区</a></li>
<div class="xiala_info"></div>
</ul>
</div>
</div>
<!-- 右侧 -->
<div class="right">
<!-- 右侧搜索框 -->
<form class="right_search"action="#">
<input class="search" type="text">
<button class="submit">搜索</button>
</form>
</div>
</div>
</div>
<!-- 创建中间背景轮播图 -->
<div class="banner_wrapper">
<div class="banner_img">
<a href="javascript"><img src="./photo/中间背景.jpg"></a>
</div>
<!-- <div class="pointer">
<a href="javascript"></a>
<a href="javascript"></a>
<a href="javascript"></a>
<a href="javascript"></a>
<a href="javascript"></a>
<a href="javascript"></a>
</div> -->
</div>
</body>
</html>
css样式
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
.top_bar_wrapper{
width: 100%;
min-width: 1250px;
height: 40px;
background-color: rgba(0, 0, 0, 0.8);
}
.bar_wrapper{
width: 1250px;
height: 40px;
line-height: 40px;
/* background-color:rgba(0, 0, 0, 0.8); */
margin: 0 auto;
}
.left_list li{
float: left;
/* margin-right: 10px; */
}
.left_list a,
.right_list a{
display: block;
text-decoration: none;
color: rgba(255, 255, 255, 0.562);
font-size: 4px;
}
.right_list{
float: right;
}
.right_list li{
float: left;
display: block;
}
.left_list a:hover{
color: #fff;
}
.right_list a:hover{
color: #fff;
}
.line{
width: 1px;
height: 10px;
background-color: rgb(128, 123, 123);
margin: 15px 8px;
}
.box1{
width: 60px;
background-color: rgba(255, 255, 255, 0.2);
text-align: center;
margin-left: 20px;
}
.box1 a:hover{
color: orange;
background-color: #fff;
}
.box3:hover .code,
.box3:hover::after{
display: block;
height: 148px;
}
/* 设置app下拉 */
.code{
position: absolute;
z-index: 1;
left: -40px;
width: 124px;
height: 0;
overflow: hidden;
line-height: 1;
background-color:#fff;
text-align:center;
/* padding:10px; */
box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
/* transition用于为样式添加过渡效果 */
transition: height 0.5s;
}
.box3{
position: relative;
}
.box3::after{
display: none;
content: "";
position: absolute;
width: 0;
height: 0;
border: 8px solid transparent;
border-bottom-color: white;
bottom: 0;
left:14px;
}
.code .img{
margin-bottom: 10px;
}
.box2{
color: black;
font-size: 16px;
}
.first{
width: 100%;
height: 100px;
position: relative;
}
.second_bar_wrapper{
width: 1250px;
background-color: #fff;
margin: 0 auto;
}
.xbt_box img{
float: left;
width: 55px;
height: 55px;
margin-top: 22.5px;
}
/* 隐藏全部商品 */
.hidden{
visibility: hidden;
}
.second_bar_wrapper .middle_wrapper{
float: left;
width: 800px;
height: 100px;
line-height: 100px;
background-color: #fff;
margin-left: 70px;
}
.middle_menu li>a {
float: left;
display: block;
text-decoration: none;
color: black;
margin-right: 25px;
}
.middle_list li a:hover{
color: orange;
}
/* 下拉层 */
.xiala_info{
width: 100%;
/* height: 228px; */
height: 0;
overflow: hidden;
background-color: #fff;
position: absolute;
z-index: 5;
top: 100px;
left: 0;
/* 下拉过渡 */
transition: height 0.5s;
}
/* 设置除第九个和第十个外都可以弹出下拉层 */
.middle_menu >li:not(.left_border):not(:nth-child(9)):not(:nth-child(10)):not(.left_menu):hover ~ .xiala_info,
/* .middle_menu li >.xiala_shows:hover ~.xiala_info, */
/* .middle_menu li :not(.left_border):hover ~ .xiala_info, */
.middle_menu .xiala_shows:hover ~ .xiala_info,
.xiala_info:hover{
height: 228px;
border-top: 1px solid rgb(224, 224, 224);
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
}
.second_bar_wrapper .right{
float: right;
width: 240px;
height: 50px;
padding: 0px;
margin-top: 25px;
}
.right_search .search{
box-sizing: content-box;
float: left;
width: 165px;
height: 50px;
font-size: 16px;
padding: 0 10px;
border: none;
border: 1px solid rgb(224, 224, 224);
outline: none;
}
/* :focus设置input和button获取焦点后的样式 */
.right_search .search:focus,
.right_search .search:focus+.submit{
border-color: #ff6700;
}
.right_search .submit{
width: 50px;
height: 50px;
border-top: none;
border: 1px solid rgb(224, 224, 224);
background-color: #fff;
}
.right_search .submit:hover{
background-color: #ff6600;
color: white;
}
/* 左侧列表 */
.left_menu{
width: 234px;
height: 450px;
position: absolute;
z-index: 2;
left: 146px;
top: 100px;
background-color: rgb(0, 0, 0,.6);
line-height: 1;
padding-bottom: 0px;
padding: 10px 0;
/* padding-left: 20px; */
}
.left_menu li{
width: 194px;
height: 45px;
line-height: 45px;
color: #fff;
padding: 0 20px;
}
.left_menu li:hover{
background-color: #ff6700;
}
/* banner轮播图 */
.banner_wrapper{
width: 1010px;
height: 470px;
position: absolute;
float: right;
right: 146px;
}
.banner_wrapper .banner_img img{
width: 1010px;
height: 470px;
}
/* .pointer{
position: absolute;
float: left;
z-index: 100;
}
.pointer a{
width: 6px;
height: 6px;
background-color: brown;
} */
写了大概400行,有关用js实现的因为还没学到js,所以用的css代替,里面有一个问题,就是下面这一段关于导航条控制下拉层的。
1 .middle_menu >li:not(.left_border):not(:nth-child(9)):not(:nth-child(10)):not(.left_menu):hover ~ .xiala_info,
2 /* .middle_menu li >.xiala_shows:hover ~.xiala_info, */
3 /* .middle_menu li :not(.left_border):hover ~ .xiala_info, */
4 /.middle_menu .xiala_shows:hover ~ .xiala_info,/
.xiala_info:hover{
height: 228px;
border-top: 1px solid rgb(224, 224, 224);
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
}
只有1可以让下拉层出来,个人感觉4挺对的,但就是出不来下拉层。
哎,让人难受。
版权声明:本文标题:html+css小米官网练习 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dongtai/1726415071a1069716.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论