导航栏上方的徽标

时间:2016-10-09 18:10:46

标签: html css

好的家伙,因为第一个家伙回答没有工作,我添加了整个代码。对不起,这是我在这个网站上的第一个问题,所以不要为我的错误而生气。

的CSS:

$ ls /opt
alljoyn  android-ndk-r13  android-sdk-linux  android-studio  xulrunner-sdk

HTML:

<!DOCTYPE html>
<html>
<head>

<style>

html {
    height: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background: #70bg32;
    background-repeat:no-repeat;
    background: -webkit-linear-gradient( #fff, #7cceff);
    background: -moz-linear-gradient( #fff, #7cceff);
    background: -ms-linear-gradient( #fff, #7cceff);
    background: -o-linear-gradient( #fff, #7cceff);
    background: linear-gradient( #fff, #7cceff);
}

ul {
position: fixed;
   list-style-type: none;
    margin: 0;
    padding: 0;

    overflow: hidden;
background-color: #31a7ff;
top:0;
width: 100%;
border: 1px solid #0060a7;
}

li {
float: left;

}

li a {

    display: block;
color:white;
text-align:center;
    padding: 14px 16px;
text-decoration:none;

}


li a:hover {
    background-color: #15649f;
}


.active {
    background-color: #004376;
}

.headerLogo {
float:left;
margin:auto;
display:inline-block;
background:black;
padding:5px;
width:100%;
color:white;
}
.logo
{
width:32px;
height:32px;
}

更多单词更多单词更多单词更多单词更多单词更多单词更多单词更多单词更多单词更多单词更多单词更多单词更多单词更多单词更多单词更多单词更多单词更多单词更多单词更多单词更多单词更多单词更多单词更多单词更多单词更多单词更多单词更多单词更多单词更多单词更多单词更多单词更多单词更多单词更多单词更多单词更多单词更多单词更多单词更多单词更多单词更多单词更多单词更多单词更多单词更多单词更多单词

1 个答案:

答案 0 :(得分:-1)

将您的徽标放在导航上方

&#13;
&#13;
.header {
float:left;
margin:auto;
display:inline-block;
background:black;
padding:5px;
width:100%;
color:white;
}
.logo
{
width:32px;
height:32px;
}
&#13;
<div>
  <img class="logo"
     src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSN1_sXp8T6higZFr994Vr8QUmav0Lqw2XYTimUhflQcI_Lo3ojLFjOGfg" />
</div>

<div class="header">
  <h5>Navigation bar</h5>
</div>
&#13;
&#13;
&#13;