Flex布局小案例－第九期（191106作业） - 作业

Home > List of blog posts > Flex布局小案例－第九期（191106作业）

Blogger Information

Blog 19

fans 0

comment 0

visits 13535

Special Recommendation

More>

Related recommendations

实例

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

手抄作业：

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

环境配置、phpstorm安装及谷歌应用商店插件的安装--第九期20191029

2019-10-29 17:04:10