我试图让所有页面看起来都一样，并且 DIV 相互连接。
这是我的代码
footer{
height:auto;
padding:10px;
background-color:lightgray;
margin-right:auto;
margin-left:auto;
text-align:center;
}
article{
height:auto;
background-color:darkgray;
margin-right:auto;
margin-left:auto;
text-align:center;
}
h1,h2,h3,h4,h5,h6{
margin:0;
}
#wrapper{
width:80%;
margin-left:10%;
margin-right:10%;
border:2px solid black;
background-color:lightgray;
box-shadow: 10px 10px 5px #888888;
border-top-left-radius:18px;
border-top-right-radius:18px;
border-bottom-left-radius:18px;
border-bottom-right-radius:18px;
}
header{
height:140px;
background-color:lightgray;
background-image:url(logo1.png);
background-repeat:no-repeat;
background-position:20px center;
text-align:center;
border-bottom-left-radius:18px;
border-bottom-right-radius:18px;
}
nav{
height:40px;
background-color:lightgray;
margin-left:auto;
margin-right:auto;
text-align:center;
width:auto;
}
我希望所有的 Angular 都是圆的并且所有边距都相同。
我收到的结果是顶 Angular 变圆但底 Angular 没有，一页上的边距很大，但另一页上没有，边框没有显示在某些页面上。我肯定该页面已链接。背景颜色不符合。
这是我的作业链接: https://iceconescafe.000webhostapp.com/index.html
我只是想让你知道我解决了大部分问题，但导航表在大多数页面上的对齐方式不同。有些页面还没有完成 div 样式，所以请关注 Kids Menu 和 Menu，以及 Index。
问题是 child 菜单的边距、导航表的对齐方式，以及推荐信(背景)上的文章没有改变。
这是html代码:
<html>
<head>
<link rel="stylesheet" type="text/css" href="index.css">
<link rel="icon" href="logo.png" type=" image/png">
<title> IceCones</title>
</head>
<body>
<div id="wrapper">
<header>
<h1 id="t" class="l"> Ice Cones Cafe </h1>
</header>
<nav>
<table id=navtable class="tr">
<tr>
<td class="td"><a href="index.html" class="b3">Home</a></td>
<td class="td"><a href="menu.html" class="b3">Menu</a></td>
<td class="td"><a href="kids.html" class="b3">Kids Menu</a></td>
<td class="td"><a href="nutrition.html" class="b3">Nutrition</a></td>
<td class="td"><a href="testimonials.html" class="b3">Testimonials</a></td>
<td class="td"><a href="orderonline.html" class="b3">Order Online</a></h5></td>
</tr>
</table>
</nav>
<article class="setmin">
<br>
<img src="IceConesLog.jpg" border="3">
<br>
<blockquote>
<p >
Ice Cones Cafe, established in 1880, is the best ice cream joint in town! With desserts ranging from waffles to ice cream, Ice Cones only uses the purest ice from Antarctica. With our wide selection of foods, and our expertise chefs,
you will never leave unhappy. Only when you walk through our doors will you taste the best ice cream the world has to offer! </p>
</blockquote>
</article>
<footer>
<h4><b> Contact Information </h4>
<ul>
<li> Abdu Hijazi </li>
<li>contact_support@icecones.com</li>
<li>(313)962-7906</li> </b>
<audio autoplay loop>
<source src="ice.mp3" type="audio/mpeg">
</footer>
</div>
</body>
</html>
Ignore this (Next page Menu)
<html>
<head>
<link rel="icon" href="IceConesfavicon.ico" type=" image/png">
<link rel="stylesheet" type="text/css" href="index.css">
<title> Menu</title>
</head>
<body>
<div id="wrapper">
<header>
<h1 id="t"> Ice Cones Cafe </h1>
</header>
<nav>
<table class="tr">
<tr>
<td class="td"><a href="index.html" class="b3">Home</a></td>
<td class="td"><a href="menu.html" class="b3">Menu</a></td>
<td class="td"><a href="kids.html" class="b3">Kids Menu</a></td>
<td class="td"><a href="nutrition.html" class="b3">Nutrition</a></td>
<td class="td"><a href="testimonials.html" class="b3">Testimonials</a></td>
<td class="td"><a href="orderonline.html" class="b3">Order Online</a></h5></td>
</tr>
</table>
</nav>
</tr>
<article>
<h2> Menu</h2>
<table>
<th colspan="3"> Menu </th>
<tr>
<th>Picture</th>
<th>Description</th>
<th>Price</th>
</tr>
<tr>
<td><img src="SnowConeMenu1.jpg"></td>
<td>The classic ice in a cup. Our Ice Cones come in flavors of lemon lime, blue berry, and cotton candy. This product is our cafe's specialty.</td>
<td>Small/$0.99 Large/$1.99</td>
</tr>
<tr>
<td><img src="IceCream.jpg"></td>
<td>Another famous classic using ice imported directly from the freshest and purest ice.
With our different flavors of chocolate, vanilla, buttermilk, and pistachio, there are various flavors to try. We also come up with new flavors weekly. </td>
<td>1 scoop/$1.50 2 scoop/$2</td>
</tr>
<tr>
<td><img src="BananaSplit.jpg"></td>
<td> The banana split features a combination of banana, whipped cream, sprinkles, and even a cherry on top. The best part however, is that
warm, melting chocolate syrup.</td>
<td>$2.99</td>
<tr>
<td><img src="OreoShake.jpg"></td>
<td> The classic American favorite of Oreo cookies mixed with milk. A tasty, chunky, cold recipe that your taste buds won't soon forget.</td>
<td>$2.50</td>
</tr>
</table>
</article>
<footer>
<h4> Contact Information </h4>
<ul>
<li> Abdu Hijazi </li>
<li>contact_support@icecones.com</li>
<li>(313)962-7906</li> </b>
</footer>
</div>
</body>
</html>
Kids Menu
<html>
<head>
<title> KidsMenu</title>
<link rel="icon" href="IceConesfavicon.ico" type=" image/png">
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<header>
<h1 id="t"> Ice Cones Cafe </h1>
</header>
<nav>
<table class="tr">
<tr>
<td class="td"><a href="index.html" class="b3">Home</a></td>
<td class="td"><a href="menu.html" class="b3">Menu</a></td>
<td class="td"><a href="kids.html" class="b3">Kids Menu</a></td>
<td class="td"><a href="nutrition.html" class="b3">Nutrition</a></td>
<td class="td"><a href="testimonials.html" class="b3">Testimonials</a></td>
<td class="td"><a href="orderonline.html" class="b3">Order Online</a></h5></td>
</tr>
</table>
</nav>
<article>
<h2>Kids Menu</h2>
<table>
<th colspan="3"> Kid's Menu </th>
<tr >
<th>Picture</th>
<th>Description</th>
<th>Price</th>
</tr>
<tr>
<td><img src="MiniWaffle.png"></td>
<td> Our chef specially makes these in sizes of 1/3 regular waffles. A great meal for you kid in the morning, or anytime.</td>
<td>$4.59</td>
</tr>
<tr>
<td><img src="SmoresKids.jpg"></td>
<td> These smores are a small, but tasty item for your kids. Includes chocolate syrup, marshmallows, graham crackers, and whipped cream. </td>
<td>$3.99 <br> with whip/$4.50</td>
</tr>
<tr>
<td><img src="FrozenHotChoco.jpg"></td>
<td> Although you're probably thinking warm at a ice cream place is crazy, we have added a frozen aspect to hot chocolate for your kids. They will love
the whipped cream and added syrup.</td>
<td>$3.50</td>
<tr>
<td><img src="KidsCrepe.jpg"></td>
<td> A small, warm crepe filled with whatever your child desires. Banana, Nutella, and strawberry are all viable options, along with
syrups and creams on top.</td>
<td>$4.99</td>
</tr>
<br>
</table>
<h1>Kiddie Activity</h1>
<br>
<img src="Danykmem84.png">
</article>
<footer>
<br>
<br>
<h4> Contact Information </h4>
<ul>
<li> Abdu Hijazi </li>
<li>contact_support@icecones.com</li>
<li>(313)962-7906</li> </b>
</ul>
</footer>
</div>
</body>
</html>
lastly, testimonials
<html>
<head>
<link rel="icon" href="IceConesfavicon.ico" type=" image/png">
<link rel="stylesheet" type="text/css" href="index.css">
<title> IceCones</title>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1 id="t"> Ice Cones Cafe </h1>
</div>
<div id="nav">
<table class="tr">
<tr>
<td class="td"><a href="index.html" class="b3">Home</a></td>
<td class="td"><a href="menu.html" class="b3">Menu</a></td>
<td class="td"><a href="kids.html" class="b3">Kids Menu</a></td>
<td class="td"><a href="nutrition.html" class="b3">Nutrition</a></td>
<td class="td"><a href="testimonials.html" class="b3">Testimonials</a></td>
<td class="td"><a href="orderonline.html" class="b3">Order Online</a></h5></td>
</tr>
</table>
</div>
<div id="article">
<h2>Testimonials</h2>
<p> Below are some testimonials from our CEO and a trusted customer:</p>
<p> Testimonial~CEO Abdu Hijazi</p>
<video controls>
<source src="Test1.mp4" type="video/mp4">
</video>
<p> Testimonial~Satisfied Customer Sara Hijazi</p>
<video controls>
<source src="Test2.mp4" type="video/mp4">
</video>
</div>
<div id="footer">
<h4>Contact Information </h4>
<ul>
<li> Abdu Hijazi </li>
<li>contact_support@icecones.com</li>
<li>(313)962-7906</li>
</div>
</div>
</body>
</html>
最佳答案
1) 确保要应用 CSS 的 HTML 没有任何内联样式 (style="...") 或任何已经覆盖链接样式表的嵌入式 CSS。
或者，如果它们是其他链接样式表，请考虑删除它们或将主样式表放在最后一个链接之上，以便它覆盖其他样式表中的任何冲突规则。
2) 如果仍有问题，请尝试使用 Chrome 开发工具 (F12) 或右键单击看起来不正确的页面并选择“检查元素”。弹出窗口的右侧显示浏览器如何解释 CSS。因此，您可以使用它来调试未正确显示的原因。
3) 和/或尝试将 !important 规则 ( What does !important in CSS mean? ) 添加到样式表中似乎被忽略的任何规则中。但通常更好的形式是删除 HTML 中的重写样式规则和/或修复样式表中的任何问题
希望对您有所帮助!
关于html - CSS 样式表应用于所有页面，但显示不同的结果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47644955/