-
CSS3动画之利用requestAnimationFrame触发重新播放功能
所属栏目：[系统] 日期：2020-05-12 热度：155
css3中引入了animation模块,自此css动画进入了我们的视野。css动画名符其实,会写css样式就可以创作动画，对一些不怎么会JS的设计师也是比较包容的。但也正因为如此，当你需要重新播放或者说手动触发动画时，css的局限性就突显出来了，毕竟它不是一门编程语[详细]
-
CSS背景图片实现自适应、全屏、填充与拉伸的方法
所属栏目：[系统] 日期：2020-05-12 热度：99
div id=formbackground style=position:absolute; width:100%; height:100%; z-index:-1 img src=http://www.jb51.net/css/pictures/background.jpg height=100% width=100%/ /div div id=formbackground style=position:absolute; z-index:-1;img src=htt[详细]
-
浅谈CSS 浏览器样式重置终结版
所属栏目：[系统] 日期：2020-05-12 热度：178
副标题#e# 浏览器的一些默认样式，有时候真的是特别丑； 虽然现在有现成的 UI 框架，但有时候写个小东西不想用那么庞大的 UI 框架,这篇文章介绍解决一些样式问题，最后将给出完整的重置样式表; 如果有遇到其它样式问题，评论区提建议，我将持续更新 样式问[详细]
-
CSS实现标签效果的示例代码
所属栏目：[系统] 日期：2020-05-12 热度：100
这里以制作图片右上角标签为例，用CSS以最简单、直接的方式实现效果。 实现效果 实现思路 准备两个div（一个父容器，一个标签div），分别设置宽高，并设置相对布局。 使标签div居于父容器右上角，设置内容居中显示，设置背景和字体颜色，旋转该div。 将父[详细]
-
CSS实现带箭头的提示框效果【示例代码】
所属栏目：[系统] 日期：2020-05-12 热度：166
我们在很多UI框架中看到带箭头的提示框，感觉挺漂亮，但是之前一直不知道其原理，今天网上找了些资料算是弄清楚原理了； 先上效果图： 原理分析： 上面的箭头有没有觉得很像一个三角形，是的，它就是三角形；只不过它这个尖角是通过两个三角形来实现的；[详细]
-
使用css创建一个优惠券的方法
所属栏目：[系统] 日期：2020-05-12 热度：71
添加优惠券类目,展示用户的优惠券 常见的设计样式如下图,核心为半圆 分步拆解 优惠券的特点是带有反向圆角,为了展示效果更好,适配多种场景,不推荐使用背景图片形式,建议使用 css . 网上有几种方案: 一种是 boder+clip 的形式,裁剪出4个小半圆角,拼凑在一起[详细]
-
使用CSS 给表单必选项添加星号的实现方法
所属栏目：[系统] 日期：2020-05-12 热度：113
在制作网页表单的时候，如果一个选项是必填的，通常会给选项添加一个星号，比如 Typecho 的评论表单： p class=form-grouplabel for=author姓名/label span class=required*/spaninput type=text id=author name=author required=required size=30 class=f[详细]
-
css自定义占位文本(placeholder)的样式的方法示例
所属栏目：[系统] 日期：2020-05-12 热度：77
自定义占位文本(placeholder)的样式 当我们对input元素或者textarea元素写CSS样式的时候, 如果需要自定义占位文本(也就是placeholder)的样式的时候怎么办? CSS有一个伪元素选择器::placeholder可以解决我们的问题. 用法 HTML input placeholder=我是红色的[详细]
-
详解CSS3 弹性布局快速入门
所属栏目：[系统] 日期：2020-05-12 热度：118
弹性布局是新一代的布局方式，传统布局中使用浮动布局会给我们带来不少弊端，如CSS代码高度依赖于HTML代码结构等等，下面我将用几个例子让大家快速学会弹性布局。 PS：弹性布局适用于较简单的场景，过于复杂的场景可以尝试着使用CSS3的Grid布局，弹性布局[详细]
-
CSS揭秘之多重边框的实现
所属栏目：[系统] 日期：2020-05-12 热度：81
多重边框的两种实现方案： border-shadow outline !DOCTYPE htmlhtml lang=enheadmeta charset=UTF-8meta name=viewport content=width=device-width, initial-scale=1.0meta http-equiv=X-UA-Compatible content=ie=edgetitleMutiple border/title/headbo[详细]
-
CSS八等分圆的实现示例
所属栏目：[系统] 日期：2020-05-12 热度：180
对于CSS的练习介绍如何绘制八等分的圆。 问题1 主要思路 这个地方的主要思路是将一个八等分的圆分成两部分。左边和右边的圆分别用半圆旋转而得。 1 注意：每个半圆最后要用外面的外包矩形切一下 详见#lfet #right 2 右边旋转的圆顺序不一样后面的可能会遮[详细]
-
CSS开关按钮样式详解
所属栏目：[系统] 日期：2020-05-12 热度：168
副标题#e# 我们将使用纯CSS打造一些切换开关并使其拥有类似于checkbox的用户体验。 很多时候我们都需要用户通过勾选/取消checkbox来表明他们对一些问题的答案。我们设置了一个标签，一个checkbox，并在提交表单后获取checkbox值，以查看用户是否已经选中或[详细]
-
css中子元素设置margin-top为什么影响了父元素
所属栏目：[系统] 日期：2020-05-12 热度：142
style type=text/css*{margin: 0px; padding: 0px;}.show{margin: 0px auto;width: 200px;height: 100px;background-color: #999999;}.show h2{margin-top: 50px;cursor: pointer;}/stylebodydiv class=showh2crystal/h2/div/body 两个div，子元素div设置[详细]
-
解决display:flex属性 justify-content: space-between换行后的排版问题
所属栏目：[系统] 日期：2020-05-12 热度：155
display:flex属性 justify-content: space-between换行后的排版问题 style.wrap {width: 400px;display:flex; /*弹性盒子*/justify-content: space-between; /*两端对齐，子元素之间有间隙*/flex-flow: row wrap;/*子元素溢出父容器时换行*[详细]
-
纯css实现动态边框的示例代码
所属栏目：[系统] 日期：2020-05-12 热度：134
副标题#e# 这几天工作中遇到一个交互需求，要求实现一个效果，当鼠标移入一个元素的时候，元素出现一个动态的边框，如图： 动态边框 思路 看到这个效果，我首先想到的是设置元素的border属性，可惜border不能设置长度，无法实现动效。另外一种实现思路是添[详细]
-
css实现元素垂直居中的常用方法(总结)
所属栏目：[系统] 日期：2020-05-11 热度：58
方法1：table-cell html结构： div class=box box1span垂直居中/span/div css： .box1{display: table-cell;vertical-align: middle;text-align: center;} 方法2：display:flex .box2{display: flex;justify-content:center;align-items:Center;} 方法3：[详细]
-
CSS之宽高比例布局的方法示例
所属栏目：[系统] 日期：2020-05-11 热度：157
在某些特定的场景中，如视频播放、可视化图表占位等一些高宽需要固定的比例。如果占位区间是由固定值确定，那么我们皆大欢喜，但在目前的的应用发展中宽高自适应的方式才能满足我们的需求，那么我们该如何这种自适应的 宽高比布局 呢？ 什么是宽高比？ 宽[详细]
-
CSS之居中布局的实现方法
所属栏目：[系统] 日期：2020-05-11 热度：149
在前端开发中，我们经常会遇到各种上不同场景的关于居中的布局，一般水平居中是相对简单，而 垂直居中与水平垂直则相应要麻烦些。在下来我们对各种场景一一列出解决方案。 水平居中 水平居中相对于其它几中居中排列要简单的多，按标签元素可分为行内元素与[详细]
-
用CSS画一个带阴影的三角形的示例代码
所属栏目：[系统] 日期：2020-05-11 热度：84
怎么用CSS画一个带阴影的三角形呢 ? 有童鞋说, 这还不简单吗 网上有很多解决方案, 但其实大多都是实现不太完美的, 存在一些问题 假设我们做一个向下的三角形箭头 常见的方法大致有两种 通过边框控制, border-left和border-right设为透明, border-top设为预[详细]
-
网页表单在浏览器的表现实例
所属栏目：[系统] 日期：2020-05-11 热度：81
在工作之余抽了点时间写了一下这个，在ie6-ie7-ff下显示位置基本都一致了。 （发现demo页面用栅格线做背景，调试还真的容易得多 。热力推荐！这个栅格是从photoshop里拷贝来的。） 这样子定义了input等标签，做提交表单的时候就不用担心ie6-ie7-ff下radio[详细]
-
CSS教程关于css框架网页设计
所属栏目：[系统] 日期：2020-05-11 热度：87
个人总结了在开发css框架中的一点经验，献丑了。希望大家的讨论能使我们共同进步。:)1、css框架 中国的互联网行业已经发展了10年，浏览器也从最早流行的NS到现在的FF3.IE7等等前端开发工程师的职位也诞生了。近几年在web开发中，有个非常火的词框架。YUI、[详细]
-
符合WEB标准的网页图像的代码精简
所属栏目：[系统] 日期：2020-05-11 热度：90
遵循Web标准的思想，网页要表现出一种亲和力。那么，针对残障用户来说，其阅读器可不能读取图像上传递的信息的。 所以我们会采用一种Using Background-Image to Replace Text的方法，也就是将图像以背景图像的方式插入网页显示，同时为了让残障人士能了解该[详细]
-
WEB标准教程:功能丰富的段落P标签
所属栏目：[系统] 日期：2020-05-11 热度：63
关于段落p/p相信大家已经都在自己的工作中开始关注并应用了。因为那真的是非常简单的事，只要你愿意你随时都可以开始让你的页面代码更为标准化。如果你已经开始跟着《WEB标准能有多难？》在自己的工作中循序渐进地运用WEB标准了，那么这次的内容会让你更进[详细]
-
清除浮动clear:both的应用详解
所属栏目：[系统] 日期：2020-05-11 热度：98
在CSS中我们会经常要用到清除浮动Clear，比较典型的就是clear:both; CSS手册上是这样说明的：该属性的值指出了不允许有浮动对象的边。这个属性是用来控制float属性在文档流的物理位置的。 当属性设置float（浮动）时，其所在的物理位置已经脱离文档流了，但[详细]
-
针对class、id所做的CSS HACK
所属栏目：[系统] 日期：2020-05-11 热度：181
这是一篇关于CSS HACK的文章，这篇文章中提到的CSS HACK是针对class、id中属性的HACK，排列的顺序都具有要求。今天要和大家说的是针对class、id所做的CSS HACK。 .test{/*FF*/ height:20px; background-color:orange; } * html .test{/*IE7*/ height:20px;[详细]
