web笔记第二周

[if !supportLists]第一天 [endif]input的一些基本类型补充

 一 HTML5中新增标签

2. input type新增类型

date                    日期  年月日

month 月

week 第几周

time         时间时分

url    必须填写url  否则无法提交

email 必须填写邮箱否则无法提交

range 设置范围 配合属性max  min  step  value 指定默认值

number 填写数字否则无法提交指定数字范围max  min  step  value默认值  支持负数

search 定义搜索框

color 颜色选择器

3. 新增通用属性

placeholder 设置输入前的提示

autofocus 自动获取焦点

max/min/step 配合type是 number或range 确定范围

list         配合datalist列表（chrome不支持，火狐支持）

例：

.

required         设置该输入框必填

pattern 设置正则

form 给表单控件设置所属的form表单

size                                 文本框的大小

        maxlength                           能输入的字符的最大长度

        readonly 只读

        disabled                            不能使用

        checked                            表示单选 复选按钮选中状态

        selected                            下拉列表的列表项被选中

        multiple                            多选  适用于email和file类型

[if !supportLists]第二天 [endif]css概念、基本语法、选择器

   一为什么使用css?

      1 提高开发效率

      2 提高搜索引擎的检索效率

1. CSS的定义

Cascading Style Sheets 层叠样式表（级联样式表）

2. CSS的作用

定义网页外观，如字体、背景、颜色等

3. CSS特点

① 精确的定位 准确的控制页面的任何元素

② 精细的控制 可以做到像素级别的调整

③ 样式与内容的分离 便于维护，便于重用

4. 发展历程

① CSS1 作为一项W3C推荐，CSS1发布于 1996年12月17 日。1999 年1月11日，此推荐被重新修订。

② CSS2 作为一项 W3C 推荐，CSS2发布于 1999年1月11日。CSS2添加了对媒介（打印机和听觉设备）和可下载字体的支持。

③ CSS3 CSS3 计划将 CSS 划分为更小的模块。2001年至今   HTML5+CSS3

二 CSS使用方法

1. 行内式优先级最高，  在标签上添加style属性

2. 内嵌样式  内页样式

把css代码 写在 style标签里面

style标签可以写在任何位置，建议 写在head标签中

3. 外联样式  外页样式 (推荐)

link

优先级

  行内式优先级最高其他两种谁在后会覆盖前面的样式,谁的优先级就高

CSS 添加注释 /*   */

HTML注释  

三  基本语法

1. CSS语法

选择器：负责圈定范围，要修改的元素的集合

声明：由属性和属性名组成，中间用冒号隔开(属性名:属性值)，用于设定具体的样式

格式：选择器{属性1:值; 属性2:值; 属性3:值 ....}

2. CSS注释

样式里面注释就一种/*注释 */

                                html中的注释  

3. 单位

3.1 长度单位

  Rem

  em 倍数相对于默认字体大小16px

  px 像素pixel 屏幕上显示的最小单位(推荐)

  % 百分比设置font-size 相对于默认字体大小16px  设置宽度高度相对于父元素宽度

  pt 标准长度单位 1pt=1/72英寸 用于印刷业，非常简单易用

  PPI(DPI) 每英寸像素点数 pixel(dot) per inch 表示清晰度、精度

  cm/mm 厘米/毫米

附公式：px = pt * DPI /72

3.2 颜色单位

  ① 英文单词  red  green  yellow .....

  ② 十六进制 #rrggbb   00-ff    

  ③ rgb  数字  百分比  rgb(0~255, 0~255, 0~255)

                      ④ rgb(0%~100%,0%~100%,0%~100%)

rbga();

四 选择器

1. HTML标签选择器

标签名{ }

2. ID选择器

#ID名{ }

一个页面一个ID名只能给一个元素

3. CLASS选择器  

.class名{ }

4. 关联选择器

选择器选择器{ }

5. 组合选择器

选择器,选择器,选择器....{ }

[if !supportLists]第三天 [endif]伪类选择器、css常见属性和值

一、伪元素选择器(IE6 仅支持a标签)

选择器:hover    鼠标悬停在上面(重用)

选择器:active 鼠标点击的时候

选择器:visited 鼠标点击过后

选择器:link 开始状态

二  CSS常见属性和值

1. 字体属性

font-family 设置字体库(黑体 宋体 微软雅黑.....)

宋体SimSun黑体SimHei微软雅黑Microsoft YaHei微软正黑体Microsoft JhengHei新宋体NSimSun新细明体PMingLiU细明体MingLiU标楷体DFKai-SB楷体KaiTi

font-size 设置大小(px em %rem pt in cm mm)

font-style    设置字体风格

值：normal（正常 默认）

 italic（斜体）  

font-weight   设置字体粗细

值： normal（默认）  

bold（粗）   

lighter（细）   

100-900（

font-variant   设置字体变形

 normal  

small-caps(浏览器会显示小型大写字母的字体)

inherit规定应该从父元素继承 font-variant 属性的值

2. 颜色属性

color 设置字体颜色(四种表示颜色的方法)

3. 背景属性

background

综合写法

background: [color] [image] [repeat] [position] [attachment]

background-color 设置背景颜色 颜色单位

background-image 设置背景图片url('地址')

background-repeat 设置背景图片平铺方式 repeat(默认值)

no-repeat 不重复

repeat-x 背景图片在水平方向重复

repeat-y 垂直

background-attachment 设置背景图滚不滚

值： scroll（默认）

background-position 设置背景图片位置（设置背景图片在元素中哪个位置开始显示左上角坐标）

两个值，只写一个的话第二个值默认center/50%

left/right/center/number px top/center/bottom/number px  

background-size    背景图片尺寸大小设置

number px

number%   

以父元素的百分比来设置背景图像的宽度和高度。

第一个值设置宽度，第二个值设置高度。

如果只设置一个值，则第二个值会被设置为"auto"。

cover  

把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。

背景图像的某些部分也许无法显示在背景定位区域中。

contain

把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域

4. 文本属性

letter-spacing文字字母间距

值：长度值可设为负数

word-spacing 英文单词与单词之间的间距

text-decoration 对文本划线的控制

overline  上划线  

underline  下划线

line-through 中划线  

none 没有线

text-align      文本的水平对齐方式  

left  

right    

center

text-indent     首行缩进 px   %等尺寸

line-height 重要文本的垂直对齐方式

word-wrap       当一个单词到达边际时没显示完的处理方式

normal 默认浏览器  

break-word 换行显示

text-transform大小写转换

none默认显示 

capitalize 每个单词的首字母大写

uppercase 全部大写

lowercase 全部小写

word-break在恰当的断字点进行换行：

normal使用浏览器默认的换行规则。

break-all允许在单词内换行。

keep-all只能在半角空格或连字符处换行。

text-shadow 设置文本阴影

值：X轴偏移量+Y轴偏移量+模糊距离+颜色

例：text-shadow:10px 10px 5px gray

text-overflow  文本溢出时

clip   修剪文本

ellipsis  使用省略号代表被修剪的文本

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

5. 边框属性

综合写法

border :边框宽度 边框样式 边框颜色

border :10px solid red

[ border-width ]： 设置或检索对象边框宽度。

[ border-style ]： 设置或检索对象边框样式。

none定义无边框。

hidden与"none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。

dotted定义点状边框。在大多数浏览器中呈现为实线。

dashed定义虚线。在大多数浏览器中呈现为实线。

solid定义实线。

double定义双线。双线的宽度等于border-width 的值。

groove定义3D 凹槽边框。其效果取决于 border-color 的值。

ridge定义3D 垄状边框。其效果取决于 border-color 的值。

inset定义3D inset 边框。其效果取决于 border-color 的值。

outset定义3D outset 边框。其效果取决于 border-color 的值。

[ border-color ]： 设置或检索对象边框颜色。

border-left:

    border-left-style:

    border-left-color:

    border-left-width:

border-right:

border-top:

border-bottom:

border-radius:边框圆角

6. 鼠标光标属性

cursor 设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

属性值auto   pointer点击  move   crosshair  wait等待  help   text  not-allowed无法选择

7. 列表属性

        [ list-style-type ]： 设置或检索对象的列表项所使用的预设标记 （常用在ol或ul上）

disc默认。标记是实心圆。

circle标记是空心圆。

square标记是实心方块。

decimal标记是数字。

decimal-leading-zero0开头的数字标记。(01, 02, 03, 等。)

lower-roman小写罗马数字(i, ii, iii, iv, v, 等。)

      等

[ list-style-image ]： 设置或检索作为对象的列表项标记的图像

例：list-style-image: url('/i/eg_arrow.gif')

list-style   综合写法

list-style：[ list-style-image ] || [ list-style-position ]

一般给一个列表中的列表项添加图片使用的是背景图片的方式

8. 表格属性  width  height border.....

1)table-layout  固定每列的宽度

属性值

    automatic：列宽由单元格内容确定，不固定

fixed： 固定

2)border-collapse 设置或检索单元格的边框是否合并

属性值

    separate： 边框独立  默认值  不合并

       collapse： 相邻边被合并  合并

   3)border-spacing：单元格的边框与边框之间的距离

   只有border-collapse的属性值是separate：的时候,border-spacing属性才能生效

[if !supportLists]4) [endif] caption-side：top | bottom |   这是一个标签

设置或检索表格的caption标题在哪个方向显示

    5)empty-cells 当单元的内容为空是,是否显示边框

属性值有两个show 默认值显示 hide 不显示

[if !supportLists]第四天 [endif]盒子模型和div布局

一 DIV+CSS布局优势

① 表现和内容分离

② 代码简洁，提高代码解析速度

③ 易于维护和改版

④ 提高搜索引擎对网页的搜索效率

二 布局相关概念

1. 盒子模型

1.1 定义： 任何一个元素都可以抽象一个盒子模型， 盒子里面可以嵌套盒子

1.2 组成： 内容   内补白（内边距、填充）边框外补白（外边距）

1.3 相关属性：

   width  height

   border

   padding 盒子的边框距离盒子的内容的距离

   margin       盒子的边框距离上一个盒子或父元素的距离

1.4 盒子模型的宽高

盒子的宽= 内容的宽 + 左右内补白+左右边框

2. 块级元素和行内元素

2.1. 块级元素块状元素

块状元素特征：(1)能够识别宽高

　　　　　　　　　(2)margin和padding的上下左右均对其有效

　　　　　　　　　(3)可以自动换行

　　　　　　　　　(4)多个块状元素标签写在一起，默认排列方式为从上至下

①总是在新行上开始；

②高度，行高以及外边距和内边距都可控制；

③宽度缺少时是它的容器的100%，除非设定一个宽度。

④它可以容纳行内元素和其他块元素

2.2. 行内元素 内联元素

　行内元素特征：

(1)设置宽高无效

　　　　　　　　　  (2)对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间

　　　　　　　　　  (3)不会自动进行换行

① 和其他元素都在一行上

② 宽高行高不可设置，padding可以设置 margin可以左右，不能上下

③ 宽只与内容有关系

④ 只可以容纳文本或其他行内元素

2.3 块级和行内的相互转换

属性display

值   block   inline  inline-block

　　(1)display:inline;转换为行内元素

　 (2)display:block;转换为块状元素

　　 (3)display:inline-block;转换为行内块状元素

2.4行内块状元素特征：

(1)不自动换行

　　　　　　　　　　(2)能够识别宽高

　　　　　　　　　　(3)默认排列方式为从左到右

3. 无意义的块级元素div 和 无意义的行内元素span

div

span

4. 盒子区块的浮动

浮动的盒子脱离文档流

设置元素的css float属性

clear属性可以清除浮动

5.盒子区块的定位   

static 默认值  

Position:relative 相对定位  

absolute 绝对定位  

fixed 固定

属性position

相对定位：相对于自己原先的位置定位，配合left  top   right  bottom

不影响其他元素的布局

绝对定位：相对于定位的父元素,如果父元素没定位，向上找,直到找到定位的父元素，如果没有定位的父元素，相对于body

影响其他元素的布局

固定定位：fixed  相对于屏幕定位

z-index属性： z-index用于定位的元素 设置元素显示优先级

（元素设置position:absolute/relative时生效），

默认0  越大优先级越高(同级兄弟元素时)  可以有负值

父子级时，父元素不设z-index  子元素设为负值，父元素可覆盖子元素，如果父元素设置了z-index，父元素不管比子元素高多少也不会覆盖子元素

三 布局相关的属性

1. 尺寸

width 设置内容的宽

height 设置内容的高

2. 外补白

margin 简写同padding

margin-top 距离上边的边距

margin-right 右边

margin-bottom 下边

margin-left 左边

3. 内补白  

padding

padding: 四边

padding: 上下  左右

padding: 上 左右 下

padding: 上 右 下 左

padding-top 上边内补白

padding-right 右边

padding-bottom 下边

padding-left 左边

4. 布局

display 设置元素的显示方式

值： block以块级元素显示   

 inline以行内元素显示   

 none：不显示    inline-block:(IE6、7不支持， 介于inline和block之间的状态)

visibility  规定元素是否可见

visible  默认值，可见

hidden  隐藏  同时占着位置

display:none 是物理性隐藏，从页面彻底消失，不占用物理空间  

            visibility:hidden  显示性隐藏，人看不到了，但还占用那个位置

overflow 用于设置元素不够容纳内容时的显示方式 

auto(自动添加滚动条)

hidden（超出隐藏）（加载父元素身上可以清楚浮动，防止内容塌陷）  

scroll(滚动条)

文本溢出显示省略号：

overflow: hidden;  超出隐藏

text-overflow:ellipsis;  超出用省略号显示

white-space: nowrap;  不换行直到遇见

溢出方式

float 设置浮动方式

值left    right       noneoverflow-x    设置水平方向 溢出方式

overflow-y 设置垂直方向

设置为浮动的元素会当成块状元素处理

设置浮动时，父元素内容塌陷，影响布局效果

clear 清除浮动

值left   right      both

例：div{ clear:left}  清除div左边的浮动元素

clear：both加载父元素的最后一个子元素，防止父元素塌陷

企业级应用中清楚浮动的最佳方法

clearfix方案

使用伪元素after在父元素尾部添加一个元素

对这个添加的伪元素应用清除浮动的样式

必备三大样式：content、clear、display

可选三大样式：height、font-size、visibility

例：.clearfix.after{content:’’;clear:both;display:block}

使用浮动实战案例

[if !supportLists]1. [endif]如何实现一个三列布局

[if !supportLists]a) [endif]实现一个左中右布局

[if !supportLists]b) [endif]左右两侧宽度固定

[if !supportLists]c) [endif]中间内容去宽度能够自适应

解决：双飞翼布局

第一步：使用float属性让左中右三列浮动

[if !supportLists]2. [endif]使用负margin属性让左右两列与中间列处在同一水平线上

[if !supportLists]3. [endif]在中间列中增加一个div内容元素，设置margin左右为两列的宽度

[if !supportLists]4. [endif]最后，清除浮动

box-shadow 属性用于向盒子添加一个或多个阴影效果。

格式：box-shadow: offset-x offset-y [blur [spread]] [color] [inset]

offset-x：阴影的水平偏移量。正数向右偏移，负数向左偏移。offset-y：阴影的垂直偏移量。正数向下偏移，负数向上偏移。blur：阴影模糊度，不能取负数。spread：阴影大小。正数阴影扩大（阴影大小大于盒子大小），负数阴影缩小（阴影大小小于盒子大小），0阴影与盒子同等大小。inset：表示添加内阴影，默认为外阴影。

例：box-shadow: 0px 0px 10px red, 5px -5px 10px blue, 10px -10px 10px yellow, 20px -20px 10px black;  设置多个阴影，每个阴影之间用,号隔开

[if !supportLists]第五天 [endif]div布局设计

一 布局设计

1. 盒子的外边距问题

① 一行两个盒子的距离  等于两个盒子间距的和（第一个盒子的右边距+第二个盒子的左边距）

        ②上下两个盒子， 距离等于间距大的盒子（第一个盒子的下边距和第二个盒子的上边距，选择一个大的）

③ margin的参照距离 有时候是父元素的边框（父子级嵌套的时候），有时候是上一个元素（兄弟级关系的时候）

④ 父元素嵌套子元素， 子元素设置margin-top 会导致上边距加在父元素身上， 解决方案：给父元素设置border或overflow

2. 盒子嵌套

① 如果子元素大小超出父元素（溢出）， 通过overflow属性来控制   auto(超出出现滚动条)   hidden（超出隐藏）  scorll(滚动条)

② 如果子元素浮动，会不受父元素的控制， 给父元素设置浮动 或者  设置overflow

3. 居中

3.1 水平居中

盒子居中margin:0 auto;   块级元素居中  ， 设置到要居中的元素上

text-align:center;   文本和行内元素居中，设置到要居中元素的父元素上

3.2 垂直居中

行高居中line-height    让行内元素和文本垂直居中（一行文本） 设置line-height与height相等     设置到要垂直居中元素的父元素上

块级元素垂直居中：设置为绝对定位设置top 50%  margin-top值 盒子的一半的负值

4.  盒子的隐藏显示

属性visibility   设置为hidden 隐藏      占位   显示性隐藏

设置属性display 为 none 物理性隐藏 不占位

二布局

1. 取消标签 默认样式

2. 子元素继承父元素的属性设置

 ① 字体 文本 颜色  相关的属性 子元素会继承父元素的  如果在body设置了字体，所有的元素内都会生效

 ② 布局相关的不会继承  边框  内外边距   宽高  背景

3. 布局思路

3.1 两种方式  

① 嵌套一个大的盒子

② 把页面分成若干行

3.2 思路

先分行在分列