CSS和HTML編碼用於裝飾菜單欄和定位元素

-4

我要讓我的主頁看起來像的例子網站「凱特·絲蓓」CSS和HTML編碼用於裝飾菜單欄和定位元素

「http://www.verticalresponse.com/blog/10-examples-of-highly-effective-welcome-emails/」這是鏈接的網站。我想讓我的主頁像第四個例子（這是「凱特鐵鍬」網站）

我不只是複製一個網站，因爲我不會發布我的網站。這只是爲了練習。

具體來說，我想讓我的菜單欄看起來像圖像中的菜單欄，我想讓我的導航欄「與我聯繫」像我的圖像像網站。你能幫我修理我的主頁嗎？

以下是我的html代碼。

<!DOCTYPE html> 

<html> 

<head> 

<title> 

Jiwon's Website 

</title> 

<link rel="stylesheet" href="style.css"> 

</head> 

<body> 


<div id= "menu"> 
<ul> 
<li> <a href="home.html"> Home </a> </li> 
<li><a href="resume.html">Resume</a></li> 
<li><a href="portfolio.html">Portfolio</a></li> 
<li><a href="About Me.html">About</a></li> 
<li><a href="contact.html">Contact </a></li> 
</ul> 
</div> 



<img src="image/thankletter.png" width="900" height="600" alt="thank you letter"> 





<h4> <a href="contact.html"> CONTACT ME ▶ </a> </h4> 








</body> 

</html>

以下是我的CSS代碼

html { background: #ffffff ;}html { background: white url(image/follower.png) repeat;} 

Body {font-family: FZYaoTi, arial, sans serif; font-size: 100% ; text-align: left ; width: 800px; height: 100% ; margin: auto ; padding: 25px 50px ; } 


p {font-family: "Harlow Solid Italic", "arial", font-size: 16pt ; } 

a {text-decoration: none; color: blue ; } 


h2 {margin: 50px 0px 0px 0px ; border-style:solid; border-width: 50px ; border-color: #f4d03f ; padding: 50px; background: white; } 



#menu { 
    clear:both; 
    float:left; 
    background: #4d5656; /*This changes the color of your menu bar*/ 
    width:900px; /*This will depend on the width of your website content; it should be the 「width」 property in your body{} selector PLUS the 「margin」 property in your body{} selector*/ 
    font-family: "myriad pro", "arial", "sans serif"; /*This should be the SAME as the font selection from the body{} selector...you can copy and paste, even*/ 
font-size: 14pt; /*This changes the size of the font for your menu…or you can leave it normal-sized*/ 
color: #fff; /*This changes the color of the font for your menu*/ 
    position:relative; 
    left: -50px; /*What are your left-right 「padding」 properties in your body{} selector? This should be the sum of both. Example: If padding: 25px 0px; then this should be -50 px; if padding: 30px 0px; then this should be -60 px; */ 
    text-align:left; 
} 













/*Individual menu items*/ 


#menu ul { 
    margin:0; 
    padding:0; 
    list-style:none; 
    float:right; 
    position:relative; 
    right:50%; 
} 



#menu ul li { 
    float:left; 
    position:relative; 
    left:50%; 
} 




#menu ul li a { 
    display: block; 
    padding: 0px 40px; /*This says how much space is between each menu item, left-right. How far apart do you want your menu items to be?*/ 
    line-height:60px; /*How tall do you want your menu to be?*/ 
    background: #4d5656; /*This should be the SAME as the background color up in the first #menu section*/ 
    text-decoration:none; 
    color:#fff; /*This changes the color of the text for menu items. We need this because each one is also a link, and will otherwise show up as bright blue*/ 
} 


#menu ul li a:hover { 
    background:#fff; /*This should be the SAME as the default background color behind your text*/ 
    color: #4d5656; /*This should be the SAME as the background color up in the first #menu section*/ 
    }

來源

2017-04-17 jiwon kam

的代碼段會一直比較好，所以我們可能有工作充足的 – Swellar

歡迎來到Stackoverflow！請閱讀這篇關於[MCVE]（https://stackoverflow.com/help/mcve）的文章，讓使用更好地幫助您。 –

爲了得到你想要的東西，而不是使用img標籤使用一個div背景和放置鏈接內的鏈接。

無需使用H4

HTML

<div id="contact"> 
    <a href="contact.html" title="go to contact">Contact></a> 
</div>

CSS

#contact { 
    text-align: center; 
    padding: 30px; 
    width: 900px; 
    height: 600px; 
    margin: auto; 
    background: url(../image/thankletter.png) no-repeat; 
} 
#contact a { 
    font-size: 16px; 
}

我希望我已經幫助

來源

2017-04-17 01:53:04

非常感謝您的幫助！但是，我已經有一個花背景圖像。我想保留我的背景，我只想將我的「聯繫我」導航欄放在我的「謝謝你的信」圖像中。 –

添加爲解決這將幫助我 –

CSS和HTML編碼用於裝飾菜單欄和定位元素

回答

相關問題