收藏
批改狀態(tài)：合格
老師批語：前端基礎(chǔ)知識, 既多且雜, 內(nèi)容是多了點(diǎn), 有點(diǎn)點(diǎn)講得快了, 下回我會注意
phpcn UI手冊改flex模式布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>phpcnUI手冊</title> <link rel="stylesheet" type="text/css" href="static/css/style.css"> </head> <body> <header> <h1>phpcn UI</h1> <h1>用戶參考手冊</h1> </header> <main> <aside> <ul> <li>前端基礎(chǔ)</li> <ul> <li><a href="base/1_框架安裝.html" target="content">框架安裝</a></li> <li><a href="base/2_頁面結(jié)構(gòu).html" target="content">頁面架構(gòu)</a></li> <li><a href="base/3_常用標(biāo)簽.html" target="content">常用標(biāo)簽</a></li> <li><a href="base/4_CSS選擇器.html" target="content">CSS選擇器</a></li> <li><a href="base/5_CSS樣式控制.html" target="content">CSS樣式控制</a></li> <li><a href="base/6_CSS盒模型.html" target="content">CSS盒模型</a></li> <li><a href="base/7_CSS浮動與定位.html" target="content">CSS浮動和定位</a></li> <li><a href="base/8_CSS常用布局方式.html" target="content">CSS常用布局方式</a></li> </ul> <li>框架組件</li> <ul> <li><a href="component/1_柵格布局.html" target="content">柵格布局</a></li> <li><a href="component/2_常用樣式.html" target="content">常用樣式</a></li> <li><a href="component/3_文本與背景色.html" target="content">文本與顏色</a></li> <li><a href="component/4_表格.html" target="content">表格</a></li> <li><a href="component/5_分頁條.html" target="content">分頁條</a></li> </ul> </ul> </aside> <article> <iframe src="welcome.html" frameborder="0" name="content" width="100%" height="900"></iframe> </article> </main> <footer> <p>版權(quán)信息</p> </footer> </body> </html>
@import "style/reset.css";
@import "style/predefine.css";
@import "style/layout.css";
@import "style/font.css";
@import "style/form.css";
@import "style/component.css";
*{
padding: 0;
margin: 0;
}
body{
height: 100vh;
min-width: 400px;
display: flex;
flex-flow: column nowrap;
}
header{
display: flex;
background-color: #999;
}
header>h1{
margin-left: 15px;
}
header>h1:first-of-type{
color: orange;
text-shadow: 1px 1px 4px black;
}
main{
display: flex;
flex: 1;
}
main>aside{
box-sizing: border-box;
width: 200px;
background-color: lightgrey;
padding: 10px;
}
main>aside>ul>li{
font-weight: bold;
margin-bottom: 5px;
}
main li>a:nth-of-type(n){
position: relative;
left: 15px;
margin: 3px 0;
}
footer{
height: 30px;
background-color: #ccc;
}
article{
width: 100%;
min-height: 800px
padding: 20px;
}展示
個(gè)人心得總結(jié)
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號
技術(shù)交流群
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號