03 2019 档案
摘要：1、精灵技术产生的背景（减少向服务器请求的次数，减小服务器压力） 2、精灵技术的本质（小的背景图集中在一张大图上） 3、精灵技术的使用 案例1： 案例2： 注意：产品类的图片一般不是用背景，而是用img标签 案例3： 4、字体图标 比精灵图标更占优势 字体图标使用流程（如果前2步不需要，可以直接从第
阅读全文
摘要：1、css用户界面样式 a、鼠标样式(记住几个兼容性好的) cursor：default/pointer/move/text; b、轮廓 outline outline：2px solid red； outline：0/none（取消轮廓线） c、防止拖拽文本域 textarea{resize：no
阅读全文
摘要：1、布局（盒子布局、盒子模型、标准流、脱离文档流） 标准文档流：块级独占一行 ，行内块和行内元素都是和其他共占一行，在盒子中的元素遵循标准流从左到右从上到下排列，超过父元素时会溢出。 一行行看 浮动+标准流配合使用 版心：width+margin：0 auto； ul>li 、标题、段落、a、img
阅读全文
摘要：1、元素的显示模式 a、被动转换：浮动、绝对定位、固定定位(转换为行内块元素特性的模式 不设置宽度时，模式换行为行内块模式后宽度是内容宽度。) b、主动转换：display：block / inline-block displsy：none（隐藏元素，不保留位置） display：block（显示元
阅读全文
摘要：1、定在某个位置：简称定位 2、浮动和定位的区别 定位的分类：定位模式 a、静态定位：（标准流） b、相对定位（不脱离文档流） 以自己左上角为基准点定位 c、绝对定位absolute （拼爹型：完全脱离文档流 不占有位置，飘起来的） 拼爹型：绝对定位的位置和父元素有关，若父元素没有定位，那就会以浏览
阅读全文
摘要：1、根据ucd来还原页面 步骤： 1、准备相关文件 html css images js ·· · 2、准备css初始化，书写结构和样式 3、根据ucd确定版心宽度和各个模块 记住:先不看细节，然后从上往下看布局 一般： 第一行 header，nav (导航栏约定一般用 ul li a 来做) 第二
阅读全文
摘要：若元素没有设置宽高，那元素实际宽高是被内容撑起来， 若元素自己有设置宽高，那实际面积于自己的盒子模型有关 1、清除浮动的本质 清除浮动主要是为了解决父级元素因为子级浮动而引起的内部高度为0的问题。 （当父元素没有设置高度时，子元素又全浮动了，此时子元素脱离文档流而不占据位置，那就会出现父元素高度为0
阅读全文
摘要：1、文档流介绍 网页布局的核心就是利用css来摆放盒子， 把盒子摆放在合适的位置。 css的定位机制有以下3种（网页布局一般需要3种搭配使用）： a、普通流（标准流） b、浮动 1、浮动只有左右。 2、浮动后找离他最近的父元素靠左/右对齐。 3、！！！一个父盒子里的子盒子，如果其中一个子元素有浮动的
阅读全文
摘要：文字阴影和盒子阴影的用法： 多阴影
阅读全文
摘要：1、看透网页布局的本质 2、盒模型 margin、border、padding、width、height a、 border： 1px solid red (solid/dashed/dotted/double) 案例：table表格中 合并边框的写法 table {border-collapse：
阅读全文
摘要：css三大特性 1、层叠性（就近原则） 2、继承性（和文字有关的会继承） 3、优先级 （权重问题） 权重：0,0,0,0 0001 标签选择器（注意：即使有20个标签选择器也不会比一个伪类选择器优先级高） 0010 类选择器，伪类选择器，属性选择器，伪元素选择器 0100 id选择器 1000 行内
阅读全文
摘要：css背景属性及其应用 1、背景 2、背景简写 3、背景透明（css3） 4、背景缩放（css3） 5、多背景图片（css3） 6、凹凸文字效果
阅读全文
摘要：css书写规 1、空格规范： div { color: red; } 2、选择器规范 3、属性 属性定义要另起一行 属性定义后必须以分号结尾 div { color: red; font-size: 14px; }
阅读全文
摘要：css复合选择器 a、交集选择器 (即。。。又。。。；选择器之间不能有空格) p.one{color:red;] b、并集选择器（中间由逗号隔开） p,div{color:red;} c、后代选择器（可以选择到所以的子孙后代 ；中间用空格隔开） .class h3{color:red} d、子元素选
阅读全文
摘要：标签的显示模式 a、块级元素（最典型的是 div标签） 特点： 默认宽度 100% 可以容纳块级元素和内联元素 b、行内元素 （最典型的是 span标签） 特点： c、行内块元素（最典型的是 img标签） ！！！3种模式的标签是可以转换的 display （显示模型属性） a、块级标签模式转换为行内
阅读全文