绝对定位天猫导航

最新推荐文章于 2024-03-27 21:00:11 发布

不会咋办

最新推荐文章于 2024-03-27 21:00:11 发布

阅读量135

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_43201652/article/details/126709546

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_3629879_hsuxrh1g6o.css">
    <link rel="stylesheet" href="./tmall.css">
</head>
<body>
    <nav>
        <div class="box">
            <div class="box1">
                <span>喵，欢迎来天猫</span>
                <a href="#">请登录</a>
                <a href="#">免费注册</a>
            </div>
            <ul>
                <li><a href="#"><i class="iconfont icon-wangzhandaohang"></i>网站导航 <i class="iconfont icon-30jiantouxiangxiafill"></i></a></li>
                <li><a href="#">商家支持 <i class="iconfont icon-30jiantouxiangxiafill"></i></a></li>
                <li><a href="#">淘宝网</a></li>
                <li class="very"><a href="#"><i class="iconfont icon-shouji"></i> 手机版</a>
                    <div class="sj"></div>
                <div class="code">
                    <p class="img"></p>
                    <p class="word"></p>
                </div>
                </li>
                <li>|</li>
                <li><a href="#">收藏夹 <i class="iconfont icon-30jiantouxiangxiafill"></i></a></li>
                <li><a href="#"><i class="iconfont icon-gouwuche"></i> 购物车</a></li>
                <li><a href="#">我的淘宝 <i class="iconfont icon-30jiantouxiangxiafill"></i></a></li>
            </ul>
        </div>
        
    </nav>
</body>
</html>

* {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    font: 12px/1.5 tahoma, arial, "\5b8b\4f53";
}

nav {
    width: 100%;
    height: 27px;
    background: #f2f2f2;
}

.box {
    width: 1190px;
    height: 26px;
    margin: 0 auto;
}

.box1 {
    width: 218px;
    height: 26px;
    line-height: 26px;
    color: #999;
    float: left;
}

.box1 span {
    padding-right: 8px;
}

.box1 a {
    padding: 0 8px;
    color: #999;
}

ul li {
    float: right;
    line-height: 26px;
    text-align: center;
    color: #999;
}

li a {
    padding: 0 10px;
    color: #999;
}

a:hover {
    color: #FF0036;
    ;
}

i.iconfont {
    font: 12px;
    vertical-align: middle;
    color: #FF0036;
    ;
}

i.icon-30jiantouxiangxiafill {
    font-size: 6px;
    color: #999;
}
li.very{
    position: relative;
}
li.very:hover .code{
    display: block;
}
li.very:hover .sj{
    display: block;
}
.code {
    width: 175px;
    height: 227px;
    position: absolute;
    left: -48px;
top: 27px;
box-shadow: 0 0 5px #aaa;
display: none;
}

.code .img {
    width: 175px;
    height: 175px;
    margin: 5px 0 0px;
    background: url(./logo.png) 0 0 no-repeat;
}

.code .word {
    width: 145px;
    height: 35px;
    background: url(./1.jpg) center bottom no-repeat;

    overflow: hidden;
    margin: 0 15px;
    line-height: 35px;
}
.sj{
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid white;
    position: absolute;
    top: 20px;
    left: 40px;
    display: none;
}

在这里插入图片描述