CSS樣式表適用於所有頁面，但顯示不同的結果
[英]CSS Style sheet is applying to all pages, but is showing different results
問題描述
我正在嘗試使所有頁面看起來相同並且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>
2 個解決方案
解決方案1
0 2017-12-05 02:54:11
1）確保要向其應用CSS的HTML沒有任何內聯樣式（style =“ ...”）或已經嵌入的CSS覆蓋了鏈接樣式表。
或者，如果它們是其他鏈接的樣式表，請考慮將其刪除，或將主樣式表置於最后一個鏈接的上方，以使其覆蓋其他規則中的所有沖突規則。
2）如果您仍然有問題，請嘗試使用Chrome devtools（F12）或在看起來不正確的頁面上單擊鼠標右鍵，然后選擇“檢查元素”。 彈出窗口的右側顯示了瀏覽器如何解釋CSS。 因此，您可以使用它來調試為什么顯示不正確。
3）和/或嘗試將！important規則（ CSS中的！important意味着什么？ ）添加到樣式表中似乎被忽略的任何規則。 但是通常最好是刪除HTML中的主要樣式規則和/或解決樣式表中的所有問題
希望有幫助！
解決方案2
0 2017-12-05 05:01:13
從開始時清除Internet瀏覽器歷史記錄和緩存，然后測試您的網頁。 如果它不起作用，請檢查CSS的“類”和“ id”是否以正確的方式給出。 在這里，您不使用類。 使用類：
例：
在CSS中：
.nav{ }
在html中：
<div class="nav"></div>
CSS-將：not（）屬性應用於除一個頁面之外的所有wordpress頁面
[英]CSS - Applying the :not() attribute to all wordpress pages except one
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.