淡定微笑的小屋

滴答

淡定微笑 (@syh135047) — Wed, 19 Aug 2015 22:35:29 +0800

div#container{width:345px} div#header {background-color:#99bbbb;text-align:center} div#menu {background-color:#ffff99;height:200px;width:150px;float:left;} div#content {background-color:#EEEEEE;height:200px;width:345px;text-align:left;color:red;} div#footer {background-color:#99bbbb;clear:both;text-align:center; width:345px; } h1 {margin-bottom:0;text-align:center;size:18px;} ul {margin:0;} li {list-style:none;color:#99bbbb;text-align:center;} 滴答演唱:侃侃作词:积极作曲:汤普 ●滴答滴答滴答滴答●小雨不停的拍打 Copyright 淡定微笑

Untitled

淡定微笑 (@syh135047) — Mon, 08 Dec 2014 12:07:58 +0800

纯CSS3实现灰白色下拉导航 html, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6,center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size:16px; font: inherit; vertical-align: baseline; } article, aside, details, menu, nav, section { display: block; }ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 8; } body { background: url('/jscss/demoimg/201402/denim.png'); font-family: 'Droid Sans', sans-serif;; } .clearfix { clear: both; } .wrap { width: 330px; margin: 0 auto;color:red; } nav { background: -webkit-gradient(linear, center top, center bottom, from(#fff), to(#00BFFF)); background-image: linear-gradient(#fff, #00BFFF); border-radius: 6px; box-shadow: 0px 0px 4px 2px black; padding: 0 10px; position: relative;height:70px; } .menu li { float: left; position: relative; } .menu li a { color: red; display: block; font-size: 16px; line-height: 10px; padding: 6px 12px; margin: 8px 8px; vertical-align: middle; text-decoration: none; } border-radius: 12px; box-shadow: inset 0px 0px 1px 1px rgba(0,0,0,0.1); color: red; } /* Dropdown styles */ .menu ul { position: absolute; left: -9999px; list-style: none; opacity: 0; transition: opacity 1s ease; } .menu ul li { float: none; } .menu ul a { white-space: nowrap; } .menu li:hover a {Transparent}} 安卓代码教程游戏音乐视频

Untitled

淡定微笑 (@syh135047) — Mon, 08 Dec 2014 12:07:53 +0800

纯CSS3实现灰白色下拉导航 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } body { background: url('/jscss/demoimg/201402/denim.png'); font-family: 'Droid Sans', sans-serif;; } .clearfix { clear: both; } .wrap { width: 940px; margin: 4em auto; } nav { background: -webkit-gradient(linear, center top, center bottom, from(#fff), to(#ccc)); background-image: linear-gradient(#fff, #ccc); border-radius: 6px; box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.4); padding: 0 10px; position: relative; } .menu li { float: left; position: relative; } .menu li a { color: red; display: block; font-size: 14px; line-height: 20px; padding: 6px 12px; margin: 8px 8px; vertical-align: middle; text-decoration: none; } .menu li a:hover { background: -webkit-gradient(linear, center top, center bottom, from(#ededed), to(#fff)); background-image: linear-gradient(#ededed, #fff); border-radius: 12px; box-shadow: inset 0px 0px 1px 1px rgba(0,0,0,0.1); color: #222; } /* Dropdown styles */ .menu ul { position: absolute; left: -9999px; list-style: none; opacity: 0; transition: opacity 1s ease; } .menu ul li { float: none; } .menu ul a { white-space: nowrap; } .menu li:hover ul { background: rgba(255,255,255,0.7); border-radius: 0 0 6px 6px; box-shadow: inset 0px 2px 4px rgba(0,0,0,0.4); left: 5px; opacity: 1; } .menu li:hover a { background: -webkit-gradient(linear, center top, center bottom, from(#ccc), to(#ededed)); background-image: linear-gradient(#ccc, #ededed); border-radius: 12px; box-shadow: inset 0px 0px 1px 1px rgba(0,0,0,0.1); color: #222; } .menu li:hover ul a { background: none; border-radius: 0; box-shadow: none; } .menu li:hover ul li a:hover { background: -webkit-gradient(linear, center top, center bottom, from(#eee), to(#fff)); background-image: linear-gradient(#ededed, #fff); border-radius: 12px; box-shadow: inset 0px 0px 4px 2px rgba(0,0,0,0.3); } Home About Services Products Contact

Untitled

淡定微笑 (@syh135047) — Mon, 08 Dec 2014 12:07:20 +0800

Untitled

淡定微笑 (@syh135047) — Mon, 08 Dec 2014 12:05:22 +0800

JS+CSS实现很不错的文本切换效果

淡定微笑 (@syh135047) — Sun, 07 Dec 2014 20:26:47 +0800

JS+CSS实现很不错的文本切换效果，可做公告栏丨芯晴网页特效丨CsrCode.Cn #newslist{ background:#f8f8f8;border:1px solid silver;padding:1px;height:20px;line-height:20px;width:288px; } #contain{ font-size:12px;overflow:hidden;list-style:none;width:288px;height:20px;margin:0px;padding:0; } #contain li{ height:22px;line-height:22px;white-space:nowrap;overflow:hidden; } 百度，世界最大的中文搜索引擎 CSDN，中国最聚人气的IT技术社区芯晴网页特效丨CsrCode.Cn 新浪，中国第一门户网站 function xx(){ var container=document.getElementById("contain"); container.appendChild(container.firstChild); } setInterval("xx()",2000);

Untitled

淡定微笑 (@syh135047) — Thu, 04 Dec 2014 21:59:56 +0800

HTML css简洁导航 body{ margin: 0; padding: 0; font: 14px/15pt; background: #dad8d9; } #nav{ width: 80%; margin: 100px auto; height: 46px; border-radius: 8px; border: 1px solid #cbcbcb; border-bottom: 4px solid #adadad; background: url(/jscss/demoimg/201403/navbg.png") 14.28% center no-repeat, url(/jscss/demoimg/201403/navbg.png") 28.56% center no-repeat, url(/jscss/demoimg/201403/navbg.png") 42.84% center no-repeat, url(/jscss/demoimg/201403/navbg.png") 57.18% center no-repeat, url(/jscss/demoimg/201403/navbg.png") 71.62% center no-repeat, #f3f3f3 url(/jscss/demoimg/201403/navbg.png") 85.80% center no-repeat; } #nav a{ display: block; width: 14.28%; height: 46px; line-height: 46px; float: left; border-bottom: 4px solid #adadad; text-align: center; text-decoration: none; color: seagreen; } #nav a:first-child{ border-radius: 0 0 0 8px; } #nav a:last-child{ border-radius: 0 0 8px 0; } #nav a:hover{ border-bottom: 4px solid red; color: red; } #nav a:first-child:hover{ border-bottom: 4px solid red; border-radius: 0 0 0 8px; } #nav a:last-child:hover{ border-bottom: 4px solid red; } 网站首页公司简介产品介绍经典案例企业动态在线留言通信地址

文字颜色交替变换

淡定微笑 (@syh135047) — Thu, 04 Dec 2014 17:58:54 +0800

文字颜色交替变换2014-06-21 06:47:34 +0800 文字颜色交替变换 html代码 var message="欢迎光临csngmap资源分享大本营" var neonbasecolor="green" //正常字体颜色 var neontextcolor="yellow" //最先出现的变动颜色 var neontextcolor2="red" //随后出现的变动颜色 var flashspeed=120 //颜色变动的快慢，越小越快 var flashingletters=3 //最先出现变动颜色的字数 var flashingletters2=1 //随后出现变动颜色的字数 var flashpause=0 var n=0 if (document.all||document.getElementById){ document.write('') for (m=0;m(flashingletters+flashingletters2)-1) crossref(n-flashingletters-flashingletters2).style.color=neonbasecolor if (n代码演示 var message="欢迎光临！" var neonbasecolor="green" //正常字体颜色 var neontextcolor="yellow" //最先出现的变动颜色 var neontextcolor2="red" //随后出现的变动颜色 var flashspeed=120 //颜色变动的快慢，越小越快 var flashingletters=3 //最先出现变动颜色的字数 var flashingletters2=1 //随后出现变动颜色的字数 var flashpause=0 var n=0 if (document.all||document.getElementById){ document.write('') for (m=0;m(flashingletters+flashingletters2)-1) crossref(n-flashingletters-flashingletters2).style.color=neonbasecolor if (n转自 @笑忘书，转载请注明出处。

引用CSS文件到html网页里方法

淡定微笑 (@syh135047) — Thu, 04 Dec 2014 17:06:08 +0800

转自＠笑忘书 * #round1 { padding:10px; border: 5px solid #dedede; -moz-border-radius: 15px; /* Gecko browsers */ -webkit-border-radius: 15px; /* Webkit browsers */ border-radius:15px; /* W3C syntax */ } 带边框的圆角

滚动消息

淡定微笑 (@syh135047) — Wed, 03 Dec 2014 23:17:20 +0800

转自 DIVCSS5，转载请注明出处。滚动消息： var marqueeContent=new Array(); //滚动主题 marqueeContent[0]='+ CSS学习网,DIV+CSS基础系统掌握CSS'; marqueeContent[1]='+ 显而易见，最高的效率就是对现有材料的最佳利用。'; marqueeContent[2]='+ 自己能解决的事，别花钱，花钱能解决的事，别求人。'; marqueeContent[3]='+ 旅行是需要一种心情，更重要的是，需要一种冲动。'; marqueeContent[4]='+ 随时用零碎的时间(如等人、排队等)做零碎的事情。'; var marqueeInterval=new Array(); //定义一些常用而且要经常用到的变量 var marqueeId=0; var marqueeDelay=4000; var marqueeHeight=15; function initMarquee() { var str=marqueeContent[0]; document.write(''+str+''); marqueeId++; marqueeInterval[0]=setInterval("startMarquee()",marqueeDelay); } function startMarquee() { var str=marqueeContent[marqueeId]; marqueeId++; if(marqueeId>=marqueeContent.length) marqueeId=0; if(marqueeBox.childNodes.length==1) { var nextLine=document.createElement('DIV'); nextLine.innerHTML=str; marqueeBox.appendChild(nextLine); } else { marqueeBox.childNodes[0].innerHTML=str; marqueeBox.appendChild(marqueeBox.childNodes[0]); marqueeBox.scrollTop=0; } clearInterval(marqueeInterval[1]); marqueeInterval[1]=setInterval("scrollMarquee()",10); } function scrollMarquee() { marqueeBox.scrollTop++; if(marqueeBox.scrollTop%marqueeHeight==marqueeHeight){ clearInterval(marqueeInterval[1]); } } initMarquee();

居中分页

淡定微笑 (@syh135047) — Wed, 03 Dec 2014 22:33:31 +0800

转自 DIVCSS5，转载请注明出处。居中分页 a{ text-decoration:none} .ep-pages{padding:10px 12px;clear:both;text-align:center; font-family:Arial, "\5B8B\4F53", sans-serif;font-size:14px;vertical-align:top} .ep-pages a, .ep-pages span{display:inline-block;height:23px;line-height:23px;padding:0 8px; margin:5px 1px 0 0;background:#fff;border:1px solid #e5e5e5;overflow:hidden;vertical-align:top} .ep-pages a:hover{background:#cc1b1b;border:1px solid #cc1b1b;text-decoration:none} .ep-pages a, .ep-pages a:visited{color:#252525} .ep-pages a:hover, .ep-pages a:active{color:#ffffff} .ep-pages .current{background:#cc1b1b;border:1px solid #cc1b1b;color:#fff} .ep-pages a.current, .ep-pages a.current:visited{color:#ffffff} .ep-pages a.current:hover, .ep-pages a.current:active{color:#ffffff} .ep-pages-ctrl{font-family:"\5B8B\4F53", sans-serif;font-weight:bold;font-size:16px} .ep-pages-e5e5e5{color:#e5e5e5} .ep-pages-all{font-size:12px;vertical-align:top} 首页 < 1 2 3 ... > 尾页在本页阅读全文

百度分页

淡定微笑 (@syh135047) — Wed, 03 Dec 2014 21:41:21 +0800

转自 DIVCSS5，转载请注明出处。百度分页效果在线演示 www.divcss5.com #n{margin:10px auto; width:920px; border:1px solid #CCC;font-size:12px; line-height:30px;} #n a{ padding:0 4px; color:#333} .page { padding:100px 0; zoom:1 } .page:after { content:""; display:block; height:0; clear:both; visibility:hidden; } .page span { position:relative; margin:0 2px; border:solid 1px#ccc; float:left; } .page span a { padding:2px 5px; cursor:pointer; } .page span i { display:block; height:10px; width:10px; background:#ccc; border-radius:50%; position:absolute; left:50%; top:-20px; margin-left:-5px; } .page span i.active_i { background:red; } $(document).ready(function(){ function pageStyle(obj,even,bg,active_bg){ /*参数说明： obj为所有奇数元素 even当前所要点击触发事件 bg为足迹元素 active_bg为点击后的足迹背景 2012-9-2 作者：zoowar */ $(obj).css("top","-30px"); $(even).click(function(){ $(this).siblings(bg).addClass(active_bg).parent().siblings().find(bg).removeClass(active_bg); }) } pageStyle(".page i:even",".page a","i","active_i"); }) 上一页 1 2 3 4 5 5 6 7 8 9 下一页

Untitled

淡定微笑 (@syh135047) — Wed, 03 Dec 2014 20:34:53 +0800

文字闪烁 var i=0; var Color= new Array("#0000FF","#99FF00","#660033","#CC66CC","#FFFF33"); function pp(){ if (i>Color.length-1){i=0} table1.style.borderColor=Color[i]; i=i+1; setTimeout("pp()",100); } pp();

简单评价

淡定微笑 (@syh135047) — Tue, 02 Dec 2014 22:36:23 +0800

简单评价2014-06-21 06:47:34 +0800 简单评价转自笑忘书 /* 评价代码的头部提示文字区域定义 */ #com_t{ padding:6px 3px; background:#abc; border-top:1px solid green; border-bottom:1px solid green; color:black; margin:8px 0px; } /* 评价代码的选项区域定义 */ .com_x{ border:1px solid green; margin:3px 4px; } /* 评价代码的单个选项定义 */ .com_x a{ background:#F5F5F5; border-radius:3px; border:1px solid grey; padding:3px 4px; margin:2px 4px; } /* 评价代码的输入框定义 */ #com_text{ margin-top:5px; width:80%; } /* 评价代码的提交按钮定义 */ #com input[type="submit"]{ margin-right:1em; } function addText(text){ var srk = document.getElementById("com_text"); if(srk.value.indexOf("#")==-1){ //检测输入框中是否含有选项必含内容(即"#") srk.value += "#"+text+"#"; //给选项文字增添字符串(即"#"和"#") ，并全部添加到输入框 } else{ alert("您已经选择了一项，如需更换请点击清空原内容"); //若输入框中含有检测字符串，则弹窗显示本内容 } } function textReset(){ if(confirm("你确定要清空评论吗？")){ document.getElementById("com_text").value=""; //确认则清空输入框内容 } else{ return false; } } 请选择一项评论本文(不选亦可) 不错还行无感吐槽

留言板

淡定微笑 (@syh135047) — Tue, 02 Dec 2014 19:23:37 +0800

[代码收集]留言板2014-06-21 06:47:34 +0800 留言板文字闪烁 .changecolor0{color:#f00;} .changecolor1{color:#0f0;} .changecolor2{color:#00f;} .changecolor3{color:#f0f;} .changecolor4{color:#0ff;} .changecolor5{color:#000;} ★欢迎留言❈ var i=0; function blink(){ document.getElementById("remaincolor").className="changecolor"+i%6; i++; } setInterval(blink, 500); 留言中心2014-10-05 23:21:21 +0800.wo-entry-time,.wo-entry-title { display:none; } form{display:none;} .wo-entry-section form{display:block;} #whole_body:after{ text-align:center; margin:0px 0px 10px; border-radiu:20px; border:1px 2px 3px #eee; display:block; height:30px; line-height:30px; font-size:0.8em; font-weight:bold; overflow:hidden; padding-left:0; opacity:0.5;} textarea,input[type="text"]{width:98%; color: #DDDDFF ; padding:auto 1px; border: 2px solid #FFFFFF; border-radius:7px; box-shadow:inset 1px 1px 5px #6C6C6C ; } input[type="button"], input[type="submit"] { padding: 8px 9px 7px 9px; background-color: #f2f2f2 ; color: #7B7B7B ; ;font-weight: bold ;border: 3px solid #FFFFFF; -moz-border-radius: 7px ; -webkit-border-radius: 5px; box-shadow: 1px 1px 4.5px gray;margin: 3px 3px; } a[href*="/file/"],a[href*="/entry/"] {display:none} function tab(a,b,c) { for(i=1;i