#javascript #html #css
#javascript #HTML #css
Вопрос:
Я пытаюсь создать новый раздел, но тег перекрывает мою домашнюю страницу. Я пытался добавлять divs, удалять divs и добавлять другие разделы, но не могу найти решение. Это из-за моего стиля или из-за моего HTML?
/* Base Styles -------------------- */
@import url('https://fonts.googleapis.com/css?family=Playfair Display');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Body */
body {
font-family: 'Playfair Display', serif;
height: 100vh;
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("img/body-image1.jpg") no-repeat center center / cover;
color: #fff;
}
.container {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
width: 100%;
padding: 0 3rem;
}
h1,
h2 {
font-weight: 200;
margin: 0.4rem;
}
h1 {
font-size: 3.5rem;
}
h2 {
font-size: 2rem;
color: #fff;
}
/* Navigation Styles */
.row {
float: right;
list-style: none;
margin-top: 40px;
margin-right: 80px;
}
.row li {
display: inline-block;
margin-left: 40px;
text-transform: uppercase;
font-size: 19px;
border-bottom: 2px solid transparent;
transition: border-bottom 0.2s;
padding: 8px 0px;
}
.row li:hover,
.row li:active {
border-bottom: 2px solid #48a8ce;
}
/* Media queries for home page */
@media(min-width: 1200px) {
h1 {
font-size: 5rem;
}
}
@media(max-width: 800px) {
.container {
padding: 0 1rem;
}
h1 {
font-size: 3rem;
}
}
@media(max-width: 500px) {
h1 {
font-size: 2.5rem;
}
h2 {
font-size: 1.5rem;
}
}
/* Cursor for Typewriter */
.txt-type>.txt {
border-right: 0.2rem solid #777;
}
/* Aspirations Section */
/* .section-head {
padding-left: 500px;
padding-top: 0px;
} */ <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Carlos Gonzales</title>
</head>
<body>
<header>
<nav>
<div class="row">
<ul>
<li>
<a href="#home"></a>Home</li>
<li>
<a href="#aspirations"></a>Aspirations</li>
<li>
<a href="#about"></a>About</li>
<li>
<a href="#contact"></a>Contact</li>
</ul>
</div>
</nav>
</header>
<div class="container">
<h1>Carlos Gonzales The
<span class="txt-type" data-wait="3000" data-words='["Developer", "Creator", "Entrepreneur"]'></span>
</h1>
<h2>Welcome to my website !</h2>
</div>
<section id="aspirations" class="aspiration-section">
<h2 class="section-head">Aspirations</h2>
<p>My aspiration after becoming a paid developer run far. After getting paid for my code I would like to learn on for about 5 more years and than start working for myself. I will expand my brand by using resources like Youtube and Twitter. Funding my
startup and owning a successful one for me is a lifetime goal. I would love to teach grade school kids how to code because I believe learning this skill at an early age is really benefiting. I would also like to develop an app people can use on
their phone to make their nyc public parking experience convenient and free of expense of private parking lot fees.
</p>
<a href="Contact" class="btn-aspirations">Help Develop ParkingBud Now</a>
</section>
<script src="main.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Carlos Gonzales</title>
</head>
<body>
<header>
<nav>
<div class="row">
<ul>
<li>
<a href="#home"></a>Home</li>
<li>
<a href="#aspirations"></a>Aspirations</li>
<li>
<a href="#about"></a>About</li>
<li>
<a href="#contact"></a>Contact</li>
</ul>
</div>
</nav>
</header>
<div class="container">
<h1>Carlos Gonzales The
<span class="txt-type" data-wait="3000" data-words='["Developer", "Creator", "Entrepreneur"]'></span>
</h1>
<h2>Welcome to my website !</h2>
</div>
<section id="aspirations" class="aspiration-section">
<h2 class="section-head">Aspirations</h2>
<p>My aspiration after becoming a paid developer run far. After getting paid for my code I would like to learn on for about 5 more years and than start working for myself. I will expand my brand by using resources like Youtube and Twitter. Funding my
startup and owning a successful one for me is a lifetime goal. I would love to teach grade school kids how to code because I believe learning this skill at an early age is really benefiting. I would also like to develop an app people can use on
their phone to make their nyc public parking experience convenient and free of expense of private parking lot fees.
</p>
<a href="Contact" class="btn-aspirations">Help Develop ParkingBud Now</a>
</section>
<script src="main.js"></script>
</body>
</html> Комментарии:
1. Я пытаюсь поместить разделы под контейнер div . Извините за опечатку «out», означающую «поместить» .
2. Это немного неясно. Не уверен, почему у вас есть 2 разных
<html>тега в одном документе, выглядит как 2 разные страницы, но они отображаются вместе. Вы пытаетесь создать здесь несколько страниц?
Ответ №1:
Я удалил дублирующиеся теги html и body . Затем я добавил дополнительные разделы, каждый из которых следует за предыдущим, внутри одного и того же body . Я также заметил, что вы закрыли свои <a> теги перед меткой в навигации, исправили и это, переместившись </a> после меток ссылок.
Я думаю, это то, к чему вы стремились? Что-то вроде этого?
/* Base Styles -------------------- */
@import url('https://fonts.googleapis.com/css?family=Playfair Display');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Body */
body {
font-family: 'Playfair Display', serif;
height: 100vh;
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("img/body-image1.jpg") no-repeat center center / cover;
color: #fff;
}
.container {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
width: 100%;
padding: 0 3rem;
}
h1,
h2 {
font-weight: 200;
margin: 0.4rem;
}
h1 {
font-size: 3.5rem;
}
h2 {
font-size: 2rem;
color: #fff;
}
/* Navigation Styles */
.row {
float: right;
list-style: none;
margin-top: 40px;
margin-right: 80px;
}
.row li {
display: inline-block;
margin-left: 40px;
text-transform: uppercase;
font-size: 19px;
border-bottom: 2px solid transparent;
transition: border-bottom 0.2s;
padding: 8px 0px;
}
.row li:hover,
.row li:active {
border-bottom: 2px solid #48a8ce;
}
/* Media queries for home page */
@media(min-width: 1200px) {
h1 {
font-size: 5rem;
}
}
@media(max-width: 800px) {
.container {
padding: 0 1rem;
}
h1 {
font-size: 3rem;
}
}
@media(max-width: 500px) {
h1 {
font-size: 2.5rem;
}
h2 {
font-size: 1.5rem;
}
}
/* Cursor for Typewriter */
.txt-type>.txt {
border-right: 0.2rem solid #777;
}
/* Aspirations Section */
/* .section-head {
padding-left: 500px;
padding-top: 0px;
} */ <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Carlos Gonzales</title>
</head>
<body>
<header>
<nav>
<div class="row">
<ul>
<li>
<a href="#home">Home</a></li>
<li>
<a href="#aspirations">Aspirations</a></li>
<li>
<a href="#about">About</a></li>
<li>
<a href="#contact">Contact</a></li>
</ul>
</div>
</nav>
</header>
<div class="container">
<h1>Carlos Gonzales The
<span class="txt-type" data-wait="3000" data-words='["Developer", "Creator", "Entrepreneur"]'></span>
</h1>
<h2>Welcome to my website !</h2>
</div>
<section id="aspirations" class="aspiration-section">
<h2 class="section-head">Aspirations</h2>
<p>My aspiration after becoming a paid developer run far. After getting paid for my code I would like to learn on for about 5 more years and than start working for myself. I will expand my brand by using resources like Youtube and Twitter. Funding my
startup and owning a successful one for me is a lifetime goal. I would love to teach grade school kids how to code because I believe learning this skill at an early age is really benefiting. I would also like to develop an app people can use on
their phone to make their nyc public parking experience convenient and free of expense of private parking lot fees.
</p>
<a href="Contact" class="btn-aspirations">Help Develop ParkingBud Now</a>
</section>
<section id="about" class="about-section">
<h2 class="section-head">About</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacinia feugiat pharetra. Cras gravida lobortis pellentesque. Etiam pellentesque maximus tincidunt. Mauris urna nulla, vestibulum vitae euismod sit amet, consectetur ut ante. Ut molestie, nunc non vehicula ullamcorper, sapien lorem vestibulum est, in pulvinar nibh est et dolor. Morbi at posuere eros. Maecenas ornare risus id felis aliquam, quis lacinia mauris faucibus. Nunc ut sagittis neque. Vivamus imperdiet tristique lorem. Suspendisse tellus massa, iaculis in ultricies in, gravida non ex. Phasellus nec dolor magna.
</p>
</section>
<section id="contact" class="contact-section">
<h2 class="section-head">Contact</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacinia feugiat pharetra. Cras gravida lobortis pellentesque. Etiam pellentesque maximus tincidunt. Mauris urna nulla, vestibulum vitae euismod sit amet, consectetur ut ante. Ut molestie, nunc non vehicula ullamcorper, sapien lorem vestibulum est, in pulvinar nibh est et dolor. Morbi at posuere eros. Maecenas ornare risus id felis aliquam, quis lacinia mauris faucibus. Nunc ut sagittis neque. Vivamus imperdiet tristique lorem. Suspendisse tellus massa, iaculis in ultricies in, gravida non ex. Phasellus nec dolor magna.
</p>
</section>
<script src="main.js"></script>
</body>
</html> Комментарии:
1. Это именно то, что я хотел для разделов. Но я запустил ваш код, и теперь я думаю, что что-то не так с css, потому что раздел «стремления» все еще перекрывает div = container . Еще раз спасибо за вашу помощь.