我的html页脚在浏览器的中心显示文本.如何解决这个问题?

每当我尝试在页脚添加文本时，它已经被定位在中心位置。我不知道如何修复，因为我找不到错误在哪里。谁能帮我解决这个问题，也每当我试图添加引导链接到我的头它影响我的下拉css也。我也使用notepad++的网站

<!DOCTYPE.HTML>
<html>
<head>
<title>
E-Commerce Website
</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="Assignment1.css">
<link rel="stylesheet" type="text/css" href="assi1.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">



</head>
<body>
<div class="topnav">
<div class="topnav-right">
<div class="dropdown">
<button class="dropbtn">Cart 
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#Best Sellers">Your Orders</a>
<a href="file:///D:/Notepad++/practials/assignment1/signup/cart.html">Proceed to checkout</a>

</div>

</div>
</div>
<a href="file:///D:/Notepad++/practials/assignment1/Assignment1.html#home" class="active"><button class="button"  style="vertical-align:middle"><span>Home</span></button></a></span></button>
<a href="#news"><button class="button"  style="vertical-align:middle"><span>News</span></button></a>
<a href="file:///D:/Notepad++/practials/assignment1/signup/s1.html"><button class="button"  style="vertical-align:middle"><span>Sign Up</span></button></a>

<div class="dropdown">
<button class="dropbtn">More 
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#Best Sellers">Best Sellers</a>
<a href="#Mobiles">Smartphones</a>
<a href="#laptops">Laptops & Desktops</a>
<a href="#Electronics">Electronics</a>
<a href="#Fashion">Fashion</a>
<a href="#Furiniture">Furniture</a>
</div>

</div>
<div class="srch">
<input type="text" placeholder="Search..">
</div>
</div>
</br></br>
<center><img src="banner2.jpg" width="80%" height="65%"></center>

<!--image slider-->
<br><br>
<div class="table1">
<table class="a">
<tr><td colspan="5"><h2>SmartPhones<h2></td></tr>
<tr>
<th><img src="small banner.png" width=250px></th>
<th><a href="#phone1"><img src="phone 1.png" width="70%"></a></th>
<th><img src="phone 7.jpeg" width="30%"></th>
<th><img src="phone 4.png" width="45%" ></th>
<th><img src="phone 8.png" width="60%"></th>
<th><img src="phone 6.png" width="70%"></th>
</tr>
<tr>
<td></td>
<td><h3>OnePlus Nord 2 5G</h3></td>
<td><h3>Poco M3 5G</h3></td>
<td><h3>Apple iPhone 12 Pro (128GB)</h3></td>
<td><h3>OnePlus 2 Pro</h3></td>
<td><h3>OnePlus 9 Pro 5G</h3></td>
</tr>
<tr>
<td></td>
<td><h4>From ₹29,999</h4></td>
<td><h4>From ₹29,999</h4></td>
<td><h4> ₹1,28,900</h4></td>
<td><h4>From ₹37,999</h4></td>
<td><h4>From ₹37,999</h4></td>
</tr>
</table>
</div>
<br>
<br>
<br>
<div class="table3">
<table class="b">
<tr><td colspan="5"><h2>Laptops<h2></td></tr>
<tr>
<th><img src="small banner.png" width=250px></th>
<th><a href="#phone1"><img src="l1.png" width="80%"></a></th>
<th><img src="l2.png" width="95%"></th>
<th><img src="L3.png" width="80%" ></th>
<th><img src="l4.png" width="80%"></th>
<th><img src="l5.png" width="80%"></th>
</tr>
<tr>
<td></td>
<td><h3>ROG Strix G17 Advantage Edition G713
</h3></td>
<td><h3>ROG Strix SCAR 17 G733</h3></td>
<td><h3>Razer Blade 15</h3></td>
<td><h3>Legion Y540 - Raven Black</h3></td>
<td><h3>ThinkPad E14 35.56cms-Black</h3></td>
</tr>
<tr>
<td></td>
<td><h4>₹97,999</h4></td>
<td><h4>₹1,29,999</h4></td>
<td><h4> ₹1,30,900</h4></td>
<td><h4>From ₹69,000</h4></td>
<td><h4>From ₹49,999</h4></td>
</tr>
</table>
</div>
<br>
<br>
<br>
<center> <th><img src="banner9.jpg" width="100%" height="80%" ></th> <center>
<br>
<br>
<br>
<div class="table3">
<table class="b">
<tr><td colspan="5"><h2>Laptops<h2></td></tr>
<tr>
<th><img src="small banner.png" width=250px></th>
<th><a href="#phone1"><img src="l1.png" width="80%"></a></th>
<th><img src="l2.png" width="95%"></th>
<th><img src="L3.png" width="80%" ></th>
<th><img src="l4.png" width="80%"></th>
<th><img src="l5.png" width="80%"></th>
</tr>
<tr>
<td></td>
<td><h3>ROG Strix G17 Advantage Edition G713
</h3></td>
<td><h3>ROG Strix SCAR 17 G733</h3></td>
<td><h3>Razer Blade 15</h3></td>
<td><h3>Legion Y540 - Raven Black</h3></td>
<td><h3>ThinkPad E14 35.56cms-Black</h3></td>
</tr>
<tr>
<td></td>
<td><h4>₹97,999</h4></td>
<td><h4>₹1,29,999</h4></td>
<td><h4> ₹1,30,900</h4></td>
<td><h4>From ₹69,000</h4></td>
<td><h4>From ₹49,999</h4></td>
</tr>
</table>
</div>
<br>
<br>
<br>
<br>
<div class="table2">
<table class="b">
<tr><td colspan="5"><h2>Devices and accessories<h2></td></tr>
<tr>
<th><a href="#phone1"><img src="a1.jpeg" width="55%"></a></th>
<th><a href="#phone1"><img src="a2.jpeg" width="55%"></a></th>
<th><a href="#phone1"><img src="a3.jpeg" width="40%"></a></th>
<th><a href="#phone1"><img src="a4.jpeg" width="50%"></a></th>
<th><a href="#phone1"><img src="a5.jpeg" width="50%"></a></th>
</tr>
<tr>
<td><h3>Wired earphones</h3></td>
<td><h3>Bluetooth Headphones</h3></td>
<td><h3>Data cards</h3></td>
<td><h3>Tv streaming devices</h3></td>
<td><h3>Webcams</h3></td>
</tr>
<tr>
<td><h4>From ₹399</h4></td>
<td><h4>From ₹899</h4></td>
<td><h4> Upto 60% off</h4></td>
<td><h4>From ₹2799</h4></td>
<td><h4>From ₹490</h4></td>
</tr>
</table>
</div>
<br>
<br>
<br>
<center><table class="brandtable">

<tr><td><img src = "logo-paypal.png"></td>
<td><img src = "logo-godrej.png"></td>
<td><img src = "logo-oppo.png"></td>
<td><img src = "logo-coca-cola.png"></td>
<td><img src = "logo-philips.png"></td>
</tr>
</table>
</center>
<footer>
<p> hello </p>
</footer>

</body>
</html>

css代码

body {
margin: 0;
background-image: linear-gradient(to right, #43cea2, #185a9d);
font-family: 'Poppins', sans-serif;

}
.topnav {
overflow: hidden;
background: orange linear-gradient(#F7971E,#FFD200);

}
.topnav a {
float: left;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 16px;
background: orange linear-gradient(#FFD200);
}
.dropdown {
padding-top:15px;
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
display: inline-block;
border-radius: 4px;
background-color: #ff8c00;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 18px;
padding: 15px;
width: 100px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: black;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.topnav input[type=text] {
float: center;
padding: 6px;
margin-top: 8px;
margin-right: 16px;
width:30%;
border: none;
font-size: 17px;
}
@media screen and (max-width: 600px) {
.topnav a, .topnav input[type=text] {
float: none;
display: block;
text-align: left;
width: 100%;
margin: 0;
padding: 14px;
}

.topnav input[type=text] {
border: 1px solid #ccc;  
}
}
.topnav-right {
float: right;
}
.table a{
table-layout: auto;

}
.table a, h2{
color: #ff4411;
font-size: 25px; 
font-family: 'Signika', sans-serif;
padding-bottom: 10px;
}
.table a, h3{
font-family:Roman-55,Helvetica Neue,Helvetica,Arial,sans-serif;
font-size: 19px;
text-align: center;
}
.table a, h4{
font-size: 16px;
color: #388e3c;
padding-top: 8px;
text-align: center;
}
.table1 {
background-image: linear-gradient(#FFAFBD , #ffc3a0);
background-color: white;

}

.table1 td, th {
border: 0px;
width: 200px;
}
.table1{
border-radius: 25px;
margin-left: auto;
margin-right: auto;
padding: 10px;
border: 10px solid orange;
margin: 0;
}

.table2{
border-radius: 25px;
margin-left: auto;
margin-right: auto;
padding: 10px;
border: 10px solid orange;
margin: 0;
}
.table2 {
/* background-image: linear-gradient(#FFAFBD , #ffc3a0); */
background-color: white;

}

.table2 td, th {
border: 0px;
width: 300px;
}


.table3{
border-radius: 25px;
margin-left: auto;
margin-right: auto;
padding: 10px;
border: 10px solid orange;
margin: 0;
background-image: linear-gradient(#3eadcf, #abe9cd);
background-color: white;
}

.table3 td, th {
border: 0px;
width: 300px;
}

/* button hover */
.button {
display: inline-block;
border-radius: 4px;
background-color: #ff8c00;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 18px;
padding: 15px;
width: 100px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '0bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}

.srch{
padding-top:15px;
padding-right:10px;
}

/*    brands      */
.brandtable{
width:100%;

margin-left: auto;
margin-right: auto;
padding: 10px;
border: 0px;
border-bottom: 2px solid orange;
margin: 0;
background-color:white;
}
/*footer*/
footer{

}

仅当您想将其用于表目的时才使用table/td/tr标记。对于其他目的，你可以使用HTML5CSS3的语义/div标签属性。
遵循HTML5语义标签属性w3school semantic: w3school semantic tags
尝试使用标记验证服务检查代码质量。
你可以看到，我从你的代码中提取了一些部分并转换成新的样式。解决了codepen.io/ganesh1172 footer-html5
我希望你明白我想说的话。祝一切顺利👍✌️。

由于HTML中的错误，chrome以某种方式将您的页脚包装在中心标签中。你可以在这里检查你的HTML并尝试解决问题

textareahttps://validator.w3.org/nu/

你的标记有太多问题。第一件事是停止使用center标签，现在已经过时了，使用css代替中心元素。

你的页脚被包裹在center标签中(很难找到，但如果你用chrome开发工具看到它，你会发现)。

尝试学习现代Html5和css3语法。快乐学习。

相关内容

最新更新

热门标签：