亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 13
粉絲 2
評(píng)論 0
訪(fǎng)問(wèn)量 13779
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
實(shí)戰(zhàn)PHPcnUI手冊(cè)頁(yè)面FLEX布局以及前端總結(jié)-PHP第九期線(xiàn)上班
Continue
原創(chuàng)
954人瀏覽過(guò)

通過(guò)前端學(xué)習(xí)之后，使用flex伸縮盒模型的知識(shí)來(lái)完成了PHPcnUI的手冊(cè)的頁(yè)面布局，我嘗試布局了首頁(yè)和手冊(cè)內(nèi)容頁(yè)。

效果圖：


下面是首頁(yè)的HTML代碼：

實(shí)例

<!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手冊(cè)</title>
    <link rel="stylesheet" href="ui-style.css">
</head>
<body>
    <header>
         <h1> <strong> phpcn UI </strong>用戶(hù)參考手冊(cè)</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_頁(yè)面結(jié)構(gòu).html" target="content">頁(yè)面結(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浮動(dòng)與定位.html" target="content">CSS浮動(dòng)與定位</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_分頁(yè)條.html" target="content">分頁(yè)條</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>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線(xiàn)實(shí)例


首頁(yè)的CSS代碼：

實(shí)例

* {
    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;
}

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線(xiàn)實(shí)例


下面是一個(gè)內(nèi)容頁(yè)的HTML代碼：

實(shí)例

<!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>框架簡(jiǎn)介</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)編寫(xiě)前維護(hù),遵循HTML/CSS/JS編程規(guī)范, 具有如下特點(diǎn):</p>
    <ul>
        <li> <strong>免費(fèi)開(kāi)源:</strong> 您不需要付任何費(fèi)用, 就可以用在你的項(xiàng)目或商業(yè)應(yīng)用中</li>
        <li> <strong>簡(jiǎn)潔高效:</strong> 秉承大道至簡(jiǎn)原則, 一切為開(kāi)發(fā)者服務(wù), 在不失功能前提下進(jìn)行最大程序的簡(jiǎn)化</li>
        <li> <strong>易學(xué)好用:</strong> 開(kāi)箱即用, 學(xué)習(xí)門(mén)檻極低, 優(yōu)雅易記的命名規(guī)范, 方便您的二次開(kāi)發(fā)與擴(kuò)展</li>
    </ul>

    <h2 id="Source-code">2.源碼下載:</h2>
    <ul>
        <li> 目前,尚處于開(kāi)發(fā)測(cè)試階段, 僅限于PHP中文網(wǎng)線(xiàn)上學(xué)習(xí)使用,不提供公開(kāi)下載</li>
        <li> 目前框架僅提供網(wǎng)站管理后臺(tái)的管理功能</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 // 首頁(yè)
    │─list.html  // 列表頁(yè)
    │─article.html // 文檔詳情頁(yè)
    └─form.html // 表單頁(yè)

        </code>
    </pre>

    <h2 id="use">4.立即使用:</h2>

    <h3>4.1 本地直接訪(fǎng)問(wèn):</h3>
    <ul>
        <li>將框架源碼壓縮包,下載到本地任何一個(gè)目錄中, 并解壓到任一目錄中, 例如phpcn</li>
        <li>直接雙擊運(yùn)行index.html,會(huì)自動(dòng)啟動(dòng)默認(rèn)瀏覽器, 打開(kāi)框架首頁(yè)</li>
    </ul>

    <h3>4.2 虛擬主機(jī)訪(fǎng)問(wèn)(推薦):</h3>
    <ul>
        <li>使用phpStudy V8創(chuàng)建本地虛擬主機(jī),并解析一個(gè)本地域名, 如phpcn.io</li>
        <li>將框架源碼解壓后, 復(fù)制到對(duì)應(yīng)的項(xiàng)目中, 例如phpcn</li>
        <li>打開(kāi)瀏覽器訪(fǎng)問(wèn): phpcn.io, 同樣可以體驗(yàn)到該框架的全部功能</li>
    </ul>

</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線(xiàn)實(shí)例


下面是內(nèi)容頁(yè)CSS：

實(shí)例

* {
    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;
}

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線(xiàn)實(shí)例



手寫(xiě)代碼：

IMG_0529.JPG

手寫(xiě)總結(jié)：

IMG_0528.JPG

批改狀態(tài)：合格

老師批語(yǔ)：當(dāng)你獨(dú)立將這個(gè)作業(yè)完成的時(shí)候, 恭喜你, 前端布局基本上掌握 , 常見(jiàn)的任何頁(yè)面, 應(yīng)該都能應(yīng)付, 不在話(huà)下
本博文版權(quán)歸博主所有，轉(zhuǎn)載請(qǐng)注明地址！如有侵權(quán)、違法，請(qǐng)聯(lián)系admin@php.cn舉報(bào)處理！
全部評(píng)論 文明上網(wǎng)理性發(fā)言，請(qǐng)遵守新聞評(píng)論服務(wù)協(xié)議
0條評(píng)論
關(guān)于我們 免責(zé)申明 意見(jiàn)反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線(xiàn)php培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長(zhǎng)！
關(guān)注服務(wù)號(hào) 技術(shù)交流群
PHP中文網(wǎng)訂閱號(hào)
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時(shí)隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號(hào)
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)

    • 登錄PHP中文網(wǎng)，和優(yōu)秀的人一起學(xué)習(xí)！
    全站2000+教程免費(fèi)學(xué)