我需要在右上角獲得我的徽標，並需要導航欄中的其他列表元素

基本上，我正在爲大學制作一個項目，而我需要左側的徽標，現在還沒有出現，右邊的nav按鈕和最右邊的一些社交媒體圖標，我還沒有添加圖標，因爲我甚至無法正確地獲得這部分內容。我需要在右上角獲得我的徽標，並需要導航欄中的其他列表元素

我知道代碼搞砸了，但這是我第一次使用CSS和HTML，並且如果我想在nav項之間插入項目符號，那有可能嗎？

Here是CodePen

head

<link rel="stylesheet" href="ab.css" type="text/css" /> 
<meta name="viewport" content="width=device-width, intial-scale=1.0"> 
<!-- Slider --> 
<link rel="stylesheet" href="flexslider.css" type="text/css"> 
<link rel="stylesheet" href="ab.css" type="text/css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
<script src="jquery.flexslider.js"></script> 
<script type="text/javascript" charset="utf-8"> 
    $(window).load(function() { 
     $('.flexslider').flexslider(); 
     }); 
</script> 


<body class="content"> 
    <header> 
    <div class="navbuttons"> 
     <div class="nav-main-wrapper"> 
      <nav class="nav-main"> 
        <ul> 
        <li><a class="logo" href="index.html"></a></li> 
        <li><a href="#">QUIET</a></li> 
        <li><a href="#">RAIN</a></li> 
        <li><a href="#">THOUGHTS</a></li> 
        <li><a href="#">CRAZY</a></li> 
       </ul> 
      </nav> 
     </div> 
    </div> 
    </header> 
</div>

css

.navbuttons{ 
    background:#0099cc; 
    position:relative; 
    padding: 30px 0px 33px 0px; 
    height: 60px; 
    margin-bottom: 10px; 
} 
header{ 
    margin-top: 0px; 
    position: relative; 
    z-index:-1; 
} 
.branding img{ 
position: relative; 
top: 0px auto; 
    float: left; 
    margin: 0px 0px 156px 0px; 
} 
.logo{ 
    background: url("http://tinypic.com/r/30k62ae/5"); 
    background-repeat:no-repeat; 
    height:140px; 
    display:block; 
    width:105px; 
    margin-top:-80px; 
    left: 30px; 
    margin-left: 30px; 
    padding: 0; 
} 

.nav-main-wrapper{ 
    float:left; 
    min-width: 470px; 
    bottom: 300px: 
    margin: 22px 0px 22px 47px; 
} 
.nav-main{ 
    float:left; 
    clear:both; 
} 
.nav-main ul{ 
    float:left; 
    display:block; 
    font-size:22px; 
} 
.nav-main ul li{ 
    display:inline; 
    color:#237dac; 
    font-family: LeagueGothic; 
} 
.nav-main ul li a{ 
    color: #fff; 
    margin-left: 128px; 
    text-decoration: none; 
} 
.nav-main ul li a:hover{ 
    color:#056495; 
    text-decoration: none; 
} 
.nav-main ul li:last-child:after{ 
    content: ""; 
} 
.nav-main ul li a { 
    white-space: nowrap; 
    text-decoration: none; 
} 
@font-face { 
font-family: LeagueGothic; 
src: url('LeagueGothic-Regular.otf'); 
}

來源

2013-06-22 CrazyRoach

你應該張貼您的代碼在這裏不只是鏈接到演示小提琴.. –

但是......哪裏是你的HTML代碼中的標誌？我只看到一個沒有任何東西的「a」元素。 – leoMestizo

@LeonardoManrique我將它作爲背景網址放在樣式表中。：/但它沒有出現。 – CrazyRoach

嘗試下面的下面的CSS：

body{ 
     margin: 0 auto; 
     padding: 0; 
    } 

    .navbuttons{ 
     background:#0099cc; 
     position:relative; 
     padding: 30px 0px 33px 0px; 
     height: 60px; 
     margin-bottom: 10px; 
    } 
    header{ 
     margin-top: 0px; 
     position: relative; 
     z-index:-1; 
    } 
    .branding img{ 
    position: relative; 
    top: 0px auto; 
     float: left; 
     margin: 0px 0px 156px 0px; 
    } 
    .logo{ 
     background: url("http://tinypic.com/r/30k62ae/5"); 
     background-repeat:no-repeat; 
     height:140px; 
     display:block; 
     width:105px; 
     margin-top:-80px; 
     left: 30px; 
     margin-left: 30px; 
     padding: 0; 
     float:right; 
    } 

    .nav-main-wrapper{ 

     min-width: 470px; 
     bottom: 300px: 
     margin: 22px 0px 22px 47px; 
    } 
    .nav-main{ 
     float:left; 
     clear:both; 
     margin:-46px 0 0 ; 
    } 
    .nav-main ul{ 
     float:left; 
     display:block; 
     font-size:22px; 
     margin:0px; padding:0px; 
    } 
    .nav-main ul li{ 
     display:inline; 
     color:#237dac; 
     font-family: LeagueGothic; 
    } 
    .nav-main ul li a{ 
     color: #fff; 
     margin-left: 128px; 
     text-decoration: none; 
    } 
    .nav-main ul li a:hover{ 
     color:#056495; 
     text-decoration: none; 
    } 
    .nav-main ul li:last-child:after{ 
     content: ""; 
    } 
    .nav-main ul li a { 
     white-space: nowrap; 
     text-decoration: none; 
    } 
    @font-face { 
    font-family: LeagueGothic; 
    src: url('LeagueGothic-Regular.otf'); 
    }

HTML源代碼如下：

<body class="content"> 
<div class="navbuttons"> 
    <div class="nav-main-wrapper"> 
    <div class=""> <a class="logo" href="#"> Your Logo</a></div> 
    <nav class="nav-main"> 
     <ul> 
     <li></li> 
     <li><a href="#">QUIET</a></li> 
     <li><a href="#">RAIN</a></li> 
     <li><a href="#">THOUGHTS</a></li> 
     <li><a href="#">CRAZY</a></li> 
     </ul> 
    </nav> 
    </div> 
</div> 
</body>

來源

2013-06-22 06:05:14 falguni

謝謝！現在我的標誌位於藍色格子上，但沒有完全顯示，只有一部分顯示，你能幫我解決嗎？非常感謝！ – CrazyRoach

你將標誌連結到http://tinypic.com/view.php?pic=30k62ae&s=5這是不是一個圖像，而是一個頁面。

它鏈接到http://oi41.tinypic.com/30k62ae.jpg代替。

來源

2013-06-22 06:10:53

這是唯一正確答案。很好的接收。 –

我在我的代碼中使用原始的jpg文件，上傳它只是爲了張貼在這裏，它仍然部分顯示。：/ – CrazyRoach

@CrazyRoach：我不認爲你很理解這是如何工作的。當給人們看代碼時，你給他們一個儘可能接近人類可能導致問題的代碼的代碼。我們應該能夠立即看到問題*而不必跳過籃球（你會幫助那些不努力做到這一點的人？）。此代碼爲您的代碼中存在的問題提供了準確的解決方案。如果你還有其他問題，也許你應該給我們**正確的**代碼？ –

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>test</title> 
</head> 
<style> 
body { 
    margin: 0px; 
    padding: 0px; 
} 
.menu { 
    width: 100%; 
    height: 100px; 
    background: #333; 
} 
.menu ul { 
    float: left; 
    margin: 0px; 
    padding: 0px; 
} 
.menu ul li { 
    list-style: none; 
    float: left; 
    padding: 0px; 
    background: #333; 
} 
.menu ul li:hover { 
    background: #555; 
} 
.menu ul li a { 
    display: block; 
    padding: 40px 
} 
.logo { 
    padding: 0px !important; 
} 
</style> 

<body> 
<div class="menu"> 
    <ul> 
    <li><a class="logo" href="#"><img src="http://oi41.tinypic.com/30k62ae.jpg" width="119" /></a></li> 
    <li><a href="#">text</a></li> 
    <li><a href="#">text</a></li> 
    </ul> 
</div> 
</body> 
</html>

來源

2013-06-22 06:46:18

我需要在右上角獲得我的徽標，並需要導航欄中的其他列表元素

回答

相關問題