简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > Flex布局实战案例-PHP第九期线上班
Blogger Information
Blog 13
fans 2
comment 0
visits 10830
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布局实战案例-PHP第九期线上班
Continue
Original
618 people have browsed it

学完CSS的flex布局我们就先来尝试自己布局，下面效果

手机网页布局：

代码：

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex布局手机网页</title>
    <link rel="stylesheet" href="demo_style.css">
</head>
<body>
    <header>
       <h1>PHP中文网</h1> 
    </header>
    <main>主体部分</main>
    <footer>

        <a href="http://">首页1</a>
        <a href="http://">首页2</a>
        <a href="http://">首页3</a>
        <a href="http://">首页4</a>
    </footer>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

CSS代码：

实例

* {
    margin: 0;
    padding: 0;
}
a {
    text-decoration: none;
    color: #fff;
}

body {
    height: 100vh;
    display: flex;
    flex-flow: column nowrap;
    color: #fff;
}

header,footer {
    height: 80px;
    background: aqua;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
}

main {
    flex: 1;
    background: chocolate;
    display: flex;
    justify-content: center;
    align-items: center;
}
footer > a {
    display: flex;
    flex: 1;
    border-right: 1px solid #ff742d;
    padding: 10px;
    margin-right: 10px;
    justify-content: center;
    align-items: center;
}
footer > a:last-child {
    border-right: none;
    margin-right: none;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果如下：

1.png


圣杯布局案例

HTML代码：

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex布局手机网页</title>
    <link rel="stylesheet" href="demo_style1.css">
</head>
<body>
    <header>
       <h1>PHP中文网</h1> 
    </header>
    <main>
        <div class="content">主体部分</div>
        <div class="left">左边部分</div>
        <div class="right">右边部分</div>
    </main>
    <footer>
脚注部分
    </footer>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

CSS代码：

实例

* {
    margin: 0;
    padding: 0;
}
body {
    display: flex;
    height: 100vh;
    flex-flow: column nowrap;
    color: #fff;
    min-width: 480px;
}

main {
    background: crimson;
    display: flex;
    flex: 1;

}
.left, .right {
    width: 200px;
    background: cyan;
    
}
.left {
    order: -1;
}

.content {
    background: darkviolet;
    flex: 1;
}
header,footer {
    height: 80px;
    background: cornflowerblue;
    display: flex;
    justify-content: center;
    align-items: center;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

2.png


登录案例

HTML代码：

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册登录</title>
    <link rel="stylesheet" href="demo_style03.css">
</head>
<body>
    <div class="container">
        <h3>后台登录</h3>
        <form action="login.php" method="POST">
            <div>            
                <label for="email">邮箱:</label>
                <input type="email" placeholder="mail@mail.com">
            </div>

            <div>            
                <label for="password">密码:</label>
                <input type="password" id="password" placeholder="至少6位字符">
            </div>
            <div>
                <button>提交</button>
            </div>


        </form>
    </div>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

CSS代码：

实例

* {
    margin: 0;
    padding: 0;
}

body {
    height: 100vh;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to top, lightcyan, white, lightcyan);
}

.container {
    box-sizing: border-box;
    display: flex;
    flex-flow: column nowrap;
    padding: 20px;
}
.container > h3 {
    text-align: center;
    margin-bottom: 15px;
}
.container > form {
    box-sizing: border-box;
    padding: 20px;
    background: linear-gradient(to right bottom, lightblue, white);
}
.container > form > div {
    display: flex;
    margin: 10px 0;
}
.container > form > div > button {
    flex: 1;
    background-color: lightseagreen;
    color: white;
    height: 24px;
    letter-spacing: 15px;
    border: none;
    border-radius: 8px;
}

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

运行实例 »

点击 "运行实例" 按钮查看在线实例


后台系统案例

HTML代码：

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后台管理</title>
    <link rel="stylesheet" href="admin_style.css">
</head>
<body>
    <header>网站管理系统</header>
    <main>
        <div class="list">
            <ul>
                <li> <a href="http://">管理功能1</a> </li>
                <li> <a href="http://">管理功能2</a> </li>
                <li> <a href="http://">管理功能3</a> </li>
                <li> <a href="http://">管理功能4</a> </li>
                <li> <a href="http://">管理功能5</a> </li>
                <li> <a href="http://">管理功能6</a> </li>
            </ul>
        </div>

        <div>主体</div>
    </main>
    <footer>页脚</footer>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

CSS代码：

实例

* {
    margin: 0;
    padding: 0;
}
a {
    text-decoration: none;
    color: #fff;
}
ul,li {
    list-style: none;
}
body {
    height: 100vh;
    display: flex;
    flex-flow: column nowrap;
}

header,footer {
    height: 40px;
    background: brown;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
}

main {
    box-sizing: border-box;
    display: flex;
    flex: 1;
    background: orangered;
}
.list {
    background: darkblue;
    width: 200px;
}

.list>ul>li {
    margin: 20px 0;
    padding: 10px;
    background: brown;
    text-align: center;
}

.list + div {
    background: darkgreen;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    color: #fff;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果如下：

3.png



手写代码：

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！