Question

我想让我的主页看起来像示例网站“kate spade”

“http://www.verticalresponse.com/blog/10-examples-of-highly-effective-welcome-emails/”这是该网站的链接。我想让我的主页像第四个例子（这是“kate spade”网站）

我不只是复制网站，因为我不会发布我的网站。这只是为了练习。

具体来说，我想让我的菜单栏看起来像图像中的菜单栏，我想把我的导航栏“联系我”放在我的图像中，就像网站一样。你能帮我修一下我的主页吗？

以下是我的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*/
  }

Answer 1

为了获得你想要的东西，而不是使用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;
}

我希望我有所帮助

用于装饰菜单栏和定位元素的css和html编码

1 个答案: