所以我刚开始写代码,所以不要对我评头论足。我试着用vs代码创建我的网站,用html和css创建我的即时通讯,但是我想放在代码左上角的标题和按钮在浏览器上没有显示,我在网上搜索了一下,似乎找不到答案。我正在用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>
当我在浏览器上检查有几件事,有超过他们的线,例如我试图改变页面的字体都在一个,并使用这个,但我不认为这是问题...
下面是这一部分(CSS):
body {
font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
background-color: white;
color: #333;
}
我试着在网站的中上层网页上说:海报商店和潜台词是鼓舞人心的和新的。
1条答案
按热度按时间dl5txlt91#
标题显示给我在Firefox和Chrome,我有"flex-direction:column;",以便元素一个在另一个下面。按钮是空的,没有文本。