大师网-带你快速走向大师之路 解决你在学习过程中的疑惑,带你快速进入大师之门。节省时间,提升效率

border

《BORDER》是由日本朝日电视台出品,于2014年4月10日首播的一部惊悚悬疑电视剧,共9集。桥本一、波多野贵文执导,金城一纪编剧,小栗旬、青木崇高、南波瑠 、远藤宪一、古田新太、泷藤贤一等主演。该剧讲述了内心倍感空虚和孤独的青年刑警石川安吾一次在例行巡查犯罪现场附近时,被神秘之人开枪击中头部而命悬一线。幸运的是石川最终从死亡线上活转过来,并意外拥有了可以跟死者进行对话的能力,并从此利用这种能力为追寻真相而四处奔走[1]  。

重温大漠CSS3知识文本篇 text-overflow

重温大漠CSS3知识文本篇 text-overflow 当网页制作中遇到了文本内容溢出的问题,你会使用什么CSS3方法来处理呢?此时CSS3的text-overflow会帮助你解决这一个问题。- Snip20180722_1.png text-overflow:clip 实例1 css3 文本溢出 .text-overflow-clip { width: 100px; padding: 10px; border: 1px solid #ccc; /* 强制不换行 */ white-space: nowrap; /* 溢出隐藏 */ overflow: hidden;'来代替隐藏部分 */ text-overflow: ellipsis;

小Tip:有三角的指示框阴影实现

小Tip:有三角的指示框阴影实现 有三角的指示阴影框 利用css3滤镜 drop-shadow 直接上代码: . filter: drop-shadow(0px 0px 2px rgba(0,0,0,0.4));jiao{ height: 0px; width: 0px; border-bottom: 10px solid #fff; border-left: 10px solid transparent; margin: 0 auto; background: #fff; border-radius: 5px;

css基础小知识笔记

} 33、overflow基本属性: visible(默认) hidden 超出部分影藏 scroll 超出本分会给页面增加滚动条 auto 自动 inherit IE8以上支持 overflow-x:hidden --- IE8+ 如果x值和y值不同,则值大的一方会出现滚动条 overflow-y:hidden 会出现滚动条: 1、overflow:auto/scroll -- / 2、内容超出 3、无论什么浏览器,默认滚动条都来自而不是标签 4、IE7-浏览器默认:html{overflow-y:scroll;container{padding-left:calc(100vw - 100%);

PHP与反ajax推送,实现的消息实时推送功能

PHP与反ajax推送,实现的消息实时推送功能 index.html 反ajax推送 .send{color:#555;text-align: left;on('keyup',function(e){ if(e.keyCode == 13){ $('#btn_send').trigger('click'); _this.html('已连接');html($('#username').val()}, url:'ajaxPush.PHP', type:'get', timeout:0, dataType:'json', success:function(data){ $('#content_box').append(' '+data.msg+' ');getJSON('write.php',{'msg':massege,'user':user},function(data){ if(data.sf){ $('#content_box').append(' '+massege+' ');

less 引用与配置

Set default font family to sans-serif. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* ========================================================================== Embedded content ========================================================================== */ /** * Remove border when inside `a` element in IE 8/9. */ button[disabled], html input[disabled] { cursor: default; } /** * 1.

对常见的css属性进行浏览器兼容性总结

对常见的css属性进行浏览器兼容性总结 为什么要对css属性进行浏览器兼容性总结呢?用的时候,直接去 Can I Use 里面检索浏览器对该属性的兼容性情况不就好了吗? css3.jpeg 其实,在实际的开发过程中,我们对常见的css属性兼容情况了然于胸,才能极大的提高我们的开发效率,写出可以进行优雅降级的代码。这里并不是说一定要所有的css属性兼容情况都要背下来,对于使用率

那些年在CSS和JS上踩过的坑(1)

必定无效,也就是此时clear:left;。 至此,关于这个坑的描述,产生原因,以及解决办法和原理都大致介绍完了,虽然这篇文章言语上存在着些许混乱,但希望能对遇到同样问题并看到这篇文章的人产生一点帮助~ 另外,想在这里感叹一句,border大法来处理CSS问题就是爽吖~ 本教程版权归饥人谷_宣泽彬和饥人谷所有,转载须说明来源

Zepto.js简介(第二章)

Zepto.js简介(第二章) 接着上章的继续记录。 zepto 特点: 1、体积8kb 2、针对移动端的框架 3、语法同jquery大部分一样,都是$为核心函数 4、目前功能完善的框架体积最小的左右 同jquery相似的语法 核心:$ --作为函数使用 参数: 1、function(){} 2、选择器字符串 3、html标签字符串 3、DOM code --作为对象使用 方法; 1、$.

微信小程序仿微信运动步数排行-交互

png wxml: {{item.name}} {{item.steps}} wxss: /* pages/leftSwiperDel/index.wxss */ view{ box-sizing: border-box;inner.del{ background-color: #e64340;text-align: center; height: 64rpx; margin-right: 16rpx;item-data{ float: right;rankpace{ color: #fa7e04; //加载数据 wx.request({ url: "https://pig.intmote.com/bison_xc/wx/sort.do", method: 'GET', header: { 'Content-type': 'application/json' }, success: function (res) { console.log(res.data) that.setData({ list: res.data });

为什么对css样式初始化

为什么对css样式初始化 因为浏览器的兼容问题,不同浏览器某些标签的默认值是不同的,如果不初始化会导致页面显示的差异,初始化可解决此问题 淘宝样式初始化: body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; } code, kbd, pre, samp { font-family:couriernew, courier, monospace; } table { border-collapse:collapse;

前端开发工作中的一些小心得

3、判断是pc端还是移动端 直接贴代码了 if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) { alert('手机端') }else{ alert('PC端') } 4、清空所有cookie以及session sessionStorage.clear(); } return null; height: 16px; "orientationchange" : "resize", a = function () { var n = t.clientWidth || 320;1), e.addEventListener("DOMContentLoaded", a, !

盒模型

盒模型 timg.jpg 网页都是有盒模型组成,每个盒子都有自己的 width,height,padding,margin,border等组成 width:宽度,在CSS中是指内容的宽度,并不是盒子的宽度 height:高度,和宽度一样的原理 padding:内边距 border:变框 margin:外边距 注意:以后我们所说的宽度是指内容宽度 width.png 盒子模型 div{ width: 200px; padding: 100px; padding: 20px 30px 40px;div1{ width: 200px; margin-bottom: 50px;div2{ margin-top: 30px;

Html之表格

Html之表格 timg.jpg 表格由 标签来定义。每个表格均有若干行(由 标签定义),每行被分割为若干单元格(由 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容 row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 在浏览器显示如下: row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 表格. height: 190px; padding-left: 10px; } thead { border: 1px solid #D2E9F6; background-color:#D2E9F6 ;

Client 家族

// 不带括号,只要屏幕出发,就调用,是一个 函数体 function reSize() { var clientWidth = client(). opacity: 0.4; } #logo { width: 300px; margin-left: -150px; } var box = $("box"); var login = $("login"); login.onclick = function (event) { //点击隐藏滚动条 document.body.style.overflow = "hidden"; box.style.display = "block"; if (event event.stopPropagation){ event.stopPropagation(); event.target.id : event.srcElement.id; if (targetId !

border-image 属性

border-image 属性 timg.jpg border-image 属性 border-image-source 资源 图片路径 border-image-slice 图片边框向内偏移的距离。格式:border-image-slice:top right bottom left 切片 上右下左 比如: border-image-slice: 27;

使用box-sizing布局

使用box-sizing布局 盒模型 在css中比较重要的就是 盒模型,它是在web中比较重要的一个基础点,当然其中涉及到 高度和宽度计算。 width:宽度,在CSS中是指内容的宽度,并不是盒子的宽度 height:高度,和宽度一样的原理 padding:内边距 border:变框 margin:外边距 盒子的宽度 = padding + border +width 盒子的高度 = padding+border+height box-sizing box-sizing: content-box|border-box|inherit .demo { padding: 30px;

CSS理论基础知识

12、一个满屏品字布局如何设计? (1)情况一(第一种真正的品字): 三块高宽是确定的; 上面那块用margin: 0 auto;流,并强制渲染成具有宽高的元素,而float只能够操作文档流内的block元素,因此只要有absolute/fixed在,float将无法起到任何作用,而display的值无论设置成什么样都将是浏览器实际渲染使用的值。 (3)当元素使用了position: static/releative,这时候元素并未脱离文档

CSS: clear 清除浮动 解决网页中的“塌陷”问题

CSS: clear 清除浮动 解决网页中的“塌陷”问题 什么是塌陷 如果父级元素只包含浮动元素,那么在未设置高度的情况下,父级元素的高度塌陷为0;#wrap{border: black 5px solid;text-align: center;} #child3{background-color: blueviolet;/*content属性 : 添加的内容写在这个属性中,与伪对象同时出现 必须有该属性*/ display: block;/*visibility:可视化属性,控制元素是否可见,始终保留元素的物理空间*/ height: 0;

利用定时器和css3动画制作文字依次渐变显示的效果

} div,span{ color: #ffffff; } @keyframes text { 0%{ color: transparent;addClass('display') },index*150) }) 这里主要分两步 第一步 利用setTimeout的延时效果依次将文字显示出来,每个文字显示的时机都是 index*150 ms,其实这时主要效果已经出来了,类似那种打字的效果 第二步 利用animation与keyframe实现每个字的渐变效果,颜色从透明过渡到#fff,这样每个字连起来,就实现了如上图的效果demo体验地址