<style>
body{
margin:0;
background:#4E9C68;
}
#head{
width:100%;
height:200px;
background-color:#297C46;
}
#t1{
color:#7CBB92;
font-size:100px;
font-family:'Lobster', cursive, sans-serif , 微軟正黑體;
/* text-shadow:水平陰影 垂直陰影 顏色*/
text-shadow:3px 3px #396;
/* position:位置關係 */
position:relative;
top:80px;
left:200px;
}
</style>
<body>
<div id="head">
<div id="t1">May</div>
</div>
</body>
結果圖(截部分圖)
補充position常用absolute和relative
absolute絕對位置是根據網頁來決定位置
relative相對位置是根據他在哪一區來決定位置
例如上方div的#t1他其實是在div的#head的裡面,因此我就根據他在head區塊中調整,把position設為相對位置。
不過標題部分個人是比較少用css寫法,喜歡用圖片代替,日後如要換Logo也好改。
但是圖片會造成搜尋無法搜到網站(關鍵字最佳化),因此後面會補充用工具造字。XDD
其實做得好網友會自動幫你宣傳,關鍵字意義可能不大。
text-shadow參考網址:http://www.w3schools.com/cssref/css3_pr_text-shadow.asp
position參考網址:http://www.w3schools.com/cssref/pr_class_position.asp