abstract：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>苏宁易购(Suning.com)-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>苏宁易购(Suning.com)-送货更准时、价格更超值、上新货更快</title>
<!--<link rel="stylesheet" href="./static/css/style.css" type="text/css">-->
<link rel="icon" href="./static/images/20190312221426.png" type="image/icon">
<link rel="stylesheet" href="./static/font-awesome-4.7.0/css/font-awesome.min.css" type="text/css">
<style>
*{
padding: 0;
margin: 0;
}
.mc{
width: 1200px;
margin: 0 auto;
}
.l{
float: left;
}
.r{
float: right;
}
.orangr{
color: #fd682e;
}
.yellow{
color: #f5D60a;
}
ul li{
list-style: none;
}
a{
text-decoration: none;
}
nav{
background: #f2f2f2;
height: 35px;
width: 100%;
line-height: 35px;
font-size: 12px;
border-bottom: 1px solid #dedede;
}
nav li{
float: left;
margin-right: 12px;
position: relative;
}
nav li:hover .content{
display: block;
}
.content{
width: 500px;
height: 150px;
background: #ccc;
position: absolute;
display: none;
}
nav a{
color: #706666;
}
nav i{
color: #ccc;
}
/* 固定定位 */
.fixed{
background: #383838;
width: 35px;
height: 100%;
position: fixed;top: 0;right: 0;
font-size: 16px;
}
.fixed li{
text-align: center;
line-height: 20px;
padding: 5px 0px;
margin-bottom: 8px;
position: relative;
}
.hr{
border-top: 1px solid #6d6e6a;border-bottom: 1px solid #6d6e6a;
}
.block{
background: red;
display: inline-block;
width: 22px;
line-height: 14px;
text-align: center;
border-radius: 5px;
}
.fixed li:hover{
background: #f5D60a;
}
.fixed li:hover i{
color: #fff;
}
.fixed .box{
position: absolute;
right: 35px;
top: 0px;
height: 100;
background: #f5D60a;
width: 70px;
line-height: 30px;
color: #fff;
display: none;
}
</style>
</head>
<body>
<!-- 头部导航 -->
<nav>
<div class="mc">
<ul class="l">
<li><a href="">网站导航</a><i class="fa fa-angle-down"></i>
<div class="content">
</div>
</li>
<li><a href="">商家入驻</a><i class="fa fa-angle-down"></i></li>
<li><a href="">客服服务</a><i class="fa fa-angle-down"></i></li>
<li>
<i class="fa fa-map-marker" style="color:#ffac00;font-size:18px;"></i>
<a href="" style="color:#000;">北京</a>
</li>
</ul>
<ul class="r">
<li><a href="">请登入</a></li>
<li><a href="" class="orangr">注册有礼</a></li>
<li><a href="">我的订单</a><i class="fa fa-angle-down"></i></li>
<li><a href="">我的易购</a><i class="fa fa-angle-down"></i></li>
<li><a href="">苏宁会员</a></li>
<li>
<i class="fa fa-shopping-cart" style="color: #fd682e;"></i>
<a href="" class="orangr">我的购物车</a>
<i class="fa fa-angle-down"></i>
</li>
<li><a href="">易付宝</a><i class="fa fa-angle-down"></i></li>
<li><a href="">企业采购</a><i class="fa fa-angle-down"></i></li>
<li><a href="">手机苏宁</a><i class="fa fa-angle-down"></i></li>
</ul>
</div>
</nav>
<!-- 右侧导航 -->
<div class="fixed">
<ul style="margin-top:180px;">
<li><a href=""><i class="fa fa-user-o yellow"></i></a></li>
<li class="hr">
<a href="" style="color:azure;"><i class="fa fa-shopping-cart"></i><br/>购<br/>物<br/>车<br/><span class="block">0</span></a>
</li>
<li>
<a href=""><i class="fa fa-envelope-o yellow"></i></a>
<a href="" class="box">消息</a>
</li>
</ul>
<ul style="margin-top:50px;">
<li>
<a href=""><i class="fa fa-jpy yellow"></i></a>
<a href="" class="box">理财</a>
</li>
<li>
<a href=""><i class="fa fa-clock-o yellow"></i></a>
<a href="" class="box">足迹</a>
</li>
<li>
<a href=""><i class="fa fa-calendar-minus-o yellow"></i></a>
<a href="" class="box">签到</a>
</li>
</ul>
<ul style="margin-top:50px;">
<li>
<a href=""><i class="fa fa-volume-control-phone yellow"></i></a>
<a href="" class="box">在线咨询</a>
</li>
<li>
<a href=""><i class="fa fa-file-o yellow"></i></a>
<a href="" class="box">意见反馈</a>
</li>
<li>
<a href=""><i class="fa fa-minus-square-o yellow"></i></a>
</li>
<li>
<a href=""><i class="fa fa-arrow-circle-up yellow"></i></a>
<a href="" class="box">返回顶部</a>
</li>
</ul>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(function(){
$('.fixed li').hover(
function(){
$(this).find('.box').stop().show(300)
},
function(){
$(this).find('.box').stop().hide()
}
)
$('.mc li').hover(
function(){
$(this).find('.fa fa-angle-down').attr('class','fa fa-angle-up')
},
function(){
$(this).find('.fa fa-angle-up').attr('class','fa fa-angle-down')
}
)
})
</script>
</body>
</html>
Correcting teacher：查无此人Correction time：2019-05-08 09:11:33
Teacher's summary：完成的不错。css样式可以写到公用文件，每次直接引入文件，就可以使用了。继续加油。