- 博客(30)
- 收藏
- 关注
RSS订阅原创 font-weight与ps字体粗细对应
UltraLight=100Thin=ExtraLight=200Light=300Book=Regular=Normal=400Medium=500DemiBold=SemiBold=600Bold=700ExtraBold=800Heavy=Black=Ultra=UltraBlack=900Fat=ExtraBlack=1000
2020-01-10 09:48:06
716
1
原创 css 实现圆角边框和文字同时渐变的效果
因为是圆角边框，没法直接用border-image来实现直接用一个盒子实现效果时发现文字的渐变效果就没有了，-webkit-background-clip：text这个属性加不上查看了资料，本来想用 buy-now 盒子的after属性来实现圆角边框，可是也有冲突，实现不了最后加了一个盒子才实现，父盒子实现圆角边框渐变效果，子盒子实现文字渐变效果没想到小小的效果居然这么麻烦<div...
2020-01-04 16:07:31
757
原创 展示历史事件布局
记录下这个布局的实现吧中间的线是背景图片，由一张很小的线的图片在y轴重复而成background: url(./../images/solid.jpg) repeat-y center center;左边的内容左浮动，文字居右对齐右边的内容右浮动，文字居左对齐中间的方块是绝对定位上去的每个li的宽度用百分比在响应式中也毫无压力.stage-event-box li.fr { ...
2019-11-28 15:30:31
204
原创 响应式布局的一些心得
公司太坑，先是说不做响应式，然后做完了又要加响应式，简直坑死人了。通过改成响应式的时候也事发现自己写样式时的一些不足吧，总结下来。将所有的单位改成rem，我设置的是100px = 1rem，毕竟好算啊，不然那么多值我还得用计算器敲，然后分阶段用媒体查询重新设定比例，实现自适应html,body{ font-size: 100px !important;}@media only...
2019-11-28 15:08:22
541
原创 下拉列表select的样式处理
更改箭头样式 appearance: none; -moz-appearance: none; -webkit-appearance: none; background: url("./../images/select-arrow.png") 215px center no-repeat;
2019-11-27 16:07:22
122
原创 不定高度的slideUp动画效果
slideUp动画效果可以通过给盒子高度设置为0，hover时给盒子真正的高度，然后用transition来实现动画效果。但是由于网页是响应式的，而且有一组盒子，盒子的内容又不一致，实在无法设置统一的高度。最后给盒子设置max-height：0，hover时设置max-height：最高盒子的高度来实现动画效果。...
2019-11-27 16:02:21
287
原创 获取某一年的起始时间和结束时间
Date第三个参数设置为1可获得该月的起始时间Date第三个参数设置为0可获得该月的结束时间返回的日期格式是 Tue Dec 31 2019 00:00:00 GMT+0800 (中国标准时间) 这种的可以用正则表达式把它转换为 yyyy-MM-dd HH:mm:ss 这种格式的var yearStartDate = new Date(years, 1, 1);var yearEndDa...
2019-11-15 18:12:20
2279
原创 jquery ajax 传递数据格式是formatData
formatData是用于获取表单数据，方便提交添加数据var formatData = new FormData();formatData.append("filter", `{"createtime": ${date} }`);formatData.append("op",'{"createtime":"RANGE"}');获取数据formatData.get("filter")...
2019-11-15 17:42:08
1228
原创 js/css插件总结
定位导航滚动插件 jQuery-One-Page-Nav下载链接: git<ul id="nav"> <li><a href="#a0">花卉详情</a></li> <li><a href="#a1">介绍</a></li> <li><a...
2019-10-30 15:52:33
244
原创 phpstorm+xdebug+php调试遇到的大坑
每次调试只能进到index.php的第一行，按下一步调试就停止了，调试框里面显示frames are not avaliable. 本来以为是配置出了问题，一直在修改各种配置，但没有用，配置过程链接。然后也是根据php版本来下载xdebug版本，所以两者是对应的。最后查了好几天，有人说是phpstorm版本过低，感觉自己突然找到了明灯，因为我的xampp下载的是最新版本，所以php的版本肯定是最高...
2019-10-08 11:14:57
516
原创 tp6.0框架和应用项目安装
今天在github上下载了最新的tp v-6.0 应用项目和框架，应用项目改为zerg，核心框架改为thinkphp放入zerg中，zerg放到xampp/htdocs中，然后访问http://localhost/zerg/public/失败，报错如下在网上搜了半天说是没装composer,因为之前在家下载的是v5.0.7没有出现这个问题，很奇怪啊然后按照网上的步骤下载composer，安装...
2019-09-06 11:20:55
530
原创 jQuery的选择器
this元素的直接子元素选择器jQuery(this).children('.race-day-info')this元素的兄弟选择器jQuery(this).siblings('li')not选择器jQuery('#datetimepicker .day').not('.old').not('new')...
2019-09-04 14:44:58
106
转载 jQuery获取元素尺寸的一些方法
返回或设置文档的滚动条的垂直位置。jQuery(window).scrollTop()jQuery(window).scrollTop(offset)网页工作区域高度jQuery(window).height()整个网页文档的高度jQuery(document).height()某个元素相对于document文档的坐标jQuery(ele).offset()....
2019-09-04 10:30:25
407
原创 条纹背景
background-image: linear-gradient(45deg, transparent 0, transparent 40%, #163663 40%, #163663 50%, transparent 50%, transparent 90%, #163663 75%, #163663); background-size: 10px 10px;45deg表示条纹倾斜角度...
2019-09-04 09:37:39
176
原创 table
使表格之间分离border-collapse:separate;border-spacing:0.5rem 0.5rem;table的td不显示省略号给table设置固定表格布局参考链接table{ table-layout: fixed; width：100%；}表格竖向排列<table> <tr> <th&...
2019-09-04 09:34:35
430
原创 bootstrap
显示省略号（一行搞定 nice）class = “text-truncate”盒子阴影class=“shadow-sm”宽度w-25w-50w-75w-100w-auto高度h-25h-50h-75h-100h-auto最大宽度 最小宽度mh-100mw-100...
2019-09-03 17:21:45
183
原创 css布局之上下两列多个元素对齐
图片和下面的队名对齐，中间盒子居中分为上下两个盒子 本来用flex布局的justify-content-around但没法完全对齐，因为每个小盒子的宽度都不一致改成左右浮动，上下盒子宽度均为40%，然后内容居中对齐...
2019-08-29 09:52:50
1432
原创 jquery的类选择器的数组使用方法
jQuery(’.animate-text-box’)[i] 得到的是js对象，不能直接调用jQuery方法可以用each方法用jQuery(ele)得到jQuery对象jQuery('.animate-text-box').each(function(index,ele){ var offsetTop = jQuery(ele).offset().top;}...
2019-08-27 09:38:49
2573
原创 瀑布流的使用
今天做的新闻列表，本来用bootstrap的网格样式来实现，但因为每个新闻的图片大小不一致，所以每行列表的顶部对齐，底部不对齐，有点奇怪，要求改成瀑布流。bootstrap 的网格效果在每行的大小都是一样的，这是因为row默认不指定align-items这个样式, 而该样式不指定默认为stretch(拉伸), 因此当第一列将row撑高后, 第二列也会被拉伸, 这种情况给row指定下align-i...
2019-08-26 15:18:04
246
原创 flex-shrink的使用
最近工作用到flex布局，左边自适应宽度flex-fill，右边固定宽度但是发现右边显示的宽度比设置的小原来他的宽度是被压缩了，加上flex-shrink：0就可以了不过这个属性是在父容器空间不足时才会压缩，我的这种情况并没有...
2019-08-23 15:40:04
329
原创 img标签
响应式页面 pc端图片高度固定 移动端高度没有要求img标签的父盒子只给高度不给宽度或者只给高度不给宽度，则图片会根据设置的高度或宽度进行等比例缩放.parent{ height: 3rem;}img{ height: 100%;}在移动端页面将图片的父盒子设置为height：auto防止变形.parent{ height: auto}img{ height: 100%...
2019-08-21 18:23:55
95
转载 word-break、word-wrap、white-space三者的区别
转载链接white-space 控制空白字符显示及是否自动换行值意义normal折叠空白字符，无换行符，自动换行nowrap折叠空白字符，无换行符，永不换行pre保留空白字符、换行符，不自动换行pre-wrap保留空白字符、换行符，自动换行pre-line折叠空格，保留换行符，自动换行word-break 控制单词如何被拆分换行...
2019-08-17 11:33:57
107
原创 省略号
一行文字显示省略号.box1{ text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }两行文字显示省略号.box2{ text-overflow: ellipsis; overflow: hidden; word-break: break-all; display: -...
2019-08-16 17:53:35
103
原创 多行文字垂直居中的方法
第一种方法.parent{ /* 父元素设为块级表格元素 */ /* 父元素宽度设为100%就可以在整个屏幕中垂直居中了，如果给子元素宽度设置为100%没用， /* 对display：table-cell的元素使用百分比设置宽度和高度没有用，可以设置固定宽度和高度*/ display: table; border:1px solid red; width: 100%; height...
2019-08-15 17:46:21
122
原创 前端面试 -- 第四场
公司比较小，不过对技术要求还是比较严格的，还要求看案例。做的题目都是简答题图片自适应小图片填充大盒子//图片会被放大失真div { width: 400px; height: 400px; border: 1px solid #000; }img { width: 100%; height: 100%;}//只允许缩小不允许放大i...
2019-08-01 23:31:50
119
原创 前端面试 --第三场
对方也主要是做商城小程序的，挺想做商城的，感觉里面学的东西应该会多一点。前端主管不在，请假了，是一个项目经理和一个前端工程师面试的我，没有做题目也没有填资料介绍vuexvuex是vue中状态管理模式，提供了state、getter、mutations、actions、modules五种属性，使用时先建立vuex实例，然后在当前vue对象中声明（store），vuex数据保存在state中，读...
2019-08-01 22:31:57
117
原创 前端面试 -- 第二场
今天去那家总体难度不大，不过技术栈不太合适，不知道会不会要我删除数组的第二个元素（知道splice但参数记不得了。。。。。）splice（index, howmany, item1, item2…）；splice 会改变原始数组，返回被删除的数组，如果未删除元素则返回空数组index必需。规定从何处添加/删除元素。该参数是开始插入和（或）删除的数组元素的下标，必须是数字。...
2019-07-30 22:33:33
92
原创 前端面试 -- 微信小程序开发
http://www.bslxx.com/a/mianshiti/tiku/2017/1020/1027.htmlhttps://www.jianshu.com/p/8f3575fb4776http://www.bslxx.com/m/view.php?aid=2008
2019-07-30 16:19:27
1591
原创 面试准备（1）
面试准备（1）编写一个JavaScript函数，输入指定类型的选择器(仅需支持id，class，tagName三种简单CSS选择器，无需兼容组合选择器)可以返回匹配的DOM节点function getStyle(str){ var s = str.charAt(0); var ss = str.substr(1); switch(s){ case '#': return doc...
2019-07-28 15:36:13
112
原创 前端面试----------Day1
前端面试----------Day1第一次面试超级垃圾，垃圾到我想把它记录下来，奇怪的脑思路~~~~~选择题select 下拉列表的使用，完全不会， hahahahh<select name="" id="mySelect"> <option value="1">北京</option> <option value="2">上海...
2019-07-27 13:13:37
128
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人