css最新
练习--制作美联英语在线VIP页⾯——导航
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
<title>制作美联英语在线VIP页⾯——导航</title>
<!--最新版本的 Bootstrap 核⼼CSS⽂件-->
<link rel="stylesheet" href="cdn.jsdelivr/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg3 2OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4
u"
crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/myCss.css"/>
</head>
<body>
<nav class="container">
<ul class="myNav">
<li class="active">
<a href="#"class="intercept">
<span class="glyphicon glyphicon-home"></span>
⾸页
</a></li>
<li>
<a href="#"class="intercept">
<span class="glyphicon glyphicon-gift"></span>
通⽤英语
</a></li>
<li>
<a href="#"class="intercept">
<span class="glyphicon glyphicon-pencil"></span>
海外考试
</a></li>
<li>
<a href="#"class="intercept">
<span class="glyphicon glyphicon-globe"></span>
青少英语
</a></li>
<li>
<a href="#"class="intercept">
<span class="glyphicon glyphicon-bishop"></span>
⾏业英语
</a></li>
<li>
<a href="#"class="intercept">
<span class="glyphicon glyphicon-shopping-cart"></span>
在线购买
</a></li>
<li>
<a href="#"class="intercept">
<span class="glyphicon glyphicon-user"></span>
全球师资
</a></li>
<li class="dropdown">
<a href="#"class="intercept dropdown-toggle" data-toggle="dropdown">
更多栏⽬
<span class="caret"></span>
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu"> <li><a href="#">全球师资</a></li>
<li><a href="#">学员案列</a></li>
<li><a href="#">免费体验</a></li>
<li><a href="#">英语胶囊</a></li>
<li><a href="#">精彩动态</a></li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
下⾯是css样式：
li{
list-style: none;
float: left;
padding:030px;
}
.myNav{
height:50px;
line-height:50px;
background:#000033;
}
.myNav a{
color:#f0f5f6;
}
做好了之后的效果：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。