快捷导航
发新帖
返回列表
2 886
电梯直达  跳转到指定楼层

[提问] 有问题

朱文强jude|中级会员 |勤币 132 |学币 0
发表于 2017-8-10 23:18 | 复制链接 | 打印 | 上一主题 | 下一主题

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>导航条案例</title>
<style type="text/css">
.nav {
        width: 100%;
        height: 50px;
        background: #287397;
        margin-top: 80px;
        min-width: 1100px;
       
        }

body {
        margin-left: 0px;
        margin-right: 0px;
}

        .nav .con {
        width: 1100px;
        height: 50px;
        /* [disabled]background-color: #FF0308; */
        margin-left: auto;
        margin-right: auto;
}
       


}
.nav .con .list {color: aliceblue;}
.nav .con .mi {
        color: aliceblue;
        text-decoration: none;
        font-family: "微软雅黑";
        display: block;
        width: 180px;
        height: 50px;
        /* [disabled]background-color: #820204; */
        float: left;
        text-align: center;
        line-height: 50px;
       
}
.nav .con .mi:hover{
        color: aliceblue;
        text-decoration: none;
        font-family: "微软雅黑";
        display: block;
        width: 180px;
        height: 50px;

        float: left;
        text-align: center;
        line-height: 50px;
        background:#003D5B;
       
}
.nav .user a  {display:block;float: right;font-family: "微软雅黑";color: aliceblue;text-decoration: none;width: 150px;height: 50px;background: #F90004;text-align: center;line-height: 50px;
}
</style>
</head>

<body>
<div class="nav">
  <div class="con">
  <div class="list"></div>
          <a href="https://www.taobao.com" class="mi">淘宝商城</a>
          <a href="https://www.tianmao.com"class="mi">天猫商城</a>
          <a href="https://www.jd.com"class="mi">京东商城</a>
          <a href="https://www.suning.com/?utm_source=baidu&utm_medium=brand&utm_campaign=title"class="mi">苏宁易购</a>
          <a href="http://www.gome.com.cn/"class="mi">国美商城</a>
          </div>
       
        <div class="user"><a href="https://www.tudou.com"><img src="images/images/user_16px_1208234_easyicon.net.png">个人中心</a>
        </div></div>
</div>
</body>
</html>


本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
举报 使用道具
| 回复

共2个回复 最后回复于 2017-8-14 21:00

勤币 614   学币 0  
沙发
发表于 2017-8-12 09:02:16 | 只看该作者
回答1:?不设置宽高,菜单不是挤到一起了? 没太明白你的意思。

回答2:苏宁易购不是能跳转吗? 测试了是可以跳转的呀!

回答3:个人中心 user 与  菜单 list 没有在同一级 多了一个</div>

回答4:给img一个居中对齐的样式 vertical-align:middle;

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
举报 使用道具
勤币 132   学币 0  
板凳
发表于 2017-8-14 21:00:11 | 只看该作者
yuanxi52028 发表于 2017-8-12 09:02
回答1:?不设置宽高,菜单不是挤到一起了? 没太明白你的意思。

回答2:苏宁易购不是能跳转吗? 测试了是 ...

谢啦!!☆⌒(*^-゜)v
举报 使用道具
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表