我无法通过导航栏按钮显示背景按钮。我该如何解决这个问题?

时间:2016-06-03 18:04:38

标签: html css html5 css3

以下是我的CSS和HTML代码:

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #55AAFF;
}

li {
    float: left;
}

li a {
    display: block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #1D72C7;
}

.indextext
{
    font-family: roboto, arial, calibri, sans-serif;
    text-align: center;
    padding: 50px 150px 0px 150px;
}
<html>
	<head>
		<title>Welcome - Bookmark Designs - Web Design Solutions</title>
		<link href="C:\Users\Raj\Desktop\New folder\homepage_css.css" type="text/css" rel="stylesheet" />
	</head>

	<body>
		<div class="logoimg">
		<img src="" </img>
		</div>
		<div class="nav"
		<ul>
			<li id=1><a href="#">Home</a></li>
			<li id=2><a href="">Portfolio</a></li>
			<li id=3><a href="">Prices</a></li>
			<li id=4><a href="">Contact Us</a></li>
			<li id=5><a href="">About Us</a></li>
		</ul>
		</div>	
		<div class="mainimg">
		<img src="" />
		</div>
		<div class="indextext">
		<p>TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText</p>
		</div>

我已经提供了下面输出的链接。另外,如何阻止这些子弹出现?

我已经做了很长时间的努力,把我有限的知识运用到可能造成这种情况的地方并做了很多试验和错误,但我尝试过的大多数事情都在不断恶化。

非常感谢你。

1 个答案:

答案 0 :(得分:0)

<div class="logoimg">
    <img src="">
</div>
<div class="nav">
    <ul>
        <li id=1><a href="#">Home</a></li>
        <li id=2><a href="">Portfolio</a></li>
        <li id=3><a href="">Prices</a></li>
        <li id=4><a href="">Contact Us</a></li>
        <li id=5><a href="">About Us</a></li>
    </ul>
</div>  
<div class="mainimg">
    <img src="">
</div>
<div class="indextext">
  <p>TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText</p>
</div>
  • img代码没有关闭</img>
  • 您错过了>
  • 上的结束div
  • id属性值放在引号

小提琴:https://jsfiddle.net/zhtq9jn9/1/