爱易网
IT新闻
IT新闻
爱易资讯
网站搭建
云虚拟主机教程
云服务器教程
Apache教程
IIS教程
Nginx教程
网站策划
站长文章
推广教程
淘宝客教程
网页设计
HTML教程
XHTML教程
CSS教程
HTML5教程
CSS3教程
JavaSript基础
JQuery教程
Node.js教程
前端技术
Ajax教程
Js特效
Xml教程
平面设计
页面UI设计
photoshop教程
程序开发
AI人工智能
Asp教程
Php教程
Asp.Net教程
Net Core教程
C#教程
Java教程
Jsp教程
开发技术
微信小程序教程
Uniapp开发教程
微信公众号开发
Andriod教程
IOS教程
DOS教程
Python教程
Docker教程
Windows Container教程
数据库
MSSQL教程
MySQL教程
Redis教程
Access教程
Oracle教程
数据库教程
操作系统
Linux教程
Windows教程
MAC教程
Cisco教程
交换机教程
防火墙教程
搜索
爱易网页
JS特效
网页配色现场版
网页配色现场版
日期：2014-05-18 浏览次数：20247 次
只是调整各个元素的背景色和前景色，运行看效果吧(IE Only)
以下是HTML网页特效代码，点击运行按钮可查看效果：
以下是程序代码
<?xml version="1.0" encoding="gb2312"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312"> <head> <title>网页配色现场版</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta name="generator" content="editplus" /> <meta name="author" content="eLore" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <style type="text/css"> body { color:#0ff; background:#000; text-align:center; } </style> </head> <body> <div style="margin:10px auto; width:600px; text-align:left; color:#ff0; border-bottom:3px solid #fff;"> 没有艺术细胞，每次配起色来都很头疼，虽然可以用PS，但总是感觉PS里看到的效果和实际浏览的效果有那么一点差别，没法子，只好自己写一个，有什么不足请指正。<br /> 代码写的比较粗糙，大家将就着看；有用的话记得顶一下。<br /> 使用方法：先点击一下要配色的层/元素，然后慢慢调整吧；默认是document.body </div> <div style="margin:10px auto; width:600px; text-align:left;"> <p style="color:#f00">索马里海盗（股份）有限公司（简称索海集团，英文简称“Somalia Pirate Group” ）成立于2000多年前，是一家注册资本为0的具有光荣和悠久历史的武装集团。集团自成立 日起发展十分迅速，虽然经历过历史上多次大起大落，但总体保持着健康向上的发展势头，依托着“非洲之角”的天然地理优势和扼守重要海上要道曼德海峡之利，业务范围不断 地向外扩张。现在已经在阿拉伯海，西印度洋，莫桑比克近海设立多个分支机构。集团预 计在未来的5年内占领全部的西印度洋市场。</p> <p style="color:#0f0">多年来索马里海盗集团在不断苦练内功做大做强的同时，也加强了同海外市场伙伴的 合作，特别是加强了同军火贩子之间的合作，已经初步建立起“你中有我，我中有你”的 全面战略合作伙伴关系。依靠来自世界各国的先进武器，特别是来自俄罗斯的AK-47，RPG 的优势，索马里海盗集团近年来的业务量，业务水平和范围成倍增长。已经初步具备了对抗三流国家海军的水平。</p> <p style="color:#00f">目前，索马里海盗集团正处于改革开放的关键阶段。索马里海盗集团一直怀着冲出索马里，走向印度洋的雄心壮志。而几天前劫持世界第二大油轮事件正式标志着索马里打进了世界一流海盗集团俱乐部。尽管如此，索马里海盗集团仍然清醒地认识到肩负在身上的历史重任，必定坚持美元的领导，坚持杀人放火绑架勒索四项基本原则，坚持拿钱放人的基本国策，努力做到科学绑架，民主分赃，依法放人。索马里海盗集团充分认识到撕票的危害，为此索马里海盗集团愿与世界各国政府和公司一道，携手合作，为保证被绑架人员的生命和财产安全，为维护索马里海盗集团的信用做出自己的贡献。</p> </div> 要想在里面呆得好请找马**<br /> 要想自己的负面新闻在网上消失请找李**<br /> 要想炒作自己请找毛**<br /> 要想减少刑期可对法官说自己每天都上网6小时<br /> <!-- 网页配色现场版：代码开始 --> <div id="color_group" class="color_set" style="position:absolute; top:150px; left:150px; width:355px; height:130px; color:#333; background:#f7f7f7; border:5px groove #808;"> <h3 id="h3" class="color_set" style="margin:0 0 2px; padding:2px 0; font-size:15px; color:#333; background:#f7f7f7; text-align:center; border-bottom:2px solid #633; cursor:move; font-weight:normal;" onmousedown="eLore_color_move(event)">网页配色现场版</h3> <div class="color_set" style="position:relative; top:0px; left:5px; background:#dbb; width:345px; height:20px;"> <div class="color_set" style="position:absolute; top:8px; left:15px; width:255px; height:2px; font-size:1px; border-style:solid; border-width:1px 0; border-color:#b99 #fdd #fdd #b99; background:#333;">RedTrack</div> <div id="color_red" class="color_set" style="position:absolute; top:3px; left:5px; width:18px; height:9px; font-size:1px; border:2px solid #333; border-color:#f66 #933 #933 #f66; color:#c33; background:#c33; cursor:pointer;" onmousedown="eLore_color_drag(event,'color_r');">Red</div> <div class="color_set" style="float:right; width:40px; height:20px; background:#faa; border-left:1px solid #fff;"> <input id="color_r" class="color_set" type="text" style="width:35px; height:15px; border:0; background:#faa; text-align:center; " value="0" /> </div> </div> <div class="color_set" style="position:relative; top:1px; left:5px; background:#bdb; width:345px; height:20px;"> <div class="color_set" style="position:absolute; top:8px; left:15px; width:255px; height:2px; font-size:1px; border-style:solid; border-width:1px 0; border-co</div></div> <div class="clearfix"></div> </div> <nav aria-label="..."> <ul class="pager"> <li class="previous"><a href="4667">上一篇：狡猾的按钮特效</a></li> <li class="next"><a href="3529">下一篇：鼠标放在文字上浮出浮动层效果</a></li> </ul> </nav> <div class="alert alert-warning" role="alert"> <strong>免责声明：</strong> 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。 </div> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">相关资料<span><a target="_blank" class="pull-right" href="/ItNews/">更多></a></span></h3> </div> <div class="panel-body row"> <ol> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/ItNews/34267' title='华为变阵:任正非调整三大业务布局' target="_blank"> 华为变阵:任正非调整三大业务布局</a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/ItNews/440' title='中国联通困局：遭遇OTT宽带4G三大难题' target="_blank"> 中国联通困局：遭遇OTT宽带4G三大难题</a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/ItNews/34450' title='看病也能用支付宝了 马云的又一盘大棋' target="_blank"> 看病也能用支付宝了 马云的又一盘大棋</a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/ItNews/681' title='中方抗议美方限购IT设备 紧张关系加剧' target="_blank"> 中方抗议美方限购IT设备 紧张关系加剧</a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/ItNews/34242' title='中移动财报外的"五座大山"：运营商沦为走秀陪衬' target="_blank"> 中移动财报外的"五座大山"：运营商沦为走秀陪衬</a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/ItNews/34293' title='携程整合去哪儿陷入僵局 欲联手老对手艺龙' target="_blank"> 携程整合去哪儿陷入僵局 欲联手老对手艺龙</a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/ItNews/34277' title='阿里巴巴IPO难掩的四个现实问题：天猫销售额成谜、淘宝拖后腿、营收迅猛其他不行和投资者未必买账' target="_blank"> 阿里巴巴IPO难掩的四个现实问题：天猫销售额成谜、淘宝拖后腿、营收迅猛其他不行和投资者未必买账</a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/ItNews/34167' title='都是300元内 乐视盒子与小米盒子对比体验' target="_blank"> 都是300元内 乐视盒子与小米盒子对比体验</a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/ItNews/34430' title='传陌陌或12月赴美IPO 估值约30亿美元' target="_blank"> 传陌陌或12月赴美IPO 估值约30亿美元</a></li></div> </ol> </div> </div> </div> <div class="col-lg-4 hidden-sm hidden-xs"> <!--右边的内容--> <a id="AdPageRight1_AdPageRight" href="http://www.tdyun.com/cloud/?aiyiweb" target="_blank"><img class="img-responsive" src="/images/TdPageAd/vps.png" alt="香港云服务器 免备案 云主机VPS 国内 独立IP 独享15M 月付SSD" /></a> <script src='/Scripts/AdContentPage300_1.js' language='javascript'></script> <script src='/Scripts/AdContentPage300_2.js' language='javascript'></script> <script src='/Scripts/AdContentPage300_3.js' language='javascript'></script> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">推荐阅读<span><a target="_blank" class="pull-right" href="/ItNews/">更多></a></span></h3> </div> <div class="panel-body"> <ol> <li class="articleAbout"><a href=/ItNews/34241 title='韩国研制无线充电系统：一次可充40部手机' target="_blank"> 韩国研制无线充电系统：一次可充40部手机</a></li> <li class="articleAbout"><a href=/ItNews/34092 title='电话用户9月实名制：运营商监管受质疑' target="_blank"> 电话用户9月实名制：运营商监管受质疑</a></li> <li class="articleAbout"><a href=/ItNews/436 title='富士康人事故骚动方寸 不惜血本下注电商' target="_blank"> 富士康人事故骚动方寸 不惜血本下注电商</a></li> <li class="articleAbout"><a href=/ItNews/34448 title='英特尔VS苹果：移动芯片大战' target="_blank"> 英特尔VS苹果：移动芯片大战</a></li> <li class="articleAbout"><a href=/ItNews/34094 title='谷歌董事长成花花公子：情史足以媲美涂鸦' target="_blank"> 谷歌董事长成花花公子：情史足以媲美涂鸦</a></li> <li class="articleAbout"><a href=/ItNews/34218 title='中国首台比特币ATM登陆上海 可购买不可兑换现钞' target="_blank"> 中国首台比特币ATM登陆上海 可购买不可兑换现钞</a></li> <li class="articleAbout"><a href=/ItNews/393 title='NEC拟出售移动效劳子公司NEC Mobile ' target="_blank"> NEC拟出售移动效劳子公司NEC Mobile </a></li> <li class="articleAbout"><a href=/ItNews/34347 title='微软小冰复活再战移动端：改与米聊、易信和触宝合作' target="_blank"> 微软小冰复活再战移动端：改与米聊、易信和触宝合作</a></li> <li class="articleAbout"><a href=/ItNews/34139 title='iOS7拖累iPad 5、iPad mini2发布 传十月份推出' target="_blank"> iOS7拖累iPad 5、iPad mini2发布 传十月份推出</a></li> <li class="articleAbout"><a href=/ItNews/34401 title='微软史上最大规模裁员，一半诺基亚员工' target="_blank"> 微软史上最大规模裁员，一半诺基亚员工</a></li> <li class="articleAbout"><a href=/ItNews/34086 title='微信今天大面积崩溃 腾讯:因光缆施工被挖断 ' target="_blank"> 微信今天大面积崩溃 腾讯:因光缆施工被挖断 </a></li> <li class="articleAbout"><a href=/ItNews/10842 title='诺基亚仍是第二大手机商：功用机有利可图' target="_blank"> 诺基亚仍是第二大手机商：功用机有利可图</a></li> <li class="articleAbout"><a href=/ItNews/6897 title='苹果6月20日发布iPhone5S 触摸屏概念股生动' target="_blank"> 苹果6月20日发布iPhone5S 触摸屏概念股生动</a></li> <li class="articleAbout"><a href=/ItNews/34222 title='京东很忙：升服务推产品更新招股书 能赶在阿里前上市？' target="_blank"> 京东很忙：升服务推产品更新招股书 能赶在阿里前上市？</a></li> <li class="articleAbout"><a href=/ItNews/34434 title='索尼移动中国区陷裁员风波：业务不佳 员工焦虑' target="_blank"> 索尼移动中国区陷裁员风波：业务不佳 员工焦虑</a></li> <li class="articleAbout"><a href=/ItNews/34371 title='618首日看京东阿里不同策略，鹿死谁手？' target="_blank"> 618首日看京东阿里不同策略，鹿死谁手？</a></li> <li class="articleAbout"><a href=/ItNews/34199 title='HDS发布《2013中国CIO洞察白皮书》' target="_blank"> HDS发布《2013中国CIO洞察白皮书》</a></li> <li class="articleAbout"><a href=/ItNews/16168 title='苹果优势逐渐丧失 传即将推出廉价iPhone' target="_blank"> 苹果优势逐渐丧失 传即将推出廉价iPhone</a></li> <li class="articleAbout"><a href=/ItNews/34198 title='云储存有多远:跨过数据安全问题即可到达' target="_blank"> 云储存有多远:跨过数据安全问题即可到达</a></li> <li class="articleAbout"><a href=/ItNews/34372 title='从旗下三大业务BG发展看华为的过去现在和未来' target="_blank"> 从旗下三大业务BG发展看华为的过去现在和未来</a></li> </ol> </div> </div> </div> </div> <div class="clearfix"></div> <footer class=" footer navbar-bottom"> <em>友情链接：</em> <a href="http://www.aiyiweb.com/" target="_blank">爱易网 </a> <a href="http://www.aiyiweb.com/" target="_blank">云虚拟主机技术 </a> <a href="http://www.aiyiweb.com/" target="_blank">云服务器技术 </a> <a href="http://www.aiyiweb.com/" target="_blank">程序设计技术 </a> <a href="http://www.aiyiweb.com/" target="_blank">开发网站 </a> <a href="http://www.aiyiweb.com/" target="_blank">APP开发教程 </a> <br /> <script type="text/javascript">(function(){document.write(unescape('%3Cdiv id="bdcs"%3E%3C/div%3E'));var bdcs = document.createElement('script');bdcs.type = 'text/javascript';bdcs.async = true;bdcs.src = 'http://znsv.baidu.com/customer_search/api/js?sid=15239353030108964139' + '&plate_url=' + encodeURIComponent(window.location.href) + '&t=' + Math.ceil(new Date()/3600000);var s = document.getElementsByTagName('script')[0];s.parentNode.insertBefore(bdcs, s);})();</script> Copyright © 2013-2026 爱易网页 当前在线：311人 网站在1天3时1分13秒内访问总人数：260016人 2秒前 41.61% <a href="https://beian.miit.gov.cn" target="_blank">粤ICP备18100884号-2 </a> <script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script> <script>LA.init({ id: "JszEmKrtpbU59dY5", ck: "JszEmKrtpbU59dY5" })</script> </footer> </div> </body> </html>
以下是程序代码 以下是程序代码 以下是程序代码