Python学习-day14-前台总结 HTML和CSS总结
如下博客为转载css
http://www.cnblogs.com/evilliu/p/5760232.htmlhtml
HTML和CSS总结ide
一：针对上节做业：布局
1：post
实现：url
code：spa
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 class