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