溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關CSS3如何實現超酷的黑貓警長首頁，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
先看看效果圖：
具體代碼：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>text-shadow</title>
<style type="text/css">
body {/*清除頁邊距，設計主色調*/
padding: 0px;
margin: 0px;
color: #666;
}
#text-shadow-box {/*設計盒子外框樣式*/
position: relative;/*讓內部的定位元素以這個框為參照物*/
width: 598px;
height: 406px;
background: #666;
overflow: hidden;/*禁止內容超過設定的區域*/
border: #333 1px solid;
}
#text-shadow-box div.wall {/*設置背景墻樣式*/
position: absolute;
width: 100%;
top: 175px;
left: 0px
}
#text {/*設計導航文本樣式*/
text-align: center;
line-height: 0.5em;
margin: 0px;
font-family: helvetica, arial, sans-serif;
height: 1px;
color: #999;
font-size: 80px;
font-weight: bold;
text-shadow: 5px -5px 16px #000;/*設計右上偏移的陰影，適當進行模糊處理，產生色暈效果，陰影色為深色，營造靜謐的效果*/
}
div.wall div {/*設計前面擋風板樣式*/
position: absolute;
width: 100%;
height: 300px;
top: 42px;
left: 0px;
background: #999;
}
#spotlight {/*設計覆蓋在上面的探照燈效果圖*/
position: absolute;/*設計一個層，讓其覆蓋在頁面上，并使其滿窗口顯示，通過前期設計好的一個探照燈背景來營造神秘效果*/
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background: url(images/spotlight.png) center -300px;
}
#spotlight a {
color:#ccc;
text-decoration:none;
position:absolute;
left:47%;
top:56%;
float:left;
}
a img { border:none; }
</style>
</head>
<body>
<!--本案例的結構外套-->
<div id="text-shadow-box">
<!--墻體外結構-->
<div class="wall">
<p id="text">黑貓警長</p>
<div></div>
</div>
<!--外罩，通過他可以為頁面覆蓋一層桌紙，添加特殊的藝術效果-->
<div id="spotlight"><a href="index.htm"><img src="images/cat1.png" /></a></div>
</div>
</body>
</html>關于“CSS3如何實現超酷的黑貓警長首頁”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
