标签：box 二级 border list li width nav 导航
css 样式
为了工作和平时项目的需要，在自己工作空余时间自己写的一个 css 样式
同时也是为了巩固 css 和 sass 的知识
目的是为了：适应每一个项目自己重置样式,创造属于自己的 style
虽然目前已有很多流行和成熟的 css 框架，如 bootstrap,Semantic UI,Pure…都有各的优点
但还是决定做更加适合前端工作的 css 样式，我并没说是 css 框架，因为还需要不断更新
自己在空余时间也会不断的去优化，学习和进步
@charset "UTF-8";
* {
margin: 0;
padding: 0;
-webkit-font-smoothing: antialiased;
}
body, html {
height: 100%;
overflow: hidden;
}
.container-fluid {
width: 100%;
padding-bottom: 10px;
}
.carect {
position: relative;
width: 0;
height: 0;
margin-left: 5px;
margin-bottom: 2px;
border-top: 6px solid;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-radius: 10px;
display: inline-block;
}
/*
导航组件
*/
nav {
width: 100%;
height: 91px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-shadow: 0 2px 4px #ccc;
box-shadow: 0 2px 4px #ccc;
padding: 10px 0;
}
nav li, nav a {
text-decoration: none;
list-style: none;
}
nav .nav-logo {
width: auto;
height: 100%;
margin-left: 20px;
float: left;
}
nav .nav-logo a, nav .nav-logo li, nav .nav-logo ol, nav .nav-logo span, nav .nav-logo p {
font-size: 30px;
font-weight: bold;
list-style: none;
color: #1f79ec;
text-decoration: none;
}
nav .nav-logo img {
max-width: 100%;
max-height: 100%;
margin-left: 100px;
width: 160px;
height:91px;
}
nav ::-webkit-scrollbar {
display: none;
}
nav .nav-list {
/*nav-list*/
-webkit-box-sizing: border-box;
box-sizing: border-box;
float: right;
line-height: 80px;
margin-right: 120px;
}
@media (max-width: 1200px) {
nav .nav-list {
position: fixed;
height: 91px;
top: 0;
padding-top: 10px;
width: 60%;
background: #fff;
left: -60%;
-webkit-transition: 1s;
transition: 1s;
-webkit-box-shadow: 3px 0px 10px #f0eded;
box-shadow: 3px 0px 10px #f0eded;
}
}
nav .nav-list > li {
position: relative;
list-style: none;
float: left;
text-align: center;
}
@media (max-width: 1200px) {
nav .nav-list > li {
width: 100%;
margin: 0;
overflow: hidden;
}
nav .nav-list > li {
margin-bottom: 15px;
}
}
nav .nav-list > li .active {
color: #fff;
background: #094fb7;
}
nav .nav-list > li a {
color: #5a5c5f;
display: inline-block;
line-height: 32px;
padding: 1px 15px;
margin: 0 10px;
font-size: 15px;
border-radius: 5px;
text-decoration: none;
}
@media (max-width: 1200px) {
nav .nav-list > li a {
width: 100%;
border-radius: 0;
margin: 0;
}
}
nav .nav-list > li a:hover {
color: #fff;
background-color: #094fb7;
}
nav .nav-list > li .menu {
min-width: 100px;
background: #fff;
-webkit-box-shadow: 0 2px 10px #ccc;
box-shadow: 0 2px 10px #ccc;
position: absolute;
border-radius: 5px;
white-space: nowrap;
left: 0;
height: 0;
overflow: hidden;
-webkit-transition: 1s;
transition: 1s;
}
@media (max-width: 1200px) {
nav .nav-list > li .menu {
position: relative;
width: 100%;
text-align: center;
border-radius: 0;
-webkit-box-shadow: 0 -1px 7px #ccc inset;
box-shadow: 0 -1px 7px #ccc inset;
}
}
nav .nav-list > li .menu li a {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin: 0;
}
nav .nav-list > li:hover .menu {
height: auto;
}
nav .nav-menu {
display: none;
z-index: 999;
background: #fff;
cursor: pointer;
}
@media (max-width: 1200px) {
nav .nav-menu {
display: block;
float: right;
padding: 8px 5px;
position: relative;
border: 1px solid #ccc;
border-radius: 5px;
margin-right: 15px;
}
nav .nav-menu span {
height: 2px;
width: 25px;
display: block;
background: #CCC;
border-radius: 10px;
}
nav .nav-menu span + span {
margin-top: 6px;
}
}
nav .open {
left: 0%;
overflow: auto;
}
/*# sourceMappingURL=zd-1.0.css.map */
html 和 js 样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>二级导航栏</title>
<link rel="stylesheet" href="css/zd-1.0.css">
</head>
<body>
<nav>
<!-- logo -->
<div class="nav-logo">
<a href="###"><img src="img/5e2b1c7056a1ae79916139519e01957.png" alt=""></a>
</div>
<!-- 控制menu -->
<div class="nav-menu">
<span></span>
<span></span>
<span></span>
</div>
<!-- 菜单 -->
<ul class="nav-list">
<li>
<a href="" class="active">首页<div class="carect"></div></a>
</li>
<li>
<a href="">我是</a>
<ul class="menu">
<li><a href="">不断学习</a></li>
<li><a href="">不断进步</a></li>
</ul>
</li>
<li>
<a href="">一个</a>
<ul class="menu">
<li><a href="">不断学习</a></li>
<li><a href="">不断进步</a></li>
</ul>
</li>
<li>
<a href="">热爱</a>
<ul class="menu">
<li><a href="">不断学习</a></li>
<li><a href="">不断进步</a></li>
</ul>
</li>
<li>
<a href="">Web</a>
<ul class="menu">
<li><a href="">不断学习</a></li>
<li><a href="">不断进步</a></li>
</ul>
</li>
<li>
<a href="">前端</a>
<ul class="menu">
<li><a href="">不断学习</a></li>
<li><a href="">不断进步</a></li>
</ul>
</li>
<li>
<a href="">的有</a>
<ul class="menu">
<li><a href="">不断学习</a></li>
<li><a href="">不断进步</a></li>
</ul>
</li>
<li>
<a href="">为青</a>
<ul class="menu">
<li><a href="">不断学习</a></li>
<li><a href="">不断进步</a></li>
</ul>
</li>
<li>
<a href="">年！</a>
<ul class="menu">
<li><a href="">不断学习</a></li>
<li><a href="">不断进步</a></li>
</ul>
</li>
</ul>
</nav>
<div>
<button ></button>
</div>
<script src="js/jquery.min.js"></script>
<script>
$(document).click(function(){
$('.nav-list').removeClass('open')
})
$('.nav-menu,.nav-list').click(function(e){e.stopPropagation()})
$('nav').find('.nav-menu').click(function(e){
$('.nav-list').toggleClass('open')
})
</script>
</body>
</html>
标签：box,二级,border,list,li,width,nav,导航 来源： https://blog.csdn.net/qq_43299703/article/details/120388895
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。