<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<div class="header">
<div class="site-header">
<div class="container">
<div class="header-logo">
<a href="#" title="小米官网" class="logo ir">小米官网</a>
</div>
<div class="header-nav">
<ul class="nav-list J_navMainList clearfix">
<li id="J_navCategory" class="nav-category">
<a href="#" class="link-category">
<span class="text">全部商品分类</span>
</a>
<div class="site-category" style="display: block;">
<ul id="J_categoryList" class="site-category-list clearfix site-category-list-custom">
<li class="category-item">手机</li>
<li class="category-item">电视</li>
<li class="category-item">家电</li>
<li class="category-item">笔记本 平板</li>
<li class="category-item">出行 穿戴</li>
<li class="category-item">耳机 音箱</li>
<li class="category-item">健康 儿童</li>
<li class="category-item">生活 箱包</li>
<li class="category-item">智能 路由器</li>
<li class="category-item">电源 配件</li>
</ul>
</div>
</li>
<li data-index="1" class="nav-item">
<a href="javascript:void(1)">
<span class="text">Xiaomi手机</span>
</a>
</li>
<li data-index="2" class="nav-item">
<a href="javascript:void(1)">
<span class="text">Redmi手机</span>
</a>
</li>
<li data-index="3" class="nav-item">
<a href="javascript:void(1)">
<span class="text">电视</span>
</a>
</li>
<li data-index="4" class="nav-item">
<a href="javascript:void(1)">
<span class="text">笔记本</span>
</a>
</li>
<li data-index="5" class="nav-item">
<a href="javascript:void(1)">
<span class="text">平板</span>
</a>
</li>
<li data-index="6" class="nav-item">
<a href="javascript:void(1)">
<span class="text">家电</span>
</a>
</li>
<li data-index="7" class="nav-item">
<a href="javascript:void(1)">
<span class="text">路由器</span>
</a>
</li>
<li data-index="8" class="nav-item">
<a href="javascript:void(1)">
<span class="text">服务中心</span>
</a>
</li>
<li data-index="9" class="nav-item">
<a href="javascript:void(1)">
<span class="text">社区</span>
</a>
</li>
</ul>
</div>
<div class="header-search">
<form id="J_searchForm" action="//search.mi.com/search" method="get" class="search-form clearfix">
<label for="search" class="hide">站内搜索</label>
<div class="search-hot-words"></div>
<div id="J_keywordList" class="keyword-list hide">
<ul class="result-list"></ul>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
运行结果
<!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>
a {
display: inline-block;
text-decoration: none;
width: 120px;
height: 58px;
text-align: center;
line-height: 54px;
color: #3f3f3f;
}
.one {
position: relative;
background-image: url(../Day3/images/bg1.png);
}
.two {
position: relative;
background-image: url(../Day3/images/bg2.png);
}
.three {
position: relative;
background-image: url(../Day3/images/bg3.png);
}
.three img {
display: none;
position: absolute;
bottom: -130px;
left: 0;
}
.four {
background-image: url(../Day3/images/bg4.png);
}
.one:hover {
background-image: url(../Day3/images/bg5.png);
color: white;
}
.two:hover {
background-image: url(../Day3/images/bg6.png);
color: white;
}
.three:hover {
background-image: url(../Day3/images/bg7.png);
color: white;
}
.three:hover img {
display: block;
}
.four:hover {
background-image: url(../Day3/images/bg8.png);
color: white;
}
</style>
</head>
<body>
<a href="#" class="one">五彩导航</a>
<a href="#" class="two">五彩导航</a>
<a href="#" class="three">五彩导航
<img src="./images/code.jpg" alt=""></a>
<a href="#" class="four">五彩导航</a>
</body>
</html>
1160
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
