如何在 HTML 中的菜单栏左侧添加文本

Question

我是 HTML 的新手，CSS.I 想从菜单左侧添加 text/image bar.how 来完成它？找到了许多其他方法但是与我得到的代码不匹配。这是我使用的代码

   <html>
 <title>TEST</title>
 <link rel="icon" type="image/png" href="logo1.png"/>
 <h1 ><font color="white">TEST</font></h1>
 <head>
 <style>
  ul {
     list-style-type: none;
     width:75%;     
     margin: 0 auto;
     padding: 0;
     overflow: hidden;
     background-color: #339cff;
     }
  li {
      float: left;
     }
  li a {
      display: block;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
     }
  li a:hover:not(.active) {
      background-color: #345cff;
     }
  .active {
     background-color: #ff9333;
     }
</style>
</head>
<body>
<ul>
 <li><a class="active" href="#home">Home</a></li>
 <li><a href="#news">News</a></li>
 <li><a href="#contact">ontact</a></li>
</ul>
</body>


 <body background="background.jpg">
 <br>

  <h5 style="position: fixed; bottom: 0; width:100%;text-align: center"><font color="yellow"><strong> Copyright © TEST 2016 All Rights Reserved.</strong></font></h5>
 <img src="banner.jpg" style="width:100%;">
 </body>
</html>

WHERE I WANT TO SHOW THE TEXT

Answer 1

ul {
     list-style-type: none;
     width:75%;     
     margin: 0 auto;
     padding: 0;
     overflow: hidden;
     background-color: #339cff;
     display: inline-block;
     float: left;
     }
  li {
      float: left;
     }
  li a {
      display: block;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
     }
  li a:hover:not(.active) {
      background-color: #345cff;
     }
  .active {
     background-color: #ff9333;
     }

<body>
<ul>
 <li><a class="active" href="#home">Home</a></li>
 <li><a href="#news">News</a></li>
 <li><a href="#contact">ontact</a></li>
</ul>
</body>


 <body background="background.jpg">
 <br>

  <h5 style="position: fixed; bottom: 0; width:100%;text-align: center"><font color="yellow"><strong> Copyright © TEST 2016 All Rights Reserved.</strong></font></h5>
 <img src="banner.jpg" style="width:100%;">
 </body>

Answer 2

 p {
  display: inline-block;
  float: left;
 }
  ul {
     list-style-type: none;
     width:75%;     
     margin: 0 auto;
     padding: 0;
     overflow: hidden;
     background-color: #339cff;
     display: inline-block;
     float: left;
     }
  li {
      float: left;
     }
  li a {
      display: block;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
     }
  li a:hover:not(.active) {
      background-color: #345cff;
     }
  .active {
     background-color: #ff9333;
     }

<p>Hello World!</p>
<ul>
 <li><a class="active" href="#home">Home</a></li>
 <li><a href="#news">News</a></li>
 <li><a href="#contact">ontact</a></li>
</ul>
</body>


 <body background="background.jpg">
 <br>

  <h5 style="position: fixed; bottom: 0; width:100%;text-align: center"><font color="yellow"><strong> Copyright © TEST 2016 All Rights Reserved.</strong></font></h5>
 <img src="banner.jpg" style="width:100%;">

如何在 HTML 中的菜单栏左侧添加文本

How to add text form the left side of the menu bar in HTML

html

css

menubar

separator