第八课-flex布局案例练习 - 学习

首页 > 博客列表 > 第八课-flex布局案例练习

博主信息

博文 10

粉丝 1

访问量 12437

专题推荐

更多>

一、用flex快速搭建手机端通用页面

flex布局可以快速搭建出手机端通用页面的模板样式，代码如下：

<!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">
    <link rel="stylesheet" href="css/demo.css">
    <title>手机端通用页面</title>
</head>
<body>
    <header>header</header>
    <main>main</main>
    <footer>footer</footer>
</body>
</html>

对应的css如下：

*{
    margin: 0;
    padding: 0;
}
body{
    display: flex;
    flex-flow: column nowrap;
    height: 100vh;
}
header,footer{
    display: flex;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    background-color: rgb(238, 241, 190);
}
main{
    display: flex;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    background-color: rgb(247, 188, 237);
    /* 让main主题区充满剩余空间 */
    flex: 1;
    height: 90vh;
}

预览效果如图：

手抄：

二、flex实现圣杯布局

之前学习过如何实现圣杯布局，但是代码比较繁杂，如果用flex来实现会极为简单。代码如下：

<!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">
    <link rel="stylesheet" href="css/demo1.css">
    <title>flex实现圣杯布局</title>
</head>
<body>
    <header>header</header>
    <main>
        <article></article>
        <aside></aside>
        <aside></aside>
    </main>
    <footer>footer</footer>
</body>
</html>

对应css如下：

*{
    margin: 0;
    padding: 0;
}
body{
    display: flex;
    flex-flow: column nowrap;
    height: 100vh;
}
main{
    display: flex;
    box-sizing: border-box;
    flex-flow: row nowrap;
    flex: 1;
}
article{
    flex: 1;
    box-sizing: border-box;
    background-color: rgb(236, 140, 140);
}
aside:first-of-type{
    width: 50px;
    background-color: rgb(53, 238, 6);
    order: -1;
}
aside:last-of-type{
    width: 50px;
    background-color: rgb(228, 216, 55);
}
header,footer{
    display: flex;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    height: 60px;
    background-color: rgb(176, 230, 106);
}
/* 
main>aside:first-of-type{
    order: -1;
} */

预览效果如图：

手抄：

三、flex实现登录居中显示

<!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">
    <link rel="stylesheet" href="css/demo3.css">
    <title>flex实现登录居中显示</title>
</head>
<body>
    <div class="container">
        <h3>用户登录</h3>
        <form action="" class="fd" id="form" name="form">
            <div><label for="user">用户:</label><input type="text"></div>
            <div><label for="password">密码:</label><input type="password"></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 right bottom,rgb(173, 241, 227),white,rgb(148, 197, 236));
}
.container{
    display: flex;
    flex-flow: column nowrap;
    /* border: 1px solid rgb(7, 10, 17); */
    padding: 5px;
    width: 300px;
    position: relative;
    top: -66px;
}
.container>h3{
    margin: 10px 0;
    font-weight: lighter;
    text-align: center;
}
#form{
    display: flex;
    flex-flow: column nowrap;
    padding: 15px;
    border: 1px solid lightgreen;
    border-radius: 16px;
    background:linear-gradient(to left top,rgb(164, 233, 164),white,rgb(77, 148, 77));
}
#form>div{
    display: flex;
    margin-left: 6px;
    margin-top: 12px;
    margin-bottom: 10px;
}
#form>div>input{
    flex:1;
    line-height: 22px;
    padding-left: 10px;
    border: 0;
    border-radius: 6px;
    margin-left: 8px;
}
.fd:hover{
    background: linear-gradient(to left top, lightcyan, white);
    box-shadow: 0 0 5px #888;
}
form:hover{
    background-color: rgb(6, 7, 7);
}
#form>div>button{
    flex: 1;
    margin-top: 6px;
    border: 0;
    border-radius: 8px;
    height: 22px;
    letter-spacing: 10px;
}
#form>div>button:hover{
    background-color: rgb(196, 240, 75);
}

预览效果如图：

手抄：
四、用flex搭建一个简单的网站后台样式

<!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">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1451331_wsqywwwzbq.css">
     <link rel="stylesheet" href="css/demo4.css">
    <title>简易网站后台</title>
</head>
<body>
    <header>
        <div class="tb">
            <img src="imgs/logo-dark.png" alt="">
        </div>
        <form action="" class="ss">
            <input type="text" placeholder="请输入关键词搜索">
            <button><i class="iconfont iconsousuo"></i></button>
        </form>
        <div class="content">
        <div class="xx">
           <a href=""><i class="iconfont iconshaixuan"></i>消息</a>
        </div>
        <dic class="help">
            <a href=""><i class="iconfont iconyiwen"></i>Help</a>
        </dic>
        <div class="user">
            <a href=""><i class="iconfont iconyonghuguanli"></i>登录</a>
        </div>
    </div>
    </header>
    <main>
        <article>
            <section>
                    <div class="s1">
                        <p>Weekly Overview</p>
                        <p>date:2019-11-07</p>
                    </div>
                    <div class="s2">
                        <div class="s21">
                            <i class="iconfont iconjishu-line"></i>
                            <div class="s211">
                                <p>1,252</p>
                                <p>Downloads</p>
                            </div>
                        </div>
                        <div class="s21">
                                <i class="iconfont iconjishu-line"></i>
                                <div class="s211">
                                    <p>203</p>
                                    <p>Sales</p>
                                </div>
                        </div>
                        <div class="s21">
                                    <i class="iconfont iconjishu-line"></i>
                                    <div class="s211">
                                        <p>274,678</p>
                                        <p>Visits</p>
                                    </div>
                        </div>
                        <div class="s21">
                                        <i class="iconfont iconjishu-line"></i>
                                        <div class="s211">
                                            <p>35%</p>
                                            <p>Conversions</p>
                                        </div>
                        </div>
                    </div>
                    <div class="s3">
                        <div class="s4">
                        <table>
                            <tr class="tr1">
                            <th>ID</th>
                            <th>会员名称</th>
                            <th>已购买货物数量</th>
                            <th>单价</th>
                            <th>消费合计</th>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>liu</td>
                            <td>3</td>
                            <td>1200</td>
                            <td>3600</td>
                        </tr>
                        <tr>
                                <td>2</td>
                                <td>liu</td>
                                <td>3</td>
                                <td>1200</td>
                                <td>3600</td>
                            </tr>
                            <tr>
                                    <td>3</td>
                                    <td>liu</td>
                                    <td>3</td>
                                    <td>1200</td>
                                    <td>3600</td>
                                </tr>
                                <tr>
                                        <td>4</td>
                                        <td>liu</td>
                                        <td>3</td>
                                        <td>1200</td>
                                        <td>3600</td>
                                    </tr>
                                    <tr>
                                            <td>5</td>
                                            <td>liu</td>
                                            <td>3</td>
                                            <td>1200</td>
                                            <td>3600</td>
                                        </tr>
                                        <tr>
                                                <td>6</td>
                                                <td>liu</td>
                                                <td>3</td>
                                                <td>1200</td>
                                                <td>3600</td>
                                            </tr>
                        </table>
                    </div>
                    </div>
            </section>
        </article>
        <aside>
            <nav>
                <ul>
                    <li><a href=""><i class="iconfont iconwangzhi"></i>主页</a></li>
                    <li><a href=""><i class="iconfont iconxinzenghuopin">文件</i></a></li>
                    <li><a href=""><i class="iconfont iconkehu"></i>用户</a></li>
                    <li><a href=""><i class="iconfont iconyonghuguanli"></i>设备</a></li>
                    <li><a href=""><i class="iconfont iconxiaoshou"></i>关于</a></li>
                    <li><a href=""><i class="iconfont iconpeizhi"></i>设置</a></li>
                </ul>
            </nav>
        </aside>
    </main>
    <footer><p>Copyright © 2017.Company name All rights reserved.More Templates 模板之家 - Collect from 网页模板</p></footer>
</body>
</html>

对应css如下：

*{
    margin: 0;
    padding: 0;
}
body{
    display: flex;
    height: 100vh;
    width: 100vw;
    flex-flow: column nowrap;
}
header,footer{
    height: 60px;
    background-color: rgb(229, 230, 221);
    display: flex;
    /* justify-content: space-between; */
    align-items: center;
}
main{
    display: flex;
    flex: 1;
    background-color: rgb(218, 241, 176);
}
article{
    flex: 1;
    background-color: rgb(210, 221, 221);
    height: auto;
}
aside{
    width: 150px;
    height: auto;
    order: -1;
    background-color: rgb(171, 202, 241);
}
.ss{
    margin: auto 15px;
}
.ss>input{
    line-height: 22px;
    border: 0;
    border-radius: 15px;
    padding-left: 6px;
}
.ss>button{
    margin-left: -20px;
    border: 0;
    height: auto;
    color:white
    padding:5px
}
.tb{
    margin: auto 15px;
}
a{
    text-decoration: none;
}
.xx{
    margin-right: 15px;
    /* margin-left: 50vw; */
}
.help{
}
main>aside>nav>ul{
    list-style-type: none;
}
aside{
    display: flex;
    box-sizing: border-box;
    flex-flow: column nowrap;
    width: 186px;
}
nav{
    display: flex;
    box-sizing: border-box;
    flex-flow: column nowrap;
    flex: 1;
    margin-top: 25px;
}
nav>ul{
    flex: 1;
}
nav>ul{
    text-align: center;
    /* display: flex; */
    box-sizing: border-box;
    /* flex-flow: column nowrap;
    justify-content: center;
    align-content: center; */
}
main>aside>nav>ul>li{
    /* flex: 1; */
    margin-bottom: 20px;
    /* box-sizing: border-box; */
    display: block;
    height: 33px;
    background-color: rgb(171, 202, 241);
    text-align: center;
}
main>aside>nav>ul>li:hover,main>aside>nav>ul>li:active{
    background-color: rgb(222, 243, 210);
    box-shadow: oldlace;
}
main>aside>nav>ul>li>a{
    line-height:33px ;
}
header{
    border-bottom:1px solid lightslategray;
    box-shadow:lightsteelblue;
}
.content{
    display: flex;
    flex: 1;
    justify-content: flex-end;
    padding-right: 25px;
}
.user{
    margin-left:22px
}
article{
    padding: 25px;
    display: flex;
}
article>section{
    background-color: rgb(235, 235, 235);
    height: auto;
    width: 100%;
    display: flex;
    flex-flow: column nowrap;
}
.s1{
    display: flex;
    flex-flow: column nowrap;
    margin: 18px 0 15px 18px;
}
.s1>p:first-of-type{
    margin-bottom: 10px;
}
.s2{
    display: flex;
    flex-flow: row nowrap;
    margin-left: 20px;
}
.s21{
    display: flex;
    width: 250px;
    height: 100px;
    border: 1px solid rgb(85, 87, 85);
    border-radius: 20px;
    margin: 10px auto;
    padding: 6px;
    align-items: center;
    justify-content: space-between;
}
.s21>*{
    margin-left: 30px;
}
.s211{
    margin-right: 30px;
}
footer{
    justify-content: center;
}
.s3{
    flex: 1;
    /* background-color: rgb(109, 99, 99); */
    padding: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.s4{
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
}
table{
    flex: 1;
    box-sizing: border-box;;
    /* border: 1px solid black; */
    width: 100%;
    height: 300px;
    background: linear-gradient(to top,rgb(229, 233, 221),rgb(234, 236, 236));
    /* flex: 1; */
    /* display: flex; */
    padding: 12px;
    /* justify-content: center; */
    /* align-items: center; */
    font-size: 20px;
    letter-spacing: 2px;
    border-collapse:collapse;
    margin: 15px auto;
    justify-content: space-evenly;
}
tr{
    /* display: flex; */
    /* flex: 1; */
    /* margin: 10px; */
    /* flex: 1; */
    /* background-color: rgb(71, 82, 59); */
}
th,td{
    text-align:center;
}

预览效果如图：

五、总结

本节课学习了flex布局的三个小案例，应用到了一下几个css属性：
1.盒模型的实现：display:flex；
2.弹性项目的属性：justify-content、align-items，这两个属性可以快速使弹性元素居中始终居中显示；
3.弹性元素属性：flex-flow（该属性是一种简写有两个值，分别表示弹性元素排列方式与是否换行）、flex（该属性是一种简写，有三个值，分别表示是否增长、是否缩减、基准尺寸）。
最后，应用所学知识，用flex做了一个简单的网站后台页面样式，受益匪浅。

批改状态：合格

老师批语：你的页面看上去超酷

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

thinkphp6.0路由的坑

2019-10-30 16:59:25