我试图让所有页面看起来都一样，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;
}
我希望所有的角都是圆角的，所有边距都是一样的。
我收到的结果是圆角但不是底部，一页上的页边距很好，但另一页上没有，边框没有出现。我很肯定页面是链接的。背景颜色没有跟随。
这是指向我的作业的链接： https://iceconescafe.000webhostapp.com/index.html
我只是想让你知道我解决了大部分问题，但导航表在大多数页面上都是不同的。有些页面还没有完成div样式，所以请关注儿童菜单和菜单，以及索引。
问题是儿童菜单上的边距，导航表对齐，以及不改变推荐（背景）的文章。
这是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>
答案 0 :(得分：0)
1）确保您应用CSS的HTML没有任何内联样式（style =“...”）或已覆盖链接样式表的任何嵌入式CSS。
或者如果它们是其他链接样式表，请考虑删除它们或将主样式表放在最后一个链接之上，以便覆盖其他链接中的任何冲突规则。
2）如果仍有问题，请尝试使用Chrome devtools（F12）或右键单击不正确的页面并选择“inspect element”。弹出窗口的右侧显示了浏览器如何解释CSS。所以你可以用它来调试它没有正确显示的原因。
3）和/或尝试将！important规则（What does !important in CSS mean?）添加到样式表中似乎被忽略的任何规则中。但通常更好的形式是删除HTML中的重写样式规则和/或修复样式表中的任何问题
希望有所帮助！
答案 1 :(得分：0)
从头开始清除Internet浏览器历史记录和缓存，然后测试您的网页。如果它不起作用，请检查＆＃39;班级＆＃39;并且＆＃39; id＆＃39; CSS以适当的方式给出。这里你没有上课。使用类：
示例：
在CSS中：
.nav{ }
在html中：
<div class="nav"></div>