个人中心
gpt4 book ai didi

html - 导航栏适用于除一个页面之外的大多数页面

转载 作者：行者123 更新时间：2023-11-28 19:12:28 25 4
gpt4 key购买 nike

我主页上的导航栏正在裁剪掉我的最后一个链接，而在我的其他页面上它工作得很好。

请原谅所有这些无关的代码，这对我来说都是新的。

html {
	height: 100%;
	margin: 0;
	width: 100%;
	overflow: auto;
}
/* HTML code */

header {
	font-size:3.5em;
}

h1 {
	text-align: center;
	font-size: 250%;
}
/*H1 style */

h2 {
	font-size: 130%;
}
/*H2 style */

table {
	border: 3px solid white;
	text-align: center;
	border-collapse: collapse;
}
/* tale style */

th {
	text-align: center;
	font-size:120%;
	border: 3px solid white;
	border-collapse:collapse;
}
/* Table Header style */

td {
	text-align: Left;
	border-left: 3px solid white;
	border-collapse: collapse;
}
/*table cell alignment */

p {
	font-size: 100%;
}
/*paragraph style */

.body {
	font:helvetica, serif;
	color: white;
	overflow:auto;
	background-color: black;
	font-family: Arial, Verdana;
	width: 100%;
	display: block;
	margin:auto;
	text-align: center;
	position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
}
/* Body style */

.topnav {
	background-color: black;
	overflow:hidden;
	position:fixed;
	height: 120px;
	width: 100%;
}
/* Navbar style */

.topnav a {
	font:serif;
	float:left;
	color:white;
	text-align:center;
	padding: 12px 14px;
	text-decoration: none;
	font-size: 24px;
	height: 120px;
	display: inline-block;
	vertical-align: top;
	line-height: 90px;
	width: 14.59%;
}
/* Navbar component style */

.topnav a:hover {
  background-color: white;
  color: black;
}
/* Hover Navbar option */

.topnav a.active {
  background-color: white;
  color: black;
}
/* Active Navbar option */

.BG1 {
  background-image: url('CNRTap2.jpg');
  height: 80%; 
  width:100%;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
/* Background 1 */

.BG2 {
  background-image: url('CNRPizza1.jpg');
  height: 80%; 
  width:100%;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
/* Background 2 */

.BG3 {
  background-image: url('CNRPing1.jpg');
  height: 80%; 
  width:100%;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
/* Background 3 */

.logo {
	display:inline-block;
	vertical-align: top;
	width: 16.666%px;
	height: 90px;
	padding-top: 15px;
	margin-right:20px;
	margin-left:20px;
	float: left;
}
/* Logo in Navbar */

.footer {
	text-align: center;
	background-color: grey;
	padding: 15px;
}
/* Footer */
/* Add social media links and logo */

.form {
	text-align:center;
	position:center;
	padding-left:10px;
}
/* Contact Us Form */

input[type=text], input[type=email], [type=number],  select, textarea {
	width: 40%;
	border: 2px solid white;
	border-radius:3px;
	padding:15px;
	margin:10px;
}/*-- Form input styles */

input[type=submit] {
	background-color:black;
	color:white;
	font-size: 20px;
	padding:15px 15px;
	border:1px white;
	border-radius:3px;
	cursor:pointer;
	border:2px solid white
}
/* Submit button style */

input[type=submit]:hover {
	background-color:white;
	color:black;
}
/*Submit button hover style */

	
<!DOCTYPE html>
<html lang="en">
<head>
<title> Standard Cocktail Bar Home Page </title>
<meta name="author" content="joshualavulohodges@gmail.com">
<meta name="description" content="This page is homepage of Standard Cocktail Bar">
<meta name="keywords" content="Alcohol, Gungahlin, Drinks, Food, Standard Bar, Cocktail">
<meta name="viewport" content="width=device-width, height=auto,  initial-scale=1">
<link href="Stylesheet.css" rel="stylesheet" type="text/css">
<!-- Meta Data -->
</head>

<body>
	<div class="body">
		<nav>
			<div class="topnav">
				<img class="logo" src="logo1.png">
				<a class="active" href="Home Page.html">Home </a>
				<a href="AboutUs.html">About Us </a>
				<a href="WhatsOn.html">Whats On </a>
				<a href="Menu.html">Menu </a>
				<a href="ContactUs.html">Contact Us </a>
			</div>
		</nav>
<!--NavBar-->

	<div class="BG1"></div>
<!--BG1-->

	<h1> Set Title</h1>
<!--Heading-->

	<p> Intro to business </p>
	<p> Quick Info of business </p>
<!--Business Info-->

	<div class="BG2"></div>
<!--BG2-->


	<table style="width:80%; margin-left:auto; margin-right:auto">
		<caption style="font-size:180%"> <b>Opening Hours</b></caption>
		<tr>
				<th> Days </th><th>Hours</th>
		</tr>
		<tr>
				<td>Monday</td><td>Closed</td>
		</tr>
		<tr>
				<td>Tuesday</td><td>12:00pm - 9:00pm</td>
		</tr>
		<tr>
				<td>Wednesday</td><td>12:00pm - Late</td>
		</tr>
		<tr>
				<td>Thursday</td><td>12:00pm - Late</td>
		</tr>
		<tr>
				<td>Friday</td><td>12:00pm - Late</td>
		</tr>
		<tr>
				<td>Saturday</td><td>10:00pm - Late</td>
		</tr>
		<tr>
				<td>Sunday</td><td>12:00pm - Late</td>
		</tr>
	</table>
<!--Opening Hours-->
	
	<p> Summary of promos </p>
<!--Promo Info-->

	<div class="BG3"></div>
<!--BG3-->

	<footer>
		<p> insert some social media links etc </p>
	</footer>
<!--Footer-->

	</div>
</body>
</html>

最佳答案

从您的.topnav 类中删除overflow: hidden;。样式 overflow: hidden; 隐藏所有存在于屏幕视口(viewport)之外的元素。

.topnav {
    background-color: black;
    /* overflow: hidden; */
    position: fixed;
    height: 120px;
    width: 100%;
}

关于html - 导航栏适用于除一个页面之外的大多数页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59025255/

25 4 0
文章推荐： javascript - React 真的需要模型(如 Backbone 或 & 符号模型)吗？
文章推荐： ios - 当相关的 NSManagedObject 更新时更新 UITableView
文章推荐： javascript - JSON从php到JS文件
文章推荐： iphone - 为什么在 iphone 应用程序中保存 NSArray 总是失败
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com