实例
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>UI-用户参考手册</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
li{
list-style:none;
}
a{
text-decoration: none;
color: #000;
}
a:hover{
color: red;
}
body{
height: 100vh;
display:flex;
/*主轴垂直切不换行显示*/
flex-flow:column nowrap;
}
header{
padding-left: 50px;
background: #abcdef;
height: 60px;
line-height: 60px;
font-size: 30px;
}
main{
display:flex;
flex:1;
}
main>ul{
margin-top: 20px;
width:220px;
}
main>ul>li{
padding:10px 30px;
font-weight: bold;
}
.phpcn-dl-n{
display: none;
}
main>ul>li>ul>li{
margin-top:4px;
font-weight: 400;
color: #ddd;
font-size: 14px;
margin-left: 20px;
}
main>ul>li>ul>li>i{
width: 1px;
background: red;
border: 1px solid red;
margin-right: 2px;
}
iframe{
flex:1;
border: 0;
border-left: 2px solid #abcdef;
padding: 20px;
}
</style>
</head>
<body>
<header>UI-用户参考手册</header>
<main>
<ul id="nav">
<li><span>前端基础</span>
<ul class="phpcn-dl-n">
<li><i></i><a href="base/1_框架安装.html" target="content"> - 框架安装</a></li>
<li><i></i><a href="base/2_页面结构.html" target="content"> - 页面结构</a></li>
<li><i></i><a href="base/3_常用标签.html" target="content"> - 常用标签</a></li>
<li><i></i><a href="base/4_CSS选择器.html" target="content"> - CSS选择器</a></li>
<li><i></i><a href="base/5_CSS样式控制.html" target="content"> - CSS样式控制</a></li>
<li><i></i><a href="base/6_CSS盒模型.html" target="content"> - CSS盒模型</a></li>
<li><i></i><a href="base/7_CSS浮动与定位.html" target="content"> - CSS浮动与定位</a></li>
<li><i></i><a href="base/8_CSS常用布局方式.html" target="content"> - CSS常用布局方式</a></li>
</ul>
</li>
<li><span>框架组件</span>
<ul class="phpcn-dl-n">
<li><i></i><a href="component/1_栅格布局.html" target="content">- 栅格布局</a></li>
<li><i></i><a href="component/2_常用样式.html" target="content">- 常用样式</a></li>
<li><i></i><a href="component/3_文本与背景色.html" target="content">- 文本与背景色</a></li>
<li><i></i><a href="component/4_表格.html" target="content">- 表格</a></li>
<li><i></i><a href="component/5_分页条.html" target="content">- 分页条</a></li>
</ul>
</li>
</ul>
<iframe src="welcome.html" frameborder="1" name="content" ></iframe>
</main>
<script>
// 控制导航折叠
var menus = document.querySelectorAll('#nav > li');
menus.forEach(function (menu){
menu.firstElementChild.addEventListener('click', function (evt) {
evt.target.nextElementSibling.classList.toggle('phpcn-dl-n');
}, false);
});
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
