简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > Flex布局小案例－第九期（191106作业）
Blogger Information
Blog 19
fans 0
comment 0
visits 13391
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
Flex布局小案例－第九期（191106作业）
feng
Original
656 people have browsed it

一、style1.css样式：

实例

*{
    margin: 0;
    padding: 0;
}
a{
    text-decoration: none;
    background-color: #555;
    color: white;
}
body{
    height: 100vh;
    display: flex;
    flex-flow: column nowrap;
}
header, footer{
    box-sizing: border-box;
    background-color: #ede;
    height: 50px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
}
main{
    box-sizing: border-box;
    flex: 1;
    background-color: #fff;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}
footer > a{
    border-right: 1px solid white;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}
footer > a:last-of-type{
    border-right: none;
}

二、Style2.css样式：

实例

* {
    margin: 0;
    padding: 0;
}
body{
    height: 100vh;
    display: flex;
    flex-flow: column nowrap;
}
header,footer{
    box-sizing: border-box;
    height: 50px;
    background-color: lightskyblue;
}
main{
    box-sizing: border-box;
    display: flex;
    flex: 1;
}
main > article{
    box-sizing: border-box;
    flex: 1;
    background-color: lightcoral;
    display: flex;
    flex-flow: row wrap;
}
main > aside{
    box-sizing: border-box;
    width: 50px;
    background-color: lightgrey;
}
main > aside:first-of-type{
    order: -1;
    background-color: lightgreen;
}
header{
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
}
header > a{
    text-decoration: none;
    background-color: #444444;
    color: white;
    border-right: 1px solid white;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}
header > a:last-of-type{
    border-right: none;
}
article > section{
    flex: 1;
}

三、Style3.css样式：

实例

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

body{
    height: 100vh;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    font-weight: lighter;
    color: #444444;
    background:linear-gradient(to top,lightcyan, white, lightcyan);
}
.container{
    box-sizing: border-box;
    width: 300px;
    padding: 20px;
    position: relative;
    top:-60px;
}
.container > h3{
    text-align: center;
    font-weight: lighter;
    margin-bottom: 15px;
}
.container > form{
    border: 1px solid gray;
    padding: 15px;
    border-radius: 10px;
    background: linear-gradient(to right bottom,lightblue, white);
    display: flex;
    flex-flow: column nowrap;
}
.container > form > div{
    margin: 5px 0;
    display: flex;
}
.container > form >div > input{
    flex: 1;
    padding-left: 5px;
    margin-left: 5px;
    border-radius: 5px;
}
.container > form > div > button{
    flex: 1;
    height: 24px;
    color: white;
    letter-spacing: 15px;
    border: none;
    border-radius: 8px;
    background-color: lightseagreen;
}
.container > form:hover{
    background: linear-gradient(to left top,lightcyan,white);
    box-shadow: 0 0 5px #888;
}
.container > form > div > button:hover{
    background-color: lightcoral;
    box-shadow: 0 0 5px #888;
}


 自己根据自己情况, 自定义一个小案例, 使用flex实现, 例如网站后台首页...

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>仿网站后台首页</title>
    <link rel="stylesheet" href="./css/style4.css">
</head>
<body>
<header>个人主页展示</header>
<main>
    <article>
        <form action="">
            <h2>管理員登錄</h2>
            <div>
                <label for="username">用戶名：</label>
                <input type="text" id="username" placeholder="請輸入用戶名">
            </div>
            <div>
                <label for="password">密碼：</label>
                <input type="text" id="password" placeholder="請輸入6位數密碼">
            </div>
            <div>
                <input type="button" value="提交">
            </div>


        </form>
    </article>
    <aside>左侧</aside>
    <aside>右侧</aside>
</main>
<footer>
    <a href="">網站首頁</a>
    <a href="">個人資料</a>
    <a href="">網站管理</a>
    <a href="">個人動態</a>
</footer>
</body>
</html>

CSS代码：

*{
    margin: 0;
    padding: 0;
}
body{
    height: 100vh;
    display: flex;
    flex-flow: column nowrap;
}
main{
    box-sizing: border-box;
    flex: 1;
    display: flex;
}
main > aside{
    box-sizing: border-box;
    width: 80px;
    background-color: lightseagreen;
    display: flex;
    justify-content: center;
    align-items: center;
}
main > article{
    /*box-sizing: border-box;*/
    flex: 1;
    background-color: lightskyblue;
    display: flex;
    justify-content: center;
    align-items: center;
}
main > aside:first-of-type{
    order: -1;
}
main > article > form{
    box-sizing: border-box;
    border: 1px solid gray;
    border-radius: 10px;
    width: 300px;
    padding: 15px;
    background: linear-gradient(to right bottom,lightskyblue,white);
    display: flex;
    flex-flow: column nowrap;
    position: relative;
    top: -40px;
}
main > article > form:hover{
    background: linear-gradient(to left top,lightseagreen,white);
    box-shadow: 0 0 5px #888;
}
form > h2{
    text-align: center;
    font-weight: lighter;
    margin-bottom: 20px;
    letter-spacing: 10px;
}
form > div{
    display: flex;
    margin: 4px 0;
}
form > div > input{
    flex: 1;
    padding-left: 2px;
    border-radius: 5px;
}
form > div:nth-of-type(2) > label{
    letter-spacing: 5px;
}
form > div:last-of-type > input{
    height: 24px;
    color: white;
    padding-left: 0;
    border: none;
    background-color: lightseagreen;
    letter-spacing: 15px;
}
form > div:last-of-type > input:hover{
    background-color: lightcoral;
    box-shadow: 0 0 5px #888;
}
header, footer{
    box-sizing: border-box;
    height: 60px;
    background-color: lightcoral;
    display: flex;
    justify-content: center;
    align-items: center;
}
header{
    letter-spacing: 5px;
}
body > footer > a{
    flex: 1;
    text-decoration: none;
    color: white;
    height: 50px;
    /*text-align: center;*/
    margin: 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid white;
}
body > footer > a:last-of-type{
    border-right: none;
}
body > footer > a:hover,
body > footer > a:focus,
body > footer > a:active{
    background-color: lightsteelblue;
    color: lightslategray;
}

手抄作业：

作业一.jpg

作业二.jpg

Correction status：qualified

Teacher's comments：非常认真, 继续
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！