《关于我学习html仿写小米官网，却因为图片太多和个1个小时就看不懂之前写了什么屎山代码于是做精神崩溃，最终开始在看起来像小米官网的基础上疯狂整活，但我们却难以知道当时作者的精神状态这档事》
效果展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
a{
text-decoration:none;
}
li{
list-style: none;
}
/* 黑色导航 ↑*/
.black-nav{
width: 100%;
height: 40px;
line-height: 40px;
background-color: #333333;
font-size: 12px;
}
.black-nav .box{
width: 1226px;
margin: 0 auto;
}
.black-nav .box .black-nav-left{
float: left;
}
.black-nav .box .black-nav-right{
float: right;
}
.black-nav .box .black-nav-left li{
float: left;
position: relative;
}
.black-nav .box .black-nav-right li{
float: right;
}
.black-nav a{
color: #b0b0b0;
}
.black-nav .box li span{
color: #424242;
margin: 0 3.6px;
}
.black-nav .box .black-nav-right .cart{
width: 120px;
height: 40px;
background-color: #424242;
margin-left: 25px;
}
.download{
width: 124px;
height: 0px;
background-color: white;
box-shadow: 0 1px 5px #aaa;
position: absolute;
top: 40px;
left: 50%;
margin-left: -62px;
}
.download img{
width:100px;
height: 0px;
margin: 18px 12px 0;
}
.download p{
color: #333333;
font-size: 0px;
}
.black-nav-left li:hover>.download{
height: 148px;
z-index: 1;
}
.black-nav-left li:hover>.download img{
height: 100px;
z-index: 1;
}
.black-nav-left li:hover>.download p{
font-size: 14px;
line-height: 14px;
margin-left: 22px;
z-index: 1;
}
.jt{
width: 0;
height: 0;
border-bottom: 8px solid #ffffff;
border-left: 8px solid #333333;
border-right: 8px solid #333333;
position: absolute;
bottom: 0;
left: 50%;
margin-left: -8px;
display: none;
}
.black-nav-left>li:hover>.jt{
display: block;
}
.cart:hover{
background-color: #ffffff;
}
.cart:hover>a{
color: #ff6700;
}
.cart i{
font-style: normal;
margin-right: 8px;
}
.cart-list{
width: 316px;
height: 0px;
background-color: #ffffff;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
position: absolute;
right: 120px;
top: 40px;
color: #424242;
overflow: hidden;
line-height: 100px;
}
.cart-list p{
margin-left: 60px;
}
.cart:hover>.cart-list{
height: 100px;
z-index: 1;
}
/* 黑色导航 ↓ */
/* 白色导航 ↑ */
.white-nav{
width: 100%;
height: 100px;
background-color: rgb(250.1, 250, 250);
position: relative;
}
.white-nav .box{
width: 1226px;
margin: 0 auto;
}
.logo img{
width: 100px;
height: 60px;
background-color: #ffffff;
float: left;
margin-top: 22.5px;
overflow: hidden;
border-radius: 10px;
}
.nav-bar{
width: 875px;
height: 100px;
line-height: 100px;
float: left;
}
.search{
width: 246px;
height: 100px;
float: right;
}
.nav-bar li{
float: left;
}
.nav-bar li a{
color: #333333;
padding: 0 10px;
}
.nav-bar li a:hover{
color: #ff6700;
}
.search input{
width: 204px;
height: 50px;
float: left;
border: 1px solid #d3d3d3;
box-sizing: border-box;
margin-top: 24px;
border-right: 0;
}
.search button{
width:42px;
height: 50px;
float: right;
border: 1px solid #d3d3d3;
margin-top: 24px;
}
.search button:hover{
background: #ff6700;
}
.nav-bar-list{
width: 100%;
height: 229px;
background: #ffffff;
border-top: 1px solid #eee;
box-shadow: 0 3px 4px rgba(0, 0, 0, 1);
position: absolute;
left: 0;
top: 100px;
display: none;
}
.nav-bar li:hover>.nav-bar-list{
display: block;
z-index: 1;
}
.nav-bar-list li{
line-height: normal;
border-right: 2px solid #eee;
}
.nav-bar-list .name{
font-size: 12px;
color: #333;
margin-left: 60px;
}
.nav-bar-list .price{
font-size: 12px;
color: #ff6700;
margin-left: 75px;
}
/* 白色导航 ↓ */
/* 轮播图 ↑ */
.banner .box{
width: 1226px;
margin: 0 auto;
}
.banner{
width: 100%;
height: 460px;
}
.banner-jpg{
width:80%;
}
.banner>.box{
position: relative;
}
.slide{
width: 234px;
height: 420px;
padding: 20px 0;
background-color: rgba(105, 101, 101, 0.6);
position: absolute;
left: 0;
top: 0;
}
.slide ul li{
height: 42px;
line-height: 42px;
text-align: left;
padding-left: 30px;
font-size: 14px;
}
.slide ul li a{
color: #ffffff;
}
.slide span{
float: right;
padding-right: 20px;
}
.slide>ul>li:hover{
background-color: #ff6700;
}
.slide-list img{
width: 80px;
margin-right: 10px;
}
.slide-list{
width: 992px;
height: 460px;
background-color: #ffffff;
border: 1px solid #eee;
border-left: none;
box-sizing: border-box;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.18);
position: absolute;
top: 0;
left: 234px;
display: none;
}
.slide-list ul{
width: 100%;
}
.slide-list ul li{
width: 240px;
height: 76px;
float: left;
padding: 18px 0 18px 20px;
box-sizing: border-box;
line-height: 20px;
}
.slide-list span{
color: #333333;
font-size: 14px;
}
.slide li:hover .slide-list{
display: block;
}
.slide-list li:hover span{
color: #ff6700;
}
/* 轮播图 ↓ */
</style>
</head>
<body>
<!-- 黑色导航 ↑-->
<div class="black-nav">
<div class="box">
<ul class="black-nav-left">
<li>
<a href="#">小米官网</a>
<span>|</span>
</li>
<li>
<a href="#">小米商城</a>
<span>|</span>
</li>
<li>
<a href="#">小米澎湃OS</a>
<span>|</span>
</li>
<li>
<a href="#">IOT</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">
<img src="./当然是小米app下载拉.jpg" alt="">
<p>原神！启动！</p>
</div>
<div class="jt"></div>
</li>
<li>
<a href="#">Select Location</a>
</li>
</ul>
<!-- 左 -->
<ul class="black-nav-right">
<li class="cart">
<a href="#">
<i>没图片）</i>
<i>购物车(0)</i>
</a>
<div class="cart-list">
<p>不玩原神你将度过一个不完美的人生</p>
</div>
</li>
<li>
<a href="#">消息通知</a>
</li>
<li>
<a href="#">注册</a>
<span>|</span>
</li>
<li>
<a href="#">登录</a>
<span>|</span>
</li>
</ul>
<!-- 右 -->
</div>
</div>
<!-- 黑色导航 ↓-->
<!-- 白色导航 ↑ -->
<div class="white-nav">
<div class="box">
<div class="logo">
<img src="./AZL.jpg" alt="" class="home">
</div>
<div class="nav-bar">
<ul>
<li>
<a href="#">Xiaomi手机</a>
<div class="nav-bar-list">
<div class="box">
<ul>
<li>
<a href="#">
<div class="img-box">
<img src="./宽带1.jpg" alt="">
</div>
<p class="name">10 Mbps包月</p>
<p class="price">280.000</p>
</a>
</li>
</ul>
</div>
</div>
</li>
<li>
<a href="#">Redmi手机</a>
</li>
<li>
<a href="#">电视</a>
</li>
<li>
<a href="#">笔记本</a>
</li>
<li>
<a href="#">平板</a>
</li>
<li>
<a href="#">家电</a>
</li>
<li>
<a href="#">路由器</a>
</li>
<li>
<a href="#">服务中心</a>
</li>
<li>
<a href="#">社区</a>
</li>
</ul>
</div>
<div class="search">
<input type="text" placeholder="碧蓝航线，什么时候入坑都不晚。">
<button class="iconfont">没图</button>
</div>
</div>
</div>
<!-- 白色导航 ↓ -->
<!-- 轮播图 ↑ -->
<div class="banner">
<div class="box">
<img src="./暂替轮播.jpg" alt="" class="banner-jpg">
<div class="slide">
<ul>
<li>
<a href="#">手机<span>></span></a>
<div class="slide-list">
<ul>
<li>
<a href="#">
<img src="./伊莉雅.jpg" alt="">
<span>魔法少女伊莉雅</span>
</a>
</li>
<li>
<a href="#">
<img src="./美游.jpg" alt="">
<span>魔法少女美游</span>
</a>
</li>
</ul>
</div>
</li>
<li>
<a href="#">电视<span>></span></a>
</li>
<li>
<a href="#">家电<span>></span></a>
</li>
<li>
<a href="#">笔记本 平板<span>></span></a>
</li>
<li>
<a href="#">出行 穿戴<span>></span></a>
</li>
<li>
<a href="#">耳机 音箱<span>></span></a>
</li>
<li>
<a href="#">健康 儿童<span>></span></a>
</li>
<li>
<a href="#">生活 箱包<span>></span></a>
</li>
<li>
<a href="#">智能 路由器<span>></span></a>
</li>
<li>
<a href="#">电源 配件<span>></span></a>
</li>
</ul>
</div>
</div>
</div>
<!-- 轮播图 ↓ -->
</body>
</html>//内容图片来自于网络
583
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
