WEB前端开发

转一个CSS画的灰太狼,IE下属于重口味,慎看!

练习 — Mon, 30 Aug 2010 02:23:49 +0000

还有几个不错的,比如一个小日本制作的多啦A梦，一个Twitter的当机页面等等,大家可以搜下看看.不得不感叹做前端的哥们闲起来还真是可怕啊.Firefox是正常效果，Chrome下加了些简单的动画效果。

<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>我是灰太狼</title> <style type="text/css"> * { margin: 0; padding: 0; } #bigBigWolf { position: absolute; left: 50%; top: 50%; margin-left: -300px; margin-top: -300px; width: 600px; height: 600px; } #bigBigWolf div { position: absolute; } #bigBigWolf #url a { position: absolute; left: 0; top: 0; width: 600px; height: 600px; z-index: 100; } #bigBigWolf .face { left: 127px; bottom: 67px; width: 380px; height: 380px; border: 3px solid #181818; background: #666B6F; z-index: 0; -webkit-border-radius: 230px 180px 300px 220px; -moz-border-radius: 230px 180px 300px 220px; transform: rotate(60deg); -webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); -o-transform: rotate(60deg); } #bigBigWolf .face .left { left: 30px; top: 317px; width: 180px; height: 106px; border: 3px solid #181818; border-top: 0; background: #666B6F; z-index: 10; -webkit-border-bottom-left-radius: 2800px 1200px; -moz-border-radius-bottomleft: 2800px 1200px; transform: rotate(30deg); -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -o-transform: rotate(30deg); } #bigBigWolf .face .right { left: 105px; top: -45px; width: 160px; height: 90px; border: 3px solid #181818; border-bottom: 0; background: #666B6F; z-index: 10; -webkit-border-top-left-radius: 2800px 2000px; -moz-border-radius-topleft: 2800px 2000px; transform: rotate(335deg); -webkit-transform: rotate(335deg); -moz-transform: rotate(335deg); -o-transform: rotate(335deg); } #bigBigWolf .face .cover1 { left: 160px; top: 415px; width: 28px; height: 40px; border: 3px solid #181818; border-bottom: 0; background: #FFF; z-index: 20; -webkit-border-top-left-radius: 600px 1200px; -webkit-border-top-right-radius: 400px 700px; -webkit-border-bottom-left-radius: 400px 150px; -webkit-border-bottom-right-radius: 400px 150px; -moz-border-radius-topleft: 600px 1200px; -moz-border-radius-topright: 400px 700px; -moz-border-radius-bottomleft: 400px 150px; -moz-border-radius-bottomright: 400px 150px; } #bigBigWolf .face .cover2 { left: 163px; top: 433px; width: 40px; height: 40px; background: #FFF; z-index: 30; -webkit-border-radius: 20px; -moz-border-radius: 20px; } #bigBigWolf .face .cover3 { left: 53px; top: 285px; width: 74px; height: 74px; background: #666B6F; z-index: 40; -webkit-border-radius: 37px; -moz-border-radius: 37px; } #bigBigWolf .face .cover4 { left: 227px; top: -80px; width: 25px; height: 40px; border: 3px solid #181818; border-bottom: 0; background: #FFF; z-index: 20; -webkit-border-top-left-radius: 600px 1200px; -webkit-border-top-right-radius: 400px 700px; -webkit-border-bottom-left-radius: 400px 150px; -webkit-border-bottom-right-radius: 400px 150px; -moz-border-radius-topleft: 600px 1200px; -moz-border-radius-topright: 400px 700px; -moz-border-radius-bottomleft: 400px 150px; -moz-border-radius-bottomright: 400px 150px; transform: rotate(170deg); -webkit-transform: rotate(170deg); -moz-transform: rotate(170deg); -o-transform: rotate(170deg); } #bigBigWolf .face .cover5 { left: 214px; top: -90px; width: 60px; height: 30px; background: #FFF; z-index: 40; transform: rotate(28deg); -webkit-transform: rotate(28deg); -moz-transform: rotate(28deg); -o-transform: rotate(28deg); } #bigBigWolf .ear { z-index: 0; } #bigBigWolf .ear .left { left: 48px; top: 167px; width: 180px; height: 120px; border: 3px solid #181818; border-right: 0; background: #666B6F; z-index: 0; -webkit-border-top-left-radius: 295px 200px; -moz-border-radius-topleft: 295px 200px; transform: rotate(51deg); -webkit-transform: rotate(51deg); -moz-transform: rotate(51deg); -o-transform: rotate(51deg); } #bigBigWolf .ear .left .inner { left: -3px; top: 88px; width: 180px; height: 30px; border: 3px solid #181818; border-right: 0; background: #96979C; z-index: 10; -webkit-border-top-left-radius: 1000px 200px; -moz-border-radius-topleft: 1000px 200px; } #bigBigWolf .ear .left .cover1 { left: 83px; top: 30px; width: 132px; height: 65px; background: #666B6F; z-index: 20; -webkit-border-bottom-right-radius: 1200px 200px; -moz-border-radius-bottomright: 1200px 200px; transform: rotate(90deg); -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); } #bigBigWolf .ear .left .cover2 { left: 111px; top: 91px; width: 12px; height: 8px; border: 3px solid #181818; border-right: 0; background: #666B6F; z-index: 30; -webkit-border-top-left-radius: 30px 20px; -moz-border-radius-topleft: 30px 20px; transform: rotate(345deg); -webkit-transform: rotate(345deg); -moz-transform: rotate(345deg); -o-transform: rotate(345deg); } #bigBigWolf .ear .left .cover3 { left: 114px; top: 104px; width: 12px; height: 6px; border: 3px solid #181818; border-right: 0; background: #666B6F; z-index: 30; -webkit-border-top-left-radius: 30px 20px; -moz-border-radius-topleft: 30px 20px; transform: rotate(325deg); -webkit-transform: rotate(325deg); -moz-transform: rotate(325deg); -o-transform: rotate(325deg); } #bigBigWolf .ear .left .cover4 { left: 123px; top: 113px; width: 11px; height: 4px; border: 3px solid #181818; border-right: 0; border-top: 0; background: #666B6F; z-index: 30; -webkit-border-bottom-left-radius: 30px 20px; -moz-border-radius-bottomleft: 30px 20px; transform: rotate(62deg); -webkit-transform: rotate(62deg); -moz-transform: rotate(62deg); -o-transform: rotate(62deg); } #bigBigWolf .ear .right { left: 340px; top: 78px; width: 140px; height: 100px; border: 3px solid #181818; border-left: 0; background: #666B6F; z-index: 10; -webkit-border-top-right-radius: 245px 190px; -moz-border-radius-topright: 245px 190px; transform: rotate(275deg); -webkit-transform: rotate(275deg); -moz-transform: rotate(275deg); -o-transform: rotate(275deg); } #bigBigWolf .ear .right .inner { left: -1px; top: 68px; width: 140px; height: 30px; border: 3px solid #181818; border-left: 0; background: #96979C; z-index: 10; -webkit-border-top-right-radius: 1200px 300px; -moz-border-radius-topright: 1200px 300px; } #bigBigWolf .ear .right .cover1 { left: -49px; top: 25px; width: 120px; height: 40px; border: 3px solid #181818; border-bottom: 0; background: #666B6F; z-index: 20; -webkit-border-top-right-radius: 1200px 300px; -moz-border-radius-topright: 1200px 300px; transform: rotate(101deg); -webkit-transform: rotate(101deg); -moz-transform: rotate(101deg); -o-transform: rotate(101deg); } #bigBigWolf .ear .right .cover2 { left: -135px; top: 117px; width: 145px; height: 40px; border: 3px solid #181818; border-bottom: 0; background: #666B6F; z-index: 30; -webkit-border-top-right-radius: 1100px 300px; -moz-border-radius-topright: 1100px 300px; transform: rotate(133deg); -webkit-transform: rotate(133deg); -moz-transform: rotate(133deg); -o-transform: rotate(133deg); } #bigBigWolf .ear .right .cover3 { left: -85px; top: 15px; width: 80px; height: 80px; background: #666B6F; z-index: 40; } #bigBigWolf .ear .right .cover4 { left: -142px; top: 144px; width: 40px; height: 40px; background: #666B6F; z-index: 50; -webkit-border-radius: 20px; -moz-border-radius: 20px; } #bigBigWolf .ear .right .cover5 { left: 32px; top: 87px; width: 30px; height: 30px; border: 3px solid #181818; border-bottom: 0; border-left: 0; background: #FFF; z-index: 50; -webkit-border-radius: 30px; -moz-border-radius: 30px; transform: rotate(313deg); -webkit-transform: rotate(313deg); -moz-transform: rotate(313deg); -o-transform: rotate(313deg); } #bigBigWolf .hat { left: 137px; top: 115px; width: 238px; height: 100px; border: 3px solid #181818; background: #E09E86; z-index: 40; -webkit-border-top-left-radius: 2000px 1000px; -webkit-border-top-right-radius: 700px 700px; -webkit-border-bottom-left-radius: 300px 200px; -webkit-border-bottom-right-radius: 450px 450px; -moz-border-radius-topleft: 2000px 1000px; -moz-border-radius-topright: 700px 700px; -moz-border-radius-bottomleft: 300px 200px; -moz-border-radius-bottomright: 450px 450px; transform: rotate(338deg); -webkit-transform: rotate(338deg); -moz-transform: rotate(338deg); -o-transform: rotate(338deg); } #bigBigWolf .hat .inner { right: -1px; top: 1px; width: 238px; height: 80px; border: 3px solid #181818; background: #CF6A36; z-index: 0; -webkit-border-top-left-radius: 2400px 1200px; -webkit-border-top-right-radius: 800px 800px; -webkit-border-bottom-left-radius: 400px 200px; -webkit-border-bottom-right-radius: 450px 450px; -moz-border-radius-topleft: 2400px 1200px; -moz-border-radius-topright: 800px 800px; -moz-border-radius-bottomleft: 400px 200px; -moz-border-radius-bottomright: 450px 450px; transform: rotate(357deg); -webkit-transform: rotate(357deg); -moz-transform: rotate(357deg); -o-transform: rotate(357deg); } #bigBigWolf .hat .patch { right: -3px; top: -7px; width: 110px; height: 50px; border: 3px solid #181818; background: #EFC978; z-index: 10; -webkit-border-top-left-radius: 500px 300px; -webkit-border-top-right-radius: 300px 200px; -webkit-border-bottom-left-radius: 100px 100px; -webkit-border-bottom-right-radius: 100px 100px; -moz-border-radius-topleft: 500px 300px; -moz-border-radius-topright: 300px 200px; -moz-border-radius-bottomleft: 100px 100px; -moz-border-radius-bottomright: 100px 100px; transform: rotate(20deg); -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); -o-transform: rotate(20deg); } #bigBigWolf .hat .patch .line1, #bigBigWolf .hat .patch .line2, #bigBigWolf .hat .patch .line3, #bigBigWolf .hat .patch .line4, #bigBigWolf .hat .patch .line5, #bigBigWolf .hat .patch .line6, #bigBigWolf .hat .patch .line7, #bigBigWolf .hat .patch .line8, #bigBigWolf .hat .patch .line9, #bigBigWolf .hat .patch .line10 { left: -7px; top: 30px; width: 18px; height: 2px; font-size: 0; background: #181818; z-index: 20px; transform: rotate(350deg); -webkit-transform: rotate(350deg); -moz-transform: rotate(350deg); -o-transform: rotate(350deg); } #bigBigWolf .hat .patch .line2 { left: -13px; top: 42px; width: 20px; transform: rotate(340deg); -webkit-transform: rotate(340deg); -moz-transform: rotate(340deg); -o-transform: rotate(340deg); } #bigBigWolf .hat .patch .line3 { left: 5px; top: 50px; width: 17px; transform: rotate(300deg); -webkit-transform: rotate(300deg); -moz-transform: rotate(300deg); -o-transform: rotate(300deg); } #bigBigWolf .hat .patch .line4 { left: 20px; top: 53px; width: 17px; transform: rotate(270deg); -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -o-transform: rotate(270deg); } #bigBigWolf .hat .patch .line5 { left: 35px; top: 50px; width: 14px; transform: rotate(290deg); -webkit-transform: rotate(290deg); -moz-transform: rotate(290deg); -o-transform: rotate(290deg); } #bigBigWolf .hat .patch .line6 { left: 50px; top: 52px; width: 19px; transform: rotate(275deg); -webkit-transform: rotate(275deg); -moz-transform: rotate(275deg); -o-transform: rotate(275deg); } #bigBigWolf .hat .patch .line7 { left: 70px; top: 50px; width: 15px; transform: rotate(290deg); -webkit-transform: rotate(260deg); -moz-transform: rotate(260deg); -o-transform: rotate(260deg); } #bigBigWolf .hat .patch .line8 { left: 85px; top: 51px; width: 19px; transform: rotate(250deg); -webkit-transform: rotate(250deg); -moz-transform: rotate(250deg); -o-transform: rotate(250deg); } #bigBigWolf .hat .patch .line9 { left: 102px; top: 45px; width: 13px; transform: rotate(230deg); -webkit-transform: rotate(230deg); -moz-transform: rotate(230deg); -o-transform: rotate(230deg); } #bigBigWolf .hat .patch .line10 { left: 106px; top: 34px; width: 12px; transform: rotate(220deg); -webkit-transform: rotate(220deg); -moz-transform: rotate(220deg); -o-transform: rotate(220deg); } #bigBigWolf .eye { left: 213px; top: 221px; width: 287px; height: 185px; z-index: 20; } #bigBigWolf .eye .left, #bigBigWolf .eye .right { width: 121px; height: 121px; border: 3px solid #181818; background: #DBDBDB; z-index: 0; -webkit-border-radius: 61px; -moz-border-radius: 61px; } #bigBigWolf .eye .left { left: 0; bottom: 0; } #bigBigWolf .eye .right { right: 0; top: 0; } #bigBigWolf .eye .inner { left: 2px; top: 2px; width: 114px; height: 114px; background: #FFF; z-index: 10; -webkit-border-radius: 57px; -moz-border-radius: 57px; } #bigBigWolf .eye .pupil { left: 8px; top: 26px; width: 54px; height: 54px; border: 2px solid #181818; z-index: 20; -webkit-border-radius: 27px; -moz-border-radius: 27px; background: #404972; background: -webkit-gradient(linear, 43% 0%, 39% 100%, from(#181818), to(#455289), color-stop(1.0, #455289)); background: -moz-linear-gradient(50% 25% 260deg, #181818, #455289, #455289 100%); -webkit-animation: 'pupil' 2s linear; -webkit-animation-iteration-count: infinite; } @-webkit-keyframes pupil { 0% { left: 8px; top: 26px; } 25% { left: 29px; top: 33px; } 50% { left: 50px; top: 40px; } 75% { left: 29px; top: 33px; } 100% { left: 8px; top: 26px; } } #bigBigWolf .eye .pupil .inner { left: 9px; top: 9px; width: 36px; height: 36px; background: #1A1A1A; z-index: 30; -webkit-border-radius: 18px; -moz-border-radius: 18px; } #bigBigWolf .eye .light1 { left: 21px; bottom: 3px; width: 16px; height: 16px; background: #FFF; z-index: 40; -webkit-border-radius: 15px 7px 10px 10px; -moz-border-radius: 20px 7px 20px 10px; transform: rotate(320deg); -webkit-transform: rotate(320deg); -moz-transform: rotate(320deg); -o-transform: rotate(320deg); } #bigBigWolf .eye .light2 { left: 7px; bottom: 11px; width: 14px; height: 6px; background: #FFF; z-index: 40; -webkit-border-top-left-radius: 500px 300px; -webkit-border-top-right-radius: 300px 200px; -webkit-border-bottom-left-radius: 100px 100px; -webkit-border-bottom-right-radius: 100px 100px; -moz-border-radius-topleft: 20px 20px; -moz-border-radius-topright: 30px 20px; -moz-border-radius-bottomleft: 5px 5px; -moz-border-radius-bottomright: 5px 5px; transform: rotate(285deg); -webkit-transform: rotate(285deg); -moz-transform: rotate(285deg); -o-transform: rotate(285deg); } #bigBigWolf .eye .light3 { right: 2px; top: 4px; width: 30px; height: 13px; background: #FFF; z-index: 40; -webkit-border-top-left-radius: 40px 40px; -webkit-border-top-right-radius: 100px 50px; -webkit-border-bottom-left-radius: 15px 15px; -webkit-border-bottom-right-radius: 15px 15px; -moz-border-radius-topleft: 40px 40px; -moz-border-radius-topright: 100px 50px; -moz-border-radius-bottomleft: 15px 15px; -moz-border-radius-bottomright: 15px 15px; transform: rotate(20deg); -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); -o-transform: rotate(20deg); } #bigBigWolf .eyebrow { left: 187px; top: 173px; width: 280px; height: 130px; z-index: 70; } #bigBigWolf .eyebrow .left { left: 0; top: 48px; width: 110px; height: 40px; background: #181818; z-index: 0; -webkit-border-top-left-radius: 400px 200px; -webkit-border-top-right-radius: 400px 200px; -moz-border-radius-topleft: 400px 200px; -moz-border-radius-topright: 400px 200px; transform: rotate(330deg); -webkit-transform: rotate(330deg); -moz-transform: rotate(330deg); -o-transform: rotate(330deg); } #bigBigWolf .eyebrow .left .inner { left: 0; top: 20px; width: 120px; height: 30px; background: #666B6F; z-index: 0; -webkit-border-top-left-radius: 400px 200px; -webkit-border-top-right-radius: 400px 200px; -moz-border-radius-topleft: 400px 200px; -moz-border-radius-topright: 400px 200px; } #bigBigWolf .eyebrow .left .eyebrow1, #bigBigWolf .eyebrow .left .eyebrow2, #bigBigWolf .eyebrow .right .eyebrow1 { left: -22px; top: 36px; width: 22px; height: 2px; font-size: 0; background: #181818; z-index: 10px; transform: rotate(86deg); -webkit-transform: rotate(86deg); -moz-transform: rotate(86deg); -o-transform: rotate(86deg); } #bigBigWolf .eyebrow .left .eyebrow2 { left: -15px; top: 32px; width: 20px; } #bigBigWolf .eyebrow .right .eyebrow1 { left: 93px; top: 24px; width: 20px; } #bigBigWolf .eyebrow .right { right: 17px; top: -3px; width: 100px; height: 40px; background: #181818; z-index: 0; -webkit-border-top-left-radius: 400px 200px; -webkit-border-top-right-radius: 400px 200px; -moz-border-radius-topleft: 400px 200px; -moz-border-radius-topright: 400px 200px; transform: rotate(355deg); -webkit-transform: rotate(355deg); -moz-transform: rotate(355deg); -o-transform: rotate(355deg); } #bigBigWolf .eyebrow .right .inner { right: -7px; top: 20px; width: 120px; height: 30px; background: #666B6F; z-index: 0; -webkit-border-top-left-radius: 400px 200px; -webkit-border-top-right-radius: 400px 200px; -moz-border-radius-topleft: 400px 200px; -moz-border-radius-topright: 400px 200px; } #bigBigWolf .nose { right: 158px; bottom: 203px; width: 74px; height: 74px; z-index: 30; background: #4B4B4B; -webkit-border-radius: 160px 40px 160px 40px; -moz-border-radius: 160px 30px 160px 40px; transform: rotate(25deg); -webkit-transform: rotate(25deg); -moz-transform: rotate(25deg); -o-transform: rotate(25deg); } #bigBigWolf .nose .outer { right: 1px; top: -2px; width: 72px; height: 72px; z-index: 0; background: #181818; -webkit-border-radius: 150px 40px 150px 40px; -moz-border-radius: 150px 40px 150px 40px; transform: rotate(2deg); -webkit-transform: rotate(2deg); -moz-transform: rotate(2deg); -o-transform: rotate(2deg); } #bigBigWolf .nose .inner { right: 18px; top: 13px; width: 24px; height: 24px; z-index: 10; background: #4F4F4F; -webkit-border-radius: 150px 50px 150px 50px; -moz-border-radius: 150px 50px 150px 50px; transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); } #bigBigWolf .nose .light { right: 16px; top: 3px; width: 20px; height: 20px; z-index: 20; background: #FFF; -webkit-border-radius: 150px 70px 150px 70px; -moz-border-radius: 150px 70px 150px 70px; transform: rotate(3deg); -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); -o-transform: rotate(3deg); } #bigBigWolf .mouth { right: 62px; bottom: 108px; width: 290px; height: 60px; border: 3px solid #181818; background: #FFF; z-index: 50; -webkit-border-top-left-radius: 700px 0; -webkit-border-top-right-radius: 700px 0; -webkit-border-bottom-left-radius: 2800px 1200px; -webkit-border-bottom-right-radius: 2800px 1200px; -moz-border-radius-topleft: 700px 0; -moz-border-radius-topright: 700px 0; -moz-border-radius-bottomleft: 2800px 1200px; -moz-border-radius-bottomright: 2800px 1200px; transform: rotate(341deg); -webkit-transform: rotate(341deg); -moz-transform: rotate(341deg); -o-transform: rotate(341deg); } #bigBigWolf .mouth .inner { right: -3px; bottom: 41px; width: 289px; height: 20px; border: 3px solid #181818; border-top: 0; background: #666B6F; z-index: 0; -webkit-border-top-left-radius: 700px 0; -webkit-border-top-right-radius: 700px 0; -webkit-border-bottom-left-radius: 7800px 1500px; -webkit-border-bottom-right-radius: 7800px 1500px; -moz-border-radius-topleft: 700px 0; -moz-border-radius-topright: 700px 0; -moz-border-radius-bottomleft: 7800px 1500px; -moz-border-radius-bottomright: 7800px 1500px; } #bigBigWolf .tooth1, #bigBigWolf .tooth2, #bigBigWolf .tooth3, #bigBigWolf .tooth4, #bigBigWolf .tooth5, #bigBigWolf .tooth6, #bigBigWolf .tooth7, #bigBigWolf .tooth8, #bigBigWolf .tooth9, #bigBigWolf .tooth10, #bigBigWolf .tooth11, #bigBigWolf .tooth12, #bigBigWolf .tooth13, #bigBigWolf .tooth14, #bigBigWolf .tooth15, #bigBigWolf .tooth16, #bigBigWolf .tooth17, #bigBigWolf .tooth18, #bigBigWolf .tooth19, #bigBigWolf .tooth20, #bigBigWolf .tooth121, #bigBigWolf .tooth122, #bigBigWolf .tooth123 { left: -1px; top: 18px; width: 20px; height: 2px; font-size: 0; background: #181818; z-index: 60px; transform: rotate(26deg); -webkit-transform: rotate(26deg); -moz-transform: rotate(26deg); -o-transform: rotate(26deg); } #bigBigWolf .tooth2 { left: 13px; top: 12px; width: 22px; transform: rotate(125deg); -webkit-transform: rotate(125deg); -moz-transform: rotate(122deg); -o-transform: rotate(125deg); } #bigBigWolf .tooth3 { left: 18px; top: 17px; width: 30px; transform: rotate(76deg); -webkit-transform: rotate(76deg); -moz-transform: rotate(76deg); -o-transform: rotate(76deg); } #bigBigWolf .tooth4 { left: 36px; top: 26px; width: 9px; transform: rotate(340deg); -webkit-transform: rotate(340deg); -moz-transform: rotate(340deg); -o-transform: rotate(340deg); } #bigBigWolf .tooth5 { left: 40px; top: 30px; width: 12px; transform: rotate(70deg); -webkit-transform: rotate(70deg); -moz-transform: rotate(70deg); -o-transform: rotate(70deg); } #bigBigWolf .tooth6 { left: 46px; top: 35px; width: 14px; transform: rotate(12deg); -webkit-transform: rotate(12deg); -moz-transform: rotate(12deg); -o-transform: rotate(12deg); } #bigBigWolf .tooth7 { left: 58px; top: 37px; width: 24px; transform: rotate(12deg); -webkit-transform: rotate(12deg); -moz-transform: rotate(12deg); -o-transform: rotate(12deg); } #bigBigWolf .tooth8, #bigBigWolf .tooth10 { left: 21px; top: 16px; width: 20px; height: 1px; background: #FFF; transform: rotate(76deg); -webkit-transform: rotate(76deg); -moz-transform: rotate(76deg); -o-transform: rotate(76deg); } #bigBigWolf .tooth9, #bigBigWolf .tooth11, #bigBigWolf .tooth12 { left: 14px; top: 15px; width: 20px; height: 1px; background: #FFF; transform: rotate(122deg); -webkit-transform: rotate(122deg); -moz-transform: rotate(122deg); -o-transform: rotate(122deg); } #bigBigWolf .tooth10 { left: 21px; top: 18px; height: 2px; } #bigBigWolf .tooth11 { left: 14px; top: 20px; height: 3px; } #bigBigWolf .tooth12 { left: 13px; top: 18px; height: 2px; } #bigBigWolf .tooth13 { left: 270px; top: 17px; width: 18px; transform: rotate(335deg); -webkit-transform: rotate(335deg); -moz-transform: rotate(335deg); -o-transform: rotate(335deg); } #bigBigWolf .tooth14 { left: 254px; top: 11px; width: 22px; transform: rotate(55deg); -webkit-transform: rotate(55deg); -moz-transform: rotate(55deg); -o-transform: rotate(55deg); } #bigBigWolf .tooth15 { left: 242px; top: 16px; width: 29px; transform: rotate(100deg); -webkit-transform: rotate(100deg); -moz-transform: rotate(100deg); -o-transform: rotate(100deg); } #bigBigWolf .tooth16 { left: 243px; top: 25px; width: 13px; transform: rotate(20deg); -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); -o-transform: rotate(20deg); } #bigBigWolf .tooth17 { left: 237px; top: 29px; width: 11px; transform: rotate(100deg); -webkit-transform: rotate(100deg); -moz-transform: rotate(100deg); -o-transform: rotate(100deg); } #bigBigWolf .tooth18 { left: 219px; top: 36px; width: 24px; transform: rotate(165deg); -webkit-transform: rotate(165deg); -moz-transform: rotate(165deg); -o-transform: rotate(165deg); } #bigBigWolf .tooth19, #bigBigWolf .tooth21, #bigBigWolf .tooth23 { left: 255px; top: 15px; width: 22px; height: 1px; background: #FFF; transform: rotate(55deg); -webkit-transform: rotate(55deg); -moz-transform: rotate(55deg); -o-transform: rotate(55deg); } #bigBigWolf .tooth20, #bigBigWolf .tooth22 { left: 247px; top: 17px; width: 22px; height: 1px; background: #FFF; transform: rotate(100deg); -webkit-transform: rotate(100deg); -moz-transform: rotate(100deg); -o-transform: rotate(100deg); } #bigBigWolf .tooth21 { left: 255px; top: 16px; height: 2px; } #bigBigWolf .tooth22 { left: 248px; top: 19px; height: 4px; } #bigBigWolf .tooth23 { left: 255px; top: 19px; height: 2px; } #bigBigWolf .beard { left: 190px; bottom: 50px; width: 370px; height: 200px; z-index: 80; } #bigBigWolf .beard1, #bigBigWolf .beard2, #bigBigWolf .beard3, #bigBigWolf .beard4, #bigBigWolf .beard5, #bigBigWolf .beard6, #bigBigWolf .beard7, #bigBigWolf .beard8, #bigBigWolf .beard9, #bigBigWolf .beard10, #bigBigWolf .beard11, #bigBigWolf .beard12 { right: -1px; top: 32px; width: 40px; height: 2px; font-size: 0; background: #181818; z-index: 0; transform: rotate(3deg); -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); -o-transform: rotate(3deg); } #bigBigWolf .beard2 { right: 23px; top: 68px; width: 24px; transform: rotate(355deg); -webkit-transform: rotate(355deg); -moz-transform: rotate(355deg); -o-transform: rotate(355deg); } #bigBigWolf .beard3 { right: 34px; top: 90px; width: 22px; transform: rotate(30deg); -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -o-transform: rotate(30deg); } #bigBigWolf .beard4 { right: 54px; top: 120px; width: 28px; transform: rotate(50deg); -webkit-transform: rotate(50deg); -moz-transform: rotate(50deg); -o-transform: rotate(50deg); } #bigBigWolf .beard5 { right: 89px; top: 132px; width: 22px; transform: rotate(60deg); -webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); -o-transform: rotate(60deg); } #bigBigWolf .beard6 { right: 115px; top: 148px; width: 16px; transform: rotate(70deg); -webkit-transform: rotate(70deg); -moz-transform: rotate(70deg); -o-transform: rotate(70deg); } #bigBigWolf .beard7 { right: 145px; top: 162px; width: 24px; transform: rotate(90deg); -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); } #bigBigWolf .beard8 { right: 175px; top: 166px; width: 16px; transform: rotate(110deg); -webkit-transform: rotate(110deg); -moz-transform: rotate(110deg); -o-transform: rotate(110deg); } #bigBigWolf .beard9 { right: 210px; top: 173px; width: 22px; transform: rotate(60deg); -webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); -o-transform: rotate(60deg); } #bigBigWolf .beard10 { right: 245px; top: 173px; width: 14px; transform: rotate(130deg); -webkit-transform: rotate(130deg); -moz-transform: rotate(130deg); -o-transform: rotate(130deg); } #bigBigWolf .beard11 { right: 275px; top: 168px; width: 20px; transform: rotate(120deg); -webkit-transform: rotate(120deg); -moz-transform: rotate(120deg); -o-transform: rotate(120deg); } #bigBigWolf .beard12 { right: 300px; top: 156px; width: 16px; transform: rotate(140deg); -webkit-transform: rotate(140deg); -moz-transform: rotate(140deg); -o-transform: rotate(140deg); } #bigBigWolf .scar, #bigBigWolf .scar1, #bigBigWolf .scar2, #bigBigWolf .scar3, #bigBigWolf .scar4, #bigBigWolf .scar5 { left: 142px; bottom: 154px; width: 120px; height: 2px; font-size: 0; background: #181818; z-index: 60px; transform: rotate(43deg); -webkit-transform: rotate(43deg); -moz-transform: rotate(43deg); -o-transform: rotate(43deg); } #bigBigWolf .scar1 { left: -2px; top: -5px; width: 25px; transform: rotate(90deg); -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); } #bigBigWolf .scar2 { left: 20px; top: 2px; width: 29px; transform: rotate(80deg); -webkit-transform: rotate(80deg); -moz-transform: rotate(80deg); -o-transform: rotate(80deg); } #bigBigWolf .scar3 { left: 50px; top: -2px; width: 29px; transform: rotate(90deg); -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); } #bigBigWolf .scar4 { left: 74px; top: -4px; width: 22px; transform: rotate(92deg); -webkit-transform: rotate(92deg); -moz-transform: rotate(92deg); -o-transform: rotate(92deg); } #bigBigWolf .scar5 { left: 95px; top: -2px; width: 25px; transform: rotate(90deg); -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); } </style> </head> <body> <div id="bigBigWolf"> <div id="url"><a href="http://www.imilo.net"></a></div> <div class="face"> <div class="left"></div> <div class="right"></div> <div class="cover1"></div> <div class="cover2"></div> <div class="cover3"></div> <div class="cover4"></div> <div class="cover5"></div> </div> <div class="ear"> <div class="left"> <div class="inner"></div> <div class="cover1"></div> <div class="cover2"></div> <div class="cover3"></div> <div class="cover4"></div> <div class="cover5"></div> </div> <div class="right"> <div class="inner"></div> <div class="cover1"></div> <div class="cover2"></div> <div class="cover3"></div> <div class="cover4"></div> <div class="cover5"></div> </div> </div> <div class="eye"> <div class="left"> <div class="inner"> <div class="pupil"> <div class="inner"></div> <div class="light1"></div> <div class="light2"></div> <div class="light3"></div> </div> </div> </div> <div class="right"> <div class="inner"> <div class="pupil"> <div class="inner"></div> <div class="light1"></div> <div class="light2"></div> <div class="light3"></div> </div> </div> </div> </div> <div class="eyebrow"> <div class="left"> <div class="inner"></div> <div class="eyebrow1"></div> <div class="eyebrow2"></div> </div> <div class="right"> <div class="inner"></div> <div class="eyebrow1"></div> </div> </div> <div class="nose"> <div class="outer"> <div class="inner"></div> <div class="light"></div> </div> </div> <div class="mouth"> <div class="inner"> <div class="tooth1"></div> <div class="tooth2"></div> <div class="tooth3"></div> <div class="tooth4"></div> <div class="tooth5"></div> <div class="tooth6"></div> <div class="tooth7"></div> <div class="tooth8"></div> <div class="tooth9"></div> <div class="tooth10"></div> <div class="tooth11"></div> <div class="tooth12"></div> <div class="tooth13"></div> <div class="tooth14"></div> <div class="tooth15"></div> <div class="tooth16"></div> <div class="tooth17"></div> <div class="tooth18"></div> <div class="tooth19"></div> <div class="tooth20"></div> <div class="tooth21"></div> <div class="tooth22"></div> <div class="tooth23"></div> </div> </div> <div class="beard"> <div class="beard1"></div> <div class="beard2"></div> <div class="beard3"></div> <div class="beard4"></div> <div class="beard5"></div> <div class="beard6"></div> <div class="beard7"></div> <div class="beard8"></div> <div class="beard9"></div> <div class="beard10"></div> <div class="beard11"></div> <div class="beard12"></div> </div> <div class="scar"> <div class="scar1"></div> <div class="scar2"></div> <div class="scar3"></div> <div class="scar4"></div> <div class="scar5"></div> </div> <div class="hat"> <div class="inner"> <div class="patch"> <div class="line1"></div> <div class="line2"></div> <div class="line3"></div> <div class="line4"></div> <div class="line5"></div> <div class="line6"></div> <div class="line7"></div> <div class="line8"></div> <div class="line9"></div> <div class="line10"></div> </div> </div> </div> </div> </body> </html>

提示：您可以先修改部分代码再运行

笔记一下,简单的input值的限制

练习 — Wed, 03 Feb 2010 02:45:13 +0000

控制文本框里只能输入数字,并且最大数字不超过100,超过一百的话强制显示100

<!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"> <head> <meta http-equiv="X-UA-Compatible" content="IE=7" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>首页</title> <style type="text/css"> html,body{margin:0; padding:20px;} </style> </head> <body> <input type="text" id="input" /> <script type="text/javascript"> var text = document.getElementById("input"); text.onkeyup = function(){ this.value=this.value.replace(/\D/g,''); if(text.value>100){ text.value = 100; } } </script> </body> </html>

提示：您可以先修改部分代码再运行

搞来两端模拟自由落体与抛物运动的JS玩

练习 — Fri, 22 Jan 2010 08:03:35 +0000

这里有更详细的讲解呵呵

http://www.cnblogs.com/cloudgamer/archive/2009/01/06/Tween.html

自由落体

<p>横向系数：<input id="hp" type="text" value="0.1" /> (0-1)</p> <p>纵向系数：<input id="vp" type="text" value="0.6" /> (0-1)</p> <p>速度：<input id="sp" type="text" value="30" />(20-1000) <input type="button" value="demo" onclick="demo(document.getElementById('hp').value, document.getElementById('vp').value, document.getElementById('sp').value)" /></p> <div style="margin-left:600px;"> <div id="fall" style="width:30px; height:30px; background:#f90; position:relative; right:0px; bottom:40px"></div> </div> <script type="text/javascript"> var i = null; function demo(hp,vp,sp) { var f=document.getElementById('fall'); f.style.right='0px'; f.style.bottom='40px'; i&&clearInterval(i); var h=1,v=1,hp=(hp>0&&hp<1)?hp:0.2,vp=(vp>0&&vp<1)?vp:0.5,sp=(sp>20 || sp<1000)?sp:30; i=setInterval(function(){ if(f){ var r=parseInt(f.style.right)+h,b=parseInt(f.style.bottom)-v; f.style.right=r+'px'; f.style.bottom=b+'px'; if(r>1000)clearInterval(i); if(b>-210){ v+=2 } else { h=(v>0)?v*hp:0; v*=(v>0)?-1*vp:0 } } },sp); } </script>

提示：您可以先修改部分代码再运行

抛物运动

<!doctype html> <html> <head> <meta charset="utf-8" /> <style type="text/css"> *{padding:0;margin:0;} body{font-size:13px;padding:10px;} p{margin:2px;} .wrap{position:relative;width:1000px;height:550px;margin:0 auto;border:1px solid #ccc;margin-top:50px;} #fall{width:20px;font-size:1px;height:20px;background:#000;position:absolute;top:0;left:0;} </style> </head> <body> <h3>模拟重力状态下的抛物运动（假使1px==1mm）</h3> <p>横向初速度：<input id="Vx" type="text" value="2" />px/ms</p> <p>纵向初速度：<input id="Vy" type="text" value="-2" />px/ms</p> <p>重力加速度：<input id="a" type="text" value="0.0098" />px/平方ms</p> <p>（如果这个加速度是一个随时间变化的值，就能达到其他非匀加速运动的效果了。）</p> <p>单位时间：<input id="t" type="text" value="10" />（记录运动的时间间隔） <p><input type="button" value="演示" onclick="demo(document.getElementById('Vx').value, document.getElementById('Vy').value, document.getElementById('a').value, document.getElementById('t').value)"/></p> <body> <div class="wrap"> <div id="fall">o</div> </div> </body> <script type="text/javascript"> function demo(x,y,a,t) { var f=document.getElementById('fall'); var Vx=parseInt(x), Vy=parseInt(y), g=a, t=parseInt(t), h=0,l=0,Sx=0,Sy=0; var i=setInterval(function(){ if(f){ Sx+=Vx*t; l=Sx; Vy+=g*t; h+=Vy*t; f.style.left=l+'px'; f.style.top=h+'px'; if(h>500||l>900)clearInterval(i); } },t); } </script>

提示：您可以先修改部分代码再运行

封装图片滑动效果

练习 — Thu, 17 Dec 2009 02:10:16 +0000

by bopooo

在腾讯QQ软件下载的页面有一个图片滑动的效果，觉得还不错就自己封装了一个
技术方面在动作缓冲上遇到一些问题不过都解决了
不过还是要谢谢天空里的一片云给我提供的资料http://bbs.blueidea.com/thread-2961061-1-2.html
我大体上看了下别人的思路就自己动手做了基本上是按照自己的想法来做的

考虑到很多朋友不太了解js 所以我封装的时候把所有参数都集中到一个函数里免得大家调用的时候还要看源代码去设置参数根据提供不同的参数会有不同的效果没有封装特别多的效果需要的朋友可以自己动手改正自己想要的
废话多了具体看效果

调用方法：glide.layerGlide(auto,oEventCont,oSlider,sSingleSize,second ,fSpeed,point);

*glide.layerGlide(auto,oEventCont,oSlider,sSingleSize,second ,fSpeed,point);
*@param auto type:bolean 是否自动滑动当值是true的时候为自动滑动
*@param oEventCont type:object 包含事件点击对象的容器
*@param oSlider type:object 滑动对象
*@param sSingleSize type:number 滑动对象里单个元素的尺寸（width或者height）尺寸是有point 决定
*@param second type:number 自动滑动的延迟时间单位/秒
*@param fSpeed type:float 速率取值在0.05--1之间当取值是1时没有滑动效果
*@param point type:string left or top 当值为left 为横向滚动为top是顺向滚动

横向滑动

提示：您可以先修改部分代码再运行

竖向滑动

提示：您可以先修改部分代码再运行

Dom 事件处理函数

练习 — Thu, 26 Nov 2009 03:28:51 +0000

别人整理的，我顺手就给捏来了哈哈。很详细的一些事件，浏览器支持情况，以及详细的说明。在这里向整理者致敬。

提示：您可以先修改部分代码再运行

分享几种JS烟花

练习 — Thu, 26 Nov 2009 03:21:49 +0000

今天看到蓝色理想有几个哥们都发了自己写的烟花效果，弄的心里痒痒，自己也想写一个出来玩，结果把IE写死好几次，还是放弃了，这里转几个别人写的效果上来分享

提示：您可以先修改部分代码再运行

<!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" > <head> <title>Untitled Page</title> </head> <style type="text/css"> .fire{display:block; overflow:hidden; font-size:12px; position:absolute}; body{overflow:hidden; background:#000} html{overflow:hidden; background:#000} </style> <body> </body> <script type="text/javascript"> var Fire = function(r, color) { this.radius = r || 12; this.color = color || "FF6600"; this.xpos = 0; this.ypos = 0; this.zpos = 0; this.vx = 0; this.vy = 0; this.vz = 0; this.mass = 1; this.p = document.createElement("span"); this.p.className = "fire"; this.p.innerHTML = "*"; this.p.style.fontSize = this.radius + "px"; this.p.style.color = "#" + this.color; } Fire.prototype = { append: function(parent) { parent.appendChild(this.p); }, setSize: function(scale) { this.p.style.fontSize = this.radius * scale + "px"; }, setPosition:function(x, y) { this.p.style.left = x + "px"; this.p.style.top = y + "px"; }, setVisible: function(b) { this.p.style.display = b ? "block" : "none"; } } var fireworks = function() { var fires = new Array(); var count = 100; var fl = 250; var vpx = 500; var vpy = 300; var gravity = .3; var floor = 200; var bounce = -.8; var timer; return { init: function() { for (var i=0; i<count; i++) { var color = 0xFF0000; color = (Math.random() * 0xFFFFFF).toString(16).toString().split(".")[0]; while(color.length < 6) { color = "0" + color; } var fire = new Fire(12, color); fires.push(fire); fire.ypos = -100; fire.vx = Math.random() * 6 - 3; fire.vy = Math.random() * 6 - 3; fire.vz = Math.random() * 6 - 3; fire.append(document.body); } var that = this; timer = setInterval(function() { for (var i=0;i<count; i++) { that.move(fires[i]); } }, 30); }, move: function(fire) { fire.vy += gravity; fire.xpos += fire.vx; fire.ypos += fire.vy; fire.zpos += fire.vz; if (fire.ypos > floor) { fire.ypos = floor; fire.vy *= bounce; } if (fire.zpos > -fl) { var scale = fl/ (fl+fire.zpos); fire.setSize(scale); fire.setPosition(vpx + fire.xpos * scale, vpy + fire.ypos * scale); fire.setVisible(true); } else { fire.setVisible(false); } } } } fireworks().init(); </script> </html>

提示：您可以先修改部分代码再运行

<!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" > <head> <title>Untitled Page</title> </head> <style type="text/css"> .fire{display:block; overflow:hidden; font-size:12px; position:absolute}; body{overflow:hidden; background:#000} html{overflow:hidden; background:#000} </style> <body> </body> <script type="text/javascript"> var Fire = function(r, color) { this.radius = r || 12; this.color = color; this.xpos = 0; this.ypos = 0; this.zpos = 0; this.vx = 0; this.vy = 0; this.vz = 0; this.mass = 1; this.x =0; this.y=0; this.p = document.createElement("span"); this.p.className = "fire"; this.p.innerHTML = "*"; this.p.style.fontSize = this.radius + "px"; this.p.style.color = "#" + this.color; } Fire.prototype = { append: function(parent) { parent.appendChild(this.p); }, setSize: function(scale) { this.p.style.fontSize = this.radius * scale + "px"; }, setPosition:function(x, y) { this.p.style.left = x + "px"; this.p.style.top = y + "px"; }, setVisible: function(b) { this.p.style.display = b ? "block" : "none"; } } var fireworks = function() { var fires = new Array(); var count = 150; var fl = 250; var vpx = 500; var vpy = 300; var gravity = .5; var floor = 200; var bounce = -.8; var timer; var wind = ((Math.floor(Math.random()*3) + 3)/10)*(Math.random()*2 - 1 > 0 ? 1 : -1)*.25; var wpos = 0; var wcount; return { init: function() { wcount = 50 + Math.floor(Math.random() * 100); for (var i=0; i<count; i++) { var color = 0xFF0000; color = (Math.random() * 0xFFFFFF).toString(16).toString().split(".")[0]; while(color.length < 6) { color = "0" + color; } var fire = new Fire(12, color); fires.push(fire); fire.ypos = -100; fire.vz = Math.random() * 6 - 3; fire.vx = (Math.random()*2 - 1)*2 ; fire.vy = Math.random()*-15 - 15; fire.x = 500 fire.y = 600; fire.append(document.body); } var that = this; timer = setInterval(function() { wpos++; if (wpos >= wcount) { wpos = 0; wcount = 50 + Math.floor(Math.random() * 100); wind = ((Math.floor(Math.random()*3) + 3)/10)*(Math.random()*2 - 1 > 0 ? 1 : -1)*.25; } for (var i=0;i<count; i++) { that.move(fires[i]); } }, 30); }, move: function(fire) { fire.vy += gravity; fire.x += fire.vx; fire.y += fire.vy; fire.vx += wind; fire.setPosition(fire.x, fire.y); if (fire.x < 0 || fire.x >1000 || fire.y < 0 || fire.y > 600) { fire.vx = (Math.random()*2 - 1)*2; fire.vy = Math.random()*-15 - 15; fire.x = 500; fire.y = 600; fire.setPosition(fire.x, fire.y); } } } } fireworks().init(); </script> </html>

提示：您可以先修改部分代码再运行

IE6 CSS bug: position:relative元素被overflow:auto/scroll元素包含

练习 — Mon, 17 Aug 2009 05:38:48 +0000

记个小笔记。今天做页面遇到的小问题。

BUG描述：

页面中某DIV使用了position:relative，结合top=-25px等元素定位。在FF和IE7下表现正常，但是在IE6中该DIV会随鼠标滚动而滚动。

分析：

这是IE6一个已知的BUG：当某position:relative元素被带有overflow:auto/scroll属性的块级元素包含时，会表现出postion:absolute的行为。

解决方法：

1.为包含块元素添加属性position:relative 。

2.把该元素的position:relative属性去掉，使用默认的static定位，并通过margin-top等属性实现类似的效果。

分享一个跨浏览器固定定位的方法。

练习 — Sat, 13 Jun 2009 10:37:10 +0000

我发现原来做前端真的是需要创意的。前几天看到别人用boeder代替边距做hover效果，这次又看到用这个办法做固定定位的，解开了我一个心结。

其实很简单，就是我一直都没想到，元素相对HTML绝对定位，然后用BODY做页面容器。

先看看效果吧呵呵。

<!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" xml:lang="UTF-8"> <head> <title>跨浏览器固定定位</title> <style type="text/css"> *{margin:0;padding:0;} html{_overflow:hidden;} body{_height:100%; _overflow-y:auto;} #box{width:100px; height:100px;background-color:black;position:fixed;_position:absolute; top:100px; left:100px;} </style> </head> <body> <div> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内容<br> 内1111容<br> </div> <div id="box"></div> </body> </html>

提示：您可以先修改部分代码再运行

清理浮动的全家

练习 — Wed, 15 Apr 2009 06:27:25 +0000

来源：http://www.twinsenliang.net/skill/20090413.html

早段时间特别的忙，忙到站点一直没有更新；但是这段时间也是偷偷的做了一些的工作，比如对站点的JS进行了压缩，构思labs分站以及聚合分站。

而此段时间最烦的是森林群里面的一群人每天上班都在吵，然后我就每次都装嫩的在里面问：“各位高手，劳烦请问一下；清除浮动怎么弄？”

清除浮动一个凡是做页面的人都会遇到的一个东西，但是是否大家都能够清楚的知道，全方位的了解呢？于是一闲下来了马上写了这样的一篇文章，不能讲面面俱到，然而基本能将我所知道的倾囊相授了。

我们粗略的一起来看看清除浮动的办法一共有多少个。对应的DEMO

1. 采用伪类:after进行后续空制的高度位零的伪类层清除

2. 采用CSS overflow:auto的方式撑高

3. 采用CSS overflow:hidden的方式产生怪异适应

4. 采用display:table将对象变成table形式

5. 采用div标签，以及css的clear属性

6. 采用br标签，以及css的clear属性

7. 采用br标签，以及其自身HTML的clear属性

粗略的看，他们都能将问题解决；然而他们另外一方面又有着各自的利弊。（一一对应）

1. 优点结构语义化完全正确，不会产生其余的怪异问题。

缺点复用方式不当容易造成代码量急剧增大。

建议最外层轻浮动时使用，或清晰模块化复用方式的人使用。

2. 优点结构语义化完全正确，代码量极少。

缺点多个嵌套后，点击最外层的轻浮动框会遭成最外层至最内层内容全选（FF）；或者在mouseover造成宽度改变时会出现最外层模块有滚动条（IE）。

建议内个模块使用，请勿嵌套。

3. 优点结构语义化完全正确，代码量极少。

缺点内容增多时候极易不会自动换行而内容被隐藏掉。

建议宽度固定时使用，请勿嵌套。

4. 优点结构语义化完全正确，代码量极少。

缺点盒模型属性已经改变，可想而知奇异事件自然多得你数都数不到。

建议如果你不想改Bug改死你的话，最好不要使用；不过可以作为alpha版本当中临时性的忽悠下测试。

5. 优点代码量极少，复用性极高。

缺点完全不能完美的适应语义化，不利于改版以及需求变更。

建议初学者使用，可以让你快速的解决浮动问题。

6. 优点语义化程度比第5种情况要更优；代码量极少，复用性极高。

缺点语义化依旧不完美，不利于改版以及需求变更。

建议初学者使用，可以让你快速的解决浮动问题。

7. 优点语义化程度比第5、6种情况要更优；代码量最少，复用性极高。

缺点语义化依旧不完美，不利于改版以及需求变更。

建议引导初学者思维升级时使用，让其明白与其用classname来控制一种表现，倒不如回归到WEB1.0的时代的网页直接用html属性来控制表现，毕竟后者的代码量更少。

WP-pagenavi插件在分类内分页无效问题

练习 — Fri, 13 Mar 2009 05:39:52 +0000

一直用WP-pagenavi这个插件分页，今天突然遇到个大问题，我在首页调用一个分类

然后用

直接分页，发现页码信息可以读出来，但是分页按钮完全失效了，同时域名上看到page参数传递正常。

把搜到的解决办法保存下先。

：
$limit = get_option('posts_per_page');
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
query_posts('cat=5&showposts=2' . '&paged=' . $paged);
$wp_query->is_archive = true; $wp_query->is_home = true;
?>