前端学习
文章平均质量分 90
肉卷
这个作者很懒,什么都没留下…
展开
-
浮动导致父元素高度塌陷解决办法:清除浮动
基于前辈们的经验,缺点较为突出的几项方案就不写了。 以下主要总结常用方案: 方案一:clear清除浮动 在浮动元素后的同级元素直接用clear清除前一元素的浮动,代码如下:/*HTML代码*/ <div class="inner">浮动元素</div> <div class="test">clear:both;清...原创 2018-08-03 17:58:33 · 350 阅读 · 0 评论 -
HTML+CSS 导航
新手入门,首先将每个项目可实现的方式整理总结。以下为导航实现集合,仅此记录;日后将逐渐更新不同样式导航。导航制作:一般利用ul &amp;amp;amp; li 实现。一、水平导航 1、(水平靠左)实现方式:行内元素实现; 1)代码如下:&amp;amp;lt;body&amp;amp;gt; &amp;amp;lt;!--HTML代码:本文一直沿用--&amp;amp;gt; &原创 2018-08-01 14:34:06 · 5476 阅读 · 0 评论 -
CSS布局 水平&垂直居中
一、水平居中的几种方法: 1、内联元素:text-align:center;2、块状元素:定宽块元素:margin:0 auto;不定宽块元素:方法一:利用浮动的包裹性和百分比相对定位inner需在outer(不定宽)内居中:/*HTML 代码*/ &amp;amp;amp;lt;div id=&amp;amp;quot;outer&amp;amp;quot;&amp;amp;amp原创 2018-08-03 15:58:21 · 194 阅读 · 0 评论 -
静态页面制作—Magnet
利用html+css进行制作静态网页制作,熟悉项目制作流程,建立起编写代码习惯。一、项目分析1.以下为静态网页的效果图,此文章目的利用html+css完成效果图; 2.此页面为三栏式结构,div+css直接进行三栏式布局; 3.需要进行CSS初始化; 4.当鼠标悬浮图片上方时,实现的覆盖显示效果: 项目比较简单,没有什么太多坑的地方(还是我没看出来。。。),做一个自适应...原创 2018-08-18 00:52:30 · 386 阅读 · 0 评论 -
层叠上下文
本文在此文章https://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/基础上理解记录,仅供自己学习记录。之前在仿京东页面的时候,在绝对定位上也出现了元素层叠顺序错乱的情况,仅此深入了解。层叠上下文一。元素发生层叠情况:float,绝对定位脱离文档流;子元素层叠于父元...原创 2018-10-11 20:34:26 · 729 阅读 · 0 评论 -
position,display,float叠加 && margin collapse问题
position,display,float叠加a. display为none时,position&amp;amp;amp;&amp;amp;amp;float失效;b. 绝对定位,float失效,display: table/block;c. float不为none,display: table/block;margin collapse问题a. float元素,绝对定位元素,inline-block元素的margi...翻译 2018-10-11 20:57:36 · 190 阅读 · 0 评论 -
跨域数据交互之JSONP & CORS
数据交互之JSONPJSONP(JSON with Padding)是json一种“使用模式”:让当前网站从别的域名(网站)获取资料。返回数据格式:以函数调用形式返回eg: getData({“result”: {“key1”: “value1”, …});获取数据:&lt;body&gt;&lt;p id="test-jsonp"&gt;placehoder&原创 2018-10-10 00:37:49 · 155 阅读 · 0 评论 -
vue调用layui日期选择器: 数据双向绑定失败
vue调用layui日期选择器出现问题:1.无法进行数据双向绑定2.无论是单向数据绑定还是双向数据绑定,选择日期后,同级input元素输入新值,日期选择器input标签值将被清空3.layui 日期选择器的change事件无效个人觉得以上问题原因为:问题一: layui是通过js将日期选择器html片段添加到html文件中,此时vue已经完成数据绑定,故此处的数据双向绑定无效。问题...原创 2019-03-19 11:47:16 · 2708 阅读 · 0 评论 -
日期比较,ES6扩展运算符的运用
日期比较扩展运算符:将数组转化为用逗号分隔的参数序列(浅拷贝)浅拷贝含义:基本类型可进行直接拷贝,改变拷贝值不影响原值;复杂数据类型(引用类型)只是复制了其指向对象的内存地址,改变复制值,原值也被影响。若日期为数组类型,变成以上日期形式做比较:ES5方法:利用apply传入数组作为参数***但为什么参数数组第一个值要是null或Date ???var dateArr1 = [nu...原创 2019-03-31 23:21:21 · 1686 阅读 · 0 评论