论坛

标题: 有问题 [打印本页]

作者: 朱文强jude 时间: 2017-8-10 23:18
标题: 有问题
[attach]102496[/attach]
<!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>

作者: yuanxi52028 时间: 2017-8-12 09:02
回答1：？不设置宽高，菜单不是挤到一起了？没太明白你的意思。

回答2：苏宁易购不是能跳转吗？测试了是可以跳转的呀！

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

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

作者: 朱文强jude 时间: 2017-8-14 21:00

yuanxi52028 发表于 2017-8-12 09:02
回答1：？不设置宽高，菜单不是挤到一起了？没太明白你的意思。

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

谢啦!!☆⌒(*＾-゜)v

欢迎光临论坛 (http://bbs.qinxue.com/)