低一度

rss图标  设计创意  网页设计素材  图标素材  

    颜色运用是Web设计中很重要的一块内容。当你在书写编码时，需要运用到某一款颜色，你是否能立刻写出其color参数值呢？我想很难，再好的头脑也不可能将所有的色值全都记下来。这个时候，你需要通过查询来获取你所需要的color参数。那么，通过什么途径查询呢？你一定想说，最好能有一个专门的色值查询工具，不是吗？下面这段代码，书写的就是一个色值查询工具，单击“运行代码”按钮，即可查看效果演示。至于如何使用，没问题吧？这里就不另加说明了。一起来分享——

<TABLE cellSpacing=1 cellPadding=3 width=350 align=center bgColor=#dddddd border=0> <TBODY> <TR bgColor=#ffffff> <TD align=middle width="10%"><SELECT onchange=selectchg(this.value) name=select1> <OPTION value=1 selected>红</OPTION> <OPTION value=2>绿</OPTION> <OPTION value=3>蓝</OPTION> <OPTION value=4>灰</OPTION></SELECT> </TD> <TD align=middle width="90%"> <TABLE cellSpacing=0 cellPadding=0 width="100%" border=0> <TBODY> <TR> <TD align=right><INPUT class=memo size=10 name=text1> <INPUT class=button onclick=choosecolor() type=button value=">>" name=Button2> </TD> <TD align=right width="3%"> </TD> <TD width="30%"> <TABLE class=cursorcross height=20 cellSpacing=1 cellPadding=0 width=40 border=0> <TBODY> <TR> <TD id=customcolor onmouseover=showcolor(this) bgColor=#ffffff> </TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR> <TR bgColor=#ffffff> <TD align=middle width="10%"> <TABLE class=cursorhand id=tableleft cellSpacing=1 cellPadding=0 border=0><SCRIPT language=VBScript> function hexit(which) hexit=hex(which) end function </SCRIPT> <SCRIPT language=JavaScript> for(i=0;i<=15;++i) {document.write('<tr><td align="center">'+ hexit(0+i*17) +'</td><td id="tdleft' + i +'" bgcolor="rgb('+ (0+i*17) + ',0,0)" width="15" height="15" onclick="changeright(this.num)" onmouseover="showcolor(this)"></td></tr>') document.all['tdleft' + i].num=i } </SCRIPT> <TBODY></TBODY></TABLE></TD> <TD align=middle width="90%"> <TABLE class=cursorcross id=tableleft cellSpacing=1 cellPadding=0 border=0> <SCRIPT language=JavaScript> document.write('<tr><td></td>') for(i=0;i<=15;++i) {document.write('<td align="center">'+ hexit(0+i*17) +'</td>')} document.write('</tr>') for(i=0;i<=15;++i) {document.write('<tr>') document.write('<td align="center">'+ hexit(0+i*17) +'</td>') for(j=0;j<=15;++j) {document.write('<td id="tdrightr' + i + 'c' + j +'" bgcolor="rgb(0,'+ (0+i*17) + ',' + (0+j*17) + ')" width="15" height="15" onmouseover="showcolor(this)" onclick="clickright(this)"></td>')} document.write('</tr>') } </SCRIPT> <TBODY></TBODY></TABLE></TD></TR> <TR bgColor=#ffffff> <TD colSpan=2 height=20>·可选16*16*16种颜色。<BR>·单击左边的颜色会得到更多的颜色。<BR>·单击右边的颜色会固定选取的颜色。 <BR>·输入框可以自定义颜色。</TD></TR></TBODY></TABLE> <SCRIPT language=JavaScript> function selectchg(which) {switch(which) {case '1' :leftR();break; case '2' :leftG();break; case '3' :leftB();break; case '4' :leftA();break; } } function leftR() {for(i=0;i<=15;++i) {document.all['tdleft'+i].bgColor='rgb('+ (0+i*17) + ',0,0)'} rightR(0) } function leftG() {for(i=0;i<=15;++i) {document.all['tdleft'+i].bgColor='rgb(0,'+ (0+i*17) + ',0)'} rightG(0) } function leftB() {for(i=0;i<=15;++i) {document.all['tdleft'+i].bgColor='rgb(0,0,'+ (0+i*17) + ')'} rightB(0) } function leftA() {for(i=0;i<=15;++i) {document.all['tdleft'+i].bgColor='rgb('+ (0+i*17) + ','+ (0+i*17) + ','+ (0+i*17) + ')'} rightA() } function rightR(which) {for(i=0;i<=15;++i) {for(j=0;j<=15;++j) {document.all['tdrightr' + i + 'c' + j].bgColor='rgb(' + (0+which*17) + ',' + (0+i*17) + ','+ (0+j*17) + ')'} } } function rightG(which) {for(i=0;i<=15;++i) {for(j=0;j<=15;++j) {document.all['tdrightr' + i + 'c' + j].bgColor='rgb(' + (0+i*17) + ',' + (0+which*17) + ',' + (0+j*17) + ')'} } } function rightB(which) {for(i=0;i<=15;++i) {for(j=0;j<=15;++j) {document.all['tdrightr' + i + 'c' + j].bgColor='rgb(' + (0+i*17) + ','+ (0+j*17)+ ',' + (0+which*17) + ')'} } } function rightA() {for(i=0;i<=15;++i) {for(j=0;j<=15;++j) {document.all['tdrightr' + i + 'c' + j].bgColor='rgb(' + (0+i*16+j) + ','+ (0+i*16+j)+ ',' + (0+i*16+j) + ')'} } } var rightclicked=false function clickright(which) {if(rightclicked){rightclicked=false;showcolor(which)}else{rightclicked=true} } function changeright(which) {switch(select1.value) {case '1' :rightR(which);break; case '2' :rightG(which);break; case '3' :rightB(which);break; } } function showcolor(which) {if(rightclicked)return; text1.value=which.bgColor choosecolor() } function choosecolor() {customcolor.bgColor=text1.value } </SCRIPT>
提示：您可以先修改部分代码再运行

颜色值  color  查询工具  效果演示  

    这是我今天心血来潮写的一个简单的图片调用效果。在这个基础上，下一步要做的就是实现ZBlog日志内插图的自动调用与更新，另外就是界面的进一步美化，最终形成一个功能完整的侧边插件。整个过程还是有难度的，不过还是想试试看，为我加油吧^_^。一点说明：目前这个效果（暂定为测试版本吧），只支持手动调用图片，支持列表无限延伸，图片可加链接与描述，同时同步图片说明……以后会慢慢动态化、自动化的，呵呵。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" > <title> 低一度{diyidu} - 多图展示效果 </title> <meta name="Author" content="Stu Nicholls" > <script src="/UPLOAD/switch_toggle.js" type="text/javascript"></script> <link rel="stylesheet" media="all" type="text/css" href="/UPLOAD/more_switch.css" > </head> <body> <h2>低一度{diyidu}</h2> <h3>21nd September 2009</h3> <div id="gallery"> <b class="switch">1</b> <div class="hide"><a href="/post/download_tb.html"> <img class="start" src="/UPLOAD/2009/9/232.jpg" alt="" border="0" ></a> <p><b>演示图1</b> - 50个精美的下载按钮图标分享</p> </div> <b class="switch">2</b> <div class="hide"><a href="/post/logo_design.html"> <img src="/UPLOAD/2009/9/243.jpg" alt="" border="0" ></a> <p><b>演示图2</b> - 从知名网站logo的演变看设计</p> </div> <b class="switch">3</b> <div class="hide"><a href="/post/bl_design.html"> <img src="/UPLOAD/2009/9/256.jpg" alt="" border="0" ></a> <p><b>演示图3</b> - 4个最具创意的博客设计欣赏</p> </div> <b class="switch">4</b> <div class="hide"><a href="/post/flash_image.html"> <img src="/UPLOAD/2009/9/261.jpg" alt="" border="0" ></a> <p><b>演示图4</b> - 怎样轻松提取Flash中的图片</p> </div> <b class="switch">5</b> <div class="hide"><a href="/post/beat_it.html"> <img src="/UPLOAD/2009/9/266.jpg" alt="" border="0" ></a> <p><b>演示图5</b> - Michael Jackson《Beat it》</p> </div> <b class="switch">6</b> <div class="hide"><a href="/post/autumn_health_03.html"> <img src="/UPLOAD/2009/9/269.jpg" alt="" border="0" ></a> <p><b>演示图6</b> - 秋季健康饮食知多少（3）</p> </div> <b class="switch">7</b> <div class="hide"><a href="/post/image_so.html"> <img src="/UPLOAD/2009/9/273.jpg" alt="" border="0" ></a> <p><b>演示图7</b> - 7个基于相似性的图片搜索引擎</p> </div> <b class="switch">8</b> <div class="hide"><a href="/post/pagebar_demo.html"> <img src="/UPLOAD/2009/9/279.jpg" alt="" border="0" ></a> <p><b>演示图8</b> - 13个漂亮个性的分页导航效果</p> </div> <b class="switch">9</b> <div class="hide"><a href="/post/404page.html"> <img src="/UPLOAD/2009/9/281.gif" alt="" width="475" height="264" border="0" ></a> <p><b>演示图9</b> - 10款超个性的404页面截图</p> </div> <b class="switch">10</b> <div class="hide"><a href="/post/logo_maker.html"> <img src="/UPLOAD/2009/9/285.jpg" alt="" border="0" ></a> <p><b>演示图10</b> - 一个不错的在线logo制作站点</p> </div> <b class="switch">11</b> <div class="hide"><a href="/post/image_wztx.html"> <img src="/UPLOAD/2009/9/286.jpg" alt="" border="0" ></a> <p><b>演示图11</b> - 鼠标触发图片文字说明的效果</p> </div> <b class="switch">12</b> <div class="hide"><a href="/post/skydrive_disk.html"> <img src="/UPLOAD/2009/9/287.jpg" alt="" border="0" ></a> <p><b>演示图12</b> - 25G免费网络硬盘SkyDrive</p> </div> <b class="switch">13</b> <div class="hide"><a href="/post/qq_ljqlsoft.html"> <img src="/UPLOAD/2009/9/291.jpg" alt="" border="0" ></a> <p><b>演示图13</b> - QQ垃圾文件清理通用版V2.0</p> </div> <b class="switch">14</b> <div class="hide"><a href="/post/pjskins_download.html"> <img src="/UPLOAD/2009/9/295.jpg" alt="" border="0" ></a> <p><b>演示图14</b> - 9款MT系列原创Skins for PJBlog</p> </div> <b class="switch">15</b> <div class="hide"><a href="/post/pjskins_download.html"> <img src="/UPLOAD/2009/9/303.jpg" alt="" border="0" ></a> <p><b>演示图15</b> - 9款MT系列原创Skins for PJBlog</p> </div> <b class="switch">16</b> <div class="hide"><a href="/post/autumn_health_06.html"> <img src="/UPLOAD/2009/9/306.jpg" alt="" border="0" ></a> <p><b>演示图16</b> - 秋季健康饮食知多少（6）</p> </div> <b class="switch">17</b> <div class="hide"><a href="/post/url_changetool.html"> <img src="/UPLOAD/2009/9/308.jpg" alt="" border="0" ></a> <p><b>演示图17</b> - 1款不错的专用链接转换工具</p> </div> <b class="switch">18</b> <div class="hide"><a href="/post/qq_mail.html"> <img src="/UPLOAD/2009/9/314.jpg" alt="" border="0" ></a> <p><b>演示图18</b> - 今天开通了QQ域名邮箱服务</p> </div> <br class="clear"> </div> <p>© 2009 <a href="http://www.diyidu.cn/">diyidu.cn</a></p> </body> </html>
提示：您可以先修改部分代码再运行

Web设计  低一度  效果演示  图片调用  

    如题。利用Css+div技术，一段简单的代码，即可实现此效果——鼠标经过图片，图片上方将出现一个蒙层，蒙层上面是该图片的说明、介绍文字；鼠标移开，文字即刻隐藏。这一技术效果，对一些以图片展示为主的站点来说，是很实用的。它能让页面上的布局达到最简化，即尽可能地排除文字的结构干扰，但同时又不会尚失必须的文字说明。OK，一起来看代码！（查看效果演示请直接点击“运行代码”按钮。）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank" rel="external">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>"> <html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank" rel="external">http://www.w3.org/1999/xhtml</a>" lang="UTF-8"> <style type="text/css"> body{ background:#1d1d1d; } .imgteaser { margin: 0; overflow: hidden; float: left; position: relative; } .imgteaser a { text-decoration: none; float: left; } .imgteaser a:hover { cursor: pointer; } .imgteaser a img { float: left; margin: 0; border: none; padding: 10px; background: #fff; border: 1px solid #ddd; } .imgteaser a img { float: left; margin: 0; border: none; padding: 10px; background: #fff; border: 1px solid #ddd; } .imgteaser a .more { position: absolute; right: 20px; bottom: 20px; font-size: 12px; color: #fff; background: #000; padding: 5px 10px; filter:alpha(opacity=65); opacity:.65; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)"; /*--IE 8 Transparency--*/ } .imgteaser a:hover .desc{ display: block; font-size: 12px; padding: 10px 0; background: #111; filter:alpha(opacity=75); opacity:.75; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; /*--IE 8 Transparency--*/ color: #fff; position: absolute; bottom: 11px; left: 11px; padding: 10px; margin: 0; width: 400px; border-top: 1px solid #999; } .imgteaser a:hover .desc strong { display: block; margin-bottom: 5px; font-size:14px; } .imgteaser a .desc {display: none; } .imgteaser a:hover .more { visibility: hidden;} </style> </head> <body> <div class="imgteaser"> <a href="#"> <img src="/upload/2009/9/286.JPG"> <span class="more">» 关于</span> <span class="desc"> <strong>Diyidu.cn</strong>低一度{diyidu}出品，必是精品。请牢记我的永久域名：diyidu.cn。欢迎您收藏与订阅diyidu。 </span> </a> </div> </body> </html>
提示：您可以先修改部分代码再运行

效果演示  网页设计  设计案例  设计尝试  

    低一度{diyidu}上线至今，已有一段日子了。一直忙着更新日志，直到今天才突然想起还没有为它设置404页面。呵，真是糊涂！一个个性的404错误页面提示对站点的SEO来说是相当有价值的，怎能轻易就忽视掉呢？于是亡羊补牢，草草设计了一个。先来个截图吧——

404个性页面  网页设计素材  页面模板  网页设计  

 

Web设计  网页设计素材  分页导航  效果演示