標籤：css html html5 jquery javascript
<strong><span style="font-size:12px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>MyHtml.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--><style type="text/css">*{margin:0px;padding:0px}#header{width:1300px;height:37px;border:1px solid #F00;margin:0px auto;box-shadow:3px 2px 15px #000000;border-radius:3px;overflow:hidden;color:#330066;font-size:20px;font-family:"微軟雅黑";line-height:37px;text-align:center;}#header a{color:#330066;text-decoration:none;display:block;}#header a:hover{background:#FF9999;border-radius:3px;}#header .logo{width:150px;height:37px;background:#f6f;float:left;margin:0px 5px;box-shadow:3px 2px 15px #000000;border-radius:3px;}#header .ad{width:200px;height:37px;background:#66f;float:left;margin-left:194px;box-shadow:3px 2px 15px #000000;border-radius:3px;}#header .search{width:200px;height:37px;background:#36f;float:right;margin:0px 5px;box-shadow:3px 2px 15px #000000;border-radius:3px;}#nav{width:1300px;height:37px;background:#9f6;margin:4px auto;box-shadow:2px 2px 10px #000000 ;border-radius:7px;color:#000066;font-size:12px;line-height:37px;text-align:center;position:relative;}#nav ul{margin:0px 48px;}#nav ul li{list-style:none;width:94px;height:40px;background:#ff6;float:left;box-shadow:2px 2px 15px #000000;margin:3px 3px;border:2.5px solid #453;overflow:hidden;border-radius:10px;opacity:0.8;filter:alpha(opacity=3);-moz-opacity:0.8;position:relative;}#nav ul li p{width:100%;height:0px;overflow:hidden;background:rgba(253,52,17,0.5);position:absolute;left:0px;bottom:0px;text-align:center;line-height:24px;font-size:14px;}#nav ul li p a{font-size:16px;color:#330000;text-decoration:none;}#center{width:1300px;margin:20px auto;border:1.5px solid #66CC33;position:relative;}#center .Left{width:190px;height:850px;margin:20px 3px;float:left;position:absolute;background:#FFCCCC;border:2px solid #FF0033;box-shadow:2px 2px 15px #FF0033;border-radius:10px;overflow:hidden;}#center .Left .title{width:190px ;height:50px ;background:#FFCCCC url("img/nav_bg.png")no-repeat 13px 18px;font-size:16px;color:#660033;font-family:"微軟雅黑";line-height:50px;text-indent:45px;overflow:none;/*border:2px solid #330066 ;*/}#center .Left ul{margin:0px 0px;border-top:2px solid #330066}#center .Left ul li{width:190px;height:70px ;border-bottom:2px solid #330066 ;list-style-type:none;position:relative;paddding-left:0px}#center .Left ul li h3{height:40px;width:180px;color:#0000;/*font-weight:100;*/line-height:40px;text-indext:15px;text-align:center;}#center .Left ul li p{font-size:16px;color:#97D2F7;font-family:"微軟雅黑";text-indent:15px}#center .Left ul li p a{font-size:15px;color:#000033;text-decoration:none;text-align:center;margin:0px 6px;}#center .list {width:980px;margin:20px 200px;background:#FFCC66;position:absolute;float:left;border:2px solid #99CC33;box-shadow:2px 2px 15px #99CC33;border-radius:10px;}#center .list .box{width:210px;height:270px;overflow:hidden;border:2px solid #e93d68;border-radius:20px; box-shadow:2px 2px 15px #000000;display:inline-block/*行類會計元素*/;left:27px;margin:5px 5px;overfolw:hidden;position:relative;}#center .list .box img{width:210px;height:270px;}/*透明*/#center .list .box:hover img{transform:scale(1.3);transition:transform 800ms ease-out}/*放大縮小*/#center .list .box .scale{width:210px ; height:270px ;background:rgba(0,0,0,0.5);position:absolute;top:0px;color:#FFF;transform:translate(-210px);}#center .list .box .scale h3{text-align:center;line-height:60px;}#center .list .box .scale p{font-size:15px;margin:3px 15px ;line-height:24px ;text-indent:2em;/*首行縮排*/}#center .list .box:hover .scale{transform:translateX(0px);transition:transform 800ms ease-out;}#center .right{width:110px;height:850px;margin:20px 1187px;float:left;position:absolute;background:#99FF66;border:2px solid #FF0033;box-shadow:2px 2px 15px #FF0033;;border-radius:10px}</style> </head> <body> <div id="header"> <div class="logo"><a href="#">心愿</a></div> <div class="ad"><a href="#">堅持</a></div> <div class="search"><a href="#">夢想</a></div> </div> <div id="nav"> <ul> <li>王琪是個壞孩子<p><a href="#">加油</a></p></li> <li>不愛學習<p><a href="#">加油</a></p></li> <li>非常的懶<p><a href="#">加油</a></p></li> <li>我很肉肉<p><a href="#">加油</a></p></li> <li>辦事拖拉<p><a href="#">加油</a></p></li> <li>學習不努力<p><a href="#">加油</a></p></li> <li>愛發小脾氣<p><a href="#">加油</a></p></li> <li>沒有目標<p><a href="#">加油</a></p></li> <li>遊行俠<p><a href="#">加油</a></p></li> <li>該打屁股<p><a href="#">加油</a></p></li> <li>王琪是個小笨蛋<p><a href="#">加油</a></p></li> </ul></div><div id="center"> <div class="list"> <div class="box"> <img src="img/01.jpg"/> <div class="scale"><h3>wo--倔強--王琪!!</h3><p>我會努力的，也許我現在什麼都不行，但是我會告訴你，你可以罵我，瞧不起我，打倒我，但我不會屈服，我會讓你看到什麼是魔鬼，我會默默的努力，一定會成功的！</p></div> </div> <div class="box"> <img src="img/005.jpg"/> <div class="scale"><h3>wo--倔強--王琪!!</h3><p>我會努力的，也許我現在什麼都不行，但是我會告訴你，你可以罵我，瞧不起我，打倒我，但我不會屈服，我會讓你看到什麼是魔鬼，我會默默的努力，一定會成功的！</p></div> </div> <div class="box"> <img src="img/09.jpg"/> <div class="scale"><h3>wo--倔強--王琪!!</h3><p>我會努力的，也許我現在什麼都不行，但是我會告訴你，你可以罵我，瞧不起我，打倒我，但我不會屈服，我會讓你看到什麼是魔鬼，我會默默的努力，一定會成功的！</p></div> </div> <div class="box"> <img src="img/06.jpg"/> <div class="scale"><h3>wo--倔強--王琪!!</h3><p>我會努力的，也許我現在什麼都不行，但是我會告訴你，你可以罵我，瞧不起我，打倒我，但我不會屈服，我會讓你看到什麼是魔鬼，我會默默的努力，一定會成功的！</p></div> </div> <div class="box"> <img src="img/08.jpg"/> <div class="scale"><h3>wo--倔強--王琪!!</h3><p>我會努力的，也許我現在什麼都不行，但是我會告訴你，你可以罵我，瞧不起我，打倒我，但我不會屈服，我會讓你看到什麼是魔鬼，我會默默的努力，一定會成功的！</p></div> </div> <div class="box"> <img src="img/0003.jpg"/> <div class="scale"><h3>wo--倔強--王琪!!</h3><p>我會努力的，也許我現在什麼都不行，但是我會告訴你，你可以罵我，瞧不起我，打倒我，但我不會屈服，我會讓你看到什麼是魔鬼，我會默默的努力，一定會成功的！</p></div> </div> <div class="box"> <img src="img/07.jpg"/> <div class="scale"><h3>wo--倔強--王琪!!</h3><p>我會努力的，也許我現在什麼都不行，但是我會告訴你，你可以罵我，瞧不起我，打倒我，但我不會屈服，我會讓你看到什麼是魔鬼，我會默默的努力，一定會成功的！</p></div> </div> <div class="box"> <img src="img/03.jpg"/> <div class="scale"><h3>wo--萌噠噠--王琪!!</h3><p>我會努力的，也許我現在什麼都不行，但是我會告訴你，你可以罵我，瞧不起我，打倒我，但我不會屈服，我會讓你看到什麼是魔鬼，我會默默的努力，一定會成功的！</p></div> </div> <div class="box"> <img src="img/005.jpg"/> <div class="scale"><h3>wo--萌噠噠--王琪!!</h3><p>我會努力的，也許我現在什麼都不行，但是我會告訴你，你可以罵我，瞧不起我，打倒我，但我不會屈服，我會讓你看到什麼是魔鬼，我會默默的努力，一定會成功的！</p></div> </div> <div class="box"> <img src="img/002.jpg"/> <div class="scale"><h3>wo--萌噠噠--王琪!!</h3><p>我會努力的，也許我現在什麼都不行，但是我會告訴你，你可以罵我，瞧不起我，打倒我，但我不會屈服，我會讓你看到什麼是魔鬼，我會默默的努力，一定會成功的！</p></div> </div> <div class="box"> <img src="img/001.jpg"/> <div class="scale"><h3>wo--萌噠噠--王琪!!</h3><p>我會努力的，也許我現在什麼都不行，但是我會告訴你，你可以罵我，瞧不起我，打倒我，但我不會屈服，我會讓你看到什麼是魔鬼，我會默默的努力，一定會成功的！</p></div> </div> <div class="box"> <img src="img/4.jpg"/> <div class="scale"><h3>wo--萌噠噠--王琪!!</h3><p>我會努力的，也許我現在什麼都不行，但是我會告訴你，你可以罵我，瞧不起我，打倒我，但我不會屈服，我會讓你看到什麼是魔鬼，我會默默的努力，一定會成功的！</p></div> </div> </div> <div class="Left"> <div class="title">All me</div> <ul> <li> <h3>In my Life</h3> <p> <a href="#">遙望</a> <a href="#">如果</a> <a href="#">眼神</a> </p> </li> <li> <h3>All Dream</h3> <p> <a href="#">冒雨天</a> <a href="#">昨天</a> <a href="#">從前</a> </p> </li> <li> <h3>Hands Up</h3> <p> <a href="#">飛花</a> <a href="#">寂寞</a> <a href="#">落月</a> </li> <li> <h3>Tack Ti</h3> <p> <a href="#">幾朵</a> <a href="#">訴說</a> <a href="#">折磨</a> </p> </li> <li> <h3>Slow</h3> <p> <a href="#">交錯</a> <a href="#">寶貝</a> <a href="#">藍天</a> </p> </li> <li> <h3>Make up</h3> <p> <a href="#">說吧</a> <a href="#">琥珀</a> <a href="#">驕傲</a> </p> </li> <li> <h3>Man Ban</h3> <p> <a href="#">雲朵</a> <a href="#">蝴蝶</a> <a href="#">小何</a> </p> </li> </ul> </div> <div class="right"> <ul> <li></li> <li></li> <li></li> </ul> </div> </div> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> $("#nav ul li").hover( function(){ $(this).find("p").stop().animate( {height:"24px",paddingTop:"6px"},300 ); }, function(){ $(this).find("p").stop().animate( {height:"0px",paddingTop:"0px"},300 ); } ); </script> </body></html></span></strong>
div+css實現效果和
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
