前端基础div+css

1、第一天常见html标签l语言：交流工具l人与人之间的沟通交流，我们会用到各种语言，比如：汉语，英语；l作为一个前端工程师，要与浏览器沟通交流，就要用到浏览器所能识别的语言；l 图片（单标签）alt属性 是图片名字，是给百度搜索引擎抓取使用；la标签： 链接/下载/锚点target 链接打开方式 blank 新窗口self 当前窗口 定义页面链接默认打开方式l div 块l img 图片（单标签）l a 链接、下载、锚点l h1-h6 标题l p 段落l strong 强调（粗体）l em 强调（斜体）l span 区分样式l ul 无序列表l ol 有序列表l li 列表项l dl 定义列表l

2、 dt 定义列表标题l dd 定义列表项 第二天常见css样式 lhtml（Hypertext Markup Language） 结构超文本标记语言lcss（Cascading Style Sheets） 样式层叠样式表ljs（javascript） 行为html超文本标记语言 标记 标签 标签对 声明文档类型 代码编码格式单标签：直接在后面斜杠结束的标签叫做单标签。l行间样式表l内部样式表l外部样式表l属性：属性值；lwidth 宽度lheight 高度lbackground 背景lbackground-attachment: fixed; 背景是否滚动lbackground-color:

3、gray; 背景颜色lbackground-image: url(bg.jpg); 背景图lbackground-repeat: no-repeat; 背景图是否重复lbackground-position: center 0px; 背景图位置l border 边框lborder-width 边框宽度lborder-style 边框样式lborder-color 边框颜色l 边框样式：solid 实线dashed 虚线dotted 点线（IE6不兼容）lpadding 内边距padding-top 上边内边距padding-right 右边内边距padding-bottom 下边内边距padd

4、ing-left 左边内边距padding: top right bottom left;注意：内边距相当于给一个盒子加了填充厚度会影响盒子大小。lmargin 外边距l外边距的问题：1、上下外边距会叠压；2、父子级包含的时候子级的margin-top会传递给父级；（内边距替代外边距）l外边距复合：margin: top right bottom left;盒子大小 = border + padding + width/height盒子宽度 = 左border+左padding+width+右padding +右border盒子高度 = 上border+上padding+height+下pad

5、ding+下borderl结构样式：width 宽度 height 高度 background 背景 border 边框 padding 内边距 margin 外边距l复合属性：一个属性多个属性值的命令，叫做复合属性。font-size 文字大小（一般均为偶数）font-family 字体（中文默认宋体）color 文字颜色（英文、rgb、十六位进制色彩值）line-height 字体行高text-align 文本对齐方式text-indent 首行缩进（em缩进字符）font-weight 文字着重font-style 文字倾斜text-decoration 文本修饰letter-spaci

6、ng 字母间距word-spacing 单词间距（以空格为解析单位）l 复合属性：lbackgroundlborderlpaddinglmarginlfont：font-style | font-weight | font-size/line-height | font-family；width 宽度 height 高度background 背景 border 边框padding 内边距 margin 外边距font-size文字大小 font-family 字体color 文字颜色 line-height 行高text-align 文本对齐方式 text-indent 首行缩进font-we

7、ight 文字着重 font-style 文字样式text-decoration 文本修饰 letter-spacing 字母间距word-spacing 单词间距 lPhotoshop（切图、修图、测量）lDreamweaverl浏览器（两大类）：lIE浏览器： IETester（IE6、IE7、IE8）、IE9、IE10l标准浏览器：firefox（fireBug）、chrome、360第三天 常用选择器lid选择符（#）l群组选择符（，）lclass选择符（.）l类型选择符(div)l包含选择符（div p）l通配符（*）l基础选择符的优先级类型 class id style(行间) j

8、sl测试：A、#header #div1 .box1 div .section p .link B、#some .base #font #call a选择符使用原则：准确的选中元素，又不影响其它。l 伪类：伪类用于向被选中元素添加特殊的效果。（元素在特定情况下才具备的。）link 未访问（默认）hover 鼠标悬停（鼠标划过）active 链接激活（鼠标按下）visited 访问过后（点击过后）l A四个伪类的顺序：link visited hover active（love hate 记忆方法！）la伪类的应用：a、四个伪类全用(搜索引擎、新闻门户、小说网站)b、一般网站只用（ a a:ho

9、ver ）lIE6不支持a以外其它任何标签的伪类；lIE6以上的浏览器支持所有标签的hover伪类；lcss reset 原则：但凡是浏览默认的样式，都不要使用。body,dl,dd,p,h1,h2,h3,h4,h5,h6margin:0;font-size:12px;ol,ulmargin:0;padding:0;list-style:none;atext-decoration:none;imgborder:none;l块的特征1、默认独占一行 2、没有宽度时，默认撑满一排3、支持所有css命令l内嵌(内联、行内)的特征1、同排可以继续跟同类的标签2、内容撑开宽度3、不支持宽高4、不支持上下

10、的margin和padding5、代码换行被解析ldisplay：block 显示为块使内联元素具备块属性标签的特性ldisplay：inline 显示为内嵌使行块属性标签具备内联元素的特性 display：inline-block;lInline-block的特点和问题特性：1、块在一行显示；2、行内属性标签支持宽高；3、没有宽度的时候内容撑开宽度问题：1、代码换行被解析；2、ie6 ie7 不支持块属性标签的inline-block; inline-block的应用、cursorl a、分析结构（div 包一排a）l b、a标签支持宽高，并且在一排显示l c、有hover效果l d、当前状

11、态不能点！l cursor 指针样式 （规定要显示的光标的类型）l cursor：pointer | text | move l cursor:url(hand.cur),pointer;l这么一段HTML，请挑毛病：  哥写的不是HTML，是寂寞。  我说：不要迷恋哥，哥只是一个传说l  空格符l标准：哥写的不是HTML，是寂寞。我说：不要迷恋哥，哥只是一个传说l最佳： 哥写的不是HTML，是寂寞。我说：不要迷恋哥，哥只是一个传说l title 元素的额外信息 l html标签：http:/ css注释 */8、ul,li/ol,li/dl,

12、dt,dd拥有父子级关系的标签；9、p,dt,h标签 里面不能嵌套块属性标签；10、a标签不能嵌套a；11、内联元素不能嵌套块；第四天 浮动 inline-block/float（浮动）l 回顾:inline-block 特性： 1、块在一排显示2、内联支持宽高3、默认内容撑开宽度4、标签之间的换行间隙被解析（问题）5、ie6 ie7不支持块属性标签的inline-block（问题）l float浮动： l 1、块在一排显示2、内联支持宽高3、默认内容撑开宽度 4、脱离文档流5、提升层级半层 float/文档流l float:left | right | none | inherit;l 文档

13、流是文档中可显示对象在排列时所占用的位置。l 浮动的定义：使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。l clear:left | right | both | none | inherit；元素的某个方向上不能有浮动元素clear:both; 在左右两侧均不允许浮动元素。 清浮动方法l1.加高问题：扩展性不好l2.父级浮动问题：页面中所有元素都加浮动，margin左右自动失效（floats bad ！）l3.inline-block 清浮动方法：问题：margin左右自动失效；l4.空标签清浮动问题：IE6 最小高度 19px；（解决后IE6下还有2px偏

14、差） 清浮动方法l5.br清浮动问题：不符合工作中：结构、样式、行为，三者分离的要求。l6.after伪类 清浮动方法（现在主流方法）.clear:aftercontent:;display:block;clear:both;.clearzoom:1;lafter伪类： 元素内部末尾添加内容；:aftercontent添加的内容; IE6，7下不兼容lzoom 缩放 a、触发 IE下 haslayout，使元素根据自身内容计算宽高。b、FF 不支持； 浮动兼容性问题l IE6双边距BUG（IE6下块属性标签浮动，并且有横向margin，横向margin加倍。）：a、IE6b、浮动c、横向mar

15、gind、块属性标签（加display:inline;）l IE6下 li部分兼容性问题： a、左右两列布局，右边右浮动IE6 IE7下折行；(左边元素浮动)b、IE6 IE7 li 下元素都浮动 在IE6 IE7下 li 下方会产生4px间隙问题；（加vertical-align:top；） vertival-align / img问题lvertical-align 垂直对齐方式a、加垂直对齐方式的同排元素都要加垂直对齐方式；b、垂直对齐方式可以解决元素下方间隙问题；l图片下方间隙问题a、display:block; (改变标签本身特性)b、overflow:hidden; (必须知道图片高

16、度)d、vertical-align (暂时最完美的方案)第五天 定位 表格 l如何让图1中的div2移动到如图2上的位置；l思路：哪些css命令能够影响盒子显示的位置呢？ relative相对定位/定位偏移量lposition:relative; 相对定位a、不影响元素本身的特性；b、不使元素脱离文档流；c、如果没有定位偏移量，对元素本身没有任何影响；l定位元素位置控制top/right/bottom/left 定位元素偏移量。 absolute绝对定位/定位层级lposition:absolute; 绝对定位a、使元素完全脱离文档流；b、使内嵌支持宽高；c、块属性标签内容撑开宽度；d、如果

17、有定位父级相对于定位父级发生偏移，没有定位父级相对于整个文档发生偏移；e、相对定位一般都是配合绝对定位元素使用；lz-index:number； 定位层级a、定位元素默认后者层级高于前者； 定位课堂练习 遮罩滤镜/固定定位l 遮罩弹窗（优酷弹窗）标准 不透明度： opacity:01; IE 滤镜： filter:alpha(opacity=0100); lposition:fixed； 固定定位与绝对定位的特性基本一致，的差别是始终相对整个文档进行定位；问题：IE6不支持固定定位； 定位其他l定位其他值：position:static ； 默认值position:inherit ; 从父元素

18、继承定位属性的值lposition:relative | absolute | fixed | static | inherit; 定位的兼容问题、清浮动方法l position:relative;在 IE6 下父级的 overflow:hidden; 包不住子级的relative;l position:absolute;在 IE6 下定位元素的父级宽高都为奇数那么在 IE6 下定位元素的 right 和 bottom 都有1像素的偏差。l position:absolute; 绝对定位元素子级的浮动可以不用写清浮动方法；l position:fixed; 固定定位元素子级的浮动可以不用写清浮

19、动方法；（IE6不兼容） 表格 表格 默认样式重置l表格标签：table 表格thead 表格头tbody 表格主体tfoot 表格尾tr 表格行th 元素定义表头td 元素定义表格单元l表格样式重置tableborder-collapse:collapse; 单元格间隙合并th,tdpadding:0;重置单元格默认填充 table 单元格合并lcolspan 属性规定单元格可横跨的列数。 table 单元格合并lrowspan 属性规定单元格可横跨的行数。 table 课堂实例 表单/表单元素lform 表单l ltext 文本框lpassword 密码lradio 单选lcheckbox

20、 复选lsubmit 提交lreset 重置lbutton 按钮limage 图片lfile 上传lhidden 隐藏 表单元素llabel 标签为 input 元素定义标注l checked 在页面加载时默认选定的 input 元素。l disabled 属性规定应该禁用 input 元素。 表单元素lselect/option 下拉选框对高度的支持不兼容；ltextarea 文本域各个浏览器下的默认滚动条显示不兼容css3新增 resize 调整尺寸属性； 轮廓线 表单元素兼容性问题loutline 轮廓线；A标签轮廓线去除方法：1、2、l表单元素兼容性问题IE6下input背景滚动；滑动门 CSS精灵（css雪碧/css sprites）l CSS精灵CSS Sprites在国内很多人叫CSS精灵，是一种网页图片应用处理方式。它允许你将一