練習——設計特效首頁
阿新 • • 發佈：2017-11-25
spotlight height 定位 ria none href clas opacity gin
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>設計特效首頁</title> 6 <style type="text/css"> 7 body{/*設置主體樣式*/ 8 padding:0; 9 margin:0; 10 background:black; 11 color:#666; 12 overflow:hidden; 13 border:#333 1px solid; 14 } 15 #text-shadow-box{/*設計包含框樣式*/ 16 position:relative; /*定義內部的定位元素以這個包含框為參照物*/ 17 width:100%; 18 top:175px; 19 left:0; 20 } 21 #text{/*設計文本樣式*/ 22 text-align:center; 23 line-height:0.5em; 24 margin:0; 25 font-family:helvetica,arial, sans-serif; 26 height:1px; 27 color:#999; 28 font-size:80px; 29 font-weight:bold; 30 text-shadow:5px -5px 16px #000; 31 } 32 div.wall div{/*設計前面擋風板樣式*/ 33 position:absolute; 34 width:100%; 35 height:300px; 36 top:42px; 37 left:0; 38 background:#999; 39 } 40 #spotlight {/*設計覆蓋在上面的探照燈效果圖*/ 41 position:absolute; 42 width:100%; 43 height:100%; 44 top:100px; 45 left:0; 46 background: url(../Task/u=205613160,1157730415&fm=27&gp=0.jpg) center -300px; 47 font-size:12px; 48 } 49 #spotlight a{/*設計鏈接網頁樣式*/ 50 color:#ccc; 51 text-decoration:none; 52 position:absolute; 53 left:45%; 54 top:58%; 55 float:left; 56 text-shadow:1px 1px #999 , 57 -1px -1px #333; 58 } 59 #cat{ 60 position:absolute; 61 top:130px; 62 left:260px; 63 z-index: 1000; 64 opacity: 0.5; 65 } 66 #cat img{ 67 widht:80px; 68 } 69 </style> 70 </head> 71 <body> 72 <div id="text-shadow-box"> 73 <div class="wall"> 74 <p id="text">黑客帝國</p> 75 <div></div> 76 </div> 77 <div id="spotlight"><a href="https://www.hao123.com">Hacker Home</a></div> 78 <div id="cat"><img src="../Task/u=205613160,1157730415&fm=27&gp=0.jpg"/></div> 79 </div> 80 </body> 81 </html>
練習——設計特效首頁