• 三步用CSS写一个商城卡券

    前几天618 ,各大商城都在搞促销活动,今天我们就来用css做一个商城卡卷,具体如下:还在为上面这样格式各样的商城卡券的样式而发愁?CSS 不熟,canvas 太难,怎么办?用 CSS 写一个商城卡券需要几步?一共需要三步:打开这个网址(浏览器输入 https://qishaoxuan.github 2024-08-23 11:00:13
  • 利用css3技术自定义单选按钮和复选按钮的显示框

    单选按钮和复选按钮在网站的表单中经常用到在表单元素中,单选按钮和复选按钮都具有选中和未选中状态。大家都知道,要覆写这两个按钮默认样式比较困难。在CSS3中,我们可以通过状态选择器“:checked”配合其他标签实现自定义样式。首先建立表单的html布局:接着就是样式css创建效果图如下:是不是比默认 2024-08-23 10:45:40
  • 用HTML5和CSS3完美实现网页中动起来的箭头

    我们经常看到许多网站或者H5的动画都做成了整屏切换的形式,为提高用户体验,会在首屏页面下方放上一个动态的向下箭头来提示用户切换至下一屏。动态箭头的效果图如下:那么这种效果是如何实现的呢?其实非常简单,在CSS3中提供了animation属性,专门用于动画。要使用这个属性,需要先了解@keyframe 2024-08-23 09:48:12
  • CSS之渐变色效果的实现

    注:测试浏览器版本号——chrome 75.0.3770.80;opera 60.0.3255.109;firefox 67.0;ie 11。之前《CSS之图片特殊用法》有讲过不同用途的image属性,渐变作为image的属性值参与以上用途。下面主要讲一讲渐变的实际用法。一 线性渐变(linear- 2024-08-23 09:18:12
  • CSS position定位属性

    属性介绍 简单来说position属性主要是用来确定一个控件在页面上的位置。他的取值有五个:1、static (默认)按照控件自身特点定位。2、relative 相对位置定位3、fixed 浮动定位4、absolute 绝对位置定位5、sticky 粘性定位接下来我们具体的讲一下这个几个属性的含义: 2024-08-23 08:48:08
  • 使用CSS实现时间轴展示效果

    先看最终效果:制作思路:在timeline里每一行使用dl标签布局;每行(dl)左侧的边框使用border-left绘制。左侧圆形使用dt布局,我们可以使用border给dt加边框,使用border-radius绘制圆形效果,右侧文字使用dd排列。html布局代码如下:<div class=" 2024-08-23 08:03:39
  • jQuery UI CSS 框架 API

    jQuery UI CSS 框架jQuery UI 包含了一个强大的 CSS 框架,为了创建自定义 jQuery 小部件而设计的。框架包含了通用的用户界面所需的类,且可使用 jQuery UI ThemeRoller 进行维护。通过使用 jQuery UI CSS 框架创建您自己的 UI 组件。您需 2024-08-22 10:45:39
  • 用CSS 样式做出简单好看的button=

    图0一、我们开始先做一个按钮,这就是个一般的按钮,要是在xp系统下看,应该会更丑。图1图2二、给它加些样式,直接对button标签加样式。图3图4三、我们再做一个黄色的按钮,只用修改背景色就可以了。图5图6四、用同样的办法再加两个按钮。图7图8<!DOCTYPE html><ht 2024-08-22 10:33:19
  • CSS四种定位static、relative、absolute、fixed

    第二阶段 CSS315 CSS四种定位及应用1 为什么学习定位position如果,说浮动关键在一个浮”字上面,那么我们的定位,关键在于一个“位”上。PS:定位是我们CSS算是数一数二难点的了,但是,你务必要学好它,我们CSS离不开定位,特别是后面的特效,天天和定位打交道。不要抵触它,反而要爱上它, 2024-08-22 10:18:14
  • CSS如何实现元素水平垂直居中

    CSS中实现元素水平垂直居中是前端开发中常见的需求之一。在本篇文章中,我们将会讨论具体的解决方案,以及如何在实际项目中应用。一、使用Flex布局Flex布局是CSS3中新增的一种布局方式,它可以用来实现元素的水平垂直居中。具体步骤如下:1、在容器上应用Flex布局,可以通过设置display: fl 2024-08-22 09:18:23