Python学习-day14-前台总结
以下博客为转载
http://www.cnblogs.com/evilliu/p/5760232.html
一：针对上节作业：
1：
实现：
code：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>test</title>
6 <style>
7 .a{
8 border: 0;
9 border-left: solid red 1px;
10 border-right: solid red 1px;
11 height: 16px;
12 float: left;
13 margin-bottom: 0;
14 width: 40px;
15 text-align: center;
16 }
17 .b{
18 width: 85px;
19 height: 19px;
20 border: solid red 1px;
21 }
22 a{
23 text-align: center;
24 display: inline-block;
25 width: 20px;
26 line-height: 20px;
27 margin: 0;
28 float: left;
29 }
30 </style>
31 </head>
32 <body>
33 <div class="b">
34 <a>+</a>
35 <input class="a" type="text" value="1"/>
36 <a>-</a>
37 </div>
38 </body>
39 </html>
效果：
需要注意:
让标签周围外距为0：margin:0 auto;
让标签内的文本水平居中：text-align: center；
让标签垂直居中：line-height: 20px;
在display: inline-block;中默认有3px的边距。解决方法float。
2：改造标签;我们通过改造标签的属性来改造标签的样式。
3：<img>标签默认带有边框。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>test</title>
6 </head>
7 <body>
8 <a href="http://www.jd.com">
9 <img src="15.jpg">
10 </a>
11 </body>
12 </html>
如上代码在低版本的IE 会出现边框。需要加入如下样式。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>test</title>
6 <style>
7 img{
8 border: 0;/*需要加入该样式才可以*/
9 }
10 </style>
11 </head>
12 <body>
13 <a href="http://www.jd.com">
14 <img src="15.jpg">
15 </a>
16 </body>
17 </html>
二:html标签的补充
<img>标签的补充。
1）当图片不显示的时候，往往会出现显示一些波浪号等其他的符号。这时候用alt属性，当图片不显示的时候，会显示alt的内容。
code：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>test</title>
6 </head>
7 <body>
8 <img src="1.jpg" alt="图片缺失">
9 </body>
10 </html>
效果：
各个标签的默认值补充：
1）<input> text类型标签的默认值:
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>test</title>
6 </head>
7 <body>
8 <span>
9 <input type="text" value="1" />
10 </span>
11 </body>
12 </html>
效果：
2）<input> radio类型的默认值：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>test</title>
6 </head>
7 <body>
8 <span>
9 男：<input type="radio" name="a" checked="checked" />
10 女：<input type="radio" name="a" />
11 </span>
12 </body>
13 </html>
效果：
3）<input>标签checkbox类型的默认值。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>test</title>
6 </head>
7 <body>
8 <span>
9 basketball：<input type="checkbox" name="fav" checked="checked" />
10 football：<input type="checkbox" name="fav" />
11 swimming：<input type="checkbox" name="fav" checked="checked"/>
12 pingbang：<input type="checkbox" name="fav" />
13 </span>
14 </body>
15 </html>
效果：
4）select标签的默认值。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>test</title>
6 </head>
7 <body>
8 <span>
9 <select>
10 <option >北京</option>
11 <option>大连</option>
12 <option selected="selected">沈阳</option>
13 </select>
14 </span>
15 </body>
16 </html>
默认情况显示的是第一个标签。
添加默认值。修改显示。
5）<textarea>默认值：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>test</title>
6 </head>
7 <body>
8 <span>
9 <textarea>
10 123
11 </textarea>
12 </span>
13 </body>
14 </html>
效果：
总结：
1：<input>标签的默认值，通过设置value(text)。或者通过checked=checked(radio checkbox)
2：<select>标签的默认值，通过selected=selected来设置。
3：<textarea>通过在标签之间设置值来设置默认值。
三：Css补充：
1：当我们的需求一个样式要全局生效而不是被其他同样的样式覆盖掉，需要使用!important.
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>test</title>
6 <style>
7 .a{
8 color: red;
9 }
10 .b{
11 color:black;
12 }
13 </style>
14 </head>
15 <body>
16 <span class="a b">just test</span>
17 </body>
18 </html>
效果：
这种优先级下面的优先级高于上面的优先级。
用!important来增加 class="a"的优先级。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>test</title>
6 <style>
7 .a{
8 color: red !important;
9 }
10 .b{
11 color:black;
12 }
13 </style>
14 </head>
15 <body>
16 <span class="a b">just test</span>
17 </body>
18 </html>
效果：
应用场景：当我们要求隐藏标签的时候，使用display:none的时候，我们希望在使用这个样式的时候，就是隐藏标签。而不是被display:block等覆盖，可以使用display:none !important;来解决这个问题。
2）属性选择器：我们自定义属性选择器，来查找对应的标签。通过[]形式查找。
code：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>test</title>
6 <style>
7 .a[cc=evil]{
8 color:firebrick;
9 }
10 </style>
11 </head>
12 <body>
13 <div class="a" cc="tom">just test</div>
14 <div class="a" cc="evil">just test</div>
15 <div class="a" cc="jack">just test</div>
16 <div class="a" cc="evil">just test</div>
17 </body>
18 </html
效果：
3)在使用width百分比的时候，需要注意一个问题：在定义百分比的时候，需要在外层定义这个标签的宽度。才可以使用百分比。
问题：
内容溢出.当窗口变小的时候。
采用外部标签定义宽度来解决。
底端出现左右拉取的横条。
代码：
1 <div class="a" style="width: 1200px ">
2 <div class="a" style="width: 20%;">> </div>
3 <div class="v" style="width: 80%;">>dadadadaddadadadad
4 dadadadadadadadaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
5 daaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaad
6 daaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
7 </div>
注意：在使用宽度的百分比的时候需要在外部标签定义标签的长度。
4）对于在滑动网页的时候，标题栏一直在头部的网页实现方法：
利用postion的fixed 以及top:0 left:0 right:0
通过top:0,left:0,right:0来拉取宽度，而不是通过我们定义宽度。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>test</title>
6 <style>
7 .a{
8 /*width: 2200px; 注意不需要定义宽度*/
9 position: fixed;
10 top: 0;
11 margin: 0 auto;
12 left: 0;
13 right: 0;
14 height: 50px;
15 background-color: red;
16 color:black;
17 line-height: 50px;
18 padding-left: 5px;
19 }
20 .c{
21 float: left;
22 height: 3500px;
23 margin-top: 50px;
24 color: black;
25 }
26
27 </style>
28 </head>
29 <body>
30 <div class="a">
31 标题一 标题二 标题三
32 </div>
33 <div class="c">
34 热点
35 </div>
36
37 </body>
38 </html>
5）实现输入框左边或者右边有图片。如下效果：
code：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>test</title>
6 <style>
7 .a{
8 width: 200px;
9 position: relative;
10 height: 37px;
11 }
12 .b{
13 width: 150px;
14 /*border: 0;*/
15 height: 35px;
16 line-height: 37px;
17 padding-right: 50px;
18 }
19 .c{
20 position: absolute;
21 right: 0;
22 top:0;
23 height: 37px;
24
25 }
26 </style>
27 </head>
28 <body>
29 <div class="a">
30 <input class="b" type="text" />
31 <img class="c" src="2.png">
32 </div>
33 </body>
34 </html>
效果：
实现核心思想：通过postion：relative absolute 实现一个标签相对另一个标签的位置。位置通过 top:0 、left:0、right:0等其中2个属性确定位置。正方形或者长方形确定其中2个边位置那形状也确定了。！！！！
6）对于写html网页的时候。建议如下分以下目录：
1 目录介绍
2 ├── App
3 │ ├── *.html#存放html文件
4 │
5 │
6 ├── css
7 │ ├── *.css#存放css文件。
8 │
9 ├── js
10 │ ├── *.js#存放js文件。
11 │
12 ├── picture
13 │ ├── #存放图片。
7)在使用图标的时候，可以使用插件。
Font Awesome
下载地址:http://fontawesome.io/
使用方式：解压到css目录中。注意css目录下有2个文件：
其中min文件是压缩文件，里面的内容由一行组成。在调试过程中不建议使用min，以方便查看样式。在上线的时候使用min。
使用图标：点击官网的icons或者访问：http://fontawesome.io/icons/
查找对应图标。并点击。查看样式css代码。比如：
点击查看：
code：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>test</title>
6 <link rel="stylesheet" href="font-awesome-4.6.3/css/font-awesome.css"/><?--引用插件css文件-->
7 <style>
8 .c{
9 color: red;/*给引用的样式添加新的样式*/
10 }
11 </style>
12 </head>
13 <body>
14 <i class="fa fa-leaf c" aria-hidden="true"></i><!--注意class引用多个样式-->
15 </body>
16 </html>
效果：
8）对于float实现子标签飘起来：
以后再使用float的时候 ，网页需要有如下部分。好处自动撑起背景色。因为高度的不确定性。
1 .clearfix:after{
2 content: '.';/*.撑起背景色*/
3 display:block;/*默认是内联标签*/
4 clear: both;/*让子div float起来*/
5 visibility: hidden;/*隐藏.*/
6 height: 0;/*让原先的.占有高度变为0*/
7
8 }
9 <div class="clearfix">
10 <div class="inner" style="float: left">OK</div>
11 <div class="inner1"style="float: left">good</div>
12 </div>
code:需要注意的是：背景色是在clearfix中定义的。不是在after中定义的。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>test</title>
6 <style>
7 .clearfix{
8 background-color: red;
9 }
10 .clearfix:after{
11 content: '.';/*.撑起背景色*/
12 display:block;/*默认是内联标签*/
13 clear: both;/*让子div float起来*/
14 visibility: hidden;/*隐藏.*/
15 height: 0;/*让原先的.占有高度变为0*/
16
17 }
18 .inner{
19 float: left;
20
21 }
22 .inner1{
23 float: left;
24 height: 50px;
25 background-color: #EEEE00;
26 }
27 </style>
28 </head>
29 <body>
30 <div class="clearfix">
31 <div class="inner">OK</div>
32 <div class="inner1">good</div>
33 </div>
34 </body>
35 </html>
效果：
9）尖角的图标的形成。
code：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 .a{
8 display: inline-block;
9 border-left: solid red 15px;
10 border-right: solid gold 15px;
11 border-bottom: blue solid 15px;
12 border-top: solid black 15px;
13 }
14 </style>
15 </head>
16 <body>
17 <div class="a"></div>
18 </body>
19 </html>
效果：
如果想取其中的一一个三角，可以用transparent透明色。来遮盖其他三角。
code：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 .a{
8 display: inline-block;
9 border-left: solid transparent 15px ;
10 border-right: solid transparent 15px;
11 border-bottom: blue transparent 15px;
12 border-top: solid black 15px;
13 }
14 </style>
15 </head>
16 <body>
17 <div class="a"></div>
18 </body>
19 </html>
效果：
10）后台管理页面。利用absolute来确定各个div的位置。
注意：给body标签添加margin:0 auto保证主体部分没有边框！！！！
后台管理的布局：
code：利用absolute来固定位置。以及overflow 当内容溢出<div>的范围的时候，自动给内容创建拉动的动作条。保证菜单不超出范围。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 .pd_header{
8 height: 45px;
9 background-color: cornflowerblue;
10 line-height: 45px;
11 padding-left: 15px;
12 }
13 body{
14 margin: 0 auto;
15 }
16 .pd_body{
17 width: 200px;
18 background-color: blanchedalmond;
19 position: absolute;
20 top:45px;
21 left: 0;
22 bottom: 0;
23
24 }
25 .pd_content{
26 position: absolute;
27 top:45px;
28 left:202px;
29 bottom: 0;
30 right:0;
31 background-color: #EEEE00;
32 overflow: scroll;/*注意这个样式，当内容溢出的时候给内容创建一个拉动的动作条保证菜单不超出*/
33 }
34 </style>
35 </head>
36 <body>
37 <div class="pd_header">标题一</div>
38 <div class="pd_body"></div>
39 <div class="pd_content">
40 dadadadasdad<br/>
41 dadadadasdad<br/>
42 </div>
43 </body>
44 </html>
效果：
11)模拟对话框：
首先看下对话框的结构：
解释：
1）底层上面有按钮，当用户点击添加按钮的时候，会弹出对话框。当对话框出现的时候，底层按钮，用户不可以进行点击。所以需要遮罩层。
2）遮罩层：主要作用是当用户点击添加按钮的时候，用户的不可以点击添加按钮。
设计思想：当用点击添加按钮，按钮不可以点击，对话框弹出。当用户不点击按钮的时候，遮罩层和对话框是被隐藏的（display:none）。而且要保证遮罩层要在对话框下面(z-index)以及遮罩层的透明度（opacity 0是全透明0-1之间）。让
用户点击按钮，弹出对话框的时候可以看到添加按钮。
code：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 .hide{
8 display: none;
9 }
10 .fist{
11 height: 2000px;
12 }
13 .second{
14 position: fixed;
15 top:0;
16 left: 0;
17 right: 0;
18 bottom: 0;
19 background-color: black;
20 opacity: 0.4;
21 z-index: 11;
22 }
23 .modle{
24 height: 200px;
25 width: 400px;
26 background-color: #eeeeee;
27 position: fixed;
28 top: 50%;
29 left: 50%;
30 margin-left: -200px;
31 margin-top: -100px;
32 z-index: 12;
33 }
34 .text{
35 height: 200px;
36 width: 400px;
37 padding-right: 0;
38 padding-bottom: 0;
39 opacity:1;
40 color: red;
41
42 }
43 </style>
44 </head>
45 <body>
46 <div><input type="button" value="提交"/></div>
47 <div class="fist"> </div>
48 <div class="second "></div>
49 <div class="modle ">
50 <input class="text" type="text"/>
51 </div>
52 <div