2018 年 2月随笔档案 - 美林pml

圆角

摘要：一个转动的风筝小demo 运行结果为：鼠标移入后会旋转：阅读全文

posted @ 2018-02-27 17:57 美林pml 阅读(245) 评论(0) 推荐(0)

摘要：1.了解分栏模式类似报纸运行结果为： 2.响应式布局适应屏幕大小的改变，所呈现的东西有所适应案例：假如屏宽>1000px时，内容呈5列显示；当600<屏宽<1000时，内容呈3列显示，并且文字显红色；当屏宽<600时，文字呈两列显示，文字为黑色方法一：引入不同的css样式样式表为：引入阅读全文

posted @ 2018-02-27 11:48 美林pml 阅读(176) 评论(0) 推荐(0)

盒模型新增属性

摘要：1.盒子投影box-shadow 运行结果为：更多属性可以参看：http://www.runoob.com/cssref/css3-pr-box-shadow.html 2.倒影box-reflect 运行结果： 3.渐变-linear-gradient 运行结果： 4.自由缩放运行结果： 5. 阅读全文

posted @ 2018-02-27 09:14 美林pml 阅读(160) 评论(0) 推荐(0)

盒子的弹性空间

摘要：1.按比例分配运行结果为：计算公式：子元素的尺寸值=盒子的尺寸/所有子元素box-flex属性值的和*子元素的box-flex属性值同时：也可以设置定宽，剩下的再按照这个规则去计算 2.box-pack对盒子富裕空间进行管理效果类似右浮动中间浮动富裕空间在子元素中间平均分配 -webki 阅读全文

posted @ 2018-02-26 16:20 美林pml 阅读(137) 评论(0) 推荐(0)

弹性盒模型

摘要：1.display: -webkit-box;的应用运行为：加上display: -webkit-box后，运行为： 2.改变box的排序顺序运行结果为： 3.任意排列box的位置运行结果为：阅读全文

posted @ 2018-02-26 15:45 美林pml 阅读(123) 评论(0) 推荐(0)

css3_1

摘要：Document div1 div2 div3 div1 div2 div3 阅读全文

posted @ 2018-02-26 15:01 美林pml 阅读(73) 评论(0) 推荐(0)

HTML属性操作

摘要：属性名属性值相关操作：读与取一、属性读操作：元素.属性，其实在就是找到等号右边的值代码为：二、属性写操作：("添加")替换、修改元素.属性名=新的值三、innerHTML 读取元素内的所有HTML元素动态添加内容同样，写可以插入图片插入按钮练习：input中输入文字内容，可以在阅读全文

posted @ 2018-02-12 10:40 美林pml 阅读(249) 评论(0) 推荐(0)

JS初探

摘要：如何实现点击后，有下拉菜单的效果呢？写一个JS效果的步骤：一、先实现布局二、实现原理三、了解JS语法 1、JS获取效果元素 2、知道是什么事件（鼠标事件、键盘事件、表单事件、系统事件、自定义事件。。。。） 3、将要发生的时间添加到元素上元素.事件 4、明确事件添加后干什么函数：可以理解为阅读全文

posted @ 2018-02-11 15:10 美林pml 阅读(194) 评论(0) 推荐(0)

经典布局方案

摘要：一、上中下一栏式二、左右两栏式 1.浮动+普通流 2.纯浮动式 3.绝对定位式三、左右两栏加页眉页脚四、左中右三栏式布局要求：随着屏幕的改变，两边宽度不变，中间屏幕大小随之改变阅读全文

posted @ 2018-02-07 10:41 美林pml 阅读(171) 评论(0) 推荐(0)

兼容性

摘要：为什么相同的样式代码在不同的浏览器下运行，有不同的状态？因为不同的浏览器有着不同的内核，有着不同的处理引擎与渲染引擎，就会存在差异，这种差异就称为兼容性主流浏览器：IE系、Chrome、Firefox、Safari XP系统自带IE6，升级只能到IE7，此次研究主要针对XP系统 1.H5的兼容 H 阅读全文

posted @ 2018-02-06 17:49 美林pml 阅读(369) 评论(0) 推荐(0)

表单实现仿淘宝搜索应用

摘要：原型：代码：运行：阅读全文

posted @ 2018-02-06 16:49 美林pml 阅读(123) 评论(0) 推荐(0)

form 表单基础知识

摘要：一、<input type="" name="" value="" /> 1.text 文本框 2.password 密码 3.radio 单选 4.checkbox 复选 5.submit 提交 6.reset 重置 7.button 按钮 8.image 图片 9.file 上传文件 10.hi 阅读全文

posted @ 2018-02-06 16:38 美林pml 阅读(161) 评论(0) 推荐(0)

透明度、定位的应用

摘要：阅读全文

posted @ 2018-02-06 14:37 美林pml 阅读(92) 评论(0) 推荐(0)

定位

摘要：定位：原则：需要控制谁，需要给谁加样式，就把position加给谁一、相对定位：position：relative 1.相对定位的特征 1）不影响元素本身的特性； 2）不使元素脱离文档流（元素移动之后，原始位置会被保留） 3）如果没有定位偏移量，对元素本身没有任何影响 4）提升层级举例：将三个阅读全文

posted @ 2018-02-03 18:05 美林pml 阅读(152) 评论(0) 推荐(0)

浮动

摘要：一、float 1.float：left|right|none|inherit 2.浮动的定义：使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。 3.文档流：是文档中可显示对象在排列时所占的位置。 4.float的特征 1）块在一排显示 2）内联支持宽高 3）默认内容阅读全文

posted @ 2018-02-03 15:59 美林pml 阅读(125) 评论(0) 推荐(0)

块元素和内嵌元素

摘要：一、块的特征： 1.默认独占一行 2.没有宽度时，默认撑满一行 3.支持所有css命令相关标签：<div><p> 二、内嵌（内联、行内）的特征： 1.同排可以继续根同类的标签 2.内容撑开宽高 3.不支持宽高 4.不支持上下的margin 5.代码换行被解析关于“代码换行被解析的理解”：当代码换阅读全文

posted @ 2018-02-03 10:36 美林pml 阅读(150) 评论(0) 推荐(0)

a标签的伪类

摘要：a 超链接伪类：给元素添加特殊的效果 :link 未访问过的链接初始颜色 :visited 访问过后的链接颜色 :hover 鼠标移入（悬停）时的颜色 :active 鼠标按下时链接的颜色书写时的顺序：L V H A（简单的记忆方式：看到LV时哈哈笑）阅读全文

posted @ 2018-02-03 09:34 美林pml 阅读(134) 评论(0) 推荐(0)