[英]I can't see my header on my web page but it is on HTML
所以我刚开始编码所以不要评判我。 我试图使用 vs 代码创建我的网站，我使用 html 和 css 但是我试图放在代码左上角的标题和按钮没有显示在浏览器上，我搜索了 web 并且可以似乎没弄清楚。我正在使用 google chrome 浏览器来调试我的代码。
这是 html 部分：
/* This is a reset stylesheet to ensure consistency across different browsers */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /* Custom styles for the poster store website */ body { font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif; background-color: white; color: #333; } header { background-color: #87CEFA; color: white; text-align: center; padding: 1em; }.header-container { display: flex; align-items: center; justify-content: center; height: 100px; } header h1 { margin: 0; font-size: 2em; } header.subtext { display: block; font-size: 1em; font-style: italic; color: white; margin-top: 10px; } nav { background-color: #87CEFA; padding: 0.5em; display: flex; justify-content: space-between; align-items: center; position: fixed; /* this line adds */ top: 0; /* this line adds */ width: 100%; /* this line adds */ z-index: 1; /* this line adds */ } nav ul { list-style-type: none; margin: 0; padding: 0; display: flex; } nav li { margin-right: 1em; } nav a { color: white; text-decoration: none; font-weight: bold; transition: all 0.3s ease; } nav a:hover { color: #333; } /* Add this class to main section to create space for navigation bar */ main { margin: 2em 0 0 0; /* this line changed */ } main { margin: 2em; } section { margin-bottom: 2em; } h2 { margin-top: 1em; font-weight: normal; } ul { list-style-type: none; display: flex; flex-wrap: wrap; justify-content: space-between; } li { margin-bottom: 1em; flex: 1 0 30%; } img { width: 100%; max-width: 200px; height: auto; } button { background-color: #87CEFA; color: white; padding: 0.5em 1em; border: none; font-weight: bold; transition: all 0.3s ease; cursor: pointer; border-radius: 5px; box-shadow: 0px 2px 3px #888888; text-transform: uppercase; font-size: 0.9em; } button:hover { background-color: #4169E1; box-shadow: 0px 4px 6px #888888; }.menu-icon { position: absolute; top: 20px; right: 20px; width: 40px; height: 30px; cursor: pointer; }.menu-icon:before, .menu-icon:after, .menu-icon div { position: absolute; top: 12px; right: 0; height: 3px; width: 30px; background: #333; }.menu-icon:before { transform: rotate(45deg); }.menu-icon:after { transform: rotate(-45deg); }.category-button { background-color: #87CEFA; color: white; padding: 0.5em 1em; border: none; font-weight: bold; transition: all 0.3s ease; cursor: pointer; border-radius: 5px; box-shadow: 0px 2px 3px #888888; text-transform: uppercase; font-size: 0.9em; margin-right: 1em; display: block; }.category-button:hover { background-color: #4169E1; box-shadow: 0px 4px 6px #888888; } footer { background-color: #87CEFA; text-align: center; padding: 0.5em; color: #333; } /* Media Queries */ @media (max-width: 767px) { nav ul { flex-direction: column; } nav li { margin-bottom: 0.5em; } section { flex: 1 0 100%; } li { flex: 1 0 100%; } } <.DOCTYPE html> <html> <head> <title>Poster Store</title> <link rel="stylesheet" href="style:css"> </head> <body> <header> <div class="header-container"> <h1>Poster Store</h1> <div class="subtext">Inspiring and New</div> </div> </header> <button class="menu-icon"> </button> <nav> <ul> <li><a href="#featured">Featured Posters</a></li> <li><a href="#categories">Poster Categories</a></li> <li><a href="#about">About Us</a></li> <li><a href="#contact">Contact Us</a></li> </ul> </nav> <main> <section id="featured"> <h2>Featured Posters</h2> <ul> <li> <h3>Poster 1</h3> <img src="https.//i.etsystatic.com/27014418/r/il/dae7c0/2873452298/il_570xN.2873452298_j7zs:jpg" alt="Kid Cudi Man on the mood album cover poster"> <p>Album cover poster</p> <button>Add to Cart</button> </li> <li> <h3>Poster 2</h3> <img src="https.//images.squarespace-cdn.com/content/v1/5d210a3c8ae83700013f313b/1562529741621-YEQY08PGYXBIRU8EWBAV/Screen+Shot+2019-07-07+at+4.01.10+PM?png:format=2500w" alt="Kanye West MBDTF album cover poster"> <p>Album cover poster</p> <button>Add to Cart</button> </li> <li> <h3>Poster 3</h3> <img src="https.//i.ebayimg.com/images/g/hJoAAOSwNK5fEoCb/s-l1600:jpg" alt="Mac Miller Swimming album cover poster"> <p>Album cover poster</p> <button>Add to Cart</button> <li> <h4>Poster 4</h4> <img src="https.//d1csarkz8obe9u.cloudfront.net/themedlandingpages/tlp_hero_cool-posters-603bc3221337a524135e510d8ea4328a-1591125961:jpg" alt="cool"> <p>Poster</p> <button>Add to Cart</button> </li> <li> <h5>Poster 5</h5> <img src="https.//pbs.twimg.com/media/DwSC3wZUYAAQcUv.jpg" alt="cool"> <p>Poster</p> <button>Add to Cart</button> </li> </ul> </section> <section id="categories"> <h2>Poster Categories</h2> <ul> <li><a href="#" class="category-button">Lol</a></li> <li><a href="#" class="category-button">Category 2</a></li> <li><a href="#" class="category-button">Category 3</a></li> </ul> </section> <section id="about"> <h2>About Us</h2> <p>A new poster store </p> </section> <section id="contact"> <h2>Contact Us</h2> <p>feridtalibli854@gmail.com</p> </section> </main> <footer> <p>Copyright ©2022 Poster Store</p> </footer> <div class="menu-icon"> </div> </body> </html>
当我在浏览器上检查时，很少有东西在它们上面划线，例如我试图将页面的 fonts 全部更改为一个并使用它，但我认为这不是问题......
这是那部分（css）：
body {
font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
background-color: white;
color: #333;
}
我试图在 web 页面的中上部网站上看到：Poster Store 和子文本是 Inspiring and New。
header 在 Firefox 和 Chrome 中显示给我，我有“flex-direction: column;” 添加以便元素一个在另一个下面。 按钮是空的，没有文本。
header { background-color: #87CEFA; color: white; text-align: center; padding: 1em; }.header-container { display: flex; align-items: center; justify-content: center; flex-direction: column; height: 100px; } header h1 { margin: 0; font-size: 2em; } header.subtext { display: block; font-size: 1em; font-style: italic; color: white; margin-top: 10px; }
<header> <div class="header-container"> <h1>Poster Store</h1> <p class="subtext">Inspiring and New</p> </div> </header>
我在 web 页面上的下拉框中看不到选项，但可以在元素中看到它
[英]I can't see the options in my drop down box on web page but can see it in element
我无法连续看到从我的 MySQL 数据库到我的 html 页面的最后插入数据
[英]I can't see continuously the last insert data from my MySQL database to my html page
我的 html 页面向左移动，但我看不到问题出在哪里
[英]My html page is shifted to the left but i can't see where the problem is
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.