flex布局实例讲解,兄弟看flex布局案例 这一篇就够了!!

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档

文章目录

  • 前言
  • 一、flex布局是什么?
  • 二、flex 案例需求分析
    • (1)初始样式:
    • (2)需求分析:
      • (1)需要整体布局为居中
      • (2)左侧边导航栏随着鼠标的进入改变背景颜色和字体颜色
      • (3)右侧边链接图片可以随着屏幕的大小自适应换行
      • (4)底部同样自适应并居中
      • (5)最终样式
    • (3)案例讲解
      • (1)实现基础分块
        • header
        • main
        • footer
      • (4)最终代码
  • 欢迎小伙伴们留言讨论 当然也欢迎大佬改正错误 哈哈哈哈


前言

提示:主要内容 flex弹性布局以及css:

随着各式各样的移动端web端的出现,自适应屏幕大小就显得格外重要,flex布局就可以很好的解决这一类问题。


提示:以下是本篇文章正文内容

一、flex布局是什么?

Flexible Box 模型,通常被称为 flexbox,是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。本文给出了 flexbox 的主要特性,更多的细节将在别的文档中探索。

不了解的小伙伴可以点击 flex布局详细解说 了解更多

二、flex 案例需求分析

(1)初始样式:

flex布局实例讲解,兄弟看flex布局案例 这一篇就够了!!_第1张图片

DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>爱V猫友情链接title>
head>
<body>

    
    <header>
        <h1 class="headLeft">
            <a href="#"><img src="images/logo.jpg" alt="" />a>
        h1>
        <div class="headRight">
            <a href="#">登录a>
            <a href="#" class="active">注册a>
        div>
    header>
    
    <section class="wrap">
        <div class="mian">
            <ul class="mianLeft">
                <li><a href="#">公司介绍a>li>
                <li><a href="#">新闻动态a>li>
                <li><a href="#">联系我们a>li>
                <li><a href="#">招才纳士a>li>
                <li><a href="#">用户协议a>li>
                <li><a href="#">常见问题a>li>
                <li><a href="#">合作伙伴a>li>
                <li><a href="#">友情链接a>li>
                <li><a href="#">网站地图a>li>
                <li><a href="#">付费协议a>li>
                <li><a href="#">使用说明a>li>
            ul>
            <section class="mianRight">
                <h2>友情链接h2>
                <ul class="picList">
                    <li>
                        <a href="#"><img src="images/lk_logo01.jpg" alt="" />a>
                    li>
                    <li>
                        <a href="#"><img src="images/lk_logo02.jpg" alt="" />a>
                    li>
                    <li>
                        <a href="#"><img src="images/lk_logo03.jpg" alt="" />a>
                    li>
                    <li>
                        <a href="#"><img src="images/lk_logo04.jpg" alt="" />a>
                    li>
                    <li>
                        <a href="#"><img src="images/lk_logo05.jpg" alt="" />a>
                    li>
                    <li>
                        <a href="#"><img src="images/lk_logo06.jpg" alt="" />a>
                    li>
                    <li>
                        <a href="#"><img src="images/lk_logo07.jpg" alt="" />a>
                    li>
                    <li>
                        <a href="#"><img src="images/lk_logo08.jpg" alt="" />a>
                    li>
                    <li>
                        <a href="#"><img src="images/lk_logo09.jpg" alt="" />a>
                    li>
                ul>
            section>
        div>
    section>
    
    <footer>
        <ul>
            <li><a href="#">公司介绍a>li>
            <li><a href="#">新闻动态a>li>
            <li><a href="#">联系我们a>li>
            <li><a href="#">招商加盟a>li>
            <li><a href="#">招商用户a>li>
            <li><a href="#">协议合作伙伴a>li>
            <li><a href="#">常见问题Appa>li>
            <li><a href="#">下载网站地图a>li>
        ul>
        <p>深圳云飞渡网络科技有限公司 版权所有 京ICP备13047874号p>
        <p>Coppyright © 2018 iVmall All Rights Reservedp>
    footer>
body>

html>

(2)需求分析:

(1)需要整体布局为居中

(2)左侧边导航栏随着鼠标的进入改变背景颜色和字体颜色

(3)右侧边链接图片可以随着屏幕的大小自适应换行

(4)底部同样自适应并居中

(5)最终样式

flex布局实例讲解,兄弟看flex布局案例 这一篇就够了!!_第2张图片

(3)案例讲解

(1)实现基础分块

(1)通过最终所要达到的效果图可以将其大致分为 header(头部块)main(内容块也叫主块,怎么好听怎么来)footer (底部块)竖向排列

header

(1)各个击破,先从 header 入手我们可以很清楚地知道 header 大致分为2个部分 一个是logo的展示,另一个是 登录注册 的操作链接横向排列,居中布局
(2)代码示例(css)

 header {
 		/*设置header为弹性布局盒子(父)*/
        display: flex; 
        /*盒子内块级元素排列方式为 space-around
         均匀排列每个元素每个元素周围分配相同的空间 */
        justify-content: space-around;
        /* 属性为弹性容器内的项目指定默认对齐方式,这里为center*/
        align-items: center;
 }

如果小伙伴们对flex属性不熟悉的话可以点击 flex属性详解 了解更多。

main

(1)main 是整体居中;因此我们需要给main一个宽度(这里推荐使用百分比),然后通过 flex的justify-content:center 设置整体居中布局。

/*.wrap 为.main 的父盒子*/
 .wrap {
 		/*设置盒子为弹性布局 flex*/
        display: flex;
  		/*设置盒子内子元素整体 居中*/
        justify-content: center;
        /*给定一个背景颜色*/
        background-color: aqua;
 }

(2) mian 我们同样可以很清楚地知道 main 大致分为2个部分 一个是侧边栏(mianLeft)的展示,另一个是 ** 友情链接图片(mianRight),整体横向排列,居中布局**;但是我们仔细看可以知道,
1:mianLeft 中是占整体父元素的1/3竖向排列 并且 li 和 a 标签的原生样式是没有的。

.mian .mianLeft {
		/*flex:1表示将父元素整体作为单位一 占这个单位一的 1/单位一*/
        flex: 1;
        text-align: center;
        background-color: rgb(239, 239, 239);
        padding-top: 40px;
    }
    
    .mian .mianLeft li {
        height: 30px;
        font-size: 18px;
        /*设置字体竖向排列居中 这里的 30px 和 父盒子的高度保持一致*/
        line-height: 30px;
        /*去掉 li 默认样式*/
        list-style-type: none;
    }
    
    /*选择鼠标指针浮动在其上的元素,并设置其样式:*/
/*提示::hover 选择器可用于所有元素,不只是链接。
提示::link 选择器设置指向未被访问页面的链接的样式,:visited 选择器用于设置指向已被访问的页面的链接,:active 选择器用于活动链接。
注释:在 CSS 定义中,:hover 必须位于 :link 和 :visited 之后(如果存在的话),这样样式才能生效。*/
    .mian .mianLeft li:hover {
    	/*鼠标指针移动到元素上面后 background-color :red*/
        background-color: red;
        color: #fff;
    }
    
    .mian .mianLeft li a:hover {
    	/*同上*/
        color: #fff;
    }
    
    a {
        text-decoration: none; /*去除a的下划线*/
        color: rgb(89, 89, 89);
    }

更多伪类可以点击 :hover详解

2:mianRight 中的图片链接是可以换行的 并且整体居中排列

 .mian .mianRight {
 		/*占整体父元素单位一的3份  3/单位一*/
 		/*同上 的 .mainLeft -> flex:1  可以知道整个单位一被平分为4分 mainLeft 占1份 mainRight 占3份*/
        flex: 3;
        background-color: #fff;
    }
    
    /*基础样式不做解析*/
    .mian .mianRight h2 {
        border-bottom: 1px rgb(164, 164, 164) solid;
        font-size: 40px;
        color: rgb(164, 164, 164);
        padding: 20px 0 20px 20px;
    }
    
    .mian .mianRight .picList {
        display: flex;
        width: 100%;
       /* justify-content 属性定义了浏览器之间,如何分配顺着弹性容器主轴 (或者网格行轴) 的元素之间及其周围的空间。*/
        justify-content: space-evenly;
        /*当父元素宽度不够容纳一行子元素的时候 自动换行*/
        flex-wrap: wrap;
    }
    
    .mian .mianRight .picList li {
     /*去掉 li 默认样式*/
        list-style-type: none;
     /*margin的简写*/
     /*margin: top right buttom left*/
        margin: 10px 0 10px 0;
    }
    
    .mian .mianRight .picList li img {
        width: 200px;
    }

如果小伙伴们对flex属性不熟悉的话可以点击 flex属性详解 了解更多。

footer

(1)footer 就是最简单的这里我们直接给出代码相信小伙伴们都能看懂
(2)代码示例(css)

 footer {
    /*字体居中*/
        text-align: center;
    }
    
    footer ul {
        display: flex;
        justify-content: center;
    }
    
    footer ul li {
        margin: 5px;
    }

(4)最终代码

DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>爱V猫友情链接title>
head>

<style>
    * {
        margin: 0;
        padding: 0;
    }
    
    li {
        list-style-type: none;
    }
    
    header {
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    
    .wrap {
        display: flex;
        justify-content: center;
        background-color: aqua;
    }
    
    .wrap .mian {
        display: flex;
        width: 70%;
        margin: 10px 0 10px 0;
    }
    
    .mian .mianLeft {
        flex: 1;
        text-align: center;
        background-color: rgb(239, 239, 239);
        padding-top: 40px;
    }
    
    .mian .mianLeft li {
        height: 30px;
        font-size: 18px;
        line-height: 30px;
        list-style-type: none;
    }
    
    .mian .mianLeft li:hover {
        background-color: red;
        color: #fff;
    }
    
    .mian .mianLeft li a:hover {
        color: #fff;
    }
    
    a {
        text-decoration: none;
        color: rgb(89, 89, 89);
    }
    
    .mian .mianRight {
        flex: 3;
        background-color: #fff;
    }
    
    .mian .mianRight h2 {
        border-bottom: 1px rgb(164, 164, 164) solid;
        font-size: 40px;
        color: rgb(164, 164, 164);
        padding: 20px 0 20px 20px;
    }
    
    .mian .mianRight .picList {
        display: flex;
        width: 100%;
        justify-content: space-evenly;
        flex-wrap: wrap;
    }
    
    .mian .mianRight .picList li {
        list-style-type: none;
        margin: 10px 0 10px 0;
    }
    
    .mian .mianRight .picList li img {
        width: 200px;
    }
    
    footer {
        text-align: center;
    }
    
    footer ul {
        display: flex;
        justify-content: center;
    }
    
    footer ul li {
        margin: 5px;
    }
style>

<body>

    
    <header>
        <h1 class="headLeft">
            <a href="#"><img src="images/logo.jpg" alt="" />a>
        h1>
        <div class="headRight">
            <a href="#">登录a>
            <a href="#" class="active">注册a>
        div>
    header>
    
    <section class="wrap">
        <div class="mian">
            <ul class="mianLeft">
                <li><a href="#">公司介绍a>li>
                <li><a href="#">新闻动态a>li>
                <li><a href="#">联系我们a>li>
                <li><a href="#">招才纳士a>li>
                <li><a href="#">用户协议a>li>
                <li><a href="#">常见问题a>li>
                <li><a href="#">合作伙伴a>li>
                <li><a href="#">友情链接a>li>
                <li><a href="#">网站地图a>li>
                <li><a href="#">付费协议a>li>
                <li><a href="#">使用说明a>li>
            ul>
            <section class="mianRight">
                <h2>友情链接h2>
                <ul class="picList">
                    <li>
                        <a href="#"><img src="images/lk_logo01.jpg" alt="" />a>
                    li>
                    <li>
                        <a href="#"><img src="images/lk_logo02.jpg" alt="" />a>
                    li>
                    <li>
                        <a href="#"><img src="images/lk_logo03.jpg" alt="" />a>
                    li>
                    <li>
                        <a href="#"><img src="images/lk_logo04.jpg" alt="" />a>
                    li>
                    <li>
                        <a href="#"><img src="images/lk_logo05.jpg" alt="" />a>
                    li>
                    <li>
                        <a href="#"><img src="images/lk_logo06.jpg" alt="" />a>
                    li>
                    <li>
                        <a href="#"><img src="images/lk_logo07.jpg" alt="" />a>
                    li>
                    <li>
                        <a href="#"><img src="images/lk_logo08.jpg" alt="" />a>
                    li>
                    <li>
                        <a href="#"><img src="images/lk_logo09.jpg" alt="" />a>
                    li>
                ul>
            section>
        div>
    section>
    
    <footer>
        <ul>
            <li><a href="#">公司介绍a>li>
            <li><a href="#">新闻动态a>li>
            <li><a href="#">联系我们a>li>
            <li><a href="#">招商加盟a>li>
            <li><a href="#">招商用户a>li>
            <li><a href="#">协议合作伙伴a>li>
            <li><a href="#">常见问题Appa>li>
            <li><a href="#">下载网站地图a>li>
        ul>
        <p>深圳云飞渡网络科技有限公司 版权所有 京ICP备13047874号p>
        <p>Coppyright © 2018 iVmall All Rights Reservedp>
    footer>
body>

html>

欢迎小伙伴们留言讨论 当然也欢迎大佬改正错误 哈哈哈哈

你可能感兴趣的:(前端,css,ecmascript)