-
优化阅读体验网站全局字体CSS最佳写法
英文字体的文件大小比较小可以使用嵌入字体让网站展示更好,但中文就不一样了,文件大小是 MB 级别,为了 WEB 端性能,只好使用系统自带的默认字体,然而我们有 Windows 和 Mac OS 两个系统,这两个系统的默认字体是不同的,那么 CSS 中的 font-family、字体大小、颜色、行距如何设置才是最美、最好看的呢?作为网页设计师,对这方面也有所研究,下面是设计达人(公众号 ID:she…- 1
- 0
-
巧妙利用CSS自动裁剪图像
页面中需要在某个位置显示固定长宽的正方形图片,图片中有接近正方形比例但不是正方形,用 PHP 生成裁剪后的缩略图显然不合适,经过研究发现用 CSS 可以完美切割图片,经过测试 Chrome,FF,IE6-9 没问题。css 有一个 clip 属性可以剪切对象,对象 position 必须为 absolute。 在 css 中,可以利用 clip 属性剪切图片,该属性用于剪切绝对定位的元素,当该元素…- 3
- 0
-
纯CSS代码将整个网站页面变成黑白色整站灰色
对于南京大屠杀这样需要悼念的日子,一般在全国哀悼日,大地震的日子,清明节,我们都会让自己的网站全站灰色,以表示对逝者的悼念。以及一些影响力很大的伟人逝世或纪念日的时候,身为站长的我们都会让自己的网站的全部网页变成灰色(黑白色),以表示我们对逝者的悼念。很多人也都想把自己的网站弄成全站黑白来表示自己的哀悼之情。还有其他特殊原因(比如汶川大地震)对部分事件表示哀悼,所以需要把整个网站设置为灰色或者黑白…- 3
- 0
-
常见CSS五种隐藏元素方式
今天微码盒分析下 CSS 隐藏元素,通常小伙伴们都会想到的一种方法就是设置 display:none,这是也是最为人所熟知并且是最常用的方法。 当然我也相信还有不少人想到使用设置 visibility:hidden 来隐藏元素,这种方式也是常用的方法,而且也有很多人知道两者的不同。 除了这两种方法,本文总结了四种 css 隐藏元素方式,具有一定的参考价值,比较了这几种“隐藏”元素方法的区别和优缺点…- 9
- 0
-
网站侧边添加梅花飘落特效
给网站左右两侧添加梅花飘落特效,花瓣从空中飘落,想雪花一样非常漂亮,刚开始耍博客的时候,比较热衷于这些,其实就是给网站加上一些特效,稍微的美化下带来一点异样的感觉,如果看起来感觉还可以,并且有兴趣的话,那我们继续看下怎么操作: 步骤一 首先,在 body 中,添加一个 div,来放置梅花树枝的图片 <div id="meihua"></div> 步骤二 …- 4
- 0
-
通过JS实现一键复制指定内容教程
经常会见到网站上各种“一键复制”的友好体验按钮,不局限于 code 的复制,这样友好的体验,方便快捷的操作对访客来说百利无一害。在网上搜索了一番关于“JS 实现一键复制”的文章数不胜数啊。用得较多的就是通过 clipboard.min.js 来实现复制,毕竟现在 Flash 在各浏览器中被禁用等等各种不友好。今天分享一个实用的功能,通过点击事件复制一段文本到剪切板,在网上找了一些,整理了一下,方便…- 5
- 0
-
HTML5 placeholder美化input背景提示文字
CSS3 里提供了专门的规则属性来美化用 placeholder 实现的 input 输入框的背景提示信息。下面我们来看看如何用专用的 CSS 属性来美化具有 placeholder 属性的 Input 输入框。 CSS 代码 在火狐浏览器中的写法和在谷歌浏览器和 Safari 里的写法有些不同,但相信以后会统一。 /* 通用 */ ::-webkit-input-placeholder { co…- 2
- 0
-
使用CSS3实现酷炫的3D旋转透视
3D 动画效果现在越来越普及,已经被广泛的应用到了各个平台,比如阿里云,华为云,webpack 官网等。它可以更接近于真实的展示我们的产品和介绍,带来极强的视觉冲击感。所以说,为了让自己更加优秀,css3 3D 动画必不可少。 1.CSS3 3D 转换的常用 API 介绍 首先先上一张 css 3D 的坐标系: 接下来我们来介绍几个常用的 api: 旋转 rotateX() rotateY() r…- 2
- 0
-
HTML+CSS+JS实现今天的日期和今天剩余的时间
使用 html+css+js 实现日历与定时器,看看今天的日期和今天剩余的时间。 哎,今天就又这么过去了,过的可真快。代码如下,复制即可使用: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title<…- 3
- 0
-
CSS 文字加粗不影响整体宽度
在写 Tab 组件时(每一项的数据都从后台获取,width 宽度不定,使用 padding 隔开),下划线时通过计算每一项的宽度实现滑动效果,字体加粗标记当前项,且当鼠标 hover 时,对应项的字体也加粗,此时由于字体加导致粗宽度变化了,所以滑块位置也偏移了,想到用鼠标的 mouseenter 和 mouseleave 重新计算宽度,但是比较麻烦,有没有好的方法处理,使字体加粗不影响宽度的改变?…- 17
- 0
-
CSS控制图片水平居中与垂直居中
一个网站上会有很多图片,在网站排版过程中,需要设置图片居中显示。通过 CSS 控制图片居中显示,包括水平居中与垂直居中。图片的水平居中比较简单,也比较常见。就是使用外边距 margin:0 auto 来控制水平居中: .cont img{display:block;margin:0 auto;} 要实现图片在一个区域垂直居中,需要设置图片所在区域的 DISPLAY 属性,把这个区域名转化成单元格,…- 14
- 0
-
Pjax 无刷新加载页面基础示例
今天浏览了一些精美的前端页面,然后看见有些页面运用了pjax,让整个页面加载很快。之前很久就想去看看 Pjax 是怎么实现的了,今天就去了解了一下,然后懂得了他的运行原理。下面就来分享一下。 在两个不同的页面,把内容放在同一个容器当中,然后绑定本页的所有 a 标签,然后替换旧的容器的内容为新的内容。为了方便理解,我绘制了一个草图(画的不好,不喜勿喷)。 第一步 首先在页面引入 Jquery1.7 …- 10
- 0
-
浅谈 CSS3 盒布局与弹性盒布局
在网页布局中,如果让让几个块状区域横向排列,常用的方法就是使用 float:left。但使用 float 属性时,会出现一些问题,例如浮动,并且如果不同版块的内容数量不一样就会造成各个版块的高度不一样。 什么是 CSS3 盒布局 那么 CSS3 盒布局 display:box 就可以解决这样的问题,它可以不需要使用 float 属性就可以横排块状元素。并且每一个版块的高度都是一样的。它的作用与 C…- 8
- 0
-
CSS 自定义浏览器滚动条样式
最近在使用 Chrome 浏览器访问 QQ 会员的官网时候发现网站的浏览器默认侧边滚动栏变成了如下图所示的样式,后来上网去查询了一下,然后得知该样式是可以通过 CSS 来设计的,于是就是自己捣鼓了一下。 该样式仅限于 Chromium 内核的浏览器,比如谷歌浏览器、QQ 浏览器、360 浏览器等等,非 Chromium 内核的浏览器则不会显示样式,例如火狐浏览器,欧朋浏览器等等。 CSS 元素 :…- 5
- 0
-
除了最后一个元素之外其他元素之间添加分隔符
除了最后一个元素之外其他元素之间添加分隔符,您可以使用标准的 CSS 来做到这一点: li:after { content: ','; } li:last-of-type:after { content: ''; } 我更喜欢单独的规则,但如果稍微少一个更简洁: li:not(:last-of-type…- 4
- 0
-
通过css在网页中实现容器内元素横向滚动
网页中元素默认是纵向排列的,我们可以通过 css 属性将容器内子元素实现横向排列,超出隐藏,并可以横向滚动。 基础结构如下: <div class="scroll-box"> <div class="item">1</div> <div class="item">2</div> …- 4
- 0
-
自适应网页怎么做?自适应网页制作方法
自适应网页是指网页根据用户浏览设备的头信息,自动变换网页的 CSS 参数,达到网不同浏览设置显示不同的网页版面的效果。自适应网页的原因就是使用 CSS3 中的@media 属性来判断变换的。在实际网页制作过程中,我们怎么制作自适应网页呢?下面介绍一下自适应网页制作方法。 第一步:在网页头信息中添加 meta 参数; <meta content="width=device-width…- 8
- 0
-
Font Awesome 网站字体图标不显示的解决方法
在做网站过程中,经常会遇到一些奇怪的问题。例如一个网站中有的网页的字体图标正常显示,但有的字体图标却显示为空白。如下图: 正常情况下: 字体图标不显示: 通过浏览器的检查功能,可以查到造成字体图标不显示的原因,是由于字体图标的样式在这些网页中被修改了。解决方法也很简单,只需要在字体图标不正常的网页上面,加上以下的 CSS 样式代码即可。 <style> .fa { font: norm…- 8
- 0
-
手机网站实现左边弹出导航菜单点击一级分类展开二级分类
手机网站实现左边弹出导航菜单点击一级分类展开二级分类,下面介绍一下手机网站常见的左边弹出导航菜单,并且点击一级分类展开二级分类的功能实现方法。 HTML 代码: <ul id="topmeau" class="wap_menu hidden-md hidden-lg"><li class="current-menu-item me…- 13
- 0
-
网站Video标签播放大视频卡顿解决方法(m3u8流媒体)
自从 HTML5 推出之后,网站上的视频可以像图片一样使用 video 标签直接播放了。但使用 video 播放视频有一个缺点就是只能播放小视频,如果视频比较大就会出现卡顿的问题。因为它需要先把视频加载完才会播放。 下面就介绍一下网站 Video 标签播放大视频卡顿解决方法,就是将普通的 MP4 视频转成 m3u8 流媒体,然后再使用 video 标签进行播放。可以彻底解决 Video 标签播放大…- 20
- 0
-
jQuery滚动事件$(window).scroll()实现导航栏高度变化
有些网站的导航菜单的高度随着网页下拉变化,并且将网页恢复到顶部时,高度又恢复。效果如下图: 怎么实现这样的导航栏高度随着网页拖动变化呢?这就需要使用到 jQuery 滚动事件$(window).scroll()。下面介绍一下实现方法。 第一步:在网站导航代码底部放上以下的代码,用于监测导航菜单与滚动条的垂直位置距离,达到标注的高度后,就自动给导航菜单添加一个 class 类 head_up; &l…- 7
- 0
-
为导航菜单添加个性图标字体
目前图标字体非常流行,图标字体使用简单,与图片格式的小图标相比,支持视网膜显示,可以无限放大。特别是一些响应式设计的主题模板,都会或多或少使用图标字体,我们还可以单独为导航菜单上的项目也配上个性化的图标字体。 具体方法: 一、WP 后台--插件--安装插件页面搜索:Font Awesome 4 Menus,下载安装并启用。 二、WP 后台---外观---菜单,进入菜单设置页面,选择并编辑一个菜单项… -
WordPress中使用Font Awesome图标
Font Awesome 是一种矢量图标,或者叫图标字体,矢量的好处是无限缩放不会失真,可以适应各种尺寸的屏幕,省掉了做很多图片的麻烦。如果你想在自己的 WordPress 主题中使用 Font Awesome,下面介绍了方法。 插件方案: 我的博客有很多代码,但今天我要把插件放在前面,不希望大家觉得在 WordPress 中使用插件就一定会降低性能。相反,我推荐使用插件,插件小巧灵活,即…
幸运之星正在降临...
点击领取今天的签到奖励!
恭喜!您今天获得了{{mission.data.mission.credit}}积分
我的优惠劵
-
¥优惠劵使用时效:无法使用使用时效:
之前
使用时效:永久有效优惠劵ID:×
没有优惠劵可用!