前端banner切片小细节

前端banner切片小细节
今天在切片的时候遇到了一个问题,这个问题可能以前也遇到过,只是没有记录下来。 那么是什么问题呢,下面详解: 我们在切片(专题页面)的时候 经常会遇到全屏banner的情况,然后呢,这个banner上面还有一个咨询按钮,首先在这里我想先问一个问题,遇到这样的全屏banner (一张图片)的时候,大家是怎么做的呢? 是做一整张图直接插入?当然这不科学,无法适应显示器宽度,会出现滚动条。 <div class="...
守财鹿邀请码

我在工作中总结的一些前端常用小细节

我在工作中总结的一些前端常用小细节
不废话,直接上一些我们工作中常用的前端效果。希望对一些人有用。 1、点击聚焦 onfocus="if (value =='请输入您的电话号码'){value =''}" onblur="if (value ==''){value='请输入您的电话号码'}" 相信很多人在写form表单的时候能用到。顺带提一下,当我们点击input框时会有出现蓝色边框,我们可以这样来处理input{outline:none;}。 2、ie的透明度兼容 background:#000;filter:Alpha(opacity=60); backgr...

css3 条纹背景滚动效果

css3 条纹背景滚动效果
今天在一个网站上看到这样一个效果,我一开始以为一个背景gif图片,为了验证我的想法,我打开firebug 一查看,原来不是gif。是用css3完成的。于是我就在查看css3的api帮助下尝试着 写一写,代码如下 html代码很简单 就一个div就ok,只不过在样式里面 加了一个 :after。 下面直接上css代码: .test{margin: 100px auto; width: 250px;height: 60px; background-color: #666;position: relative;} .test:...

你所不知的 CSS ::before 和 ::after 伪元素用法

你所不知的 CSS ::before 和 ::after 伪元素用法
CSS 有两个说不上常用的伪类 :before 和 :after,偶尔会被人用来添加些自定义格式什么的,但是它们的功用不仅于此。接下来要介绍的这两个伪元素了。 一 基本语法 在了解进阶的应用之前,先来了解一下语法规则。平常仅仅需要将这两个伪元素用于添加一些自定义字符时,只需使用伪类使用的单冒号写法,以保证浏览器的兼容性: p:before  {} 这两个伪类下特有的属性 content ,用于在 CSS 渲染中向元素逻辑上...

CSS 专业技巧收集

CSS 专业技巧收集
一些CSS技巧的收集,能够帮助你提升专业水平。 1. 使用:not()为导航添加/取消边框 很多人会这样给导航添加边框,然后给最后一个取消掉: /* add border */ .nav li { border-right: 1px solid #666; } /* remove border */ .nav li:last-child { border-right: none; } 其实,用CSS的:not()可以简化为下面的代码: .nav li:not(:last-child) { border-right: 1px solid #666; } 2. ...

人人必知的10个jQuery小技巧

人人必知的10个jQuery小技巧
收集的10个 jQuery 小技巧/代码片段,可以帮你快速开发。 1.返回顶部按钮 你可以利用 animate 和 scrollTop 来实现返回顶部的动画,而不需要使用其他插件。 // Back to top $('a.top').click(function () { $(document.body).animate({scrollTop: 0}, 800); return false; }); <!-- Create an anchor tag --> <a class="top" href="#">Back to top</a> 改变 scrollTop 的值...

jQuery+CSS鼠标放图片上滑动显示文字特效

jQuery+CSS鼠标放图片上滑动显示文字特效
鼠标移动图片上显示文字 JQ特效,鼠标移到到图片上时图片底部从下到上显示文字内容,同时背景半透明,本特效使用DIV CSS+jQuery实现。 鼠标悬停放在图片上显示文字内容特效效果截图 <script type="text/javascript"> $(document).ready(function(){ $(".imgtext").hide(); $(".imgbox").hover(function(){ $(".imgtext",this).slideToggle(500)...

DedeCms channelartlist调用排除指定typeid栏目数据

DedeCms channelartlist调用排除指定typeid栏目数据
找到 \include\taglib\channelartlist.lib.php查找$attlist,将 $attlist = 'typeid|0,row|20,cacheid|'; 修改为: $attlist = 'typeid|0,row|20,cacheid|,notypeid|0'; //此处添加了一个所要排除typeid的参数---notypeid 查找: $dsql->SetQuery("Select id,typename,typedir,isdefault,ispart,defaultname,namerule2,moresite,siteurl,sitepath from `zmb_arctype` where $tpsql order by sortran...

CSS3 实现六边形Div图片展示效果

CSS3 实现六边形Div图片展示效果
CSS3 实现六边形Div图片展示效果 实现原理: 这个效果的主要css样式有: 1.>transform: rotate(120deg); 图片旋转 2.>overflow:hidden;  超出隐藏 3.>visibility: hidden;  也是隐藏,与display:none;相似,但不同的是,它虽然隐藏了,但依然会在网页中占有位置 我们要用到3层div进行旋转来得到这个效果(ps:3层div的大小是一样的)。 最外层div(boxF)旋转120度。第二层(boxS)旋转-60度,第三层(b...

Web前端知识技能大汇总

Web前端知识技能大汇总
随着时间的迁移,或许有些技术点会发生改变,所以有了这个GitHub项目。我们可以通过协作的方式来共同维护这个项目。Git的历史记录也可以见证前端行业的一些变迁。 前端开发知识结构 前端工程师 浏览器 IE6/7/8/9/10/11 (Trident) Firefox (Gecko) Chrome/Chromium (Blink) Safari (WebKit) Opera (Blink) 编程语言 JavaScript/Node.js CoffeeScript TypeScript 切页面 HTML/HTML5 CSS/CSS3 Sass/L...
Copyright © WEB小工匠 保留所有权利.   渝ICP备15008469号

渝公网安备 50023602000173号

用户登录

分享到: