close

<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

arrow
arrow
    全站熱搜

    o迷苓o 發表在 痞客邦 留言(0) 人氣()