CSS颜色代码大全

CSS颜色代码大全

FFFFFF#DDDDDD#AAAAAA#888888#666666#444444#000000
#FFB7DD#FF88C2#FF44AA#FF0088#C10066#A20055#8C0044
#FFCCCC#FF8888#FF3333#FF0000#CC0000#AA0000#880000
#FFC8B4#FFA488#FF7744#FF5511#E63F00#C63300#A42D00
#FFDDAA#FFBB66#FFAA33#FF8800#EE7700#CC6600#BB5500
#FFEE99#FFDD55#FFCC22#FFBB00#DDAA00#AA7700#886600
#FFFFBB#FFFF77#FFFF33#FFFF00#EEEE00#BBBB00#888800
#EEFFBB#DDFF77#CCFF33#BBFF00#99DD00#88AA00#668800
#CCFF99#BBFF66#99FF33#77FF00#66DD00#55AA00#227700
#99FF99#66FF66#33FF33#00FF00#00DD00#00AA00#008800
#BBFFEE#77FFCC#33FFAA#00FF99#00DD77#00AA55#008844
#AAFFEE#77FFEE#33FFDD#00FFCC#00DDAA#00AA88#008866
#99FFFF#66FFFF#33FFFF#00FFFF#00DDDD#00AAAA#008888
#CCEEFF#77DDFF#33CCFF#00BBFF#009FCC#0088A8#007799
#CCDDFF#99BBFF#5599FF#0066FF#0044BB#003C9D#003377
#CCCCFF#9999FF#5555FF#0000FF#0000CC#0000AA#000088
#CCBBFF#9F88FF#7744FF#5500FF#4400CC#2200AA#220088
#D1BBFF#B088FF#9955FF#7700FF#5500DD#4400B3#3A0088
#E8CCFF#D28EFF#B94FFF#9900FF#7700BB#66009D#550088
#F0BBFF#E38EFF#E93EFF#CC00FF#A500CC#7A0099#660077
#FFB3FF#FF77FF#FF3EFF#FF00FF#CC00CC#990099#770077

顏色名稱代碼

顏色

maroon #800000 
darkred#8B0000 
brown#A52A2A 
firebrick #B22222 
crimson#DC143C 
red#FF0000 

桃紅~紛紅

顏色名稱代碼

顏色

mediumvioletred#C71585 
palevioletred#D87093 
deeppink #FF1493 
fuchsia(magenta)#FF00FF 
hotpink#FF69B4 
pink #FFC0CB  
lightpink #FFB6C1 
mistyrose#FFE4E1 
lavenderblush#FFF0F5 

顏色名稱代碼

顏色

indigo#4B0082 
purple#800080 
darkmagenta #8B008B  
darkorchid #9932CC 
blueviolet#8A2BE2 
darkviolet#9400D3 
slateblue#6A5ACD 
mediumpurple#9370DB 
mediumslateblue #7B68EE  
mediumorchid#BA55D3 
violet #EE82EE 
plum#DDA0DD 
thistle #D8BFD8  
lavender#E6E6FA 

褐~橘~米白

顏色名稱代碼

顏色

saddlebrown#8B4513 
sienna #A0522D  
chocolate#D2691E 
indianred#CD5C5C 
rosybrown#BC8F8F 
lightcorol #F08080  
salmon#FA8072 
lightsalmon#FFA07A 
orangered#FF4500 
tomato #FF6347  
coral#FF7F50 
darkorange#FF8C00 
sandybrown#F4A460 
peru#CD853F 
tan#D2B48C 
burlywood#DEB887 
wheat #F5DEB3  
moccasin#FFE4B5 
navajowhite#FFDEAD 
peachpuff#FFDAB9 
bisque #FFE4C4 
antuquewhite#FAEBD7 
papayawhip#FFEFD5 
cornsilk #FFF8DC  
oldlace#FDF5E6 
linen#FAF0E6 
seashell#FFF5EE 
snow #FFFAFA 
floralwhite#FFFAF0 
ivory #FFFFF0  
mintcream#F5FFFA 

金~黃

顏色名稱代碼

顏色

darkgoldenrod#B8860B 
goldenrod#DAA520 
gold #FFD700 
yellow#FFFF00 
darkkhaki#BDB76B 
khaki#F0E68C 
palegoldenrod #EEE8AA  
beige#F5F5DC 
lemonchiffon#FFFACD 
lightgoldenrodyellow#FAFAD2 
lightyellow #FFFFE0 

~黃

顏色名稱代碼

顏色

darkslategray#2F4F4F 
darkolivegreen#556B2F 
olive #808000 
darkgreen#006400 
forestgreen#228B22 
seagreen #2E8B57  
green(teal)#008080 
lightseagreen#20B2AA 
madiumaquamarine#66CDAA 
mediumseagreen#3CB371 
darkseagreen#8FBC8F 
yellowgreen #9ACD32 
limegreen#32CD32 
lime#00FF00 
chartreuse#7FFF00 
lawngreen#7CFC00 
greenyellow #ADFF2F  
mediumspringgreen#00FA9A 
springgreen#00FF7F 
lightgreen #90EE90 
palegreen#98F898 
aquamarine#7FFFD4 
honeydew#F0FFF0 

顏色名稱代碼

顏色

midnightblue#191970 
navy#000080 
darkblue#00008B 
darkslateblue#483D8B 
mediumblue#0000CD 
royalblue#4169E1 
dodgerblue#1E90FF 
cornflowerblue#6495ED 
deepskyblue#00BFFF 
lightskyblue#87CEFA 
lightsteelblue#B0C4DE 
lightblue#ADD8E6 
steelblue#4682B4 
darkcyan#008B8B 
cadetblue#5F9EA0 
darkturquoise#00CED1 
mediumturquoise#48D1CC 
turquoise#40E0D0 
skyblue#87CECB 
powderblue#B0E0E6 
paleturquoise#AFEEEE 
lightcyan#E0FFFF 
azure#F0FFFF 
aliceblue#F0F8FF 
aqua(cyan)#00FFFF 

黑~灰~白

顏色名稱代碼

顏色

black#000000 
dimgray#696969 
gray#808080 
slategray#708090 
lightslategray#778899 
dakgray#A9A9A9 
silver#C0C0C0 
lightgray#D3D3D3 
gainsboro#DCDCDC 
whitesmoke#F5F5F5 
ghostwhite#F8F8FF 
white#FFFFFF

资源下载链接为: https://pan.quark.cn/s/d9ef5828b597 在本文中,我们将探讨如何通过 Vue.js 实现一个带有动画效果的“回到顶部”功能。Vue.js 是一款用于构建用户界面的流行 JavaScript 框架,其组件化和响应式设计让实现这种交互功能变得十分便捷。 首先,我们来分析 HTML 代码。在这个示例中,存在一个 ID 为 back-to-top 的 div 元素,其中包含两个 span 标签,分别显示“回到”和“顶部”文字。该 div 元素绑定了 Vue.js 的 @click 事件处理器 backToTop,用于处理点击事件,同时还绑定了 v-show 指令来控制按钮的显示与隐藏。v-cloak 指令的作用是在 Vue 实例渲染完成之前隐藏该元素,避免出现闪烁现象。 CSS 部分(backTop.css)主要负责样式设计。它首先清除了一些默认的边距和填充,对 html 和 body 进行了全屏布局,并设置了相对定位。.back-to-top 类则定义了“回到顶部”按钮的样式,包括其位置、圆角、阴影、填充以及悬停时背景颜色的变化。此外,与 v-cloak 相关的 CSS 确保在 Vue 实例加载过程中隐藏该元素。每个 .page 类代表一个页面,每个页面的高度设置为 400px,用于模拟多页面的滚动效果。 接下来是 JavaScript 部分(backTop.js)。在这里,我们创建了一个 Vue 实例。实例的 el 属性指定 Vue 将挂载到的 DOM 元素(#back-to-top)。data 对象中包含三个属性:backTopShow 用于控制按钮的显示状态;backTopAllow 用于防止用户快速连续点击;backSeconds 定义了回到顶部所需的时间;showPx 则规定了滚动多少像素后显示“回到顶部”按钮。 在 V
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值