当前分类

CSS教程

CSS教程

Sticky Footer 绝对底部的两种套路

最近面了好几个前端,工作经验有高有低,居然都不知道绝对底部是什么,也没有人能说出一种实现方式,让我不禁感慨前端领域的良莠不齐绝对底部,或者说 Sticky Footer,是一种古老且经典的页面效果:当页面内容超出屏幕,页脚模块会像正常页面一样,被推到内容...

CSS教程

在移动端实现一像素边框

由于分辨率 DPI 的差异,高清手机屏上的 1px 实际上是由 2×2 个像素点来渲染,有的屏幕甚至用到了 3×3 个像素点所以 border: 1px 在移动端会渲染为 2px 的边框虽然用户在实际使用的时候,很难发现这 1px 的差异,但是设计师往往会在这 1px 上较劲,这就产生...

CSS教程

用 CSS3 做一个流星雨动画

昨天 UI 提交过来一个登录页的设计稿,要求背景有一个流星雨动画,做完之后觉得挺有趣,分享一下~ 一、流星动画首先创建一个 div 作为画布<div id="stars"><div class="star" style="top: 0px;left: 500px;"></div&g...

CSS教程

实现【打字机动画】的两种办法

打字机动画是一个很常见的动画效果,实现的方式也有很多最近在项目中刚好遇到了类似的需求,整理了几个实现动画的方法,分享一下~ 方法一、 效果最好的打字机动画通过 js 的定时器增减文字,单独用一个标签来写光标动画,这样即使文字换行也能良好呈现 HTM...

CSS教程

Layout 不可思议(二)—— 两侧定宽的三列布局

三列布局作为网页设计中最常见的布局,其实现方法早已被诸位前端大神摸透网上相关的文章很多,原本已无必要再做赘述不过既然开了 Layout 系列,三列布局就是必修课本文整理了一些常用的实现方法,然后加入了一些个人愚见,希望能给诸位看官一些新的启发 效果...

CSS教程

Layout 不可思议(一)—— CSS 实现自适应的正方形卡片

最近被一个布局问题给难住了,枉我一向自称掌握最好的前端技能是 CSS,写完博客就得敷脸去需求是实现一个自适应的正方形卡片,效果如下:顺便(开个坑)写个系列,总结那些设计精妙的布局结构  本次页面的 HTML 结构如下:<div class="row clearfix&...

CSS教程

实现导航栏下划线跟随效果

就像上图这样的动画效果在导航栏里的时候,下划线跟随鼠标移动,鼠标移出导航栏时,下划线回到初始位置,同时要适应导航的宽度 为了适应导航的宽度,就不能给导航元素设置 margin,然后将导航元素的 clientWidth 设置给下划线然后需要让下划线独立于导航之外...

CSS教程

CSS之旅——第一站 为什么要用CSS

不知道有多少码农和我一样,css一直是一个软肋,软到全身酥麻。。。既然软肋来了,只能是要想办法解决,所以就找本CSS权威指南看一看,都说CSS权威指南这本书比较过时,但是内容还是比较充实的,而且内容基本上就是和你交谈一样,非常舒服,好了,下面从正文说...

CSS教程

CSS之旅——第二站 如何更深入的理解各种选择器

上篇我们说了为什么要使用css,这篇我们就从选择器说起,大家都知道浏览器会把远端过来的html解析成dom模型,有了dom模型,html就变成了xml格式,否则的话就是一堆“杂乱无章”的string,这样的话没人知道是什么鸟东西,js也无法什么各种getElementById,所以...

CSS教程

CSS之旅——第三站 强大的伪选择器

说到伪选择器,真的让我体会到了CSS的无比强大,强大到自己貌似都不认识CSS了,有点C# 6.0中一些语法糖带给我们的震撼。。。首先我们可以在VS里面提前预览一下。可以看到,上面的伪类有很多很多,多的让我眼都快瞎了。。。下面就挑一些实用性比较强的说一说。...

CSS教程

CSS中list-style详解

取消默认的圆点和序号可以这样写list-style:none;,list的属性如下:list-style-type:square;//正方形list-style-position:inside;//inside,outside(项目符号内置还是外置)list-style-image:url(image.gif);可以缩写为一句:list-style:square inside url(image...

CSS教程

CSS中border和outline的区别

border:border-width:1px;border-style:solid;border-color:#ccc;可以简写为:border:1ox solid #ccc;outline:outline-width:1px;outline-style:solid;outline-color:#ccc;可以简写为:outline:1ox solid #ccc;2者的用法相似,但是border是会占据盒子模型的大...

CSS教程

CSS-对于IE的兼容问题处理

css兼容问题兼容问题1.文字本身的大小不兼容。同样是font-size:14px的宋体文字,在不同浏览器下占的空间是不一样的,ie下实际占高16px,下留白3px,ff下实际占高17px,上留白1px,下留白3px。解决方案:给文字设定 line-height 。确保所有文字都有默认的 line...

CSS教程

CSS Grid 布局完全指南(图解 Grid 详细教程)

 CSS Grid 布局是 CSS 中最强大的布局系统。与 flexbox 的一维布局系统不同,CSS Grid 布局是一个二维布局系统,也就意味着它可以同时处理列和行。通过将 CSS 规则应用于 父元素 (成为 Grid Container 网格容器)和其 子元素(成为 Grid Items 网格项),你...

CSS教程

CSS white-space 属性

定义和用法white-space 属性设置如何处理元素内的空白。这个属性声明建立布局过程中如何处理元素中的空白符。值 pre-wrap 和 pre-line 是 CSS 2.1 中新增的。默认值:normal继承性:yes版本:CSS1JavaScript 语法:object.style.whiteSpace="pre"可能...

CSS教程

如何把某个元素移除你的视线

1、display:none; 显示为无2、visibility:hidden;隐藏,仍然可以得到宽和高3、widthheight;4、透明度  为0   (由100变换到0,可以做淡入淡出)5、lefttop6、用白色的div盖住7、margin设为负值...... 

CSS教程

CSS链接四种状态注意顺序、UI伪类选择器的顺序

css定义超链接是要有先后顺序的。否则,可能会出现某个或某几个样式不起作用的bug。例如:visited与hover顺序颠倒了,则不能显示hover和active的样式了。正确的顺序:a:link 未访问过的 样式a:visited 访问过的 样式a:hover 鼠标处于鼠标悬停状态的 样式a:ac...

CSS教程

CSS3---关于文本

1.text-overflow用来设置是否使用一个省略标记(...)标示对象内文本的溢出。2.但是text-overflow只是用来说明文字溢出时用什么方式显示,要实现溢出时产生省略号的效果,还须定义强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidd...

CSS教程

css-Sprite

1、将小图片拼接为一张大图的目的:有效减少http的请求量,加速内容显示(因为每请求一次,就会与服务器建立一次链接,建立链接是需要额外的时间开销的)2、实现原理:通过css中:background-position来实现。先控制显示层的大小,然后再通过移动背景图来达到...

CSS教程

link与@import导入css样式区别

XML/HTML代码<link rel="stylesheet" rev="stylesheet" href="CSS文件" type="text/css" media="all" />   XML/HTML代码<style type="text/css" media="screen">   @import url(&...

CSS教程

IE6,7,8,9还有火狐浏览器的兼容

/*FF、Opear等支持Web标准的浏览器*/#header {        margin-top: 23px;        margin-bottom: 23px;}/*IE6浏览器*/*html #header {         margin-top: 13px;        margin-bottom: 13px; } /*IE7浏览器*/*+h...

CSS教程

css垂直水平居中

 12.水平居中总结*满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。*在实际工作中我们会遇到需要为“不定宽度的块状元素”设置居中,比如网页上的分页导航,因为分页的数量是不确定的,所以我们不能通过设置宽度来限制它...

  • 友情链接:微信小游戏
  • 微信扫一扫

    微信扫一扫

    微信扫一扫,分享到朋友圈

    标题
    返回顶部