如何做网页调色板啊?

2023-04-28 20:15:02html-css032

如何做网页调色板啊?,第1张

那其实是一个拾色器了，很多语言都可以实现，其实原理很简单，点选那个拾色器，可以选择那颜色信息，再把颜色信息换成代码加进去就行了。这个是我用的一个拾色器：代码如下：（直接把它拷贝存成ASP就可以用了。）

<%@ CODEPAGE = "936" %>

<HTML>

<HEAD>

<title>颜色拾取器</title>

function shutwin(){

window.close()

return}

function New(para_URL){var URL=new String(para_URL)

window.open(URL,'','resizable,scrollbars')}

</script></HEAD>

var SelRGB = ''

var DrRGB = ''

var SelGRAY = '120'

var hexch = new Array('0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F')

function ToHex(n)

{ var h, l

n = Math.round(n)

l = n % 16

h = Math.floor((n / 16)) % 16

return (hexch[h] + hexch[l])

}

function DoColor(c, l)

{ var r, g, b

r = '0x' + c.substring(1, 3)

g = '0x' + c.substring(3, 5)

b = '0x' + c.substring(5, 7)

if(l >120)

{

l = l - 120

r = (r * (120 - l) + 255 * l) / 120

g = (g * (120 - l) + 255 * l) / 120

b = (b * (120 - l) + 255 * l) / 120

}else

{

r = (r * l) / 120

g = (g * l) / 120

b = (b * l) / 120

}

return '#' + ToHex(r) + ToHex(g) + ToHex(b)

}

function EndColor()

{ var i

if(DrRGB != SelRGB)

{

DrRGB = SelRGB

for(i = 0i <= 30i ++)

GrayTable.rows(i).bgColor = DoColor(SelRGB, 240 - i * 8)

}

SelColor.value = DoColor(RGB.innerText, GRAY.innerText)

ShowColor.bgColor = SelColor.value

}

</script>

SelRGB = event.srcElement.bgColor

EndColor()

</SCRIPT>

RGB.innerText = event.srcElement.bgColor

EndColor()

</SCRIPT>

RGB.innerText = SelRGB

EndColor()

</SCRIPT>

SelGRAY = event.srcElement.title

EndColor()

</SCRIPT>

GRAY.innerText = event.srcElement.title

EndColor()

</SCRIPT>

GRAY.innerText = SelGRAY

EndColor()

</SCRIPT>

window.returnValue = SelColor.value

window.close()

</SCRIPT>

<TBODY>

<TR>

<TD>

<TABLE border=0 cellPadding=0 cellSpacing=0 id=ColorTable

style="CURSOR: hand">

function wc(r, g, b, n)

{

r = ((r * 16 + r) * 3 * (15 - n) + 0x80 * n) / 15

g = ((g * 16 + g) * 3 * (15 - n) + 0x80 * n) / 15

b = ((b * 16 + b) * 3 * (15 - n) + 0x80 * n) / 15

document.write('<TD BGCOLOR=#' + ToHex(r) + ToHex(g) + ToHex(b) + ' height=8 width=8></TD>')

}

var cnum = new Array(1, 0, 0, 1, 1, 0, 0, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 1, 1, 0, 0)

for(i = 0i <16i ++)

{

document.write('<TR>')

for(j = 0j <30j ++)

{

n1 = j % 5

n2 = Math.floor(j / 5) * 3

n3 = n2 + 3

wc((cnum[n3] * n1 + cnum[n2] * (5 - n1)),

(cnum[n3 + 1] * n1 + cnum[n2 + 1] * (5 - n1)),

(cnum[n3 + 2] * n1 + cnum[n2 + 2] * (5 - n1)), i)

}

document.writeln('</TR>')

}

</script>

<TD>

<TABLE border=0 cellPadding=0 cellSpacing=0 id=GrayTable

style="CURSOR: hand">

for(i = 255i >= 0i -= 8.5)

document.write('<TR BGCOLOR=#' + ToHex(i) + ToHex(i) + ToHex(i) + '><TD TITLE=' + Math.floor(i * 16 / 17) + ' height=4 width=20></TD></TR>')

</SCRIPT>

<TBODY>

<TR>

<TD align=middle rowSpan=2>选中色彩

<TABLE border=1 cellPadding=0 cellSpacing=0 height=30 id=ShowColor

width=40>

<TBODY>

<TR>

<TD rowSpan=2>基色: <SPAN id=RGB></SPAN><BR>亮度: <SPAN

id=GRAY>120</SPAN><BR>代码: <INPUT id=SelColor size=9></TD>

<TR>

</TD>

</TR>

</TBODY>

</TABLE>

</CENTER>

</DIV>

</BODY>

</HTML>

最方便的区分方法是：

PNG格式可编辑。如图片中有字体等，可利用PS再做更改

JPG格式不可编辑。

对于两种格式的解析度,PNG高于JPG。

PNG不适用任何场合，因为它的体积很大，不利用显示，完全用于编辑者作为以后更改图片时做的备份之用。

JPG格式用于很多场合。

PNG是20世纪90年代中期开始开发的图像文件存储格式，其目的是企图替代GIF和TIFF文件格式，同时增加一些GIF文件格式所不具备的特性。流式网络图形格式(Portable Network Graphic Format，PNG)名称来源于非官方的“PNG's Not GIF”，是一种位图文件(bitmap file)存储格式，读成“ping”。PNG用来存储灰度图像时，灰度图像的深度可多到16位，存储彩色图像时，彩色图像的深度可多到48位，并且还可存储多到16位的α通道数据。PNG使用从LZ77派生的无损数据压缩算法。

PNG图片文件一般应用于JAVA程序中，或网页或S60程序中是因为它压缩比高，生成文件容量小。

PNG文件格式保留GIF文件格式的下列特性：

使用彩色查找表或者叫做调色板可支持256种颜色的彩色图像。

流式读/写性能(streamability)：图像文件格式允许连续读出和写入图像数据，这个特性很适合于在通信过程中生成和显示图像。

逐次逼近显示(progressive display)：这种特性可使在通信链路上传输图像文件的同时就在终端上显示图像，把整个轮廓显示出来之后逐步显示图像的细节，也就是先用低分辨率显示图像，然后逐步提高它的分辨率。

透明性(transparency)：这个性能可使图像中某些部分不显示出来，用来创建一些有特色的图像。

辅助信息(ancillary information)：这个特性可用来在图像文件中存储一些文本注释信息。

独立于计算机软硬件环境。

使用无损压缩。

PNG文件格式中要增加下列GIF文件格式所没有的特性：

每个像素为48位的真彩色图像。

每个像素为16位的灰度图像。

可为灰度图和真彩色图添加α通道。

添加图像的γ信息。

使用循环冗余码(cyclic redundancy code，CRC)检测损害的文件。

加快图像显示的逐次逼近显示方式。

标准的读/写工具包。

可在一个文件中存储多幅图像。

文件结构

PNG图像格式文件(或者称为数据流)由一个8字节的PNG文件署名(PNG file signature)域和按照特定结构组织的3个以上的数据块(chunk)组成。

PNG定义了两种类型的数据块，一种是称为关键数据块(critical chunk)，这是标准的数据块，另一种叫做辅助数据块(ancillary chunks)，这是可选的数据块。关键数据块定义了4个标准数据块，每个PNG文件都必须包含它们，PNG读写软件也都必须要支持这些数据块。虽然PNG文件规范没有要求PNG编译码器对可选数据块进行编码和译码，但规范提倡支持可选数据块。

jpg全名应该是JPEG

JPEG 图片以 24 位颜色存储单个光栅图像。JPEG 是与平台无关的格式，支持最高级别的压缩，不过，这种压缩是有损耗的。渐近式 JPEG 文件支持交错。

jpg格式是一种图片格式，使一种比较常见的图画格式，如果你的图片是其他格式的话，你可以通过以下方法转化：

1、photoshop ，打开图画以后，按另存为，下面格式那里选择JPG格式就是了，这个方法比较简单，而且适合画质比较好的，要求比较高的图片转换。

2、如果你要求不高，你直接通过windows附带的图画程序，选择JPG格式就行了，这个来转换的话，画质嘛，马马虎虎，不过在网上嘛，过得去了！

如果JPG格式转其他格式，这样的方法同样适用。归根到底 jpg和gif和有损压缩，png是无损的，所以在用div+css布局时 png就没前两者灵活。

已经给你从新修改。参见http://hi.baidu.com/coleyinhe 的效果，下面代码里的图片是你要的那个心的，鼠标那也是，你自己试试啦，，我空间上我也改啦。。第一次玩空间。。。顺便帮你弄的时候也自己弄个玩玩。。。。以后有什么这些网页语言方面的我都能帮你啦。。代码里的注释已经写得很清楚了。可以根据自己要求改改的。还有什么不对的地方，我再给你弄弄，导航栏的主页博客|相册|个人档案 |好友 |设置这些，如果你要和原来那样或者其他颜色的话。我也可以给你改下，在代码里我也已经标出来了。用16进制的颜色代码写就可以了。----------以下是完整CSS代码------------***************************************---------------------------------------body{background:#000CURSOR: url('http://webme.bokee.com/inc/mouse009.ANI')}/*这里是鼠标的图片*/a:hover{CURSOR: url('http://webme.bokee.com/inc/mouse009.ANI')}/*这里是鼠标碰到连接后的图片*/a:hover {position:relativeleft:1pxtop:1pxclip:rect()}/*body{background:#7CC7FF}/* /*本行为默认模板的，即背景为蓝色，而背景图片不是全部都是的那种*/body{background:url(http://hiphotos.baidu.com/%F6%AD%C0%C7/pic/item/c479b51ce707c98b87d6b6d0.jpg

" target="_blank" >http://hiphotos.baidu.com/%F6%AD%C0%C7/pic/item/c479b51ce707c98b87d6b6d0.jpg

) no-repeatbackground-position: centerbackground-attachment: fixed} /*版权所有cole,[email protected],QQ356572960,允许复制，但请保留该版权信息，否则将动用技术手段破坏！*//*注释说明：如需要修改各分类或者评论以及友情连接这些的那框的高度，超过高度后自动出现滚动条的，那么这个高度设置就是下边注释中 height:500px 这里，height代表高度的意思，500px代表高度尺寸，可以自己设置成1000px 2000px 100px等等*//*色彩配置的注释说明：如需要修改各地段色彩类，请修改代码内如#FFFFFF的，这里使用的是16进制的，可以在一些做图的软件上的调色板里，找到你要的颜色，一般上边都会有一个代码，这个就是这里写的代码了*//*其实CSS样式表的语法格式很简单的，即使不会的人，上边很多语法都是用英文单词的，还有一些参数值，会ASP这些技术的人应该都会啦。。*/#header{height:89pxbackground:url() repeat-x }/*这里是蓝色的那块，就是LOGO后边的那，他是一个小图片，然后拉伸得到的，你也可以直接放大图，但尽量是1024长度的，不然会出现多个相同图片的效果*/#header div.lc{}#header div.rc{background:url(http://zz53.com/images/111.gif) no-repeat top right}/*这里是蝴蝶的那LOGO的地方修改里边的地址即可修改LOGO*/#header div.tit{top:8pxleft:20pxline-height:22pxfont-size:20pxfont-family:黑体}#header div.tit a.titlink{color:#FFFFFFtext-decoration:none}#header div.tit a.titlink:visited{color:#FFFFFFtext-decoration:none}#header div.desc{top:33pxleft:20pxcolor:#FFFFFFfont-size:13px}#tabline{top:89px}/*#tab{top:67pxbackground:#0186E9}*/#tab{top:67pxbackground:filter:alpha(opacity=50)} /*这里有部分是那导航栏的*/#tab a.on,#tab a.on:link,#tab a.on:visited{margin-top:0pxline-height:22pxbackground-color:#7CC7FFcolor:#000000font-size:14px}#tab span{color:#FFFFFFfont-size:14px}#tab a:link{color:#FFFFFFtext-decoration:nonefont-size:14px}#tab a:visited{color:#FFFFFFtext-decoration:nonefont-size:14px} #tab2{background:#DAE9F5}#tab2 span{color:#000000font-size:12pxfont-weight:bold}#tab2 a{font-size:12px}#tab2 a:link{color:#0000CC}#tab2 a:visited{color:#0000CC} /*这里这堆是顶部的*//* .stage{background:url(http://hiphotos.baidu.com/%F6%AD%C0%C7/pic/item/c479b51ce707c98b87d6b6d0.jpg

" target="_blank" >http://hiphotos.baidu.com/%F6%AD%C0%C7/pic/item/c479b51ce707c98b87d6b6d0.jpg

) bottom no-repeat }*/ /*这里是背景图片*/.stage{}#comm_info{color:#666666font-family:Arialtext-align:left}#comm_info div.line{margin-top:5pxline-height:8pxborder-top:1px solid #ECECECbackground:url(http://www.ip.cn/s.php) no-repeat bottompadding-bottom: 40pxmargin-bottom: 10px}background:url(http://www.ip.cn/s.php) no-repeat bottompadding-bottom: 40pxmargin-bottom: 10px#comm_info a{color:#1A991E}#page{height:30pxfont-size:14pxfont-family:Arialtext-align:center}#page span{padding:3pxcolor:#000000font-size:14pxfont-weight:bold}#page a.pc{color:#1A991Efont-size:14pxfont-weight:bold}#page a.pc:visited{color:#1A991E}#page a.pi{padding:3pxcolor:#1A991Efont-size:14px}#page a.pi:visited{color:#1A991E}.mod{margin-bottom:10px}.modhandle{cursor:move}.modth{height:24px}.modhead{padding:4px 4px 0 4px}.modopt{padding:4px 4px 0 0}.modtit{color:#0092FFfont-size:12pxfont-weight:bold}a.modtit{color:#0092FF}a.modtit:visited{color:#0092FF}.modtitlink{color:#FFFFFFfont-size:12pxfont-weight:bold}a.modtitlink{color:#FFFFFFtext-decoration:none}a.modtitlink:visited{color:#FFFFFFtext-decoration:none}a.modtitlink:hover{color:#FF5100text-decoration:underline}.modact{color:#0092FFfont-size:12px}a.modact:link{color:#0092FF}a.modact:visited{color:#0092FF}.modbox{padding:10px 10px 0 10pxbackground-color:#FFFFFFborder-left:1px solid #FFFFFFborder-right:1px solid #FFFFFF}.modtl{background:url(http://img.baidu.com/hi/temp7/ptitl.gif) no-repeat top leftline-height:1px}.modtc{background:url(http://img.baidu.com/hi/temp7/ptitc.gif) repeat-x}.modtr{background:url(http://img.baidu.com/hi/temp7/ptitr.gif) no-repeat top rightline-height:1px}.modbox,.modbl,.modbc,.modbr{filter:alpha(opacity=60)-moz-opacity:0.8width:auto !importantwidth:100%}/*上面这行是透明度的设置，也就是页面和背景的透明度，opacity=60这里可以自己修改，60表示60%的意思*/.modbl{background-color:#FFFFFFborder-left:1px solid #FFFFFFborder-bottom:1px solid #FFFFFFline-height:1px}.modbc{background-color:#FFFFFFborder-bottom:1px solid #FFFFFFline-height:1px}.modbr{background-color:#FFFFFFborder-right:1px solid #FFFFFFborder-bottom:1px solid #FFFFFFline-height:1px}#m_blog{overflow-y:autoheight:500pxscrollbar-face-color:#AAAAAAscrollbar-highlight-color:#fffscrollbar-shadow-color:#000scrollbar-arrow-color:#4b0082scrollbar-base-color:#AAAAAAscrollbar-dark-shadow-color:#69f}/*文章的那滚动条*/#m_blog div.tit{color:#8A3506font-size:14pxfont-weight:boldbackground:url(http://zz53.com/images/222.gif) no-repeat top lefttext-indent: 22pxheight:70pxline-height:75px}#m_blog div.tit a{color:#1A991Efont-size:14pxfont-weight:bold}#m_blog div.tit a:visited{color:#1A991E}#m_blog div.date{margin:5px 0 8px 0color:#999999}#m_blog div.cnt{color:#666666line-height:20pxfont-size:14px}#m_blog div.more{margin:14px 0 16px 0}#m_blog div.more a{color:#1A991Efont-size:14px}#m_blog div.more a:visited{color:#1A991E}#m_blog div.opt{color:#999999font-size:12px}#m_blog div.opt a{color:#1A991Efont-size:12px}#m_blog div.opt a:visited{color:#1A991E}#m_blog div.line{margin-top:17pxline-height:17pxborder-top:1px solid #ECECEC}#m_blog div.none{padding:100px 0 100px 0color:#666666font-size:14px}/*标题的框*/#m_pro a{color:#1A991E}#m_pro a:visited{color:#1A991E}#m_pro div.image{text-align:center}#m_pro div.act{margin-top:10px}#m_pro div.user{margin-top:10pxcolor:#666666font-size:12pxfont-weight:bold}#m_pro div.desc{color:#666666font-size:12px}#m_pro div.line{margin-top:17pxline-height:17pxborder-top:1px solid #ECECEC}#m_pro td{color:#666666line-height:24pxfont-size:14px}#m_album{overflow-x:autoheight:250px} /*这里因为如果没有此限制参数，大图片的时候可能造成整个框架的变形，所以务必保留此项，如不喜欢可以在前面加/*或直接删除即可*/#m_album{overflow-y:autoheight:120pxscrollbar-face-color:#AAAAAAscrollbar-highlight-color:#fffscrollbar-shadow-color:#000scrollbar-arrow-color:#4b0082scrollbar-base-color:#AAAAAAscrollbar-dark-shadow-color:#69f}/*这里是图片也就是像册的那滚动条*/#m_album div.image{text-align:center}#m_album div.page{color:#666666font-size:12pxtext-align:center}#m_album div.page a{color:#0000CCfont-size:12px}#m_album div.page a:visited{color:#0000CC}#m_links{overflow-y:autoheight:200pxscrollbar-face-color:#AAAAAAscrollbar-highlight-color:#fffscrollbar-shadow-color:#000scrollbar-arrow-color:#4b0082scrollbar-base-color:#AAAAAAscrollbar-dark-shadow-color:#69f}/*友情连接的那里*/#m_links div.item{color:#666666font-size:12px}#m_links div.item a{color:#1A991Efont-size:12pxtext-decoration:none}#m_links div.item a:visited{color:#1A991E}#m_links div.line{margin-top:5pxline-height:8pxborder-top:1px solid #ECECEC}#m_artclg{overflow-y:autoheight:120pxscrollbar-face-color:#AAAAAAscrollbar-highlight-color:#fffscrollbar-shadow-color:#000scrollbar-arrow-color:#4b0082scrollbar-base-color:#AAAAAAscrollbar-dark-shadow-color:#69f}/*文章分类的那滚动条*/#m_artclg div.item{color:#666666font-size:12px}#m_artclg div.item a{color:#1A991Efont-size:12px}#m_artclg div.item a:visited{color:#1A991E}#m_artclg div.line{margin-top:5pxline-height:8pxborder-top:1px solid #ECECEC}#m_filed div.item{color:#666666font-size:12px}#m_filed div.item a{color:#1A991Efont-size:12px}#m_filed div.item a:visited{color:#1A991E}#m_filed div.line{margin-top:5pxline-height:8pxborder-top:1px solid #ECECEC}#m_comment{overflow-y:autoheight:120pxscrollbar-face-color:#AAAAAAscrollbar-highlight-color:#fffscrollbar-shadow-color:#000scrollbar-arrow-color:#4b0082scrollbar-base-color:#AAAAAAscrollbar-dark-shadow-color:#69f}/*最新评论的那滚动条*/#m_comment div.item{color:#666666font-size:12px}#m_comment div.item a{color:#1A991Efont-size:12px}#m_comment div.item a:visited{color:#1A991E}#m_comment div.item a.cnt{color:#666666font-size:12pxtext-decoration:none}#m_comment div.item a.cnt:visited{color:#666666text-decoration:none}#m_comment div.item a.cnt:hover{color:#666666text-decoration:underline}#m_comment div.line{margin-top:5pxline-height:8pxborder-top:1px solid #ECECEC}#m_albumlist div.note{color:#666666font-size:14px}#m_albumlist div.desc{margin-bottom:12pxpadding:3px 10px 3px 10pxline-height:22pxbackground-color:#F2F2F2font-size:14px}#m_albumlist div.none{padding:100px 0 100px 0color:#666666font-size:14px}#m_albumlist div.line{margin-top:10pxline-height:16pxborder-top:1px solid #ECECEC}#m_albumlist div.tit{margin:6px 0 7px 0color:#666666font-size:14px}#m_albumlist div.tit a{color:#1A991Efont-size:14px}#m_albumlist div.tit a:visited{color:#1A991E}#m_albumlist span.count{color:#666666font-size:12pxfont-weight:bold}#m_albumlist span.size{color:#999999font-size:12pxfont-family:Arial}#m_albumlist a.act{color:#1A991Efont-size:12px}#m_albumlist a.act:visited{color:#1A991E}#m_albumlist a.page{color:#0000CCfont-size:14px}#m_albumlist a.page:visited{color:#0000CC}#m_albumlist td.image{padding:5pxborder:1px solid #999999background:#FFFFFF}/*这里是像册列表的，就是点导航栏后进入的像册*/#m_friend div.filter{margin-bottom:10pxpadding-left:10pxpadding-top:10pxheight:27pxline-height:27px}#m_friend div.catalog{margin-bottom:10pxpadding-left:10pxheight:27pxline-height:27pxbackground-color:#F2F2F2font-size:14px}#m_friend div.user{margin-top:4pxcolor:#666666font-size:12px}#m_friend div.user a{color:#1A991Efont-size:12px}#m_friend div.user a:visited{color:#1A991E}#m_friend div.line{margin-top:10pxline-height:16pxborder-top:1px solid #ECECEC}#m_setting a{color:#1A991E}#m_setting a:visited{color:#1A991E}#m_setting{line-height:22pxcolor:#666666font-size:14px}#m_setting img.sel{border:4px solid #FFDB7B}#m_setting img.unsel{border:1px solid #D2D2D2}#m_setting span.tit{font-size:14px}#m_setting span.usr{color:#666666}#m_setting div.sel{padding-top:6pxfont-size:14pxfont-weight:bold}#m_setting div.line{margin-top:20pxline-height:16pxborder-top:1px solid #ECECEC}#m_sysinfo a{color:#1A991E}#m_sysinfo a:visited{color:#1A991E}#m_sysinfo{line-height:22pxcolor:#666666font-size:14px}#m_sysinfo span.new{color:#FF0000font-size:10pxfont-family:Arial}#m_sysinfo span.date{color:#666666font-size:14px}#m_setbase{color:#666666font-size:14px}#m_setbase td{color:#666666font-size:14px}#m_setbase div.line{margin-top:5pxline-height:8pxborder-top:1px solid #ECECEC}#in_comment{width:710px}#in_comment div.tit{margin-bottom:12pxcolor:#666666font-size:14pxfont-weight:bold}#in_comment div.user{margin-bottom:6pxcolor:#666666font-size:12px}#in_comment div.user a{color:#1A991Efont-size:12px}#in_comment div.user a:visited{color:#1A991E}#in_comment div.user span.date{color:#666666font-size:12px}#in_comment div.desc{color:#666666font-size:12px}#in_comment div.line{margin-top:17pxline-height:17pxborder-top:1px solid #ECECEC}#in_send div.tit{margin:10px 0 10px 0color:#666666font-size:14pxfont-weight:bold}

词库加载错误未能找到文件“E高铁采集器内存溢出ConfigurationDictStopwordstxt”

# 上一篇：C语言学习有没有什么好的论坛？（新手）

# 下一篇：js如何获取图片的尺寸？