如何在HTML菜單欄的左側添加文本
[英]How to add text form the left side of the menu bar in HTML
問題描述
我是HTML和CSS的新手，我想從菜單欄的左側添加文本/圖像。如何做？找到了許多其他方法，但與我得到的代碼不匹配。 這是我使用的代碼
<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>
2 個解決方案
解決方案1
0 2016-09-21 15:11:13
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>
解決方案2
0 已采納 2016-09-21 15:16:59
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%;">
導航欄上的菜單項和導航欄左側的公司圖標
[英]menu items on the navigation bar and company icon on the left side of the nav bar
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.