html+css+js+框架
文章平均质量分 52
Ariel_ckr
不会炒股的前端不是好的产品经理。
展开
-
实现左上角类似标签效果
效果图:<div class="content"> <div class="t-right-new"><p>最新</p></div></div>.content{position: relative;width: 150px;height:150px;margin: 30px原创 2018-10-11 16:57:08 · 2073 阅读 · 0 评论 -
选项卡---打开闭合状态转化
实现效果如下:点击列表时,状态由信封的“密封”变成“打开”,信封内容显示,不点击时,为关闭状态,信封内容不显示。&amp;amp;amp;amp;amp;amp;lt;div class=&amp;amp;amp;amp;amp;quot;dynamic_info&amp;amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;a原创 2018-10-31 10:02:06 · 384 阅读 · 0 评论 -
html+css+js实现二级菜单鼠标移动效果
效果图:大体思路:鼠标移至头像时,二级菜单出现,鼠标移至二级菜单,可以对子菜单进行选择,鼠标移出子菜单,子菜单消失。子菜单使用position:absolute绝对定位到父级菜单下方。 &amp;lt;div class=&quot;content&quot;&amp;gt; &amp;lt;img src=&quot;img/index/head.png&原创 2018-10-24 10:36:09 · 3565 阅读 · 0 评论 -
css修改滚动条样式
css给一个内容盒子设置overflow:auto,当盒子里面的内容超过盒子的宽高时,会自动出现滚动条:这种滚动条在一些页面美观要求较高的网页上会显得很突兀,下面来修改滚动条的样式吧~::-webkit-scrollbar::-webkit-scrollbar-thumb::-webkit-scrollbar-track<!DOCTYPE html><html la...原创 2018-11-16 09:57:28 · 380 阅读 · 0 评论 -
利用::before在文字前增加虚线
<p class="content">选择靠谱的驾校,货比三家。不要一味的追求低价,要从驾校规模、训练场地、驾校教练、收费是否合理等方面综合考虑</p>.content{ padding: 12px 0; position: relative; line-height:25px;}.content::before { position:...原创 2019-02-22 15:49:55 · 3131 阅读 · 0 评论 -
解决:input框当type为number时maxlength失效
慕客网标明的用法是适用type为text和passswod的当我input框设置type为number的时候怎么限制输入长度呢?使用outinput就可以啦<input type="number" name="phone" id="phone" value="phone" oninput="if(value.length>11)value=value.slice(0,11)"原创 2019-02-21 11:15:11 · 2471 阅读 · 0 评论 -
jq怎么兼容html富文本标签
可以定义一个隐藏的input框,value属性用于接收带有html标签的文本<input type="hidden" id="catelog" value='{$activity->catalog}' /><div id='text'></div>js首先获取input框value的值,然后写入divvar catelog=$("#catelog...原创 2019-02-26 18:37:10 · 1840 阅读 · 0 评论 -
js正则表达式验证手机号和邮箱
一、验证手机号//验证手机号function isPhoneAvailable(number){ var phoneReg = /^1[3-578]\d{9}$/; if(phoneReg.test(number)){ return true; }else{ return false; }}二、验证邮箱//验证邮箱function isMailAvailable(ma...原创 2019-07-06 11:08:58 · 1867 阅读 · 0 评论 -
jq获取当前点击的ul里li的a标签的值
ul的id为assort var assort=$("#assort li"); assort.click(function () { var classfiyText = $(this).find("a").eq(0).text(); console.log(classfiyText);});如果想要获取第一个li里a的值,也很简单:var assort...原创 2018-06-13 16:22:54 · 6262 阅读 · 3 评论 -
jq实现图片懒加载
<!doctype html><html lang="en"> <head> <meta charset="UTF-8" /> <title>懒加载实例</title> <style type="text/css&quo原创 2019-01-10 19:55:59 · 1422 阅读 · 0 评论 -
解决Vue动态修改样式的一些bug
因为项目需要,最近在入门学习Vue,结果遇到了好多bug,下面先来分享我其中之一的修bug过程: 大致的功能就是动态点击li下的a标签之后一些样式的改变。&lt;div class="assort"&gt; &lt;ul id="assort"&gt; &lt;li v-for="(item,index)原创 2018-06-19 21:53:11 · 6148 阅读 · 0 评论 -
slides.jquery.js快速实现轮播图效果
最近在做项目的时候,发现了这款插件slides.jquery.js,操作起来非常简单,不用自己去敲js代码,只需要简单配置几个属性就可以实现幻灯片轮播了。使用例子:tips:这个例子不做过多样式的修饰,只为了让你们可以快速了解它的使用方法,例子下面我会再写一个好看的轮播图实例哒!&amp;lt;head&amp;gt; &amp;lt;!--下载jq和slides.jquery.js并引入--&amp;gt;...原创 2018-09-30 16:43:21 · 2708 阅读 · 0 评论 -
jq实现选项卡
实现效果:<ul class="t-ul"> <li class="active">吃饭</li> <li>睡觉</li> <li>打豆豆</li></ul><div class="tab-原创 2018-10-16 19:37:22 · 1301 阅读 · 0 评论 -
layui的使用以及针对select、radio等表单组件不显示解决办法
layui是国内一款界面比较整洁大方的ui框架,里面封装了很多前端开发常用的组件,通常我们直接复制代码过去就可以实现效果,可以提高我们的开发效率。使用步骤:1、下载layui:https://www.layui.com2、将layui文件夹复制到自己的项目里:3、在html页面引入相关的css和js:&lt;link rel="stylesheet" type="text/css" ...原创 2018-10-18 11:15:06 · 8903 阅读 · 1 评论 -
dhtml、html、html5、xml、xhtml的区别
刚接触这几个概念的时候,会傻傻分不清楚,觉得它们之间好像好像啊,是耙耙麻麻还是同胞兄妹的联系呢。所以在这里我要一探究竟,也希望真的能帮助到更多的人。=================================================================dhtml DHTML是Dynamic html的简称,就是动态的h...原创 2018-04-08 15:41:52 · 3735 阅读 · 1 评论 -
JSON.stringify()与JSON.parse()的区别
目录目录JSON.stringify()JSON.parse()JSON.stringify()&lt;p id="demo"&gt;&lt;/p&gt;&lt;button id="btn"&gt;点击&lt;/button&gt; &lt;script&am原创 2018-05-16 14:56:22 · 2629 阅读 · 0 评论 -
js实现灯泡开关状态切换
<img id="myimage" onclick="changeImage()" src="img/pic_bulboff.gif" width="25" height="45"><script> function changeImage() { var myimage = document.getElementById('myimage'); if(myi...原创 2019-08-18 12:40:05 · 1861 阅读 · 0 评论 -
html页面滚动到一定位置显示回到顶部按钮
回到顶部按钮在很多页面中都会用到,具体实现效果如下:当页面滚动到一定位置时,页面右下侧出现固定按钮:当鼠标移到按钮上方时,有一定的动画效果:<div class="t-right-bar"> <div class="t-bar-support" data-open-online-form><a href="index.php?a=support&c...原创 2018-10-10 16:50:45 · 10188 阅读 · 1 评论 -
丢开height属性,让div自适应
早初,当我们设计某些板块内容时,我们总会给它一个height值,让它刚好适合内容大小,比如:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><st...原创 2019-12-09 18:43:32 · 39637 阅读 · 10 评论 -
点击a标签怎么发起qq聊天
随碟附送原创 2018-10-18 09:53:57 · 3642 阅读 · 0 评论 -
超好看的按钮动画效果
&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;纯CSS3按钮效果&lt;/title&原创 2018-10-18 17:30:17 · 3163 阅读 · 0 评论 -
html+css实现鼠标移过,底部添加阴影
效果如下:只要你给外层盒子添加这个样式就好了.t-hover-shadow:.t-hover-shadow { transition: transform .3s ease-in-out, box-shadow .3s cubic-bezier(.47, 0, .745, .715), border .3s linear .1s;}.t-hover-shadow:hover {...原创 2018-10-18 17:37:45 · 7655 阅读 · 2 评论 -
html实现鼠标移过为div蒙上一层面纱
实现效果:鼠标移过时:这种效果我们经常会看到吧,那看看代码是怎么实现的:&lt;div class="box"&gt; &lt;img src="../img/1.jpg"&gt; &lt;div class="meta"&gt;文字文字文字&lt;/div&原创 2018-09-30 17:38:05 · 2827 阅读 · 0 评论 -
css3动画效果模板
使用animation、transfrom、keyframes 实现页面动画效果/*张合*/@keyframes open-close { 0%, 10% { -webkit-transform: scaleY(0); -moz-transform: scaleY(0); transform: scaleY(0) } 25...原创 2018-09-30 14:22:38 · 905 阅读 · 0 评论 -
前端知识点收集
一、min-height,height1、min-height:该属性值会对元素的高度设置一个最低限制。因此,元素可以比指定值高,但不能比其矮。不允许指定负值。2、和height的关系:min-height 用来定义一个盒子的最小高度,height如果小于了min-height就会采用min-height3、高度自适应: a、兼容性差异 height:100%; ie6+ ...原创 2018-09-27 20:55:25 · 297 阅读 · 0 评论 -
前端开发布局规范---笔记
* -- 样式说明 -- * 最大优先实现法,全局能实现不用区域,区域能实现不用模板, * 模板能实现不用界面,界面能实现不用标签 * g - 全局 * t - 区域 * m - 模板 * ui - 界面 * lb - 标签 * 特殊标签 * j - 脚本 * fix - 浮窗 */ html, body, ul, li, ol, dl, dd, dt, p, h1, ...原创 2018-09-25 19:16:38 · 1259 阅读 · 5 评论 -
如何居中一个元素
在页面代码开发过程中,我们经常会用到居中显示某个元素来使页面更加美观整齐,而居中显示往往涉及两种布局,一是非浮动元素,而是浮动元素。一、非浮动元素居中div&amp;amp;lt;div style=&amp;quot;width: 200px; height: 200px; background: yellow;&amp;quot;&amp;amp;gt; &amp;amp;lt;div style原创 2018-08-28 16:20:13 · 1276 阅读 · 0 评论 -
js实现未登录用户跳转到登录页面登录完成后返回原页面
首先要获取未登录用户浏览的当前页面的路径:原创 2018-06-12 18:10:54 · 26426 阅读 · 4 评论 -
js实现弹出确认框
目录目录HTMLJavaScript有些时候我们点击按钮或者某个链接时,并不希望它马上运行操作,而是想弹出一个确认框给我们做进一步的确认,这样就可以减少很多无心之失。 实现的过程很简单,直接看代码吧:HTML &amp;lt;a id=&quot;logout&quot;&amp;gt;退出登录&amp;lt;/a&amp;gt;JavaScript va原创 2018-05-23 20:56:39 · 28687 阅读 · 3 评论 -
一段长文字截取显示部分,其余用省略号...
目录[TOC] 我们平时也会遇到这种情况吧,当一段文字很长,但是又不能全部显示时,就想只显示部分文字,然后剩下的用省略号代替。鼠标移到上面时,会有全部的文字显示出来。好,接代码吧。HTML代码&amp;amp;amp;lt;div class=&amp;amp;quot;line&amp;amp;quot; title=&amp;amp;quot;html、css、JavaScript、jq、bootstrap原创 2018-04-16 23:55:54 · 3789 阅读 · 1 评论 -
javascript实现图片轮播效果
目录目录效果预览HTML代码CSS代码JavaScript代码效果预览本章将实现以下效果: HTML代码&lt;div class="wrap" id='wrap'&gt; &lt;ul id="pic" class="pic"&gt; &lt;原创 2018-04-15 21:57:05 · 1807 阅读 · 2 评论 -
针对写好的网页随着窗口大小改变,里面布局变乱的解决方法
最近在模仿学院的首页做一个静态网页时,发现当我把窗口缩小后,里面的组件会乱掉,如下所示:正常大小: 改变窗口大小后: 解决这个问题很简单,就是在整个布局外面加上一层div,并且为它指定好宽高就可以了。.content{ height:**px; //整个布局的高度 width:**px; //整个布局的宽度}要注意的是,要是你前面布局使用了浮动...原创 2018-04-15 23:43:31 · 30895 阅读 · 10 评论 -
HTML+JavaScript显示当前时间
HTML:&lt;div id="timeShow"&gt;&lt;/div&gt;JavaScript: var t=null; t=setTimeout(time,1000); //设置定时器,一秒刷新一次 function time(){ clearTimeout(t); //清楚定时器 dt=new Date(); ...原创 2018-04-14 19:29:35 · 4234 阅读 · 1 评论 -
CSS+DIV布局中absolute和relative区别
这里向大家简单介绍一下CSS+DIV布局中absolute和relative属性的用法和区别,定位为relative的元素脱离正常的文本流中,但其在文本流中的位置依然存在,而定位为absolute的层脱离正常文本流,但与relative的区别是其在正常流中的位置不在存在。详解CSS+DIV布局定位在用CSS+DIV进行布局定位的时候,一直对position的四个属性值relative,ab...转载 2018-03-14 22:15:41 · 1831 阅读 · 1 评论 -
margin-top样式效果出错
初始测试代码如下: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css&quo原创 2018-03-14 22:43:37 · 2029 阅读 · 0 评论 -
screenXY、clientXY、pageXY和offsetXY的区别
一、下拉更新(一)移动端浏览器触摸事件(二)screenXY、clientXY、pageXY和offsetXY的区别1、screenXY是指用户点击的点距离用户电脑屏幕XY的距离2、clientXY是指用户点击的点距离浏览器XY的距离3、pageXY是指用户点击的点距离页面XY的距离,包括滚动的,是对于整个页面来讲的4、offsetXY是指用户点击的点距离父元素的XY的距离;off...原创 2019-08-31 18:25:40 · 419 阅读 · 0 评论