工作
关注
分享
扫一扫
qq_35752802
这个作者很懒，什么都没留下…
展开
-
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 · 918 阅读 · 1 评论 -
css 实现圆角边框和文字同时渐变的效果
因为是圆角边框，没法直接用border-image来实现直接用一个盒子实现效果时发现文字的渐变效果就没有了，-webkit-background-clip：text这个属性加不上查看了资料，本来想用 buy-now 盒子的after属性来实现圆角边框，可是也有冲突，实现不了最后加了一个盒子才实现，父盒子实现圆角边框渐变效果，子盒子实现文字渐变效果没想到小小的效果居然这么麻烦<div...原创 2020-01-04 16:07:31 · 861 阅读 · 0 评论 -
展示历史事件布局
记录下这个布局的实现吧中间的线是背景图片，由一张很小的线的图片在y轴重复而成background: url(./../images/solid.jpg) repeat-y center center;左边的内容左浮动，文字居右对齐右边的内容右浮动，文字居左对齐中间的方块是绝对定位上去的每个li的宽度用百分比在响应式中也毫无压力.stage-event-box li.fr { ...原创 2019-11-28 15:30:31 · 274 阅读 · 0 评论 -
响应式布局的一些心得
公司太坑，先是说不做响应式，然后做完了又要加响应式，简直坑死人了。通过改成响应式的时候也事发现自己写样式时的一些不足吧，总结下来。将所有的单位改成rem，我设置的是100px = 1rem，毕竟好算啊，不然那么多值我还得用计算器敲，然后分阶段用媒体查询重新设定比例，实现自适应html,body{ font-size: 100px !important;}@media only...原创 2019-11-28 15:08:22 · 653 阅读 · 0 评论 -
下拉列表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 · 180 阅读 · 0 评论 -
不定高度的slideUp动画效果
slideUp动画效果可以通过给盒子高度设置为0，hover时给盒子真正的高度，然后用transition来实现动画效果。但是由于网页是响应式的，而且有一组盒子，盒子的内容又不一致，实在无法设置统一的高度。最后给盒子设置max-height：0，hover时设置max-height：最高盒子的高度来实现动画效果。...原创 2019-11-27 16:02:21 · 342 阅读 · 0 评论 -
获取某一年的起始时间和结束时间
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 · 2415 阅读 · 0 评论 -
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 · 1370 阅读 · 0 评论 -
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 · 283 阅读 · 0 评论 -
phpstorm+xdebug+php调试遇到的大坑
每次调试只能进到index.php的第一行，按下一步调试就停止了，调试框里面显示frames are not avaliable. 本来以为是配置出了问题，一直在修改各种配置，但没有用，配置过程链接。然后也是根据php版本来下载xdebug版本，所以两者是对应的。最后查了好几天，有人说是phpstorm版本过低，感觉自己突然找到了明灯，因为我的xampp下载的是最新版本，所以php的版本肯定是最高...原创 2019-10-08 11:14:57 · 591 阅读 · 0 评论 -
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 · 569 阅读 · 0 评论 -
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 · 184 阅读 · 0 评论 -
jQuery获取元素尺寸的一些方法
返回或设置文档的滚动条的垂直位置。jQuery(window).scrollTop()jQuery(window).scrollTop(offset)网页工作区域高度jQuery(window).height()整个网页文档的高度jQuery(document).height()某个元素相对于document文档的坐标jQuery(ele).offset()....转载 2019-09-04 10:30:25 · 472 阅读 · 0 评论 -
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 · 461 阅读 · 0 评论 -
多行文字垂直居中的方法
第一种方法.parent{ /* 父元素设为块级表格元素 */ /* 父元素宽度设为100%就可以在整个屏幕中垂直居中了，如果给子元素宽度设置为100%没用， /* 对display：table-cell的元素使用百分比设置宽度和高度没有用，可以设置固定宽度和高度*/ display: table; border:1px solid red; width: 100%; height...原创 2019-08-15 17:46:21 · 150 阅读 · 0 评论 -
条纹背景
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 · 252 阅读 · 0 评论 -
img标签
响应式页面 pc端图片高度固定 移动端高度没有要求img标签的父盒子只给高度不给宽度或者只给高度不给宽度，则图片会根据设置的高度或宽度进行等比例缩放.parent{ height: 3rem;}img{ height: 100%;}在移动端页面将图片的父盒子设置为height：auto防止变形.parent{ height: auto}img{ height: 100%...原创 2019-08-21 18:23:55 · 148 阅读 · 0 评论 -
省略号
一行文字显示省略号.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 · 128 阅读 · 0 评论 -
word-break、word-wrap、white-space三者的区别
转载链接white-space 控制空白字符显示及是否自动换行值意义normal折叠空白字符，无换行符，自动换行nowrap折叠空白字符，无换行符，永不换行pre保留空白字符、换行符，不自动换行pre-wrap保留空白字符、换行符，自动换行pre-line折叠空格，保留换行符，自动换行word-break 控制单词如何被拆分换行...转载 2019-08-17 11:33:57 · 135 阅读 · 0 评论 -
flex-shrink的使用
最近工作用到flex布局，左边自适应宽度flex-fill，右边固定宽度但是发现右边显示的宽度比设置的小原来他的宽度是被压缩了，加上flex-shrink：0就可以了不过这个属性是在父容器空间不足时才会压缩，我的这种情况并没有...原创 2019-08-23 15:40:04 · 408 阅读 · 0 评论 -
瀑布流的使用
今天做的新闻列表，本来用bootstrap的网格样式来实现，但因为每个新闻的图片大小不一致，所以每行列表的顶部对齐，底部不对齐，有点奇怪，要求改成瀑布流。bootstrap 的网格效果在每行的大小都是一样的，这是因为row默认不指定align-items这个样式, 而该样式不指定默认为stretch(拉伸), 因此当第一列将row撑高后, 第二列也会被拉伸, 这种情况给row指定下align-i...原创 2019-08-26 15:18:04 · 314 阅读 · 0 评论 -
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 · 2656 阅读 · 0 评论 -
css布局之上下两列多个元素对齐
图片和下面的队名对齐，中间盒子居中分为上下两个盒子 本来用flex布局的justify-content-around但没法完全对齐，因为每个小盒子的宽度都不一致改成左右浮动，上下盒子宽度均为40%，然后内容居中对齐...原创 2019-08-29 09:52:50 · 1609 阅读 · 0 评论 -
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 · 262 阅读 · 0 评论