font-weight与ps字体粗细对应 UltraLight=100Thin=ExtraLight=200Light=300Book=Regular=Normal=400Medium=500DemiBold=SemiBold=600Bold=700ExtraBold=800Heavy=Black=Ultra=UltraBlack=900Fat=ExtraBlack=1000
css 实现圆角边框和文字同时渐变的效果 因为是圆角边框,没法直接用border-image来实现直接用一个盒子实现效果时发现文字的渐变效果就没有了,-webkit-background-clip:text这个属性加不上查看了资料,本来想用 buy-now 盒子的after属性来实现圆角边框,可是也有冲突,实现不了最后加了一个盒子才实现,父盒子实现圆角边框渐变效果,子盒子实现文字渐变效果没想到小小的效果居然这么麻烦<div...
展示历史事件布局 记录下这个布局的实现吧中间的线是背景图片,由一张很小的线的图片在y轴重复而成background: url(./../images/solid.jpg) repeat-y center center;左边的内容左浮动,文字居右对齐右边的内容右浮动,文字居左对齐中间的方块是绝对定位上去的每个li的宽度用百分比在响应式中也毫无压力.stage-event-box li.fr { ...
响应式布局的一些心得 公司太坑,先是说不做响应式,然后做完了又要加响应式,简直坑死人了。通过改成响应式的时候也事发现自己写样式时的一些不足吧,总结下来。将所有的单位改成rem,我设置的是100px = 1rem,毕竟好算啊,不然那么多值我还得用计算器敲,然后分阶段用媒体查询重新设定比例,实现自适应html,body{ font-size: 100px !important;}@media only...
下拉列表select的样式处理 更改箭头样式 appearance: none; -moz-appearance: none; -webkit-appearance: none; background: url("./../images/select-arrow.png") 215px center no-repeat;
不定高度的slideUp动画效果 slideUp动画效果可以通过给盒子高度设置为0,hover时给盒子真正的高度,然后用transition来实现动画效果。但是由于网页是响应式的,而且有一组盒子,盒子的内容又不一致,实在无法设置统一的高度。最后给盒子设置max-height:0,hover时设置max-height:最高盒子的高度来实现动画效果。...
获取某一年的起始时间和结束时间 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...
jquery ajax 传递数据格式是formatData formatData是用于获取表单数据,方便提交添加数据var formatData = new FormData();formatData.append("filter", `{"createtime": ${date} }`);formatData.append("op",'{"createtime":"RANGE"}');获取数据formatData.get("filter")...
js/css插件总结 定位导航滚动插件 jQuery-One-Page-Nav下载链接: git<ul id="nav"> <li><a href="#a0">花卉详情</a></li> <li><a href="#a1">介绍</a></li> <li><a...
phpstorm+xdebug+php调试遇到的大坑 每次调试只能进到index.php的第一行,按下一步调试就停止了,调试框里面显示frames are not avaliable. 本来以为是配置出了问题,一直在修改各种配置,但没有用,配置过程链接。然后也是根据php版本来下载xdebug版本,所以两者是对应的。最后查了好几天,有人说是phpstorm版本过低,感觉自己突然找到了明灯,因为我的xampp下载的是最新版本,所以php的版本肯定是最高...
tp6.0框架和应用项目安装 今天在github上下载了最新的tp v-6.0 应用项目和框架,应用项目改为zerg,核心框架改为thinkphp放入zerg中,zerg放到xampp/htdocs中,然后访问http://localhost/zerg/public/失败,报错如下在网上搜了半天说是没装composer,因为之前在家下载的是v5.0.7没有出现这个问题,很奇怪啊然后按照网上的步骤下载composer,安装...
jQuery的选择器 this元素的直接子元素选择器jQuery(this).children('.race-day-info')this元素的兄弟选择器jQuery(this).siblings('li')not选择器jQuery('#datetimepicker .day').not('.old').not('new')...
jQuery获取元素尺寸的一些方法 返回或设置文档的滚动条的垂直位置。jQuery(window).scrollTop()jQuery(window).scrollTop(offset)网页工作区域高度jQuery(window).height()整个网页文档的高度jQuery(document).height()某个元素相对于document文档的坐标jQuery(ele).offset()....
条纹背景 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表示条纹倾斜角度...
bootstrap 显示省略号(一行搞定 nice)class = “text-truncate”盒子阴影class=“shadow-sm”宽度w-25w-50w-75w-100w-auto高度h-25h-50h-75h-100h-auto最大宽度 最小宽度mh-100mw-100...
css布局之上下两列多个元素对齐 图片和下面的队名对齐,中间盒子居中分为上下两个盒子 本来用flex布局的justify-content-around但没法完全对齐,因为每个小盒子的宽度都不一致改成左右浮动,上下盒子宽度均为40%,然后内容居中对齐...
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;}...
瀑布流的使用 今天做的新闻列表,本来用bootstrap的网格样式来实现,但因为每个新闻的图片大小不一致,所以每行列表的顶部对齐,底部不对齐,有点奇怪,要求改成瀑布流。bootstrap 的网格效果在每行的大小都是一样的,这是因为row默认不指定align-items这个样式, 而该样式不指定默认为stretch(拉伸), 因此当第一列将row撑高后, 第二列也会被拉伸, 这种情况给row指定下align-i...
flex-shrink的使用 最近工作用到flex布局,左边自适应宽度flex-fill,右边固定宽度但是发现右边显示的宽度比设置的小原来他的宽度是被压缩了,加上flex-shrink:0就可以了不过这个属性是在父容器空间不足时才会压缩,我的这种情况并没有...
img标签 响应式页面 pc端图片高度固定 移动端高度没有要求img标签的父盒子只给高度不给宽度或者只给高度不给宽度,则图片会根据设置的高度或宽度进行等比例缩放.parent{ height: 3rem;}img{ height: 100%;}在移动端页面将图片的父盒子设置为height:auto防止变形.parent{ height: auto}img{ height: 100%...