随笔分类 - 小效果
摘要：滚动条的样式修改，记录一下 /* 滚动条 */ .gun::-webkit-scrollbar { /*滚动条整体样式*/ width: 10px; /*高宽分别对应横竖滚动条的尺寸*/ height: 1px; } .gun::-webkit-scrollbar-thumb { /*滚动条里面小方
阅读全文
摘要：jq自己再找吧 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div class="img"> <img src="img/c1.jpg" > </div> </body> <
阅读全文
摘要：懒加载 1 <style> 2 img a,img{border:0px;} 3 div{ margin-bottom:10px;} 4 </style> 5 <!-- 6 一、为什么需要懒加载？ 7 对于图片过多的使用场景，为了提高页面加载速度，改善用户体验，我们对未出现在视野范围内的图片先不进行
阅读全文
摘要：小图展示大图 1 <style> 2 *{margin:0;padding:0;} 3 ul,ol{list-style:none;} 4 #box { 5 position:relative; 6 margin:100px auto; 7 border:1px solid #ccc; 8 widt
阅读全文
摘要：自引jquery 1 <style> 2 * { margin: 0; padding: 0; } 3 ul { list-style: none; margin: 100px; } 4 .comment { 5 color: red; 6 } 7 8 .comment li { 9 float:
阅读全文
摘要：萤火虫 <style type="text/css"> *{ padding: 0; margin: 0; } #bg{ background: url(img/bg.jpg) no-repeat; background-size: cover; width: 100%; height: 100%;
阅读全文
摘要：下雪效果 1 <style> 2 * { 3 margin: 0; 4 padding: 0; 5 } 6 #box { 7 width: 1000px; 8 height: 600px; 9 background: #000000; 10 border: 5px solid red; 11 mar
阅读全文
摘要：选项卡（tab栏切换） 1 <style type="text/css"> 2 *{margin: 0; padding: 0; font-family: "微软雅黑";font-size: 14px;} 3 #container{ 4 width: 398px; 5 margin: 100px a
阅读全文
摘要：自引jquery css <style> *{margin:0px;padding:0px;} li{list-style:none;} #brand{ width:330px; height:400px; border:1px solid #dddddd; box-shadow:0px 0px 5
阅读全文
摘要：掷 <style> *{margin:0; padding:0} #container{padding:10px;width:200px;margin:auto;height:200px;border:orange solid 1px; border-radius:8px;} #dice{width
阅读全文
摘要：简易年历 1 <style type="text/css"> 2 * { padding: 0; margin: 0; } 3 li { list-style: none; } 4 body { background: #f6f9fc; font-family: arial; } 5 6 .cale
阅读全文
摘要：弹幕小效果 <style type="text/css"> *{ margin: 0; padding: 0;} #box{ width: 542px; height: 330px; border: 3px solid goldenrod; margin-left:300px;} #btm{marg
阅读全文
摘要：跟随的广告 <style> img{ position: absolute; left:0; top:50px; } #demo{ width:1000px; margin:0 auto; } </style> </head> <body> <img src="images/aside.jpg" a
阅读全文
摘要：返回头部 <style> body { width: 2000px; } .top{ position: fixed; right:50px; bottom:100px; display: none; } </style> </head> <body> <!-- 获取页面滚走兼容 ： documen
阅读全文
摘要：效果 <style type="text/css"> span{ width:80px; height: 10px; display: inline-block; background: grey; margin-right: 3px; font-size: 18px; text-align: ce
阅读全文
摘要：事件委托 <body> <input type="button" value="创建新的" id="btn"/> <ul class="box"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <p>嘿嘿</p> </ul> </body> </html>
阅读全文
摘要：圆形导航，略有瑕疵 <style> *{margin:0;padding:0} ul{list-style:none;position:relative;margin:50px;} ul li{width:200px;height:200px;border-radius:50%;position:a
阅读全文
摘要：进度条 1 <style> 2 #progress{ 3 position: relative; 4 margin: auto; 5 top: 200px; 6 display: block; 7 width: 200px; 8 height: 20px; 9 border-style: dotte
阅读全文
摘要：css、html <style> *{margin: 0; padding: 0;} ul {list-style:none;} body { background-color: #000; } .nav { width: 800px; height: 42px; background:url()
阅读全文
摘要：用原生实现随机抽人的小效果 css、html <style type="text/css"> div{ width: 300px; height: 300px; border: 2px solid saddlebrown; text-align: center; line-height: 300px
阅读全文
