1. Flex改写phpcnui手册的代码
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <h1><span>phpcn UI </span>用户参考手册</h1> </header> <main> <div class="left"> <ul > <li ><strong>前端基础</strong> <ul > <li><a href="phpcnui/base/1_框架安装.html" target="content">框架安装</a></li> <li><a href="phpcnui/base/2_页面结构.html" target="content">页面结构</a></li> <li><a href="phpcnui/base/3_常用标签.html" target="content">常用标签</a></li> <li><a href="phpcnui/base/4_CSS选择器.html" target="content">CSS选择器</a></li> <li><a href="phpcnui/base/5_CSS样式控制.html" target="content">CSS样式控制</a></li> <li><a href="phpcnui/base/6_CSS盒模型.html" target="content">CSS盒模型</a></li> <li><a href="phpcnui/base/7_CSS浮动与定位.html" target="content">CSS浮动与定位</a></li> <li><a href="phpcnui/base/8_CSS常用布局方式.html" target="content">CSS常用布局方式</a></li> </ul> </li> <li><strong>框架组件</strong> <ul> <li><a href="phpcnui/component/1_栅格布局.html" target="content">栅格布局</a></li> <li><a href="phpcnui/component/2_常用样式.html" target="content">常用样式</a></li> <li><a href="phpcnui/component/3_文本与背景色.html" target="content">文本与背景色</a></li> <li><a href="phpcnui/component/4_表格.html" target="content">表格</a></li> <li><a href="phpcnui/component/5_分页条.html" target="content">分页条</a></li> </ul> </li> </ul> </div> <div class="right"> <iframe src="phpcnui/welcome.html" name="content" frameborder="0" style="width: 100%; height: 100%"></iframe> </div> </main> <footer><p ><a href="https://www.php.cn/">php中文网</a>©版权所有(2019)</p></footer> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
CSS：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-size: 14px;
line-height: 1.8;
}
li {
list-style: none;
}
a {
color: #333;
text-decoration: none;
}
body {
width: 100%;
display: flex;
flex-flow: column nowrap;
height: 100vh;
}
header {
display: flex;
align-items: center;
padding-left: 40px;
font-size: 28px;
background: #d4d4d4;
height: 60px;
}
header h1 {
color: #555;
font-size: 28px;
font-weight: normal;
}
header h1 span {
color: coral;
font-weight: bold;
text-shadow: 2px 2px 1px #333;
font-size: 28px;
}
footer {
display: flex;
justify-content: center;
align-items: center;
background-color: #d4d4d4;
height: 60px;
}
main {
display: flex;
flex: 1;
}
main > .left {
width: 200px;
background-color: #eee;
padding: 40px 0 0 40px;
}
main > .left > ul > li > ul {
padding-left: 20px;
}
main > .right {
flex: 1;
}
代码效果：
