首页 > 代码库 > ACCP8.0Y2Web前端框架与移动应用开发第1章响应式布局

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

2024-10-29 09:38:02   206人阅读

一.单词部分

①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         /*width: 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-width: 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-width:520px) and (max-width: 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-width: 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-width: 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-width: 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-width: 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-width:668px) and (max-width: 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-width: 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;
    width: 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-width: 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

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


联系
我们