2017-05-05 36 views
-1

目前,我主要是自己學習html5和CSS,我需要建立一個標題與背景圖像和中間的標誌和中間的單槓導航按鈕應該是。我以任何方式嘗試過,但無法提出具體的解決方案。請,任何人都可以幫忙嗎?標題與背景圖像和中間的單槓

+0

你可以分享你已經嘗試的東西,所以我們可以幫助解決這個問題。有很多模板可以使用。 – tech2017

回答

0

你在找這樣的嗎?

.header{ 
 
    text-align: center; 
 
    background-image: url(http://i.ytimg.com/vi/bl1zq8EFQDQ/maxresdefault.jpg); 
 
    padding: 2em; 
 
}
<!doctype html> 
 

 
<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8"> 
 

 
    <title>The HTML5 Herald</title> 
 
    <meta name="description" content="The HTML5 Herald"> 
 
    <meta name="author" content="SitePoint"> 
 

 
    <link rel="stylesheet" href="css/styles.css?v=1.0"> 
 

 
    <!--[if lt IE 9]> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script> 
 
    <![endif]--> 
 
</head> 
 

 
<body> 
 
    <header class="header"> 
 
    <h1 class="header-title">Title</h1> 
 
    <img class="header-logo" src="http://www.placehold.it/350x150"> 
 
    <div class="header-menu"> 
 
     <a href="http://www.google.es">Google</a> 
 
     <a href="http://www.google.es">Google</a> 
 
     <a href="http://www.google.es">Google</a> 
 
     <a href="http://www.google.es">Google</a> 
 
    </div> 
 

 
    </header> 
 
</body>

+0

非常感謝,但我寧願尋找一個水平條切割中間的圖像。我試過這個: –