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

搜索
博主信息
博文 35
粉絲 3
評論 0
訪問量 31223
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
第八課 Flex實(shí)戰(zhàn)小案例
隨風(fēng)
原創(chuàng)
874人瀏覽過

一、手機(jī)端通用布局

實(shí)例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>手機(jī)端通用布局</title>
    <link rel="stylesheet" href="static/css/1.css">
</head>
<body>
<header>起點(diǎn)小說網(wǎng)</header>
<main>內(nèi)容

</main>
<footer>
    <a href="">新浪</a>
    <a href="">qq</a>
    <a href="">php中文網(wǎng)</a>
</footer>
</body>
</html>

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

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

實(shí)例

a{
   text-decoration: none;
    color: #555555;
}
 a{

     border-right: 1px solid white;
     flex: 1;
     display: flex;
     justify-content: center;
     align-items: center;


 }

 a:last-of-type{
     border-right: none;
 }

 a:hover{
     background: linear-gradient(to top,lightblue,white);
     box-shadow: 0 0 5px #888;
 }

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

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

image.png


二、flex實(shí)現(xiàn)圣杯布局

實(shí)例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex實(shí)現(xiàn)圣杯布局</title>
    <link rel="stylesheet" href="static/css/2.css">
</head>
<body>
<header class="header">頭部</header>
<main class="main">
   <article class="center">內(nèi)容區(qū)</article>
    <div class="left">左邊欄</div>
    <div class="right">右邊欄</div>
</main>
<footer class="footer">底部</footer>
</body>
</html>

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

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

實(shí)例

*{
   margin: 0;
    padding: 0;
}
body{
    height: 100vh;
    display: flex;
    flex-flow: column nowrap;
}
.header,footer{
    box-sizing: border-box;
    background-color: #555555;
    height: 50px;
}
.main{
    box-sizing: border-box;
    flex: 1;
    background-color: #9ad3d4;
    display: flex;
}
.left{
    box-sizing: border-box;
    width: 200px;
    background-color: #eeddee;

}
.right{
    box-sizing: border-box;
    width: 200px;
    background-color: lightsalmon;

}
.center{
    box-sizing: border-box;
    flex: 1;
    background-color: yellow;

}
.left{
    order: 1;
}
.center{
    order: 2;
}
.right{
    order: 3;
}

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

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

image.png


三、彈性布局實(shí)現(xiàn)登錄表單

實(shí)例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>彈性布局實(shí)現(xiàn)登錄表單</title></title>
    <link rel="stylesheet" href="static/css/3.css">
</head>
<body>
<div class="container">
    <h3>管理員登陸</h3>
    <form action="">
        <div>
            <label for="email">郵箱：</label>
            <input type="email" id="'email" name="email" placeholder="hyx000@qq.com">

        </div>
        <div>
            <label for="password">密碼：</label>
            <input type="password" id="password" name="password" placeholder="不能少于6位">
        </div>
        <div>
            <button>提交</button>
        </div>
    </form>
</div>

</body>
</html>

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

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

實(shí)例

*{
    margin: 0;
    padding: 0;
    /*outline: 1px dashed;*/
}

body{
    display: flex;
    height: 100vh;
   flex-flow: column nowrap;

    justify-content: center;
    align-items: center;

    color: #444;
    font-weight: lighter;
    background: linear-gradient(to top,lightgreen,white,lightgreen);

}
.container{
    box-sizing: border-box;
    width: 300px;
    height: 20px;
    position: relative;
    top: -60px;

}
h3{
    text-align: center;
    margin-bottom: 15px;
    font-weight: lighter;

}

form{
    display: flex;
    flex-flow: column nowrap;
    border: 1px solid gray;
    padding: 15px;
    border-radius: 10px;
    background: linear-gradient(to left bottom,lightblue,white);
}

form:hover{
    background: linear-gradient(to top,lightcyan,white);
}

 form >div{
    display: flex;
    margin: 10px 0;
}

 form > div > input {
     flex: 1;
     margin-left: 10px;
     padding-left: 6px;
     border: 1px solid #888;
     border-radius: 8px;

 }
form div > button {
    flex: 1;
    border-radius: 8px;
    background-color: lightseagreen;
    color: white;
    height: 24px;
    letter-spacing: 20px;
    border: none;
}
form >div > button:hover{
    background-color: lightcoral;
    box-shadow: 0 0 5px #888;
}

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

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

image.png

四、網(wǎng)頁后臺首頁

實(shí)例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>網(wǎng)頁后臺首頁</title>
    <link rel="stylesheet" href="static/css/4.css">
</head>
<body>


    <div class="header">
        <div class="first-page">
        <span><h3>后臺管理系統(tǒng)</h3></span>
        </div>
        <div class="first-detailed">
        <span>消息管理</span>
        <span>會員管理</span>
        <span>獎(jiǎng)金管理</span>
        <span>訂單管理</span>
        <span>產(chǎn)品管理</span>
        <span>個(gè)人中心</span>
        <span>退出</span>
        </div>
    </div>
    <div class="main">
        <div class="left">
            <div>
                <p>歡迎系統(tǒng)管理員：隨風(fēng)</p>
            </div>
            <div> <p>商品管理 </p>
              <div>
                <p>商品列表</p>
                <p>添加新商品</p>
                <p>商品分類</p>
                <p>用戶評論</p>
                <p>商品回收站</p>
                <p>庫存管理</p>
              </div>
            </div>

            <div class="last-div">
                <p>訂單管理</p>
                <p>會員管理</p>
                <p>信息通知</p>
                <p>系統(tǒng)管理</p>
            </div>
        </div>


        <div class="center">
         <p><h2>歡迎大家光臨后臺管理系統(tǒng)</h2></p>
        </div>


    </div>
<div class="footer">
    <p>商品管理系統(tǒng)，版權(quán)歸XXXX公司。</p>
</div>


</body>
</html>

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

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

實(shí)例

*{
    margin: 0;
    padding: 0;
}

body{
    height: 100vh;
    display: flex;
    flex-flow: column nowrap;
    padding-left: 50px;
    padding-right: 50px;
    padding-bottom: 10px;
}

.header,.footer{
    box-sizing: border-box;
    background-color: white;
    /*border: 1px solid ;*/
    display: flex;
    flex-flow: row nowrap;
    height: 50px;
}

.main{
    box-sizing: border-box;
    flex: 1;
    /*background-color: #9ad3d4;*/
    display: flex;
}
.left {
    box-sizing: border-box;
    width: 200px;
    background-color: black;
    color: white;
}
.center{
    box-sizing: border-box;
    flex: 1;
    /*background-color: lightcoral;*/
}

.header{
    display: flex;

}
.first-page{
    width:200px;
    font-weight: lighter;
    /*padding: 10px;*/
    background-color: lightcyan;
    display: flex;
    justify-content: center;
    align-items: center;
}
.first-detailed{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: row nowrap;
    flex: 1;
    justify-content: space-between;
    padding-left: 60px;
    padding-right: 30px;


}
.first-detailed > span:hover {
 background: linear-gradient(to left,lightcyan,white);
    box-shadow: 0 0 5px #888;
}

.left{
    display: flex;
    flex-flow: column nowrap;
}

.left > div:first-of-type{
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.left> div:nth-of-type(2){
    height: 250px;
}
.left >div:nth-of-type(2) > p {
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;

}
.left > div:nth-of-type(2) >div{
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    padding-top: 10px;


}
.left > div:nth-of-type(2) >div >p{
    padding: 5px;
}
.last-div  {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
}
.last-div > p {
    padding: 20px;
}


.center{
    display: flex;
    justify-content: center;
    align-items: center;

}

.footer{

    justify-content: center;
    align-items: center;
    /*color: red;*/
}

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

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

image.png

五、手抄

image.png

image.png

image.png

image.png

image.png


image.png

image.png


六、總結(jié)

學(xué)習(xí)了3個(gè)小案例，寫了一個(gè)小案例，對flex 有較大的認(rèn)知。

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

老師批語：任何知識 , 都 要結(jié)合 具體的案例來加深記憶
本博文版權(quán)歸博主所有，轉(zhuǎn)載請注明地址！如有侵權(quán)、違法，請聯(lián)系admin@php.cn舉報(bào)處理！
全部評論 文明上網(wǎng)理性發(fā)言，請遵守新聞評論服務(wù)協(xié)議
0條評論
關(guān)于我們 免責(zé)申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長！
關(guān)注服務(wù)號 技術(shù)交流群
PHP中文網(wǎng)訂閱號
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時(shí)隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號
發(fā)現(xiàn)有趣的

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

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