第10&11天--html、css

  1 前端课程：
  2 
  3     1.后面要用到
  4     2.把前面学习的一些内容（数据）（静态数据） 展示到前端，给用户看 浏览器
  5     3.增加交互
  6     4.增加用户体验
  7     
  8     前端工程师主要工作：
  9         1.html5页面 web移动端页面
 10         2.跟后端交互（数据）
 11         3.游戏的h5
 12         4.切图（ui干掉了）
 13         5.nodejs（后端语言）
 14 课程安排：
 15     前端三大语言：
 16     1.HTML
 17     2.CSS
 18     3.JS
 19 
 20     4.jQuery  一个模块就是一个py文件  一个js文件就是一个模块  jquery.js
 21     5.Bootstrap  HTML+CSS+JS +JQUERY
 22 
 23 
 24 
 25 前端自行补充内容：
 26     1.响应式
 27     2.移动端
 28     3.nodejs
 29     4.前端三大框架：
 30        1.react 2.angular 3.vue
 31         
 32 Django web框架
 33 
 34 
 35 今日内容：
 36     html标签
 37     css
 38     结构：html。表示：css。行为：Javascript。
 39     
 40     
 41     **************html标签分类********************************
 42     块级标签：==>blockdiv p ul ol dl
 43     （1）独占一行
 44     （2）可以设置宽高
 45     （3）如果不设置宽，宽度是浏览器的100%
 46     
 47     行内标签: a span ==》inline
 48     (1)在一行内显示
 49    （2）不能设置宽 高
 50     （3）如果不设置宽高，默认是内容的宽高
 51     
 52     行内块标签：inline-block
 53     （1）在一行内显示
 54     （2）可以设置宽高
 55     
 56     
 57     display: inline|block|none|inline-block；
 58     
 59     
 60     从学习p的第一天开始，就要死死记住：p标签是一个文本级标签，p里面只能放文字、图片、表单元素。
 61 
 62 其他的一律不能放。
 63     
 64     要想实现并排元素显示： 必须要浮动，但是浮动会带来问题，所以记得要浮动必须要清除浮动
 65     
 66     
 67     
 68     小马哥
 69     山东潍坊人
 70     四年的时间（ios、web）
 71     
 72     
 73     上午内容回顾：
 74      html中的一堆标签：
 75      
 76      行内标签：display:inline
 77         a:超链接 href：连接资源地址 title:所有的标签中都有title属性
 78         span: 小的区域
 79         i：
 80         em:
 81         strong:
 82         
 83         
 84         (1)在一行内显示 
 85         (2)不能设置宽高
 86         (3)它的宽和高是内容的宽高
 87      
 88         行内块标签：display:inline-block
 89         img    、input
 90         (1)在一行内显示
 91         (2)可以设置宽高
 92         
 93      块级标签：
 94         div  p  
 95         (1)独占一行
 96         (2)可以设置宽高
 97         (3)如果不设置宽度，默认是父盒子的100%宽
 98      
 99      
100      html+css 没有逻辑可言
101      css就是带你们挖坑 填坑 跳进坑（开个玩笑啦）
102      
103      （1）下午内容介绍：
104      ul:无序列表 它的孩子只能li。还有ol dl。dl中只能是dd和dt
105      
106      
107      
108      table  border=‘1‘    更细的边框线
109       tr  行
110         td 单元格的数据
111         
112      form表单标签
113       action: 提交的地址
114       method：提交的方式
115       
116       表单控件：
117        input 
118         属性：type
119                   text:普通的文本
120                   password：密码的文本
121                   radio:单选框
122                   checkbox:多选框
123                   file：上传文件
124        select: 下拉列表
125            option：下拉列表的每一个选项
126        textarea：多行文本输入框  rows:行数  cols:列数
127         
128        所有的表单控件中都有name属性，这个name属性与服务端有很大的联系。
129         
130        
131        前端工具：
132         自行百度脑补
133         gulp
134         webpack
135         
136     css知识点介绍：
137     
138     1.css的三种引入方式
139        行内样式  
140        内接样式
141        外接样式
142           链接式
143           导入式
144           
145     2.基础选择器
146         类选择器
147         id选择器
148         标签选择器
149         通配符选择器
150     3.高级选择器
151         后代选择器
152         子代选择器
153         组合选择器
154         交集选择器
155     4.选择器补充
156         a标签的伪类选择器
157         伪元素选择器（在博客上有，大家先看一下）
158     5.选择器的继承性和层叠性
159     
160     6.选择器权重问题处理
161     
162     7.盒模型和盒模型的计算
163     
164     8.讲了一点浮动的实现，但是有坑，下周详细讲这块内容
165     
166     
167     
168     今日作业：
169     1.百度注册页面实现
170     2.小米顶部栏实现
171     
172     
173     预习：
174     http://www.cnblogs.com/majj/p/9039830.html 浮动

 1 回顾：
 2 html：语义化的标签
 3 div：块级标签 将页面进行分割
 4 
 5 span：行内标签
 6 img
 7 
 8 ul ol dl 它的孩子只能是li
 9 
10 a：超链接标签 href：链接地址 路径一定要写相对的 ./
11 
12 table
13 form ：与后端进行交互常用
14     input
15 思维导图！！！
16 p：文本级标签 p a span i em 只能放文本、图片、表单元素
17 排版标签：div、ul、ol、li
18 
19 行内标签：文本级标签中除了p，其它标签都是行内标签（行内块标签）
20 块级标签：所有的排版标签都是块级标签，再加上p
21 *****************display、浮动、定位、z-index
22 行内标签：display：inline;    .点是行内标签
23     （1）在一行内显示
24     （2）不能设置宽高
25     （3）它的宽和高是内容的宽高
26 块级标签：display:block;
27     （1）独占一行
28     （2）可以设置宽高
29     （3）它的宽是父盒子的宽度100%；
30 行内块标签：img input   display:inline-block;
31      （1）在一行内显示
32      （2）可以设置宽高
33      通过display属性对标签进行转化  none|inline-block|block
34 display：none 当前盒子不显示（隐藏）
35 
36 
37 css选择器：
38 基础选择器：
39     标签选择器：选择标签的‘共性’，而不是特性 div{}、ul{}、ol{}、form{}
40     类选择器：.box{}
41     id选择器：#box{} 只能选择特性，主要是为了js
42     *通配符选择器：重置样式
43 
44 高级选择器：
45     后代选择器（儿子、孙子...）
46     div p{}
47     子代选择器（儿子）
48     div>p{}
49     组合选择器：
50     div，ul，dl，form{}
51     交集选择器：第一个选择器是标签选择器，第二个选择器是类选择器
52     两个标签中间的一部分
53     form input.active{
54         width:200px;
55     }      //012 id 类 标签
56     form input{}    //002
57     伪类选择器：‘爱恨准则’
58     a:hover{}
59     伪元素选择器：p:first-letter{}  p:before{content:‘lijie‘;}  before、after里一定要加content
60     p:after{content:‘.‘; }------解决浮动带来的问题
61     p::after{
62         /*解决浮动带来的问题*/
63         content:‘‘;
64         display: block;
65         /*width: 100px;
66         height: 100px;
67         background-color: red;*/
68         visibility: hidden;
69         height: 0;
70         }
71 
72     权重问题： 继承性 层叠性
73     数数的问题
74 
75     行内的样式>内接样式>外接
76     权重问题比较：id>类>标签   （100>010>001）
77     继承来的属性权重为0，如果权重都为0，谁描述的近谁优先
78 #    总结：
79 # 1.先看标签元素有没有被选中，如果选中了，就数数 （id,class,标签的数量） 谁的权重大 就显示谁的属性。权重一样大，后来者居上
80 # 2.如果没有被选中标签元素，权重为0。
81 # 如果属性都是被继承下来的 权重都是0 。权重都是0:"就近原则" ： 谁描述的近，就显示谁的属性
82 
83 继承：
84 例子  line-height=100px; ‘文本的行高‘
85 置灰的都不是继承来的
86 
87 记住：有一些属性是可以继承下来 ： color 、 font-*、 text-*、line-* 。主要是文本级的标签元素。
88 但是像一些盒子元素属性，定位的元素（浮动，绝对定位，固定定位）不能继承。
89 
90 盒模型：标准文档流
91 margin：调整兄弟之间的距离
92 padding：调整父子标签之间的位置，注意减width或height
93 
94 content（width,height）--padding（内边距）--border（边框）---margin
95 #ajax技术：预习

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5     <style type="text/css" media="screen">
 6         *{
 7             padding:0;
 8             margin: 0;
 9         }
10         div{
11             width: 200px;
12             height: 100px;
13             background-color: green;
14             color: red;
15             font-size: 20px;
16             text-align: center;
17             /*文本的行高*/
18             line-height: 100px;
19         }
20         /*p{
21             background-color: yellow;
22         }*/
23     </style>
24 </head>
25 <body>
26     <div>
27         <p>德国</p>
28     </div>
29     
30 </body>
31 </html>

 1 作业讲解：
 2 1.注意结构
 3 css
 4 font
 5 img
 6 js
 7 mi_index
 8 2.加注释，命名规范
 9 3.*重置样式
10 4.搜索内容位置，加padding
11 5.边框：border：none  border：1px solid red;

 1 1.坑一：margin垂直方向塌陷问题：   需要只设置一个盒子
 2 当设置第一个盒子为margin-bottom:50px;
 3 第二个盒子为margin-top:100px;那么小的margin会掉到大的magin中，这就是margin塌陷
 4 
 5 水平方向上不会产生塌陷问题     
 6 ‘奇技淫巧’
 7 
 8 2.标准文档流 三个特性;空白折叠；高矮不齐、底边对齐；自动换行，一行写不满换行写--记住！
 9 3.脱离标准文档流：浮动、绝对定位、固定定位-------记住！
10 4.浮动：--听课！！12:10-12：30
11 浮动的现象：----背过！！！
12     1.脱标：脱标的元素不在标准流下占位置
13     浏览器认为第一个盒子不是标准文档流的盒子，认为第二个盒子为标准文档流的盒子
14     2.浮动的元素互相贴靠
15     3.浮动的元素字围效果（一般使用是字围绕图片）
16     第一个元素浮动，第二个元素不浮动，那么第二个元素的文字会围绕着第一个浮动元素显示
17     看例子
18     
19     4.凡是脱标（浮动、绝对定位、固定定位）的元素，不区分行内标签还是块标签，宽高可以任意设置
20 浮动永远不是一个盒子在浮动，要浮动一起浮动
21 浮动带来的好处：
22     1.实现元素并排
23     2.可以按照自己的规则走（设置盒模型的宽和高）
24 5.浮动带来的问题：父盒子撑不起来了
25     加入父盒子， margin: 0 auto;设置盒子水平居中
26 6.浮动解决：
27     1.**给父盒子设置固定高度  百年不变导航栏
28     2.内墙法：给最后一个浮动的元素添加一个块级标签，并且该标签设置属性 clear:both;
29     例子 设置一个空的div   BFC
30     3.*****伪元素清除法：例子clearfix--常用背过 5条语句 
31     .clearfix:after {
32                         content: ".";
33                         display: block;
34                         height: 0;
35                         visibility: hidden;
36                         clear: both
37                     }
38     
39     4.**overflow:hidden
40 7.overflow:
41     visible默认值 hidden（超出部分隐藏）  auto  scroll    inherit继承
42         visible    默认值。内容不会被修剪，会呈现在元素框之外。
43         hidden    内容会被修剪，并且其余内容是不可见的。
44         scroll    内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
45         auto    如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
46         inherit    规定应该从父元素继承 overflow 属性的值。
47 
48 数据驱动视图（界面）的展示   先确定目的，再干活
49 8.浮动元素margin塌陷不会出现任何问题
50     
51 标准流下的标签，兄弟之间使用margin调整位置，父子之间使用padding调整子标签的位置（小心盒模型的计算）
52 脱标的元素，margin和padding可以任意使用
53     margin: 0 auto;设置盒子水平居中 浮动的盒子margin: 0 auto;不起任何作用
54     使用margin：0 auto;注意点：
55         1.使用margin: 0 auto;水平居中盒子必须有width，要有明确width，文字水平居中使用text-align: center;
56         
57         2.只有标准流下的盒子 才能使用margin:0 auto; 
58         
59         当一个盒子浮动了，固定定位，绝对定位(后面会讲)，margin:0 auto; 不能用了
60         
61         3.margin：0 auto;居中盒子。而不是居中文本，文字水平居中使用text-align: center;

 1 文本属性：
 2     text-align：justify  两端对齐，只对英文字母有效，中文无效
 3     text-indent：em 相对字体，根据父盒子的字体大小，来设置的单位
 4                 rem：移动端的单位，在html中设置font-size后，子盒子的大小也能进行缩放
 5 css单位选择：
 6     px: 绝对单位 固定不变的
 7     em: 相对字体 根据父盒子的字体大小来设置的单位
 8     %：百分比
 9     rem: 只根据html的font-size来调整页面所有标签的盒模型的大小
10 
11 text-decoration属性规定文本修饰的样式
12 line-height：设置单行文本垂直居中；多行文本需要加padding（总高度-文本高度）/2 复制博客
13     (1)针对单行文本垂直居中
14     
15     公式：行高的高度等于盒子的高度，可以使当行文本垂直居中，注意只适用单行文本。
16     
17     (2)针对多行文本垂直居中
18     
19     行高的高度不能小于字体的大小，不然上下字之间会紧挨一起。
20     
21     第一步，一个宽度300*300的盒子，看盒子中一共显示了几行文字，假如是5行，再看一下行高，如果行高是line-height:30px; 那么就知道行高*5=150px
22     
23     第二步，让(盒子的高度-150px)/2=75;那么设置盒子的padding-top:75px;同时保证盒子的高度为300px,那么高度改为225px;
24 
25 
26 
27 圆：border-radius:100% 或50% 即可设置为圆形
28 背景颜色：一共有三种：单词、rgb表示法、十六进制表示法
29 rgb（255,255,255） 白色  000黑色
30 
31 sublime 安装colorPicker插件   ctrl+shift+c 出现颜色
32 
33 图片处理;
34     background-image: url(./1.jpg);
35     background-repeat:repeat|no-repeat|repeat-x|repeat-y ;
36     background-position: x y;
37         x和y如果是正值，意味着调整当前图片的位置信息，相对于原来的位置进行调整
38         x和y如果是负值，切背景图，注意：一定要有明确的width和height ‘精灵图技术‘
39     background-attachment:fixed   
40         为什么有精灵图技术？
41         audio音频 video 视频 script  link a  
42         img标签  src属性  往后端发get请求 优缺点
43         
44 字体图标：
45     iconfont的使用：  例子  找到图标添加到项目，在线链接或下载到本地，即可
46     vertical-align：垂直对齐