-
INPUT、SELECT等表单元素图片对齐问题
今天在写页面时，发现了一个问题，当 INPUT、SELECT 及用图片做的 button 放在一起（并排放一起）时一个高一个矮。刚开始怎么调样式都出不来结构，后来发现原来一个 vertical-align:middle 就可搞定。 归纳如下： 1、INPUT 和图片按钮对齐： <form method="post" action="ccc.asp"&g…- 3
- 0
-
CSS3判断横屏竖屏方式（三种）
很多时候，为了让手机版横竖屏时有一个理想的效果，我们都需要通过判断区间来设定相应的 css 样式，现在的 CSS3 推出了一个可以判断手机横竖屏的媒体查询。在做移动端页面的时候经常会遇到需要判断横屏还是竖屏，下面将目前已知的通过 HTML，CSS，JS 三种判断方法记录下来，方便以后翻阅。 1、通过在 html 中分别引用横屏和竖屏的样式： <link rel="styleshee…- 4
- 0
-
CSS样式表中样式覆盖优先顺序
有时候在写 CSS 的过程中，某些限制总是不起作用，这就涉及了 CSS 样式覆盖的问题，如下： #navigator { height: 100%; width: 200; position: absolute; left: 0; border: solid 2 #EEE; } .current_block { border: solid 2 #AE0; } 查找一些教材中（w3schools 等…- 4
- 0
-
用CSS让字体在一行内显示不换行
当一行文字超过 DIV 或者 Table 的宽度的时候，浏览器中默认是让它换行显示的，如果不想让他换行要怎么办呢？用 CSS 让文字在一行内显示不换行的方法，一般的文字截断(适用于内联与块)： .text-overflow{ display:block; /*内联对象需加*/ width:31em; word-break:keep-all; /* 不换行 */ white-space:nowrap…- 13
- 0
-
通过 CSS自定义属性（CSS变量）和 JavaScript 实现高级CSS主题切换
在本教程中，我们将使用 CSS 自定义属性（也称为 CSS 变量）来为简单的 HTML 页面实现主题切换。 我们将创建暗黑和明亮的示例主题，然后编写 JavaScript 以在用户单击按钮时在两者之间切换。 如果你以前没接触过，请先阅读 CSS 变量(自定义属性)实用指南及注意事项这篇文章 就像在典型的编程语言中一样，变量用于保存或存储值。 在 CSS 中，它们通常用于存储颜色，字体名称，字体大小…- 4
- 0
-
CSS实现背景图片透明和文字不透明效果
项目中经常会用到背景图上放一些文字介绍，这里介绍两种技术来实现背景图片透明，文字不透明效果，记录一下，方便日后学习。 1.毛玻璃效果： 背景图 + 伪类 + flite:blur(3px) CSS 代码 .demo1{ width: 500px; height: 300px; line-height: 50px; text-align: center; } .demo1:before{ backg…- 11
- 0
-
CSS 中 background 属性合并写法
上次写 CSS 样式时同时有 background-size background-positon 两个属性，但是我想合并成一个 background 来写，刚开始遇到了一些麻烦，怎么写都不生效。后面谷歌，我们应该这样子写： background：no-repeat scroll 0px 0px / 200px 29px rgba(0, 0, 0, 0); / 做分割 前面是 background…- 2
- 0
-
网站加入鼠标滑过抖动样式
站长闲下来的时候，就四处逛逛网站，顺便扒点其他网站的代码，比如 html、css、js；都是站长通过 f12 或者 view-source 扒到的，有些代码很容易就能扒到，有些很难，比如今天分享的这个，扒了得半小时，才找到 css 具体代码！支持所有网站，wordpress、typecho、hexo 等等之类的。 代码说明： 该 css 代码，作用于 class 为 post-item 下 h2 …- 3
- 0
-
纯CSS3实现手风琴风格菜单具体步骤
有朋友问我，我的 demo 里面的手风琴效果怎么做出来，看起来很漂亮，其实这个手风琴效果没用一点 js，全部用 css3 来实现的，菜单主要通过使用:target 伪类来实现，教程中我们主要通过使用伪类:before 和:target 来定义样式，使用:target 来实现菜单点击展开子菜单事件，希望你能够喜欢这个教程： 如何使用纯 CSS3 创建手风琴风格菜单呢，菜单主要通过使用:target …- 13
- 0
-
纯CSS实现小箭头的方法
我们大多数的小箭头都是用小图片来做的，这里分享一款用纯 CSS 写的小箭头，大家可以看看，以后会放出更多的 CSS 小箭头来供大家参考。 <div class="pre-wrap"> <div class="pre"> <div class="pre1"></div> <div cla…- 4
- 0
-
CSS3自定义webkit滚动条样式
默认的滚动条样式巨丑，项目中又有比较多地方会显示滚动条，故回头翻了一下 CSS3，还真能不用插件实现自定义滚动条的样式，Webkit 支持拥有 overflow 属性的区域，列表框，下拉菜单，textarea 的滚动条自定义样式。当然，兼容所有浏览器的滚动条样式目前是不存在的。内容超出容器时，容器会出现滚动条，其自带的滚动条有时无法满足我们审美要求，那么我们可以通过 css 伪类来实现对滚动条的自…- 11
- 0
-
超级有意思经典代码注释图
对于很多程序员来说，最讨厌别人不写注释。而有些人写出来的代码注释，通常拥有幽默搞笑的风格，看起来很有意思。网上收集了许多超级有意思的代码注释，有如来佛、草泥马等有趣的注释！ /*** * .,:,,, .::,,,::. * .::::,,;;, .,;;:,,....:i: * :i,.::::,;i:. ....,,:::::::::,.... .;i:,. ......;i. * :;..:…- 4
- 0
-
用纯CSS打造圆形图片旋转的方法
上次看到一个博客的 LOGO 图片很好看，一个旋转的圆形人物图片，但是我看他用了大量的 JS 代码来渲染这个效果。其实这种方式纯 CSS3 是完全可以实现，我们只需要考虑清楚我们的思路。 1、圆形图片 我们这里使用了一张哈弗 H2 的图片。 然后把图片写成圆形。 height: 300px; width: 300px; border-radius: 150px; 2、将图片旋转 这里我们使用了动画…- 3
- 0
-
纯CSS绘制各种箭头方法
用 CSS 即可绘制出各种箭头，无需裁剪图片，甚至没有用到 CSS3 的东西。对浏览器支持良好。以前写过一片文章，我博客的评论框就是用箭头来实现的。原理非常简单，通过截取 border(边框)的部分“拐角”实现，几行 CSS 代码即可理解。 一个梯形 当元素宽、高和边框的宽相近（等）时，改变某一边的颜色可以看到一个梯形: 三角形 当元素宽、高为零，且其他边为透明颜色时，可以形一个三角形: 任意角度…- 2
- 0
-
如何在 JavaScript 中获取 CSS 值
有时候单独的使用 CSS 是不够的。您可能需要使用 JavaScript 控制 CSS 值。但是你如何在 JavaScript 中获得 CSS 值？有两种可能的方式，取决于您是尝试获取内联样式还是计算样式。 获取内联样式 内联样式是存在于 HTML style 属性(attribute)中的样式。 //HTML 代码 <div class="element" style=…- 3
- 0
-
CSS3 文字边框 -webkit-text-stroke 镂空的字体
其实一直没用过这个属性，发现还可以有很不错的效果，就二行代码就搞掂，分享下 CSS 边框的一个不足就是只有矩形的元素才能使用。-webkit-text-stroke 可以为文字添加边框。它不但可以设置文字边框的宽度，也能设置其颜色。而且，配合使用 color: transparent 属性，还可以创建镂空的字体！ 代码如下： h3 { color: transparent; -webkit-tex…- 3
- 0
-
禁止移动设备长按拷贝
网页在手机上浏览时通常会碰到一个问题，就是不小心触摸时间过长就出现自带的拷贝等按键了（有些客户也需要屏蔽手机端复制功能），造成了不好的体验，下面就教你解决办法。 web 端，只需在 css 中加入代码就可以了 *{ -webkit-touch-callout:none; /*系统默认菜单被禁用*/ -webkit-user-select:none; /*webkit浏览器*/ -khtml-use…- 11
- 0
-
jQuery判断鼠标向上滚动并浮动导航
判断鼠标向上滚动，或者向下滚动，可以通过对比用户的上一次滚动的坐标和下一次的坐标，当上一次小于下一次时，即用户在向下滚动，反之，则说明用户在向上滚动。滚动的坐标值可以取窗口的 scrollTop。为啥会有这个需求呢？有没有发现在一国外的一些网站，当你向上滚动时，导航条浮动在顶部位置。用户如果是想看内容就可以直接点击到达，省去很多拖动的时间，当然返回顶部也是比较容易。但有时候返回顶部这个按钮往往被人…- 10
- 0
-
纯CSS3将彩色图片转换成黑白图片
通过使用过滤器我们能够不使用 photoshop 等图像软件或 js、php 等技术就可以进行各种图像处理。 最近到处看到有人在说 CSS3 的 filter 一直没有时间自己去测试这效果。 现在，CSS 过滤器已经被各种现代浏览器广泛支持，我们可以使用一些组合的方法，来制作跨浏览器的图像处理效果， 通过这种方法，即使是在 IE 浏览器中也能够正确的显示我们需要的图像效果。 今天终于抽出时间学习这…- 5
- 0
-
图片垂直水平居中CSS实现方法
在前端开发制作中，图片垂直居中对齐是很常见的，有些是固定高度，有些没有固定高度，分享几种使用 CSS 实现图片垂直&&水平居中的方法，有些可能并不能兼容所有浏览器，大家可以自行选择： 方法一： html { width:100%; height:100%; background:url(logo.png) center center no-repeat; } 方法二： img { …- 7
- 0
-
CSS实现隐藏滚动条并可以滚动内容
当我们的内容超出了我们的 div，往往会出现滚动条，影响美观，尤其是当我们在做一些导航菜单的时候，滚动条一出现就破坏了 UI 效果。 我们不希望出现滚动条，也不希望超出去的内容被放逐，就要保留鼠标滚动的效果。 我们经常在前端开发中遇到这种情况，最容易想到的是加一个 iscroll 插件，但其实现在 CSS 也可以实现这个功能，我已经在很多地方使用了，下面一起看看这三种方法。 方法一： 计算滚动条宽…- 11
- 0
-
font-face 字体文件跨域解决办法字体跨域
开发网站的时候经常会调用不同域名下的字体文件（同源策略禁止读取位于 ttf 文件），但是出现无限的情况，提示如下：已拦截跨源请求： 同源策略禁止读取位于 https://www.weimahe.com/fonts/fontawesome-webfont.woff?v=4.7.0 的远程资源。（原因：CORS 头缺少 ‘Access-Control-Allow-Origin’） 已拦截跨源请求：同源…- 13
- 0
-
竖向长方形图片横向排列并取图片中间不挤压变形的CSS方法
先看下这个图片：一个竖向的长方形图片，需求就是：通过 CSS 的方法使展示的时候竖向图片要实现横向正方形排列而且图片不能变形。一般排列后效果为： 完全变形了，那么进行代码样式优化后的效果为（取图片中间）： HTML 部分： <li> <a href="1.jpg" title="测试" alt="测试"><d…- 8
- 0
-
DIV不确定高度内部元素水平垂直居中的方法归纳
总结当前知道的对 div 嵌套标签水平垂直居中方法，如果还有新的方法，请不吝赐教哦。好，下面开始列举代码咯。首先给需要实现水平垂直居中的两个 div 设置统一的样式： .styl { width: 100%; height: 300px; background: #ccc; margin: 30px auto; position: relative; border: 1px solid #000;…- 15
- 0
-
￥优惠劵使用时效：无法使用使用时效：
之前
使用时效：永久有效优惠劵ID：×