day06

布局核心：盒模型（间距）浮动（并排）定位（覆盖+ 特殊位置）

定位类型position

静态定位

position:static; 默认值

静态定位不能使盒子位置变化不适合布局

作用：解决低版本浏览器兼容问题

相对定位

position:relative;

能不能使盒子发生位置变化 yes

2. 参考对象：自身初始位置

3. 脱离不脱离标准流不脱离标准（保留原来位置）

4. 是否适合布局：不适合布局（压盖，特殊位置）因为会留空白

作用：1. 微调元素的位置（相当于外边距） 2.辅助绝对定位(子绝父相)

绝对定位

position:absolute;

能不能使盒子发生位置变化 yes
参考对象：body和浏览器可视窗口（看盒子随着滚动条动不动不动—》浏览器动—》body）

最终确定：以body做参考(左上以body参考右下以浏览器窗口做参考)

是否适合布局：非常适合布局（压盖）不仅脱离标准流还脱离文本流

固定定位

position:fixed;

能不能使盒子发生位置变化 yes
参考对象：浏览器可视窗口—>不随滚动条滚动而滚动
脱离不脱离标准流脱离标准流
是否适合布局：适合有限制的布局：不随滚动条滚动而滚动的布局

定位实现盒子的水平和垂直居中

方法1：

div {position:absolute/fixed;//向右走父盒子宽度的一半left:50%;//向下走父盒子高度的一半top:50%;//向上走自身高度的一半margin-top:-h/2;//向左走自身宽度的一半margin-left:-w/2;//要求这个盒子必须有明确可以计算的宽度 ，高度width:wpx;height:hpx;
}

方法2：

            position: absolute;left: 0;top: 0;right: 0;bottom: 0;margin:auto;width: 50px;height: 50px;background-color: yellow;

两个方法都是有前提的：要求这个盒子必须有明确可以计算的宽度，高度!!!

定位坐标值

left:定位元素左侧边界距离参考对象左侧边界的值
top:定位元素上侧边界距离参考对象上侧边界的值
right:定位元素右侧边界距离参考对象右侧边界的值
bottom:定位元素下侧边界距离参考对象下侧边界的值(left ,top )  or (right ,top) or (left ,bottom) or (right,bottom
一个坐标即可确定盒子位置

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DDfQhEfr-1606700461468)(…/…/…/%E4%B8%AD%E5%85%ACweb%E5%89%8D%E7%AB%AF%E5%9F%B9%E8%AE%AD/1116%E7%B3%BB%E7%BB%9F%E7%8F%AD/%E7%AC%AC%E4%B8%80%E9%98%B6%E6%AE%B5/teacher/day06/%E7%AC%94%E8%AE%B0/media/%E5%AE%9A%E4%BD%8D%E5%80%BC%E5%88%86%E6%9E%90.png)]

定位使用： 1.明确定位类型 2.定位坐标值

层级属性（相对，绝对，固定）

z-index: 设置定位盒子的显示顺序 值越大 越向上展示（越在屏幕前的显示）默认值是0 标准流盒子的层级属性 z-index:0;/* 被标准流盒子压盖的时候 */z-index: -1;

总结：

定位类型	是否发生位置变化	参考对象	适合布局	是否脱离标准
static	no	无	不适合	无
relative	yes	自身初始位置	不适合	no(因为保留原来位置)
absolute	yes	初始body,子绝父相（父级元素）	非常适合	是（不占据界面位置）
fixed	yes	浏览器窗口	适合（不滚动的盒子）	脱离

脱标的定位属性对于元素类型的影响

行内+定位（absolute+fixed）---->不区分类型私有密闭的区域（BFC盒子）什么属性都可以设置

行内块+定位（absolute+fixed）---->不区分类型私有密闭的区域（BFC盒子）什么属性都可以设置

块类型+定位（absolute+fixed）---->不区分类型私有密闭的区域（BFC盒子）什么属性都可以设置

显示和隐藏

第一种：

display:block显示/none隐藏

不保留原来位置（在HTML结构树直接移除掉）不频繁切换显示和隐藏

第二种：

visibility:visible显示/hidden隐藏

保留原来位置（在HTML结构树上还是有的透明度为0）频繁切换显示和隐藏

盒子溢出处理

overflow:hidden/visible/auto/scroll;/* overflow: visible;默认值 *//* 隐藏掉 *//* overflow: hidden; *//* 溢出不溢出 都显示滚动条 但是溢出显示滑块+滚动条 *//* overflow: scroll; *//* 溢出 显示滚动条 不溢出 不显示滚动条 *//* overflow: auto; */overflow-y: auto;overflow-x: hidden;

圆角边框属性

border-radius:10px; 四个角都是10px弧度
border-radius:10px 20px; 左上和右下角10px  右上和左下20px
border-radius:10px 20px 30px 左上10px  右上和左下 20px 右下30px
border-radius:10px 20px 30px 40px;顺时针 border-radius:50% 圆，椭圆;border-radius:10px 20px 30px 40px/40px 30px 20px 10px;水平切线长度/垂直切线的长度

day06（文字垂直水平居中，则是line-height:高度;text-align:center;在父盒子加）

复习

浮动

float:left/right/none

特点：

1.浮动水平方向移动

2.不占据位置形成浮动流脱离标准流不脱离文本流（图文环绕）

3.浮动元素遇到浮动元素，行内块，行内元素立即停止浮动（并排）

4.浮动影响是向下单向传递的

浮动的问题：浮动子元素不参与高度计算–父盒子高度塌陷–后续盒子就会向上移动。

解决办法：

1.给父盒子定高度

不缺点：有时候父盒子auto

2.给父盒子加overflow:hidden 触发BFC规则形成BFC盒子–浮动子元素也会参与高度计算。

缺点：把你故意溢出的盒子切掉。

<div style="clear:both"></div>  只能写在最后一个浮动子元素的后面

缺点：结构冗余冗杂

4.css伪元素创造伪元素清除法

.clearFix:after,clearFix:before{content:"";display:block;clear:both;
}

5.伪元素写法作用为什么用它适用场所：小盒子（与主体内容无关的，列表前后的的小圆圈，推荐，HOT，打折字样，数字排行，小图标）

用css代码创造一个不存在结构树上的元素。减少结构树的冗余，让结构树加载快一些。定义一次，可以多次使用，把类名放在需要的地方就可以。

6.元素+浮动属性（不为none），—不区分类型并排的块 all

正文

布局核心：盒模型（间距）浮动（并排）定位（覆盖+特殊位置）。

定位的类型(position)

静态定位

position:static;

相对定位

position:relative;

绝对定位

position:absolute;

固定定位

position:fixed;

定位的坐标值

left
right
top
bottom

定位的使用（布局很好，但是因为要计算，所以耗性能，性能并不好，对于布局来说浮动就可以用浮动）

1.明确定位类型 2.定位坐标值

line-height只对文字有效果，对盒子和图片不起作用。

1.能不能使盒子发生位置变化

2.参考对象

3.脱离不脱离标准流

4.定位值（4）,是否适合布局

静态定位不能使盒子发生变化，不适合做布局默认值

作用：解决低版本浏览器兼容问题

相对定位

1.能不能使盒子发生位置变化 yes

2.参考对象：自身初始位置

3.脱离不脱离标准流：不脱离标准流，保留原来位置，原来位置不被占用。

4.是否适合布局：不适合布局（压盖，特殊位置）因为会留空白。

作用：1.微调元素的位置（相当于外边距） 2.辅助绝对定位

绝对定位

1.能不能使盒子发生位置变化 yes

2.参考对象：body和浏览器的可视窗口

最终确定：左上body作参考，右下以浏览器做窗口（默认）

绝对定位的盒子是以距离（html）它最近的拥有定位属性（除了静态定位都可以）的父盒子作为参考

3.脱离不脱离标准流：脱离标准流而且脱离文本流，不保留原来位置，不占据原来位置。

4.是否适合布局：非常适合(脱离标准流而且脱离文本流)。

作用：1.微调元素的位置（相当于外边距） 2.辅助绝对定位

父盒子宽度一半:left：50% 父盒子高度一半：top:50%

固定定位

1.能不能使盒子发生位置变化 yes

2.参考对象：浏览器的可视窗口 --不随滚动条滚动而滚动

3.脱离不脱离标准流：脱离标准流而且脱离文本流，不保留原来位置，不占据原来位置。

4.是否适合布局：适合，有限制的布局，不随滚动条滚动而滚动的布局。

作用：1.微调元素的位置（相当于外边距） 2.辅助绝对定位

父盒子宽度一半:left：50% 父盒子高度一半：top:50%

实现定位的水平和垂直居中

方法1

div{
position:absolute;
//向右走父盒子宽度一半
left:50%;
//向下走父盒子高度的一半
top:50%;
//向上走自身高度的一半
margin-top:-h/2;
//向左走自身高度的一半
margin-left:-w/2;
//要求这个盒子必须有明确可以计算的宽度和高度
width:wpx;
height:hpx;
}

方法2

div{position:absolute;left:0;top:0;right:0;bottom:0;margin:auto;//要求这个盒子必须有明确可以计算的宽度和高度width:wpx;height:hpx;
}

两个方法的前提都是要求这个盒子必须有明确可以计算的宽度和高度

层级属性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JEFgjK9c-1606700461472)(…/…/…/%E4%B8%AD%E5%85%ACweb%E5%89%8D%E7%AB%AF%E5%9F%B9%E8%AE%AD/1116%E7%B3%BB%E7%BB%9F%E7%8F%AD/%E7%AC%AC%E4%B8%80%E9%98%B6%E6%AE%B5/my/secondWeek/day06/%E7%AC%94%E8%AE%B0/media/%E5%B1%82%E7%BA%A7.png)]

z-index:设置定位盒子的显示顺序 值越大，越向上展示（越在屏幕的前面显示），默认值为0.标准流盒子的层级属性为0。被标准流盒子压盖，设置-1，最多写到-1，一般不会这样用.有定位的时候才会显示出层级关系，标准流是没有层级的，默认为0.

总结：

定位类型	是否发生变化	参考对象	适合布局	是否脱离标准
static	no	无	不适合	无
relative	yes	自身初始位置	不适合	no（因为保留原来位置）
absolute	yes	初始body,子绝父相	非常适合	是（不占据界面位置）
fixed	yes	浏览器窗口	适合（不随滚动条滚动的盒子）	脱离

脱标的定位属性对于元素类型的影响

行内+定位（absolut/fixed）—>不区分类型私有密闭的区域（BFC盒子）什么属性都可以设置

行内块+定位（absolut/fixed）—>不区分类型私有密闭的区域（BFC盒子）什么属性都可以设置

块类型+定位（absolut/fixed）—>不区分类型私有密闭的区域（BFC盒子）什么属性都可以设置

显示和隐藏

第一种

display:block显示/none隐藏

不保留原来的位置（在HTML结构树直接移除掉）适合于不频繁的显示和隐藏的

第二种

保留原来的位置（在HTML结构树上还是有的透明度为0）适合于频繁的显示和隐藏的

visibility:visible显示/hidden隐藏

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wQY7xiHj-1606700461474)(media/hover伪类状态.png)]

hover后面只能跟 > 空格 + ~（四个选择器）

盒子溢出处理

overflow:hidden/visible/auto/scroll（不管溢出不溢出都显示滚动条）;

html的窗口高度就是浏览器可视窗口的高度，所以设置html和body高度为100%

圆角边框属性

border-radius:10px;四个角都是10px弧度r
border-radius:10px 20px;左上角和右下角10px  右上角和左下角是20px
border-radius:10px 20px 30px;左上10px 右上和左下是20px 右下是30px
border-radius:10px 20px 30px 40px;顺时针border-radius:50%圆 椭圆border-radius:40px/50px;水平切线距离/垂直切线距离

day07

微信滑动门技术

什么？特殊背景图技术（特点：背景图颜色单一，对称的，阴影，边框…）

原理：是一张宽度大小固定的图片铺到宽度不确定的盒子里，需要父子关系的两个盒子，内部盒子（子元素span）铺图片的右上角位置(backgrpund-position:100% 0%)，外侧盒子（父元素a）铺图片的左上角位置(backgrpund-position:0% 0%)

 <style>* {padding: 0;margin: 0;}.container {width: 100%;height: 800px;background: url(./image/3S9sFMD.jpg) repeat-x ;}.nav {width: 100%;height: 74px;}ul {list-style: none;}a {text-decoration: none;color: #fff;}.clearfix::after {content: '';display: block;clear: both;}.nav ul {padding-left: 200px;}.nav li {float: left;margin-top: 18px;margin-left: 20px;}.nav li a {display: inline-block;padding-left: 20px;line-height: 33px;height: 33px;}.nav li a span {display: inline-block;padding-right: 20px;line-height: 33px;height: 33px;}.first a {background-image: url(./image/lTcb_ve.png);background-position: 0% 0%;}.first a span {background-image: url(./image/lTcb_ve.png);background-position: 100% 0%;}.nav li:hover a {background-image: url(./image/lTcb_ve.png);background-position: 0% 0%;}.nav li:hover a span {background-image: url(./image/lTcb_ve.png);background-position: 100% 0%;}</style></head>
<body><div class="container"><div class="nav"><ul class="clearfix"><!-- a铺背景图的左侧 bgp:0% 0%  span铺背景图的右侧 bgp:100% 0% --><li class="first"><a href=""><span>帮助</span></a></li><li><a href=""><span>帮助与反馈</span></a></li><li><a href=""><span>帮助与</span></a></li><li><a href=""><span>帮助与反</span></a></li><li><a href=""><span>帮助与反</span></a></li><li><a href=""><span>帮助与反馈台</span></a></li></ul></div></div>

PS基础操作

标尺设置

ctrl+R 或者视图–》标尺鼠标放上去右键切换单位为像素

标尺工具

按shift拉出水平线和垂直线

按shift+alt可以测量角度

吸管工具

标尺那点住吸取颜色即可

文字工具

编辑—》首选项—》单位与标尺 ----》文字单位设置为px

抓手工具

快捷键空格

选择工具

快捷键 V

作用：选择图层，拖拽图层

切片工具

1.切刀选择区域文件—》导出—》存储为web所用格式选择切片改类型

背景透明选png 颜色单一选gif 普通图片选 jpg

基于参考线的切片拉参考线选中图片选择切片点基于参考线的切片

文件—》导出—》存储为web所用格式按shift多选切片—>选择切片改类型 —》存储
cutterman

day07

微信滑动门技术

什么？特殊背景图技术（特点：背景图颜色单一，对称的，阴影，边框…）

 <style>* {padding: 0;margin: 0;}.container {width: 100%;height: 800px;background: url(./image/3S9sFMD.jpg) repeat-x ;}.nav {width: 100%;height: 74px;}ul {list-style: none;}a {text-decoration: none;color: #fff;}.clearfix::after {content: '';display: block;clear: both;}.nav ul {padding-left: 200px;}.nav li {float: left;margin-top: 18px;margin-left: 20px;}.nav li a {display: inline-block;padding-left: 20px;line-height: 33px;height: 33px;}.nav li a span {display: inline-block;padding-right: 20px;line-height: 33px;height: 33px;}.first a {background-image: url(./image/lTcb_ve.png);background-position: 0% 0%;}.first a span {background-image: url(./image/lTcb_ve.png);background-position: 100% 0%;}.nav li:hover a {background-image: url(./image/lTcb_ve.png);background-position: 0% 0%;}.nav li:hover a span {background-image: url(./image/lTcb_ve.png);background-position: 100% 0%;}</style></head>
<body><div class="container"><div class="nav"><ul class="clearfix"><!-- a铺背景图的左侧 bgp:0% 0%  span铺背景图的右侧 bgp:100% 0% --><li class="first"><a href=""><span>帮助</span></a></li><li><a href=""><span>帮助与反馈</span></a></li><li><a href=""><span>帮助与</span></a></li><li><a href=""><span>帮助与反</span></a></li><li><a href=""><span>帮助与反</span></a></li><li><a href=""><span>帮助与反馈台</span></a></li></ul></div></div>

PS基础操作

标尺设置

ctrl+R 或者视图–》标尺鼠标放上去右键切换单位为像素

标尺工具

按shift拉出水平线和垂直线

按shift+alt可以测量角度

吸管工具

标尺那点住吸取颜色即可

文字工具

编辑—》首选项—》单位与标尺 ----》文字单位设置为px

抓手工具

快捷键空格

选择工具

快捷键 V

作用：选择图层，拖拽图层

切片工具

1.切刀选择区域文件—》导出—》存储为web所用格式选择切片改类型

背景透明选png 颜色单一选gif 普通图片选 jpg

基于参考线的切片拉参考线选中图片选择切片点基于参考线的切片

文件—》导出—》存储为web所用格式按shift多选切片—>选择切片改类型 —》存储
cutterman

myDay07

shift多选r图层，ctrl+e合并图层，英文v选择工具，空格抓手工具。透明背景用png。jpg的格式不可以使用透明背景。pc端页面都是大于1200的。

day08

文件创建

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Nu2EzABP-1606700461480)(…/…/…/%E4%B8%AD%E5%85%ACweb%E5%89%8D%E7%AB%AF%E5%9F%B9%E8%AE%AD/1116%E7%B3%BB%E7%BB%9F%E7%8F%AD/%E7%AC%AC%E4%B8%80%E9%98%B6%E6%AE%B5/teacher/day08-day10/new4/day08-day10/%E7%AC%94%E8%AE%B0/media/%E6%96%87%E4%BB%B6%E5%A4%B9.png)]

文件命名规范

统一用小写的英文字母，数字和下划线的组合，不得包含汉字空格和特殊字符。

原则： 1）方便理解，见名之意

2）方面查找

例如：首页—index
产品列表—prolist产品详细页面—pro_detail
新闻列表—newslist新闻详细页面—news_detail
发展历史—history
关于我们—aboutus
联系我们—linkus，contactus
信息反馈—feedback
留言—leavewords

图片命名规范

图片的名称分为头尾两部分，用下划线隔开，头部表示此图片的大类性质，例如广告，标志，菜单，按钮等

banner：放置在页面顶部的广告，装饰图案等长方形的图片
logo：标志性的图片
button：在页面上位置不固定，并且带有链接的小图片
menu：在页面中某一位置连续出现，性质相同的链接栏目的图片
pic：装饰用的图片

例子：banner_sohu.gif, banner_sina.gif
menu_aboutus.gif,menu_job.gif
title_news.gif
logo_police.gif
pic_people.gif

代码规范

html

缩进使用soft tab（4个空格）；
嵌套的节点应该缩进；
在属性上，使用双引号，不要使用单引号；
属性名全小写，用中划线做分隔符；
不要在自动闭合标签结尾处使用斜线（HTML5 规范指出他们是可选的）；

不要忽略可选的关闭标签，例：和。

块元素可以嵌套行内元素和行内块,行内元素不可以套块元素(a除外) a>div

复合标签的直接子代按照规定写(ul>li,ol>li,dl<dt+dd)

一个界面上有且只有一个H1元素,一般用在logo上

自定义属性时,最好用data-属性名命名属性名字方便获取

CSS

尽量用class属性取挑选元素 .类名 {}

不要写超出三个-5个的类选择器

不要出现任何单独的标签选择器!!!

#id 100 权重最大父元素 id

css书写规范

div.a {布局相关的属性;  display,overflow,float,position,margin,padding本身的属性;width,height,border,bgc,文本的属性;text-,font-,...其他属性;z-index,border-radius,box-shadow,cursor,resize...}

网站三剑客(head)

TDK

Title 网页标题 4-6词词语

<title>   </title>

Description 描述

<meta name="description"  content="U.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!">

Keywords

网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东

鼠标样式属性

cursor:auto; 默认

cursor:crosshair; 加号

cursor:text; 文本竖标

cursor:wait; 等待

cursor:help; 帮助

cursor:progress; 过程

cursor:inherit; 继承
cursor:move; 移动

cursor:ne-resize; 左下右上箭头

cursor:ns-resize; 向上向下箭头

cursor:nw-resize; 左上右下箭头

cursor:pointer; 手指

cursor:zoom-in; 放大镜

cursor:zoom-out; 缩小镜

cursor:grab; 手

cursor:grabbing; 抓拳

cursor:no-drop; 红圈禁止

cursor:not-allowed; 红圈禁止

实现箭头

原理：定位两个三角形（边框）

<style>.box {width: 50px;height: 50px;/* background-color: pink; */position: relative;margin-left: 100px;margin-top: 100px;}/* 定位 黑色  */.arrow::before {content: '';position: absolute;left: 0;top: 1px;border-width:20px 20px 0px 20px;border-style:solid;border-color:#000 transparent transparent transparent;}/* 白色 */.arrow::after {content: '';position: absolute;left: 0;top: 0px;border-width:20px 20px 0px 20px;border-style:solid;border-color:#fff transparent transparent transparent;}</style></head><body><div class="box arrow"></div>

精灵图技术（sprites雪碧）

前端图片优化技巧之一

精灵图：多张小图拼合成一张大图

精灵图技术原理：用背景属性插入精灵图，用background-position属性移动图片的位置，把想要显示的图片部分显示在大小固定的盒子里

优缺点：

优点：

减少http请求次数，提高代码加载的速度
易替换整体风格

缺点：需要测量

文本溢出处理

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-suKFtE4x-1606700461514)(…/…/…/%E4%B8%AD%E5%85%ACweb%E5%89%8D%E7%AB%AF%E5%9F%B9%E8%AE%AD/1116%E7%B3%BB%E7%BB%9F%E7%8F%AD/%E7%AC%AC%E4%B8%80%E9%98%B6%E6%AE%B5/teacher/day08-day10/new4/day08-day10/%E7%AC%94%E8%AE%B0/media/%E6%96%87%E6%9C%AC%E6%BA%A2%E5%87%BA.png)]

文本溢出处理

单行文本溢出

实现方法：

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

效果如图：

多行文本溢出

实现方法1：

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;overflow: hidden;text-overflow:ellipsis;

效果如图：

适用范围：
因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；

注：

-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
display: -webkit-box; 必须结合的属性，将对象作为弹性伸缩盒子模型显示。
-webkit-box-orient 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式
兼容性差

实现方法2：

兼容性比较好伪元素…加在盒子末尾

.box2 {position: relative;width: 150px;/* 高度是行高的倍数 显示几行就是几倍数 */line-height: 30px;height: 90px;border: 1px solid red;overflow: hidden;}.box2:after {content: '...';position: absolute;right: 0px;bottom:0;padding-left: 20px;}
<h3>方法2</h3><div class="box2">海边度假穿搭指南！一件泳衣赚足回头率海边度假穿搭指南！一件泳衣赚足回头率海边度假穿搭指南！一件泳衣赚足回头率海边度假穿搭指南！一件泳衣赚足回头率海边度假穿搭指南！一件泳衣赚足回头率海边度假穿搭指南！一件泳衣赚足回头率</div>

day09

表单结构

作用：收集用户信息

表单：

作用：用来收集用户信息；也叫表单框（表单域form）

<form method=""></form>

action: 传给后端的地址

method: 传给后端的方法

GET：从后端获取数据，数据量比较小，安全性比较低，速度较快

POST：向后端发送数据，数据量大，安全性高，速度较慢

name: 表单的标识

表单控件:

在表单里面，绝大部分的表单控件都是input标签，通过type属性的不同来区分的，表单控件要写在form标签的里面, 不是独占一行的

文本框

<input type="text">

name:控件字段名字

value:用户输入的值

密码框

 <input type="password">

name:控件字段名字

value:用户输入的值

提交按钮

<input type="submit">

value: 按钮里面的文字

没有value属性，默认是‘提交’两个字

一旦点击submit，就会将表单里面的内容通过method的方法提交给action的地址

重置按钮

<input type="reset">

value: 按钮里面的文字

只能清空当前form表单里面的内容

单选框

<input type="radio">

name：给单选框分组的（相同name的单选框是一组的）

checked: 默认选中

disabled: 禁用状态

value: 发送给后端的值

多选框（复选框）

<input type="checkbox">

name: 给多选框分组（相同name的多选框是一组的）

checked: 默认选中

disabled: 禁用状态

value: 发送给后端的值

下拉菜单

<select>    <option value="">131</option>    <option value="">132</option></select>

value: 发送给后端的值

selected: 默认选中

多行文本框（文本域）

<textarea rows="" cols=""></textarea>

rows: 一共能显示多少行

cols: 一行能显示多少字（英文字母）

普通按钮

<button></button><input type="button">

get与post

\1. get是从服务器上获取数据，post是向服务器传送数据。

\2. get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML，HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。

\3. 对于get方式，服务器端用Request.QueryString获取变量的值，对于post方式，服务器端用Request.Form获取提交的数据。

\4. get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。

\5. get安全性非常低，post安全性较高。但是执行效率却比Post方法好。

建议：

1、get方式的安全性较Post方式要差些，包含机密信息的话，建议用Post数据提交方式；

2、在做数据查询时，建议用Get方式；而在做数据添加、修改或删除时，建议用Post方式；

兼容性问题

1、ie8下图片边框问题（记）

<a><img src="">
</a>解决办法：reset.css
img {//取消默认添加的边框border:none;
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zBhWidn3-1606700461519)(…/…/…/%E4%B8%AD%E5%85%ACweb%E5%89%8D%E7%AB%AF%E5%9F%B9%E8%AE%AD/1116%E7%B3%BB%E7%BB%9F%E7%8F%AD/%E7%AC%AC%E4%B8%80%E9%98%B6%E6%AE%B5/teacher/day08-day10/new4/day08-day10/%E7%AC%94%E8%AE%B0/media/ie8%E5%9B%BE%E7%89%87%E8%BE%B9%E6%A1%86%E9%97%AE%E9%A2%98.png)]

2. ie7下子元素相对定位父盒子overflow属性失效问题

3. ie6下小高度盒子问题

原因：ie6下有默认行高

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iKUNgWcC-1606700461521)(…/…/…/%E4%B8%AD%E5%85%ACweb%E5%89%8D%E7%AB%AF%E5%9F%B9%E8%AE%AD/1116%E7%B3%BB%E7%BB%9F%E7%8F%AD/%E7%AC%AC%E4%B8%80%E9%98%B6%E6%AE%B5/teacher/day08-day10/new4/day08-day10/%E7%AC%94%E8%AE%B0/media/ie6%E4%B8%8B%E5%B0%8F%E9%AB%98%E5%BA%A6%E9%97%AE%E9%A2%98.png)]

4. ie6浮动双边距问题

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-e724b9lj-1606700461522)(…/…/…/%E4%B8%AD%E5%85%ACweb%E5%89%8D%E7%AB%AF%E5%9F%B9%E8%AE%AD/1116%E7%B3%BB%E7%BB%9F%E7%8F%AD/%E7%AC%AC%E4%B8%80%E9%98%B6%E6%AE%B5/teacher/day08-day10/new4/day08-day10/%E7%AC%94%E8%AE%B0/media/ie6%E5%8F%8C%E8%BE%B9%E8%B7%9D.png)]

5. ie8下透明度问题（记）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fy1LZus2-1606700461524)(…/…/…/%E4%B8%AD%E5%85%ACweb%E5%89%8D%E7%AB%AF%E5%9F%B9%E8%AE%AD/1116%E7%B3%BB%E7%BB%9F%E7%8F%AD/%E7%AC%AC%E4%B8%80%E9%98%B6%E6%AE%B5/teacher/day08-day10/new4/day08-day10/%E7%AC%94%E8%AE%B0/media/%E5%85%B6%E4%BB%96%E6%B5%8F%E8%A7%88%E5%99%A8.png)]

背景透明, 内容不透明

background-color:rgba(0,0,0,.3)

背景和内容一起透明

opacity:0-1; 0是完全透明 （消失）  1是不透明

ie8下透明度显示效果:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Xh86ioOI-1606700461526)(…/…/…/%E4%B8%AD%E5%85%ACweb%E5%89%8D%E7%AB%AF%E5%9F%B9%E8%AE%AD/1116%E7%B3%BB%E7%BB%9F%E7%8F%AD/%E7%AC%AC%E4%B8%80%E9%98%B6%E6%AE%B5/teacher/day08-day10/new4/day08-day10/%E7%AC%94%E8%AE%B0/media/ie8%E4%B8%93%E5%B1%9E%E6%BB%A4%E9%95%9C.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XuJrfUFB-1606700461527)(…/…/…/%E4%B8%AD%E5%85%ACweb%E5%89%8D%E7%AB%AF%E5%9F%B9%E8%AE%AD/1116%E7%B3%BB%E7%BB%9F%E7%8F%AD/%E7%AC%AC%E4%B8%80%E9%98%B6%E6%AE%B5/teacher/day08-day10/new4/day08-day10/%E7%AC%94%E8%AE%B0/media/ie8%E8%A7%A3%E5%86%B3%E8%83%8C%E6%99%AF%E9%80%8F%E6%98%8E%E5%86%85%E5%AE%B9%E4%B8%8D%E9%80%8F%E6%98%8E.png)]

常见问题（所有浏览器）（记）

图片下间隙问题

盒子>img 图片和盒子多的底边有一个默认的间距

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tbYBvj8f-1606700461529)(…/…/…/%E4%B8%AD%E5%85%ACweb%E5%89%8D%E7%AB%AF%E5%9F%B9%E8%AE%AD/1116%E7%B3%BB%E7%BB%9F%E7%8F%AD/%E7%AC%AC%E4%B8%80%E9%98%B6%E6%AE%B5/teacher/day08-day10/new4/day08-day10/%E7%AC%94%E8%AE%B0/media/%E5%9B%BE%E7%89%87%E4%B8%8B%E9%97%B4%E9%9A%99.png)]

 图片下间隙：原因：图片具有文本的特性---》 以基线对齐---》 间距就是基底之间距离解决办法：1. 给父盒子加字体属性2. 图片设置除了基线以外的对齐属性3. 给图片转块元素

文本框和按钮对不齐

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rLUZmxUY-1606700461530)(…/…/…/%E4%B8%AD%E5%85%ACweb%E5%89%8D%E7%AB%AF%E5%9F%B9%E8%AE%AD/1116%E7%B3%BB%E7%BB%9F%E7%8F%AD/%E7%AC%AC%E4%B8%80%E9%98%B6%E6%AE%B5/teacher/day08-day10/new4/day08-day10/%E7%AC%94%E8%AE%B0/media/%E6%8C%89%E9%92%AE%E5%92%8C%E6%96%87%E6%9C%AC%E6%A1%86%E5%AF%B9%E4%B8%8D%E9%BD%90%E7%9A%84%E7%8E%B0%E8%B1%A1.png)]

css hack（了解）

结构hack(条件hack)(ie10废除了)（记）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-djkg6nqA-1606700461531)(…/…/…/%E4%B8%AD%E5%85%ACweb%E5%89%8D%E7%AB%AF%E5%9F%B9%E8%AE%AD/1116%E7%B3%BB%E7%BB%9F%E7%8F%AD/%E7%AC%AC%E4%B8%80%E9%98%B6%E6%AE%B5/teacher/day08-day10/new4/day08-day10/%E7%AC%94%E8%AE%B0/media/%E6%B5%8F%E8%A7%88%E5%99%A8%E4%B8%8D%E6%94%AF%E6%8C%81%E6%98%BE%E7%A4%BA.png)]

在ie的低版本里查询一些盒子或者是样式要不要显示的条件

  // 在什么地方需要显示 ie8- 条件是： 只要浏览器版本是ie8及其以下就显示这个p //   lte: less than or equal 小于或者等于<!--[if lte IE 8 ]><p>您的浏览器版本太低，可能存在要换的危机 <a href="">UC</a></p><![endif]-->

css属性hack

.box {color: red;/* ie7及其以下的标识是* */*color:orange;/* ie6及其以下是蓝色 */_color:blue;/* ie8-ie9识别\0 */color:deeppink\0;}

选择符集hack

   /* ie6下识别的类 */*html .a {background-color: deeppink;border-radius: 50%;}/* ie7下识别的类 */* + html .a {background-color: springgreen;border-radius: 50%;}

day10

BFC规则

1. 什么BFC规则？

Block Formatting Context 块级格式化上下文

块级元素的渲染区域规则 BFC盒子外部不影响内部内部不影响外部

2. 哪些属性可以触发BFC规则？

   1. float不为none2. position属性为absolute和fixed3. oveflow不为visiable 4. html 根标签

3. BFC有哪些规则

   1. BFC盒子内部的子标签按照垂直从上到下排2. 共用一个BFC盒子的垂直方向上的外边距会发生塌陷现象3. 子标签都会父盒子的左边界停靠，即使浮动元素也如此4. BFC盒子内部浮动元素也要参与高度计算5. BFC区域和浮动元素不重叠6. BFC盒子是一个密闭空间   外部不影响内部  内部不影响外部

4.解决的问题

2—》外边距塌陷

3—》浮动特性

4—》清除浮动影响

5----》图文不环绕 (p+overflow)

经典的多列布局

自适应：一个盒子的宽度随着屏幕宽度发生变化单位：%

两列自适应布局

原理：两列并排左列固定宽度右列宽度自适应（100%）

/* 1.解决方案：左列+ float: left; */

/* 2.解决方案左列+ position:absolute */

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WYwAXGKO-1606700461533)(…/…/…/%E4%B8%AD%E5%85%ACweb%E5%89%8D%E7%AB%AF%E5%9F%B9%E8%AE%AD/1116%E7%B3%BB%E7%BB%9F%E7%8F%AD/%E7%AC%AC%E4%B8%80%E9%98%B6%E6%AE%B5/teacher/day08-day10/new4/day08-day10/%E7%AC%94%E8%AE%B0/media/%E4%B8%A4%E5%88%97%E8%87%AA%E9%80%82%E5%BA%94.png)]

三列自适应布局

原理：左右两列固定宽度中间列自适应 (100%)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QM7Ea2F9-1606700461535)(…/…/…/%E4%B8%AD%E5%85%ACweb%E5%89%8D%E7%AB%AF%E5%9F%B9%E8%AE%AD/1116%E7%B3%BB%E7%BB%9F%E7%8F%AD/%E7%AC%AC%E4%B8%80%E9%98%B6%E6%AE%B5/teacher/day08-day10/new4/day08-day10/%E7%AC%94%E8%AE%B0/media/%E4%B8%89%E5%88%97%E8%87%AA%E9%80%82%E5%BA%94.png)]

圣杯布局

过程：

三列同时左浮动，中间列写到结构的上面去，利用负外边距把两列放到中间列上，然后利用最外侧大盒子的内边距和相对定位把中间列内容居中

双飞翼布局

过程：

原理：三列同时左浮动，中间列写到结构的上面去，利用负外边距把两列放到中间列上，然后利用中间列盒子的内容盒子的外边距把中间列内容居中

图片优化技巧

减少http请求降体积

合适地方选择合适的图片类型

jpg 不支持背景透明装饰性，商品盒子图片 (60-70)

png 支持背景透明（精灵图）png-8

webp 背景透明+ 无损压缩+体积小不兼容ie8-

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aqlHrAGt-1606700461536)(…/…/…/%E4%B8%AD%E5%85%ACweb%E5%89%8D%E7%AB%AF%E5%9F%B9%E8%AE%AD/1116%E7%B3%BB%E7%BB%9F%E7%8F%AD/%E7%AC%AC%E4%B8%80%E9%98%B6%E6%AE%B5/teacher/day08-day10/new4/day08-day10/%E7%AC%94%E8%AE%B0/media/%E5%9B%BE%E7%89%87%E6%A0%BC%E5%BC%8F.png)]

在线压缩工具压缩图片
小图拼合成精灵图
单一的小图纯色 —》字体图标
图片可以采用编码 base64

轮播图结构

原理：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NbEh0GZz-1606700461538)(…/第一阶段/my/firstWeek/tool/Typora)]

HTML5+CSS3之快速入门 day6-day10布局，表单，css精灵，css hack，BFC规范相关推荐

Spread for Windows Forms快速入门(2)---设置Spread表单
让我们从设置Spread的大小和表单的外观开始学习如何定制Spread,这些操作通常放在Form的构造函数中进行,在InitializeComponent()之后调用. 自定义控件的大小你可以设置S ...
HTML5 CSS3提高 11-01 新增标签及属性表单多媒体结构伪类伪元素过渡小米log jd进度条
HTML5新特性 1.语义化标签 (★★) <header> 头部标签 <nav> 导航标签 <article> 内容标签 <section> 定义文档 ...
Bootstrap学习笔记01【快速入门、栅格布局】
Java后端学习路线笔记汇总表[黑马程序员] Bootstrap学习笔记01[快速入门.栅格布局][day01] Bootstrap学习笔记02[全局CSS样式.组件和插件.案例_黑马旅游网][d ...
css 快速入门之 flex 布局教程
css 快速入门之 flex 布局教程 flex 简称弹性布局,是2009年W3C提出的 css3 新属性. 弹性布局(flexible box)模块旨在提供一个更加有效的方式来布置,对齐和分布在容器 ...
html5+css+javascript深入学习实录pdf,HTML5+CSS3+JavaScript从入门到精通微课精编版.pdf...
作者 :前端科技出版发行 : 北京:清华大学出版社 , 2018.08 ISBN号 :978-7-302-50220-3 页数 : 529 原书定价 : 79.80 主题词 : 超文本标记语言- ...
《HTML5+CSS3网页设计入门必读》——1.7 使用FTP传输文件
本节书摘来自异步社区<HTML5+CSS3网页设计入门必读>一书中的第1章,第1.7节,作者: [美]Julie Meloni更多章节内容可以访问云栖社区"异步社区"公 ...
《HTML5+CSS3网页设计入门必读》——2.8　转变（CH-CH变化）
本节书摘来自异步社区<HTML5+CSS3网页设计入门必读>一书中的第2章,第2.8节,作者: [英]Jeremy Keith , [美]Dan Cederholm 更多章节内容可以访问云 ...
《HTML5+CSS3网页设计入门必读》——第1章　标记简史1.1　从IETF到W3C：HTML 4的诞生过程...
本节书摘来自异步社区<HTML5+CSS3网页设计入门必读>一书中的第1章,第1.1节,作者: [英]Jeremy Keith , [美]Dan Cederholm 更多章节内容可以访问云 ...
《HTML5+CSS3网页设计入门必读》——1.13 测验
本节书摘来自异步社区<HTML5+CSS3网页设计入门必读>一书中的第1章,第1.13节,作者: [美]Julie Meloni更多章节内容可以访问云栖社区"异步社区" ...

HTML5+CSS3之快速入门 day6-day10布局，表单，css精灵，css hack，BFC规范

day06

定位类型position

静态定位

相对定位

绝对定位

固定定位

定位实现盒子的水平和垂直居中

方法1：

方法2：

定位坐标值

层级属性（相对，绝对，固定）

总结：

脱标的定位属性对于元素类型的影响

显示和隐藏

第一种：

第二种：

盒子溢出处理

圆角边框属性

day06（文字垂直水平居中，则是line-height:高度;text-align:center;在父盒子加）

复习

正文

定位的类型(position)

定位的坐标值

定位的使用（布局很好，但是因为要计算，所以耗性能，性能并不好，对于布局来说浮动就可以用浮动）

静态定位不能使盒子发生变化，不适合做布局 默认值

相对定位

绝对定位

固定定位

实现定位的水平和垂直居中

层级属性

总结：

脱标的定位属性对于元素类型的影响

显示和隐藏

第一种

第二种

盒子溢出处理

圆角边框属性

day07

微信滑动门技术

PS基础操作

标尺设置

标尺工具

吸管工具

文字工具

抓手工具

选择工具

切片工具

day07

微信滑动门技术

PS基础操作

标尺设置

标尺工具

吸管工具

文字工具

抓手工具

选择工具

切片工具

myDay07

day08

文件创建

文件命名规范

图片命名规范

代码规范

html

CSS

css书写规范

网站三剑客(head)

鼠标样式属性

实现箭头

精灵图技术（sprites雪碧）

文本溢出处理

文本溢出处理

单行文本溢出

多行文本溢出

day09

表单结构

表单：

表单控件:

get与post

静态定位不能使盒子发生变化，不适合做布局默认值

2. ie7下子元素相对定位父盒子overflow属性失效问题