대학 과제를위한 웹 사이트를 만들고 있습니다. 선생님은 CSS 코드를 줄이기 위해 div 클래스를 사용하라고했지만 여기에 문제가 있습니다. 이미지에 대한 div 클래스가 있으며 같은 행에서 서로 옆에 있어야합니다.
나는 이미지가있는 div 아래에 있어야하는 텍스트에 대한 또 다른 3 div 클래스 상자가 있으며 그중 하나는 왼쪽에 있고 다른 하나는 오른쪽에 있어야하므로 이탈리아 국기를 만듭니다. 할 수있는 모든 것을 시도했지만 여전히 제대로 작동하지 않습니다. 누구든지 도울 수 있습니까?
<!DOCTYPE html> <!-- This is standard HTML code that tells the browser it is a HTML page-->
<html lang="en-GB"> <!-- This tells the browser what language html is using-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link href="CSS/style.css" rel="stylesheet" type="text/css"> <!-- This is linking style sheet (css)into this HTML page-->
<title>Main Page</title> <!-- This is a code that displays title of the page-->
</head>
<body>
<header id="pageHeader"><!-- This header tag is used to create a navigation bar-->
<nav id="site"><!-- This is a navigation tag which allows to link different webpages together-->
<ul>
<li><a href="index.html">Home Page</a></li>
<li><a href="html/tables.html">Tables</a></li>
<li><a href="html/forms.html">Feedback</a></li>
<li><a href="html/text.html">About Us</a></li>
<li><a href="html/references.html">References</a></li>
<li><a href="html/validation.html">Validation</a></li>
</ul>
</nav>
</header>
<div id="welcome"><!-- This is a div tag that is used to create a welcome message on my website-->
<h1>Papa Italiano</h1>
</div>
<div class="images"><!-- This div class I have used to put three images using just one piece of css code which reduced the code-->
<figure>
<img src="images/image11.jpg" alt="photo" />
<figcaption>Food 1</figcaption>
</figure>
</div>
<div class="images">
<figure>
<img src="images/image22.jpg" alt="photo" />
<figcaption>Food 2</figcaption>
</figure>
</div>
<div class="images">
<figure>
<img src="images/image32.jpg" alt="photo" />
<figcaption>Food 3</figcaption>
</figure>
</div>
<div class="text"></div><!-- similar to div class for images however this is for text-->
<div class="text"></div>
<div class="text"></div>
<div class="clearing"></div><!-- this div class is basically making sure that my other div classes will not go into each other-->
</div>
<div id="background">
<figure>
<img src="images/background1.jpg" alt="background photo" />
</figure>
</div>
<div id="background2">
<figure>
<img src="images/background2.jpg" alt="background photo" />
</figure>
</div>
</body>
</html>
그리고 여기에 CSS가 있습니다.
header#pageHeader{
position: absolute;
top: 0px;
left: 0px;
width: 1024px;
height: 80px;
background-color: black;
opacity: 0.5;
}/* this is my css for a navigation bar*/
nav#site li{
list-style:none;
display:inline-block;
zoom:1;
width:160px;
}/*This is used to style my links*/
nav a{
text-decoration: none;
color: #FF0;
}/* This is used to style look of the links*/
.images{
float: left;
width: 250px;
border-style: solid;
border-width: 3px;
padding: 10px;
margin: 30px;
z-index: 1;
vertical-align: middle;
}/*This is telling my all div class images how they need to be styled*/
#welcome{
position: relative;
top: 100px;
left: 300px;
width: 300px;
height: 80px;
font: arial;
font-size: 23px;
color: green;
margin-bottom: 75px;
}/*This is telling browser how to style my div welcome*/
.text{
position: relative;
height: 300px;
width: 250px;
left: 0px;
float: left;
border-style: solid;
border-width: 3px;
margin: 100px;
display: inline-block;
}/*Similar to .images however this piece of codes is used for my text*/
#background{
height: 80px;
width: 250px;
left: 0px;
}
#background2{
height: 80px;
width: 250px;
right: 0px;
}
.clearing{
clear: both;
}
나는 당신이 원하는 모든 것을 이해했는지 확신하지 못하지만 도움이 될 것입니다. 코딩 기술을 향상 시키려면 다음에 대해 자세히 알아봐야합니다.
id또는 class당신이 필요하지 않은 경우.position: relative와 position: absolute:을 사용하는 때 http://css-tricks.com/almanac/properties/p/position/을다음 코드를 연구하고 함께 플레이하여 어떻게 함께 작동하는지 더 잘 이해하십시오. 행운을 빕니다. 즐겁게 배우세요!
솔루션 1 (를 사용한 인라인 블록 해킹 <!--)
#pageHeader {
background-color: grey;
/* As there is nothing behind your #pageHeader, it is better to choose a grey color with no opacity */
min-height: 80px;
}
nav {
width: 90%;
margin: 0 auto;
/* This code will center your navigation bar. The 90% width will give it space. */
}
nav ul {
list-style-type: none;
padding: 0;
margin: 0;
}
nav li {
display:inline-block;
width: 16.6666666%;
/* 100% (full-width) / 6 (as you have 6 elements in your nav bar) */
text-align: center;
vertical-align: middle;
}
nav a {
text-decoration: none;
color: #FF0;
}
nav a:hover {
/* always define a style for your links when they are hovered. This is a suggestion of style. */
border-bottom: 1px solid #FF0;
padding-bottom: 3px;
}
.main { /* This is for your italian flag in the background. If you need to support more browser just use a compress image instead. Note that this code is not cross-browser, check required code on Mozilla Developer Network */
background-image: -webkit-linear-gradient(to right, green 0%, green 33%, #fff 33%, #fff 66%, red 66%, red 100%);
background-image: linear-gradient(to right, green 0%, green 33%, #fff 33%, #fff 66%, red 66%, red 100%);
}
.wrapper {
/* you wrap your main elements so that you don't have to reproduce this style every time */
width: 90%;
margin: 0 auto;
text-align: center;
}
h1 {
font: arial;
font-size: 23px;
color: green;
padding: 20px 0 75px;
margin: 0;
}
.images {
display: inline-block;
width: 32%;
/* 100% / 3 images per row */
background-color: #e3e3e3;
vertical-align: top;
}
.images figure {
margin: 0;
}
img {
width: 100%;
height: auto;
}
figure figcaption, figure p {
text-align: left;
}<header id="pageHeader">
<nav>
<ul>
<li><a href="index.html">Home Page</a></li><!--
--><li><a href="html/tables.html">Tables</a></li><!--
--><li><a href="html/forms.html">Feedback</a></li><!--
--><li><a href="html/text.html">About Us</a></li><!--
--><li><a href="html/references.html">References</a></li><!--
--><li><a href="html/validation.html">Validation</a></li>
</ul>
</nav>
</header>
<section class="main">
<div class="wrapper">
<h1>Papa Italiano</h1>
<div class="images">
<!-- This div class I have used to put three images using just one piece of css code which reduced the code-->
<figure>
<img src="http://lorempixel.com/300/250/food" alt="photo" />
<figcaption>Food 1</figcaption>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</figure>
</div>
<div class="images">
<figure>
<img src="http://lorempixel.com/300/250/food" alt="photo" />
<figcaption>Food 2</figcaption>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</figure>
</div>
<div class="images">
<figure>
<img src="http://lorempixel.com/300/250/food" alt="photo" />
<figcaption>Food 3</figcaption>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</figure>
</div>
</div>
</section>솔루션 2 (를 사용한 인라인 블록 해킹 margin-right: -4px;)
#pageHeader {
background-color: grey;
/* As there is nothing behind your #pageHeader, it is better to choose a grey color with no opacity */
min-height: 80px;
}
nav {
width: 90%;
margin: 0 auto;
/* This code will center your navigation bar. The 90% width will give it space. */
}
nav ul {
list-style-type: none;
padding: 0;
margin: 0;
}
nav li {
display:inline-block;
width: 16.6666666%;
/* 100% (full-width) / 6 (as you have 6 elements in your nav bar) */
text-align: center;
vertical-align: middle;
margin-right: -4px; /* 2nd trick to remove space between inline-blocks) */
}
nav a {
text-decoration: none;
color: #FF0;
}
nav a:hover {
/* always define a style for your links when they are hovered. This is a suggestion of style. */
border-bottom: 1px solid #FF0;
padding-bottom: 3px;
}
.main { /* This is for your italian flag in the background. If you need to support more browser just use a compress image instead. Note that this code is not cross-browser, check required code on Mozilla Developer Network */
background-image: -webkit-linear-gradient(to right, green 0%, green 33%, #fff 33%, #fff 66%, red 66%, red 100%);
background-image: linear-gradient(to right, green 0%, green 33%, #fff 33%, #fff 66%, red 66%, red 100%);
}
.wrapper {
/* you wrap your main elements so that you don't have to reproduce this style every time */
width: 90%;
margin: 0 auto;
text-align: center;
}
h1 {
font: arial;
font-size: 23px;
color: green;
padding: 20px 0 75px;
margin: 0;
}
.images {
display: inline-block;
width: 32%;
/* 100% / 3 images per row */
background-color: #e3e3e3;
vertical-align: top;
}
.images figure {
margin: 0;
}
img {
width: 100%;
height: auto;
}
figure figcaption, figure p {
text-align: left;
}<header id="pageHeader">
<nav>
<ul>
<li><a href="index.html">Home Page</a></li>
<li><a href="html/tables.html">Tables</a></li>
<li><a href="html/forms.html">Feedback</a></li>
<li><a href="html/text.html">About Us</a></li>
<li><a href="html/references.html">References</a></li>
<li><a href="html/validation.html">Validation</a></li>
</ul>
</nav>
</header>
<section class="main">
<div class="wrapper">
<h1>Papa Italiano</h1>
<div class="images">
<!-- This div class I have used to put three images using just one piece of css code which reduced the code-->
<figure>
<img src="http://lorempixel.com/300/250/food" alt="photo" />
<figcaption>Food 1</figcaption>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</figure>
</div>
<div class="images">
<figure>
<img src="http://lorempixel.com/300/250/food" alt="photo" />
<figcaption>Food 2</figcaption>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</figure>
</div>
<div class="images">
<figure>
<img src="http://lorempixel.com/300/250/food" alt="photo" />
<figcaption>Food 3</figcaption>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</figure>
</div>
</div>
</section>해결 방법 3 ( floated block요소 만 사용 )
#pageHeader {
background-color: grey;
/* As there is nothing behind your #pageHeader, it is better to choose a grey color with no opacity */
min-height: 80px;
}
nav {
width: 90%;
margin: 0 auto;
/* This code will center your navigation bar. The 90% width will give it space. */
}
nav:after { /* To clear elements after the nav. As you use floated li you have to clear after) */
content: "";
display: table;
clear: both;
}
nav ul {
list-style-type: none;
padding: 0;
margin: 0;
}
nav li {
float: left; /* Third way to align li elements */
width: 16.6666666%;
/* 100% (full-width) / 6 (as you have 6 elements in your nav bar) */
text-align: center;
}
nav a {
text-decoration: none;
color: #FF0;
}
nav a:hover {
/* always define a style for your links when they are hovered. This is a suggestion of style. */
border-bottom: 1px solid #FF0;
padding-bottom: 3px;
}
.main { /* This is for your italian flag in the background. If you need to support more browser just use a compress image instead. Note that this code is not cross-browser, check required code on Mozilla Developer Network */
background-image: -webkit-linear-gradient(to right, green 0%, green 33%, #fff 33%, #fff 66%, red 66%, red 100%);
background-image: linear-gradient(to right, green 0%, green 33%, #fff 33%, #fff 66%, red 66%, red 100%);
}
.wrapper {
/* you wrap your main elements so that you don't have to reproduce this style every time */
width: 90%;
margin: 0 auto;
text-align: center;
}
h1 {
font: arial;
font-size: 23px;
color: green;
padding: 20px 0 75px;
margin: 0;
}
.images {
display: inline-block;
width: 32%;
/* 100% / 3 images per row */
background-color: #e3e3e3;
vertical-align: top;
}
.images figure {
margin: 0;
}
img {
width: 100%;
height: auto;
}
figure figcaption, figure p {
text-align: left;
}<header id="pageHeader">
<nav>
<ul>
<li><a href="index.html">Home Page</a></li>
<li><a href="html/tables.html">Tables</a></li>
<li><a href="html/forms.html">Feedback</a></li>
<li><a href="html/text.html">About Us</a></li>
<li><a href="html/references.html">References</a></li>
<li><a href="html/validation.html">Validation</a></li>
</ul>
</nav>
</header>
<section class="main">
<div class="wrapper">
<h1>Papa Italiano</h1>
<div class="images">
<!-- This div class I have used to put three images using just one piece of css code which reduced the code-->
<figure>
<img src="http://lorempixel.com/300/250/food" alt="photo" />
<figcaption>Food 1</figcaption>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</figure>
</div>
<div class="images">
<figure>
<img src="http://lorempixel.com/300/250/food" alt="photo" />
<figcaption>Food 2</figcaption>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</figure>
</div>
<div class="images">
<figure>
<img src="http://lorempixel.com/300/250/food" alt="photo" />
<figcaption>Food 3</figcaption>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</figure>
</div>
</div>
</section>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다