收藏
批改狀態(tài)：合格
老師批語：當(dāng)你獨(dú)立將這個作業(yè)完成的時候, 恭喜你, 前端布局基本上掌握 , 常見的任何頁面, 應(yīng)該都能應(yīng)付, 不在話下
通過前端學(xué)習(xí)之后，使用flex伸縮盒模型的知識來完成了PHPcnUI的手冊的頁面布局，我嘗試布局了首頁和手冊內(nèi)容頁。
效果圖：
下面是首頁的HTML代碼：
<!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>PHPcnUI手冊</title> <link rel="stylesheet" href="ui-style.css"> </head> <body> <header> <h1> <strong> phpcn UI </strong>用戶參考手冊</h1> </header> <main id="main"> <section> <ul class="list-1"> <li class="list-li"> <strong>前端基礎(chǔ)</strong> <ul class="list-2"> <li><a href="kuangjia.html" target="content">框架安裝</a></li> <li><a href="/phpcnui_doc/base/2_頁面結(jié)構(gòu).html" target="content">頁面結(jié)構(gòu)</a></li> <li><a href="/phpcnui_doc/base/3_常用標(biāo)簽.html" target="content">常用標(biāo)簽</a></li> <li><a href="/phpcnui_doc/base/4_CSS選擇器.html" target="content">CSS選擇器</a></li> <li><a href="/phpcnui_doc/base/5_CSS樣式控制.html" target="content">CSS樣式控制</a></li> <li><a href="/phpcnui_doc/base/6_CSS盒模型.html" target="content">CSS盒模型</a></li> <li><a href="/phpcnui_doc/base/7_CSS浮動與定位.html" target="content">CSS浮動與定位</a></li> <li><a href="/phpcnui_doc/base/8_CSS常用布局方式.html" target="content">CSS常用布局方式</a></li> </ul> </li> <li class="list-li"> <strong>框架組件</strong> <ul class="list-2"> <li><a href="/phpcnui_doc/component/1_柵格布局.html" target="content">柵格布局</a></li> <li><a href="/phpcnui_doc/component/2_常用樣式.html" target="content">常用布局</a></li> <li><a href="/phpcnui_doc/component/3_文本與背景色.html" target="content">文本與背景色</a></li> <li><a href="/phpcnui_doc/component/4_表格.html" target="content">表格</a></li> <li><a href="/phpcnui_doc/component/5_分頁條.html" target="content">分頁條</a></li> </ul> </li> </ul> </section> <section> <iframe src="/phpcnui_doc/welcome.html" frameborder="0" name="content"></iframe> </section> </main> <footer> <a href="https://php.cn">php中文網(wǎng)</a> ?版權(quán)所有(2019)</footer> </body> </html>
點(diǎn)擊 "運(yùn)行實例" 按鈕查看在線實例
首頁的CSS代碼：
* {
margin: 0;
padding: 0;
}
body {
display: flex;
flex-flow: column nowrap;
height: 100vh;
overflow-x: hidden;
}
a {
text-decoration: none;
color: #aaa;
}
a:hover {
color: #fff;
}
ul,li {
list-style: none;
}
header,footer {
background: linear-gradient(to top,#1f1f1f,#282828);
color: #aaa;
display: flex;
align-items: center;
padding: 20px 0;
}
header {
border-bottom: 1px solid #363636;
}
header>h1 {
margin-left: 20px;
}
header >h1 > strong {
text-shadow: 1px 1px 1px #ccc;;
}
footer {
justify-content: center;
border-top: 1px solid #363636;
}
#main {
display: flex;
flex: 1;
}
main > section:first-child {
width: 240px;
box-sizing: border-box;
display: flex;
justify-content: center;
background: #1F1F1F;
padding: 5px;
}
main > section:last-child {
flex: 1;
display: flex;
}
main > section:last-child >iframe {
flex: 1;
}
.list-1 {
display: flex;
flex-flow: column nowrap;
flex: 1;
}
.list-1 > .list-li:first-of-type {
margin-bottom: 20px;
}
.list-li {
display: flex;
flex-flow: column nowrap;
box-sizing: border-box;
padding-left: 40px;
}
.list-li > strong {
color: #fff;
font-size: 1.2rem;
letter-spacing: 2px;
}
.list-2 {
display: flex;
flex-flow: column nowrap;
align-items: flex-start;
}
.list-2 > li {
margin: 5px 0;
}點(diǎn)擊 "運(yùn)行實例" 按鈕查看在線實例
下面是一個內(nèi)容頁的HTML代碼：
<!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="kj-style.css"> </head> <body> <h1>框架簡介</h1> <div> <h2>目錄</h2> <ol> <li><a href="#frame">框架特點(diǎn)</a></li> <li><a href="#Source-code">源碼下載</a></li> <li><a href="#structure">目錄結(jié)構(gòu)</a></li> <li><a href="#use">立即使用</a></li> </ol> </div> <h2 id="frame">1.框架特點(diǎn)</h2> <p>phpcnUI前端框架,由PHP中文網(wǎng)編寫前維護(hù),遵循HTML/CSS/JS編程規(guī)范, 具有如下特點(diǎn):</p> <ul> <li> <strong>免費(fèi)開源:</strong> 您不需要付任何費(fèi)用, 就可以用在你的項目或商業(yè)應(yīng)用中</li> <li> <strong>簡潔高效:</strong> 秉承大道至簡原則, 一切為開發(fā)者服務(wù), 在不失功能前提下進(jìn)行最大程序的簡化</li> <li> <strong>易學(xué)好用:</strong> 開箱即用, 學(xué)習(xí)門檻極低, 優(yōu)雅易記的命名規(guī)范, 方便您的二次開發(fā)與擴(kuò)展</li> </ul> <h2 id="Source-code">2.源碼下載:</h2> <ul> <li> 目前,尚處于開發(fā)測試階段, 僅限于PHP中文網(wǎng)線上學(xué)習(xí)使用,不提供公開下載</li> <li> 目前框架僅提供網(wǎng)站管理后臺的管理功能</li> </ul> <hr> <h2 id="structure"></h2>3.目錄結(jié)構(gòu):</h2> <pre> <code> ├─static // 靜態(tài)資源目錄 │ │─css //css目錄 │ │ ├─img // css中需要用到的圖片資源 │ │ ├─style // 框架中使用到的樣式表目錄 │ │ │ ├─component.css // 預(yù)置常用組件的樣式 │ │ │ ├─font.css // 字體圖標(biāo)樣式 │ │ │ ├─form.css // 常用表單元素樣式 │ │ │ ├─layout.css // 布局樣式 │ │ │ ├─predefine.css // 常用元素的預(yù)定義樣式 │ │ │ ├─reset.css // 常用元素的樣式重置 │ │ └─style.css // 框架樣式引導(dǎo)文件,只需要引入它即可, 由它導(dǎo)入其它樣式表 │ ├─font //字體圖標(biāo)目錄 │ ├─images //圖片資源目錄 │ └─js //js腳本目錄 │─index.html // 首頁 │─list.html // 列表頁 │─article.html // 文檔詳情頁 └─form.html // 表單頁 </code> </pre> <h2 id="use">4.立即使用:</h2> <h3>4.1 本地直接訪問:</h3> <ul> <li>將框架源碼壓縮包,下載到本地任何一個目錄中, 并解壓到任一目錄中, 例如phpcn</li> <li>直接雙擊運(yùn)行index.html,會自動啟動默認(rèn)瀏覽器, 打開框架首頁</li> </ul> <h3>4.2 虛擬主機(jī)訪問(推薦):</h3> <ul> <li>使用phpStudy V8創(chuàng)建本地虛擬主機(jī),并解析一個本地域名, 如phpcn.io</li> <li>將框架源碼解壓后, 復(fù)制到對應(yīng)的項目中, 例如phpcn</li> <li>打開瀏覽器訪問: phpcn.io, 同樣可以體驗到該框架的全部功能</li> </ul> </body> </html>
點(diǎn)擊 "運(yùn)行實例" 按鈕查看在線實例
下面是內(nèi)容頁CSS：
* {
margin: 20px 0;
padding: 0;
/* outline: 1px dashed #ff742d; */
}
body {
padding: 0 40px;
}
div > h2:first-of-type {
font-size: 16px;
}
pre {
background: #f1f0f0;
}
a {
color: black;
text-decoration: none;
}
ol {
margin-left: 50px;
}點(diǎn)擊 "運(yùn)行實例" 按鈕查看在線實例
手寫代碼：
手寫總結(jié)：
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號
技術(shù)交流群
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號