WEB02_Day02(下)-响应式布局、博客首页分析、博客开发

一、响应式布局

1.1 定义

　　响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式是PC端开发一套，手机端再开发一套，而使用响应式布局只要开发一套就够，就是通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容。

1.2 使用方式

　　媒体查询可以让我们根据设备显示器的特性(如视口宽度、屏幕比例、设备方向:横向或纵向)为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。

  • 超小屏幕手机设备(xs) width<768px

  • 小屏幕平板设备(sm) 768px<=width<992px

  • 中等屏幕桌面显示器(md) 992px<=width<1200px

  • 大屏幕电视(lg) width>=1200px

　　媒体查询中可用于检测的媒体特性有 width 、 height 和 color (等)。使用媒体查询， 可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。同时媒体查询也是Bootstrap中实现响应式布局的实现方式 。

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>媒体查询实现响应式布局</title>
     <style type="text/css">
         /* 超小屏幕 */
         @media (max-width:768px) {
             body {
                 background-color: red;
             }
             img {
                 width: 400px;
             }
         }
         /* 小屏幕 */
         @media (max-width:992px) and (min-width:768px) {
             body {
                 background-color: green;
             }
             img {
                 width: 600px;
             }
         }
         /* 中等屏幕 */
         @media (max-width:1200px) and (min-width:992px) {
             body {
                 background-color: blue;
             }
             img {
                 width: 800px;
             }
         }
         /* 大屏幕 */
         @media (min-width:1200px) {
             body {
                 background-color:dimgray;
             }
             img {
                 width: 1000px;
             }
         }
 ​
     </style>
 </head>
 <body>
     <!--
      超小屏幕手机设备(xs)               width<768px
      小屏幕平板设备(sm)                 768px<=width<992px
      中等屏幕桌面显示器(md)             992px<=width<1200px
      大屏幕电视(lg)                    width>=1200px
     -->
     <img src="../img/1.jpg">
 </body>
 </html>

 

二、Bootstrap中实现响应式布局

2.1 栅格系统

　　栅格系统是Bootstrap提供的一套支持响应式布局的页面布局系统，是将当前元素所在容器分为12等份,我们可以按照栅格系统提供的样式,声明当前元素占用12份中的份额,从而实现页面的布局,比传统布局方便快捷很多(不需要媒体查询)

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8">
 <title>Bootstrap Template</title>
 <!--视口/视觉窗口标签:meta, 宽度=设备宽度，初始化缩放比例1， 是否允许用户缩放页面:no -->
 <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
 <!-- 扩展对低版本IE支持,开启IE兼容模式-->
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <!-- Bootstrap核心css -->
 <link rel="stylesheet" type="text/css" href="../bootstrap3/css/bootstrap.css">
 <!-- 字体图标 -->
 <link rel="stylesheet" type="text/css" href="../bootstrap3/font-awesome-4.7.0/css/font-awesome.css"/>
 <style type="text/css">
 ​
     div {
         border: 1px solid red;
     }
    
 ​
 </style>
 </head>
 <body>
     <!-- 使用class属性设置值为row就可以开启栅格系统 -->
     <div class="row">
         <div class="col-md-6">占6份</div>
         <div class="col-md-6">占6份</div>
     </div>
     <br>
     <div class="row">
         <div class="col-md-4">占4份</div>
         <div class="col-md-4">占4份</div>
         <div class="col-md-4">占4份</div>
     </div>   
     <br>
     <div class="row">
         <div class="col-md-3">占3份</div>
         <div class="col-md-3">占3份</div>
         <div class="col-md-3">占3份</div>
         <div class="col-md-3">占3份</div>
     </div>
     <br>
     <!-- 添加class属性值为container时左右两侧留白，
         内容区域在中间显示，后期可以通过响应式布局，
         每次更改屏幕尺寸时可以优先改变空白区域空间，
         目前各大的互联网网站都是此样式
     -->
     <div class="container">
         <div class="row">
             <div class="col-md-6">占6份</div>
             <div class="col-md-6">占6份</div>
         </div>
     </div>
     <br>
     <div class="container">
         <div class="row">
             <div class="col-md-4">占4份</div>
             <div class="col-md-4">占4份</div>
             <div class="col-md-4">占4份</div>
         </div> 
     </div>  
     <br>
     <div class="container">
         <div class="row">
             <div class="col-md-3">占3份</div>
             <div class="col-md-3">占3份</div>
             <div class="col-md-3">占3份</div>
             <div class="col-md-3">占3份</div>
         </div>
     </div>
 ​
 ​
     <!-- 1:2:1 -->
     <br>
     <div class="container">
         <div class="row">
             <div class="col-md-3">占3份</div>
             <div class="col-md-6">占6份</div>
             <div class="col-md-3">占3份</div>
         </div>
     </div>
 ​
     <!-- 2:3:1 -->
     <br>
     <div class="container">
         <div class="row">
             <div class="col-md-4">占4份</div>
             <div class="col-md-6">占6份</div>
             <div class="col-md-2">占2份</div>
         </div>
     </div>
 ​
     <!-- 栅格嵌套 -->
     <br>
     <div class="container">
         <div class="row"> 
            <div class="col-md-4">占4份</div> 
            <div class="col-md-8"> 
                <div class="row"> 
                    <div class="col-md-4">4</div> 
                    <div class="col-md-4">4</div> 
                    <div class="col-md-4">4</div> 
                </div> 
            </div> 
        </div> 
    </div> 
​ 
</body> 
<!-- jQuery 1.12.4 依赖 --> 
<script type="text/javascript" src="../bootstrap3/jquery.min.js"></script> 
<!-- Bootstrap核心js --> 
<script type="text/javascript" src="../bootstrap3/js/bootstrap.js"></script> 
<!-- 图片占位，解决低版本IE不支持圆角的问题--> 
<script type="text/javascript" src="../bootstrap3/js/holder.js"></script> 
<!-- 引入T5和C3的js函数库，支持旧版浏览器--> 
<script type="text/javascript" src="../bootstrap3/js/html5shiv.min.js"></script> 
<script type="text/javascript" src="../bootstrap3/js/css3-mediaqueries.js"></script> 
<script type="text/javascript" src="../bootstrap3/js/respond.min.js"></script> 
</html>

学子商城界面重构

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8">
 <title>Bootstrap Template</title>
 <!--视口/视觉窗口标签:meta, 宽度=设备宽度，初始化缩放比例1， 是否允许用户缩放页面:no -->
 <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
 <!-- 扩展对低版本IE支持,开启IE兼容模式-->
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <!-- Bootstrap核心css -->
 <link rel="stylesheet" type="text/css" href="../bootstrap3/css/bootstrap.css">
 <!-- 字体图标 -->
 <link rel="stylesheet" type="text/css" href="../bootstrap3/font-awesome-4.7.0/css/font-awesome.css"/>
 <style type="text/css">
     #left_top {
         height: 400px;
         background-color: red;
     }
     #right_top {
         height: 400px;
         background-color: seagreen;
     }
     #left_bottom {
         height: 330px;
         background-color: skyblue;
     }
     .right_bottom {
         height: 330px;
         background-color: violet;
         border: 1px solid black;
     }
 </style>
 </head>
 <body>
     
     <div class="container">
         <div class="row">
             <div class="col-md-8" id="left_top"></div>
             <div class="col-md-4" id="right_top"></div>
         </div>
 ​
         <div class="row">
             <div class="col-md-4" id="left_bottom"></div>
             <div class="col-md-8">
                 <div class="row">
                     <div class="col-md-4 right_bottom"></div>
                     <div class="col-md-4 right_bottom"></div>
                     <div class="col-md-4 right_bottom"></div>
                 </div>
             </div>
         </div>
 ​
     </div>
 </body>
 <!-- jQuery 1.12.4 依赖 -->
 <script type="text/javascript" src="../bootstrap3/jquery.min.js"></script>
 <!-- Bootstrap核心js -->
 <script type="text/javascript" src="../bootstrap3/js/bootstrap.js"></script>
 <!-- 图片占位，解决低版本IE不支持圆角的问题-->
 <script type="text/javascript" src="../bootstrap3/js/holder.js"></script>
 <!-- 引入T5和C3的js函数库，支持旧版浏览器-->
 <script type="text/javascript" src="../bootstrap3/js/html5shiv.min.js"></script>
 <script type="text/javascript" src="../bootstrap3/js/css3-mediaqueries.js"></script>
 <script type="text/javascript" src="../bootstrap3/js/respond.min.js"></script>
 </html>

2.2 响应式栅格系统

　　栅格系统是支持响应式布局的,为我们设计响应式布局的页面提供了极大的方便,我们可以规定当前元素在不同显示设备上占用的宽度亦或显示不显示

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8">
 <title>Bootstrap Template</title>
 <!--视口/视觉窗口标签:meta, 宽度=设备宽度，初始化缩放比例1， 是否允许用户缩放页面:no -->
 <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
 <!-- 扩展对低版本IE支持,开启IE兼容模式-->
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <!-- Bootstrap核心css -->
 <link rel="stylesheet" type="text/css" href="../bootstrap3/css/bootstrap.css">
 <!-- 字体图标 -->
 <link rel="stylesheet" type="text/css" href="../bootstrap3/font-awesome-4.7.0/css/font-awesome.css"/>
 </head>
 <body>
   <div class="container">
     <div class="row">
         <div class="col-lg-6 col-md-12 col-sm-6"><img src="../wa/1.jpg"></div>
         <div class="col-lg-6 col-md-6 col-sm-6"><img src="../wa/2.jpg"></div>
         <div class="col-lg-6 col-md-6 col-sm-6"><img src="../wa/3.jpg"></div>
         <div class="col-lg-6 col-md-3 col-sm-6"><img src="../wa/4.jpg"></div>
         <div class="col-lg-4 col-md-3 col-sm-6"><img src="../wa/5.jpg"></div>
         <div class="col-lg-4 col-md-3 col-sm-6"><img src="../wa/6.jpg"></div>
         <div class="col-lg-4 col-md-3 col-sm-12"><img src="../wa/7.jpg"></div>
 ​
     </div>
   </div>
 </body>
 <!-- jQuery 1.12.4 依赖 -->
 <script type="text/javascript" src="../bootstrap3/jquery.min.js"></script>
 <!-- Bootstrap核心js -->
 <script type="text/javascript" src="../bootstrap3/js/bootstrap.js"></script>
 <!-- 图片占位，解决低版本IE不支持圆角的问题-->
 <script type="text/javascript" src="../bootstrap3/js/holder.js"></script>
 <!-- 引入T5和C3的js函数库，支持旧版浏览器-->
 <script type="text/javascript" src="../bootstrap3/js/html5shiv.min.js"></script>
 <script type="text/javascript" src="../bootstrap3/js/css3-mediaqueries.js"></script>
 <script type="text/javascript" src="../bootstrap3/js/respond.min.js"></script>
 </html>

 

三、智能博客首页分析

 

四、智能博客开发

4.1 页眉

  • 将bootstrap3、css、images、文件夹导入到vscode的资源空间中

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8">
 <title>智能博客_页眉01</title>
 <!--视口/视觉窗口标签:meta, 宽度=设备宽度，初始化缩放比例1， 是否允许用户缩放页面:no -->
 <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
 <!-- 扩展对低版本IE支持,开启IE兼容模式-->
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <!-- Bootstrap核心css -->
 <link rel="stylesheet" type="text/css" href="../bootstrap3/css/bootstrap.css">
 <!-- 字体图标 -->
 <link rel="stylesheet" type="text/css" href="../bootstrap3/font-awesome-4.7.0/css/font-awesome.css"/>
 <style type="text/css">
 ​
 </style>
 ​
 </head>
 <body>
     <!-- 页眉开始 -->
     <header>
         <!-- div元素内容居中，所有两侧留白 -->
         <div class="container">
             <!--
                 实现Power by SmartBlogs居右显示
                 1.对span元素进行右浮动
                     span {
                         float: right;
                     }
                 2.在span标签中添加class属性，值为pull-right
                 3.对div中的文本内容进行居右显示
                     div {
                         text-align: right;
                     }
             -->
             <span class="pull-right">Power by SmartBlogs</span>
         </div>
     </header>
     <!-- 页眉结束 -->
 </body>
 <!-- jQuery 1.12.4 依赖 -->
 <script type="text/javascript" src="../bootstrap3/jquery.min.js"></script>
 <!-- Bootstrap核心js -->
 <script type="text/javascript" src="../bootstrap3/js/bootstrap.js"></script>
 <!-- 图片占位，解决低版本IE不支持圆角的问题-->
 <script type="text/javascript" src="../bootstrap3/js/holder.js"></script>
 <!-- 引入T5和C3的js函数库，支持旧版浏览器-->
 <script type="text/javascript" src="../bootstrap3/js/html5shiv.min.js"></script>
 <script type="text/javascript" src="../bootstrap3/js/css3-mediaqueries.js"></script>
 <script type="text/javascript" src="../bootstrap3/js/respond.min.js"></script>
 </html>

 

五、面试题讲解

问：Java中如果对于对象中的某些字段不希望进行序列化，如何解决？

　　在Java中有一个关键字transient，当对象中的某个属性不希望进行序列化操作时，可以使用该关键字进行修饰对象属性。该关键字的作用是可以进行阻止实例化对象中那些用此关键字修饰的变量进行序列化，当使用transient关键字修饰的变量值不会被持久化和恢复。transient只能修饰变量，不能修饰类和方法。

提示：该题主要考察的是对象的序列化和反序列化。

将对象转换为字节序列，这个过程就称之为对象的序列化。将字节序列写出到文件中时，称之为是数据的持久化。将字节序列(这组字节)再转换成对应的对象，这个过程就称之为是反序列化。

posted @ 2021-08-29 10:06  Coder_Cui  阅读(89)  评论(0)  编辑  收藏  举报