练习——设计特效首页
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了练习——设计特效首页相关的知识，希望对你有一定的参考价值。
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>
以上是关于练习——设计特效首页的主要内容，如果未能解决你的问题，请参考以下文章