第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和dt105 ?????106 ?????107 ?????108 ?????table ?border=‘1‘ ???更细的边框线109 ??????tr ?行110 ????????td 单元格的数据111 ????????112 ?????form表单标签113 ??????action: 提交的地址114 ??????method：提交的方式115 ??????116 ??????表单控件：117 ???????input 118 ????????属性：type119 ??????????????????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 ????????gulp134 ????????webpack135 ????????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 table13 form ：与后端进行交互常用14 ????input15 思维导图！！！16 p：文本级标签 p a span i em 只能放文本、图片、表单元素17 排版标签：div、ul、ol、li18 19 行内标签：文本级标签中除了p，其它标签都是行内标签（行内块标签）20 块级标签：所有的排版标签都是块级标签，再加上p21 *****************display、浮动、定位、z-index22 行内标签：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|block34 display：none 当前盒子不显示（隐藏）35 36 37 css选择器：38 基础选择器：39 ????标签选择器：选择标签的‘共性’，而不是特性 div{}、ul{}、ol{}、form{}40 ????类选择器：.box{}41 ????id选择器：#box{} 只能选择特性，主要是为了js42 ????*通配符选择器：重置样式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{} ???//00257 ????伪类选择器：‘爱恨准则’58 ????a:hover{}59 ????伪元素选择器：p:first-letter{} ?p:before{content:‘lijie‘;} ?before、after里一定要加content60 ????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或height93 94 content（width,height）--padding（内边距）--border（边框）---margin95 #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.搜索内容位置，加padding11 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：3011 浮动的现象：----背过！！！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 ??BFC30 ????3.*****伪元素清除法：例子clearfix--常用背过 5条语句 31 ????.clearfix:after {32 ????????????????????????content: ".";33 ????????????????????????display: block;34 ????????????????????????height: 0;35 ????????????????????????visibility: hidden;36 ????????????????????????clear: both37 ????????????????????}38 ????39 ????4.**overflow:hidden40 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=150px22 ????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：垂直对齐