• ACCP8.0Y2Web前端框架与移动应用开发第1章响应式布局

    杂记：

    1.实现弹性布局

    ①浮动+百分比

    ②display:flex布局：好处是可以让盒子里面的元素排成一行，盒子里面的高度保持一致

    ③flex的属性

    伸缩流方向 flex-direction决定主轴的方向可改为垂直或水平

    语法如下：

    flex-direction:row | row-reverse | column | column-reverse

    row:主轴水平

    row-reverse:起点在右从右排列

    column:垂直

    column-reverse:主轴垂直起点在下

    ④伸缩换行flex-wrap

    语法如下：

    flex-wrap:nowrap | wrap | wrap-reverse

    nowrap:默认单行不换行

    wrap：多行显示

    wrap-reverse：多行颠倒顺序

    ⑤主轴对齐justify-content

    语法：

    justify-content:

    flex-start 伸缩项目向一行的起始位置靠齐   |

    flext-ens 伸缩项目向一行的结束位置靠齐  |

    center  伸缩项目向一行的中间位置靠齐  |

    space-between平均分布在行里 第一个在开始最后一个在结尾  |

    space-around评价分布在行里 两端保留一半空间   |

    ⑥侧轴对齐 align-items

    语法：

    align-items:

    stretch 默认值。项目被拉伸以适应容器。  
    center 项目位于容器的中心。  
    flex-start 项目位于容器的开头。  
    flex-end 项目位于容器的结尾。  
    baseline 项目位于容器的基线上。  
    initial 设置该属性为它的默认值。   
    inherit 从父元素继承该属性。

     ⑦浮动+百分比方式布局可以适应屏幕但是如果两个元素高度不同则会出现空白部分

    flex布局则会解决 上述问题

    一.单词部分

    ①flex弹性布局  ②flex-direction伸缩方向 ③justify-content对齐 ④align-items对齐属性

    ⑤align-content垂直布局 ⑥media媒体 ⑦device-width设备宽度 ⑧orientation方向

    ⑨landscape竖屏 portraint横屏

    二.预习部分

    1.Flex布局的好处

    可以适应不同屏幕大小的变化时元素位置的变化

    2.媒体查询有什么作用

    向不同设备提供不同样式的一种不错方式提升用户体验

    3.响应式布局的优点

    解决多设备显示

    更少维护

    缺点

    工作量大

    代码累赘

    三.练习部分

    1.制作爱V猫友情链接页面

      1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>爱V猫友情链接</title>
  6 </head>
  7 <style type="text/css">
  8 #mainDiv{
  9 
 10 }
 11     #titDiv{
 12         display: flex;
 13         width: 100%;
 14         justify-content: space-around;
 15         align-items: center;
 16 
 17     }
 18     #leftAndright{
 19 
 20         display: flex;
 21         /*flex-direction: column;*/
 22         background-color: darkgray;
 23         justify-content:center;
 24     }
 25     #leftDiv{
 26         margin-left: 100px;
 27         background-color: azure;
 28         display: flex;
 29         flex: 1.5;
 30         width: 5%;
 31         /*justify-content:flex-start;*/
 32     }
 33     #rightSec{
 34        /* background-color: crimson;*/
 35         display: flex;
 36         flex: 4;
 37         margin-right: 100px;
 38         /* 80%;*/
 39 
 40 
 41     }
 42     #pic{
 43         display: flex;
 44         flex-wrap: wrap;
 45         justify-content: flex-start;
 46         padding: 0 5%;
 47     }
 48     #pic li{
 49        float: left;
 50         margin: 5px;
 51     }
 52     ul li{
 53         list-style-type: none;
 54     }
 55     #leftDiv ul li{
 56         line-height: 30px;
 57     }
 58     footer{
 59         display: flex;
 60         flex-direction: column;
 61 
 62         justify-content: center;
 63         align-items: center;
 64     }
 65     footer ul li{
 66         margin: 5px;
 67         float: left;
 68     }
 69     footer ul.li{
 70         list-style-type: none;
 71         float: left;
 72         /**/
 73         justify-content: center;
 74     }
 75 </style>
 76 <body>
 77 <!--主div-->
 78 <div id="mainDiv">
 79     <!--头部-->
 80     <div id="titDiv"><img src="image/logo.jpg" height="58" width="193"/><a>登录&nbsp;&nbsp;注册</a></div>
 81     <!--左和右div-->
 82     <div id="leftAndright">
 83         <!--左div-->
 84     <section id="leftDiv">
 85         <ul>
 86             <li>公司介绍</li>
 87             <li>新闻动态</li>
 88             <li>联系我们</li>
 89             <li>招才纳士</li>
 90             <li>用户协议</li>
 91             <li>常见问题</li>
 92             <li>合作伙伴</li>
 93             <li style="background-color: crimson">友情链接</li>
 94             <li>网站地图</li>
 95             <li>付费协议</li>
 96             <li>使用说明</li>
 97 
 98         </ul></section>
 99         <!--右div-->
100     <section id="rightSec">
101         <div><h4>友情链接</h4></div>
102 
103         <ul id="pic">
104             <li><a href="#"><img src="image/lk_logo01.jpg" height="74" width="154"/></a></li>
105             <li><a href="#"><img src="image/lk_logo02.jpg" height="74" width="154"/></a></li>
106             <li><a href="#"><img src="image/lk_logo03.jpg" height="74" width="154"/></a></li>
107             <li><a href="#"><img src="image/lk_logo04.jpg" height="74" width="154"/></a></li>
108             <li><a href="#"><img src="image/lk_logo05.jpg" height="74" width="154"/></a></li>
109             <li><a href="#"><img src="image/lk_logo06.jpg" height="74" width="154"/></a></li>
110             <li><a href="#"><img src="image/lk_logo07.jpg" height="74" width="154"/></a></li>
111 
112         </ul>
113     </section>
114 
115 
116 
117     </div>
118 
119     <footer>
120         <ul>
121             <li>公司介绍</li>
122             <li>新闻动态</li>
123             <li>联系我们</li>
124             <li>招商加盟</li>
125             <li>招商用户</li>
126             <li>协议合作伙伴</li>
127             <li>常见问题App</li>
128             <li>下载网站地图</li>
129         </ul>
130 
131         <p>深圳云飞渡网络科技有限公司 版权所有 京ICP备13047874号</p>
132         <p>Coppyright ? 2018 iVmall All Rights Reserved</p>
133     </footer>
134 </div>
135 
136 </body>
137 </html>

    2.制作响应式菜单

    主页面代码

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>响应式滑动菜单</title>
    <link rel="stylesheet" href="css/change.css">
    <link rel="stylesheet" href="css/main.css">
    <script src="js/jquery-1.8.3.min.js"></script>


</head>
<body>
<div class="container">
    <header>
        <h1>响应式滑动菜单</h1>
    </header>
    <div class="">
        <nav id="menu" class="nav">
            <ul>
                <li id="one">
                    <a href="#">
                                <span class="icon">
                                    <i aria-hidden="true" class="icon-home"><img src="image/2.png" height="27"
                                                                                 width="25"/></i>
                                </span>
                        <span>Home</span>
                    </a>
                </li>
                <li id="two">
                    <a href="#">
                                <span class="icon">
                                    <i aria-hidden="true" class="icon-services"><img src="image/3.png" height="27"
                                                                                     width="25"/></i>
                                </span>
                        <span>Services</span>
                    </a>
                </li>
                <li id="three">
                    <a href="#">
                                <span class="icon">
                                    <i aria-hidden="true" class="icon-portfolio"><img src="image/4.png" height="27"
                                                                                      width="25"/></i>
                                </span>
                        <span>Portfolio</span>
                    </a>
                </li>
                <li id="four">
                    <a href="#">
                                <span class="icon">
                                    <i aria-hidden="true" class="icon-blog"><img src="image/5.png" height="27"
                                                                                 width="25"/></i>
                                </span>
                        <span>Blog</span>
                    </a>
                </li>
                <li id="five">
                    <a href="#">
                                <span class="icon">
                                    <i aria-hidden="true" class="icon-team"><img src="image/6.png" height="27"
                                                                                 width="25"/></i>
                                </span>
                        <span>The team</span>
                    </a>
                </li>
                <li id="six">
                    <a href="#">
                                <span class="icon">
                                    <i aria-hidden="true" class="icon-contact"><img src="image/7.png" height="27"
                                                                                    width="25"/></i>
                                </span>
                        <span>Contact</span>
                    </a>
                </li>
            </ul>
        </nav>
        <div style="text-align:center;clear:both"><br>
            <img src="image/1.png" height="26" width="26"  id="imgdis" onclick="dian()"/></div>
    </div>
</div>
<script>
    function dian() {
        var widd=document.body.clientWidth.valueOf();
        if(widd<519){
            $("#menu").toggle();
        }

    }
</script>

</body>
</html>

    css代码

    .nav ul {
    max-width: 1240px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 32px;
    font-weight: 300;
}

.nav li span {
    display: block;
}



/* 各个背景色*/

#one{
    background-color: chocolate;
}

#two{
    background-color: darkorange;
}

#three{
    background-color: cornflowerblue;
}

#four {
   background-color: blue;
}

#five {
    background-color: darkblue;
}

#six {
    background-color: darkslategray;
}

/* 大于800时*/
@media (min- 800px) {

    #imgdis{
        display: none;
    }
    .nav li {
        float: left;
        width: 16%;
        text-align: center;
       /* -webkit-transition: width 2s;
        transition: border .5s;*/
    }

    .nav a {
        display: block;
        width: auto;
    }



}

@media (min-520px) and (max- 799px) {
    #imgdis{
        display: none;
    }
    .nav li {
        display: block;
        float: left;
        width: 50%;
    }
    .nav a {
        padding: 12px;
    }



}

.icon-menu {
    position: relative;
    top: 3px;
    line-height: 0;
    font-size: 26px;
}
/*小于519*/
@media (max- 519px) {
/*#menu{
    display: none;
}*/
    .nav li span {

        display: inline-block;
        height: 100%;
    }

    .nav a {
        padding: 8px;
    }

    .icon + span {
        margin-left: 16px;
        font-size: 5px;
    }

    .touch .nav a {
        padding: 12px;
    }
}
/*@media (max- 519px) {

    .nav li span {
        display: inline-block;
        height: 100%;
    }

    .nav a {
        padding: 8px;
    }

    .icon + span {
        margin-left: 16px;
        font-size: 12px;
    }

    .touch .nav a {
        padding: 12px;
    }
}*/
    body {
    color: #89867e;
    background: #f9f9f9;
}

a {
    color: #333;
    text-decoration: none;
}

a:hover {
    color: #fff;
}

.main,
.container > header {
    width: 100%;
    margin: 0 auto;
    padding: 32px;
}

.main {
    max-width: 1323px;
    min-height: 640px;
}

.container > header {
    text-align: center;
    font-size: 16px;
    padding: 64px 32px 48px;
    background: rgba(0,0,0,0.01);
}

.container > header h1 {
    font-size: 35px;
    line-height: 25px;
    margin: 0;
    font-weight: 300;
}

.container > header span {
    display: block;
    font-size: 60%;
    color: #ceccc6;
    padding: 0 0 9.6px 1.6px;
}


@media screen and (max- 25em) {
    .container > header {
        font-size: 75%;
    }
}

    3.制作AdMaster首页响应式导航

    主页面代码

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ADMaster</title>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/change.css">
    <script src="js/jquery-1.8.3.min.js"></script>
</head>
<body>
<div class="container">
    <header>
        <h1>ADMaster</h1>
    </header>
    <div id="maindiv">
        <nav id="menu" class="nav">
            <ul>
                <li id="one">
                    <a href="#">
                                <span class="icon">
                                    <i aria-hidden="true" class="icon-home"></i>
                                </span>
                        <span>Home</span>
                    </a>
                </li>
                <li id="two">
                    <a href="#">
                                <span class="icon">
                                    <i aria-hidden="true" class="icon-services"></i>
                                </span>
                        <span>Services</span>
                    </a>
                </li>
                <li id="three">
                    <a href="#">
                                <span class="icon">
                                    <i aria-hidden="true" class="icon-portfolio"></i>
                                </span>
                        <span>Market Lnsights</span>
                    </a>
                </li>
                <li id="four">
                    <a href="#">
                                <span class="icon">
                                    <i aria-hidden="true" class="icon-blog"></i>
                                </span>
                        <span>College</span>
                    </a>
                </li>
                <li id="five">
                    <a href="#">
                                <span class="icon">
                                    <i aria-hidden="true" class="icon-team"></i>
                                </span>
                        <span>About Us</span>
                    </a>
                </li>

            </ul>
        </nav>

</div>
</div>
<div style="text-align:center;clear:both"><br>
    <img src="image/1.png" height="26" width="26"  id="imgdis" onclick="dian()"/></div>
<script>

        var widd=document.body.clientWidth.valueOf();
        if(widd<667){
            $("#imgdis").click(function () {
                $("#maindiv").toggle();
            })
            //$("#maindiv").toggle();
    }

</script>

</body>
</html>

    css代码

    change.css

    .nav ul {
    max-width: 1240px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 32px;
    font-weight: 300;
}

.nav li span {
    display: block;
}



/* 各个背景色*/

#one{
    background-color: chocolate;
}

#two{
    background-color: darkorange;
}

#three{
    background-color: cornflowerblue;
}

#four {
   background-color: blue;
}
/*.aa{
    display: none;
}*/
#five {
    background-color: darkblue;
}

#six {
    background-color: darkslategray;
}

/* 大于800时*/
@media (min- 800px) {
   #maindiv{
       display: flex;
       width: 100%;
       justify-content: space-around;
   }
#menu{
    margin-left: auto;
}
    #imgdis{
        display: none;
    }
    .nav li {
        float: left;
        width: 16%;
        text-align: center;
    }

    .nav a {
        display: block;
        width: auto;
    }



}

@media (min-668px) and (max- 799px) {
    #imgdis{
        display: none;
    }
    .nav li {
        display: block;
        float: left;
        width: 50%;
    }
    .nav a {
        padding: 12px;
    }



}

.icon-menu {
    position: relative;
    top: 3px;
    line-height: 0;
    font-size: 26px;
}
/*小于519*/
@media (max- 667px) {

    .nav li span {

        display: inline-block;
        height: 100%;
    }

    .nav a {
        padding: 8px;
    }

    .icon + span {
        margin-left: 16px;
        font-size: 12px;
    }

    .touch .nav a {
        padding: 12px;
    }
}

    main.css

    #maindiv{
    background-color: #333333;
  /*  background-color: #333333;
    display: flex;
     100%;
    justify-content: space-around;*/
   /* align-items: center;*/
}
ul li{
    margin: 10px;
}

body {
    color: #89867e;
    background: #f9f9f9;
}

a {
    color: #333;
    text-decoration: none;
}

a:hover {
    color: #fff;
}

.main,
.container > header {
    width: 100%;
    margin: 0 auto;
    padding: 32px;
}

.main {
    max-width: 1323px;
    min-height: 640px;
}

.container > header {
    text-align: center;
    font-size: 16px;
    padding: 64px 32px 48px;
    background: rgba(0,0,0,0.01);
}

.container > header h1 {
    font-size: 35px;
    line-height: 25px;
    margin: 0;
    font-weight: 300;
}

.container > header span {
    display: block;
    font-size: 60%;
    color: #ceccc6;
    padding: 0 0 9.6px 1.6px;
}


@media screen and (max- 25em) {
    .container > header {
        font-size: 75%;
    }
}

    总结部分

     响应式布局的方式：

    1.浮动+百分比

    2.Flex布局

    值描述
    flex-grow 一个数字，规定项目将相对于其他灵活的项目进行扩展的量。
    flex-shrink 一个数字，规定项目将相对于其他灵活的项目进行收缩的量。
    flex-basis 项目的长度。合法值："auto"、"inherit" 或一个后跟 "%"、"px"、"em" 或任何其他长度单位的数字。
    auto 与 1 1 auto 相同。
    none 与 0 0 auto 相同。
    initial 设置该属性为它的默认值，即为 0 1 auto。请参阅 initial。
    inherit 从父元素继承该属性。请参阅 inherit。

    欢迎提问，欢迎指错，欢迎讨论学习信息 有需要的私聊 发布评论即可 都能回复的

      原文在博客园http://www.cnblogs.com/a782126844/有需要可以联系扣扣：2265682997
  • 相关阅读:
    KMP算法与字符串匹配问题
    贪婪算法(贪心算法)
    普里姆算法(Prim)与最小生成树问题
    克鲁斯卡尔算法(Kruskal算法)与最小生成树问题
    Dijkstra算法与最短路径问题
    SpringCloud(十一)使用actuator和dashborad、turbine对微服务进行监控
    博客美化——页面白天黑夜切换
    Spring5学习笔记——day01
    Mybatis学习笔记——day06
    Mybatis学习笔记——day05
  • 原文地址：https://www.cnblogs.com/a782126844/p/7196695.html
Copyright © 2020-2023  润新知