0404 页面背景设置、div放在页面的正中间、子div放在父div里面（要求他们的正中心重合）、【模拟登陆页面】

1 页面背景图片设置

　　1.1 页面设置时可能遇到的问题

　　　　为一个页面设置好背景图片后，随着浏览器窗口的大小变化，背景图片就变形啦，不再是原图的缩放版本

　　1.2 如何解决

　　　　利用一个div来代替页面，即：利用一个div，让这个div长度和宽度都和浏览器相同，给这个div添加背景就相当于给页面添加了背景

　　1.3 解决步骤

　　　　1.3.1 添加绝对定位，相对于浏览器的位置为（0,0）

　　　　1.3.2 设置div的宽高为浏览器的宽高

　　　　1.3.3 设置div的背景图片，不平铺，大小为div的大小

 1 <!DOCTYPE html><!--  给浏览器解析，我这个文档是html文档 -->
 2 <html>
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5         <meta name="description" content="" />
 6         <meta name="Keywords" content="" />
 7         <title></title>
 8         <link rel="shortcut icon" href="study.ico">
 9     <style>
10         *{
11             margin: 0;
12             padding: 0;
13         }
14         #bj{
15             /*绝对定位到原点*/
16             position: absolute; 
17             top: 0px;
18             left: 0px;
19 
20             /*设置div的宽高为浏览器的宽度和高度*/
21             width: 100%;
22             height: 100%;
23             
24             /*设置背景图片*/
25             background-image: url(../img/bj1.jpg); 
26             background-repeat: no-repeat; /*不平铺*/
27             background-size: 100% 100%; /*大小为最大（即：和div相同）*/
28         }
29     </style>
30 </head>
31 
32 <body>
33     <div id="bj"></div>
34 </body>
35 </html>

页面背景图片源代码

2 怎么将一个div放在页面的正中间

　　2.1 要求

　　　　页面的中心要和div的中心重合

　　2.2 设计步骤

　　　　2.2.1 设定div的宽高以及背景图片

　　　　2.2.2 添加绝对定位，设定div相对于浏览器的位置为浏览器的宽高的50%

　　　　2.2.3 将div的坐标原点进行移动

 1 <!DOCTYPE html><!--  给浏览器解析，我这个文档是html文档 -->
 2 <html>
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5         <meta name="description" content="" />
 6         <meta name="Keywords" content="" />
 7         <title>测试页面</title>
 8     <style>
 9         *{
10             margin: 0;
11             padding: 0;
12         }
13         #box{
14             /*设置宽高、背景颜色*/
15             height: 300px;
16             width: 500px;
17             background-color: skyblue;
18             
19             /*设置绝对定位*/
20             position: absolute;
21             top: 50%;
22             left: 50%;
23 
24             /*将div的原点坐标进行移动*/
25             transform: translate(-50%, -50%);
26             /*transform : 设置或检索对象的转换*/
27             /*translate()： 指定对象的2D translation（2D平移）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0*/
28         }
29     </style>
30     <link rel="shortcut icon" href="study.ico">
31 </head>
32 
33 <body>
34     <div id="box"></div>
35 </body>
36 </html>

将div放在页面的正中心

3 怎么将子div放在父div中

　　3.1 要求

　　　　子div和父div的正中心重合

　　3.2 设计步骤

　　　　3.2.1 设置子父div的宽度和高度，以及背景颜色

　　　　3.2.2 在子div的同一级添加一个span标签

　　　　3.2.3 将子div和添加的span标签设置为同一行的块，并且都设置垂直居中

　　　　3.2.4 设置父div为水平居中

 1 <!DOCTYPE html><!--  给浏览器解析，我这个文档是html文档 -->
 2 <html>
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5         <meta name="description" content="" />
 6         <meta name="Keywords" content="" />
 7         <title>测试页面</title>
 8     <style>
 9         *{
10             margin: 0;
11             padding: 0;
12         }
13         #fu{
14             height: 400px;
15             width: 400px;
16             background-color: skyblue;
17 
18             text-align: center;
19         }
20         #son{
21             height: 200px;
22             width: 200px;
23             background-color: blue;
24 
25             display: inline-block;
26             vertical-align: middle;
27         }
28         #fu span{
29             height: 100%;
30             display: inline-block;
31             vertical-align: middle;
32         }
33     </style>
34     <link rel="shortcut icon" href="study.ico">
35 </head>
36 
37 <body>
38     <div id="fu">
39         <div id="son"></div>
40         <span></span>
41     </div>
42 </body>
43 </html>

父div里面放子div

4 综合运用

  1 <!DOCTYPE html><!--  给浏览器解析，我这个文档是html文档 -->
  2 <html>
  3 <head>
  4     <meta charset = "utf-8" /> <!-- 让浏览器识别文档的字符编码集 -->
  5     <meta name="Keywords" content="" /> <!-- 关键字：在百度中通过关键字能搜索到这个页面 -->
  6     <mata name = "description" content = "" /> <!-- 描述：对网页的一个简单描述（80字以内） -->
  7     <title>模拟登陆页面</title>
  8     <link rel="shortcut icon" href="study.ico">
  9     <style>
 10         *{
 11             margin: 0;
 12             padding: 0;
 13         }
 14 
 15         /*利用一个div，让这个div长度和宽度都和浏览器相同，给这个div添加背景就相当于给页面添加了背景*/
 16         #index{ 
 17             /*定位操作*/
 18             position: absolute;
 19             left: 0px;
 20             width: 0px;
 21             
 22             /*div大小设置：设置成铺满整个页面*/
 23             width: 100%;
 24             height: 100%;
 25 
 26             /*设置背景图片*/
 27             background-image: url("../img/背景2.jpg");
 28             background-repeat: no-repeat; /*不平铺*/
 29             background-size: 100% 100%; /*背景大小设置：此处设置成同div大小相同*/
 30 
 31         }
 32         #login_index{
 33             height: 201px;
 34             width: 329px;
 35             /*background-color: #4589CB;*/
 36             background-image: url("../img/lanse.jpg");
 37             background-size: 100% 100%;
 38 
 39             /*让login在页面正中间显示*/
 40             position: absolute;     
 41             top: 50%;
 42             left: 50%;
 43             transform: translate(-50%, -50%);
 44                 
 45             /*设置背景图片的透明度*/
 46             opacity : 0.5;
 47 
 48             text-align: center;
 49 
 50             
 51         }
 52         #login{
 53             width: 261px;
 54 
 55             vertical-align: middle;
 56             display: inline-block;
 57             /*background-color: red;*/
 58 
 59             text-align: center;
 60 
 61         }
 62 
 63         #login_index span{
 64             height: 100%;
 65             display: inline-block;
 66             vertical-align: middle;
 67         }
 68         span{
 69             color: #1191EC;
 70             font-weight: bold;
 71         }
 72         #submit{
 73             color: #1191EC;
 74             font-weight: bold;
 75         }
 76         #reset{
 77             color: red;
 78             font-weight: bold;
 79         }
 80         #title{
 81             color: #4794B7;
 82             font-weight: bold;
 83             font-family: 楷体;
 84             font-size: 60px;
 85 
 86             position: absolute;
 87             top: 180px;
 88             left: 50%;
 89             transform: translate(-50%, 0);
 90         }
 91 
 92     </style>
 93 </head>
 94 
 95 <body>
 96     <div id="index">
 97         <span id="title">模拟登录页面</span>
 98         <div id="login_index">
 99             <div id="login">
100                 <form action="#" method="get">
101                     <span>账&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 号 ：</span><input type="text" name="username" />
102                     <br /><br />
103                     <span>密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 码 ：<input type="password" name="password" />
104                     <br /><br />
105                     <span>确认密码：</span><input type="password" name="password2" />
106                     <br /><br />
107                     <input type="submit" id="submit" value="登&nbsp;&nbsp;录" />
108                     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
109                     <input type="reset" id="reset" value="重&nbsp;&nbsp;置" />
110                 </form>
111             </div>
112             <span></span>
113         </div> 
114     </div>
115 </body>
116 </html>

模拟登陆页面

　　需优化的地方

　　　　》表单的提交方式使用的是get，不安全；需要改成post提交方式

　　　　》随着页面的放大、缩小，登良路系统那几个字的位置不是相对于浏览器变化的，不利于用户体验；将内容放到一个div里面，再将这个div放到那个永远位于浏览器页面正中心位置的div里面就可以解决啦

  1 <!DOCTYPE html><!--  给浏览器解析，我这个文档是html文档 -->
  2 <html>
  3 <head>
  4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5     <meta name="description" content="" />
  6     <meta name="Keywords" content="" />
  7     <title>模拟登陆页面</title>
  8     <link rel="shortcut icon" href="../img/study.ico">
  9     <style>
 10         *{
 11             margin: 0;
 12             padding: 0;
 13         }
 14 
 15         /*利用一个div，让这个div长度和宽度都和浏览器相同，给这个div添加背景就相当于给页面添加了背景*/
 16         #index{ 
 17             /*定位操作*/
 18             position: absolute;
 19             left: 0px;
 20             width: 0px;
 21             
 22             /*div大小设置：设置成铺满整个页面*/
 23             width: 100%;
 24             height: 100%;
 25 
 26             /*设置背景图片*/
 27             background-image: url("../img/背景2.jpg");
 28             background-repeat: no-repeat; /*不平铺*/
 29             background-size: 100% 100%; /*背景大小设置：此处设置成同div大小相同*/
 30 
 31         }
 32         #login_index{
 33             height: 201px;
 34             width: 329px;
 35             /*background-color: #4589CB;*/
 36             background-image: url("../img/lanse.jpg");
 37             background-size: 100% 100%;
 38 
 39             /*让login在页面正中间显示*/
 40             position: absolute;     
 41             top: 50%;
 42             left: 50%;
 43             transform: translate(-50%, -50%);
 44                 
 45             /*设置背景图片的透明度*/
 46             opacity : 0.5;
 47 
 48             text-align: center;
 49 
 50             
 51         }
 52         #login{
 53             width: 261px;
 54 
 55             vertical-align: middle;
 56             display: inline-block;
 57             /*background-color: red;*/
 58 
 59             text-align: center;
 60 
 61         }
 62 
 63         #login_index span{
 64             height: 100%;
 65             display: inline-block;
 66             vertical-align: middle;
 67         }
 68         span{
 69             color: #1191EC;
 70             font-weight: bold;
 71         }
 72         #submit{
 73             color: #1191EC;
 74             font-weight: bold;
 75         }
 76         #reset{
 77             color: red;
 78             font-weight: bold;
 79         }
 80         #title{
 81             color: #4794B7;
 82             font-weight: bold;
 83             font-family: 楷体;
 84             font-size: 60px;
 85 
 86             /*position: absolute;
 87             top: 180px;
 88             left: 50%;
 89             transform: translate(-50%, 0);*/
 90         }
 91 
 92         #info{
 93             width: 380px;
 94             height: 60px;
 95 
 96             position: absolute;
 97             top: -32%;
 98             left: -8%;
 99 
100             text-align: center;
101             line-height: 60px;
102         }
103 
104     </style>
105 </head>
106 
107 <body>
108     <div id="index">
109         
110         <div id="login_index">
111             <div id="info"><span id="title">庠序登录系统</span></div> <!-- 改进的地方 -->
112             <div id="login">
113                 <form action="#" method="get">
114                     <span>账&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 号 ：</span><input type="text" name="username" />
115                     <br /><br />
116                     <span>密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 码 ：<input type="password" name="password" />
117                     <br /><br />
118                     <span>确认密码：</span><input type="password" name="password2" />
119                     <br /><br />
120                     <input type="submit" id="submit" value="登&nbsp;&nbsp;录" />
121                     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
122                     <input type="reset" id="reset" value="重&nbsp;&nbsp;置" />
123                 </form>
124             </div>
125             <span></span>
126         </div> 
127     </div>
128 </body>
129 </html>

优化后的登录系统页面

posted @ 2017-05-10 21:42 寻渝记阅读(296) 评论(0) 收藏举报

刷新页面返回顶部

0404 页面背景设置、div放在页面的正中间、子div放在父div里面（要求他们的正中心重合）、【模拟登陆页面】

1 页面背景图片设置

1.1 页面设置时可能遇到的问题

1.2 如何解决

1.3 解决步骤

2 怎么将一个div放在页面的正中间

2.1 要求

2.2 设计步骤

3 怎么将子div放在父div中

3.1 要求

3.2 设计步骤

4 综合运用

公告

　　1.1 页面设置时可能遇到的问题

　　1.2 如何解决

　　1.3 解决步骤

　　2.1 要求

　　2.2 设计步骤

　　3.1 要求

　　3.2 设计步骤