홈>
웹 사이트의 왼쪽과 오른쪽에있는 검은 색 테두리에 문제가 있습니다. 어떻게 수정합니까? 수정하려면 어떤 요소를 변경해야합니까? 거기에 빠진 것이 있습니까? 교과서에서 이것을 복사했습니다. 그러나 왜 작동하지 않는지 모르겠습니다. 수업 시간에 강사가 HTML을 제공 했으므로 CSS를 변경하려고했습니다. 내가 바꿀 수있는 것은 CSS입니다. 여백이나 패딩에 문제가 있다고 생각합니다. 어디에서 거의 모든 것을 변경하려고했는지 확실하지 않지만 아무 효과가 없습니다.
body { background-color: #FCEBB6;
background-image: url(background.gif);
color: #221811;
font-family: Verdana, Arial, sans-serif;
background-image: url(background.gif);
}
#wrapper { background-color: #231814;
width: 100%;
margin-right: auto;
margin-left: auto;
min-width: 900px;
max-width: 1280px;
box-shadow: 3px 3px 3px #666666;
}
header { background-color: #D2B48C;
height: 150px;
background-image: url(javajamlogo.jpg);
background-repeat: no-repeat;
}
h1 { padding-top: 45px;
padding-left: 220px;
font-size: 3em;
}
nav { text-align: center;
font-weight: bold;
font-size: 1.5em;
padding-top: 10px;
float: left;
width: 200px;
}
nav a { text-decoration: none; }
footer { background-color: #D2B48C;
font-size: small;
font-style: italic;
text-align: center;
padding-bottom: 10px;
border-top: 2px #221811 solid;
}
main { padding-left: 0;
padding-right: 0;
padding-bottom: 2em;
padding-top: 0;
display: block;
margin-left: 200px;
background-color: #FEF6C2;
}
h4 { background-color: #d2B48C;
font-size: 1.2em;
padding-left: 10px;
padding-bottom: 5px;
text-transform: uppercase;
border-bottom: 2px;
padding-bottom: 0;
clear: left;
}
.details { padding-left: 20%;
padding-right: 20%;
overflow: auto;
}
img { padding-left: 10px;
padding-right: 10px;
}
* { box-sizing: border-box;
}
#heroroad { background-image: url(heroroad.jpg);
background-size: 100%;
height: 250px;
}
#heromugs { background-image: url(heromugs.jpg);
background-size: 100%;
height: 250px;
}
#heroguitar { background-image: url(heroguitar.jpg);
background-size: 100%;
height: 250px;
}
main h2,h3,h4,p,div,ul,dl { padding-left: 3em;
padding-right: 2em;
}
a:link { color:#FEF6C2;}
a:visited { color: #D2B48C;}
a:hover { color: #CC9933; }
nav ul { text-decoration: none;
padding-left: 0;
}
.floatleft { float: left;
padding-right: 20px;
padding-bottom: 20px;
}
<div id="wrapper">
<header>
<h1>JavaJam Coffee House</h1>
</header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="menu.html">Menu</a></li>
<li><a href="music.html">Music</a></li>
<li><a href="jobs.html">Jobs</a></li>
</ul>
</nav>
<main>
<div id="heroroad"></div>
<h2>Follow the Winding Road to JavaJam</h2>
<p>We're a little out of the way, but take a drive down Route 42 to JavaJam today! Indulge in our locally roasted free-trade coffee and home-made pastries. You'll feel right at home at JavaJam!</p>
<h3>JavaJam Coffee House features:</h3>
<ul>
<li>Specialty Coffee and Tea</li>
<li>Bagels, Muffins, and Organic Snacks</li>
<li>Music and Poetry Readings</li>
<li>Open Mic Night</li>
</ul>
<div>
54321 Route 42<br>
Ellison Bay, WI 54210<br>
888-555-5555<br><br>
</div>
</main>
<footer>
Copyright © 2016 JavaJam Coffee House<br>
<a href="mailto:[email protected]">[email protected]</a>
</footer>
</div>
- 답변 # 1
- 답변 # 2
모든 div에 왼쪽과 오른쪽으로 패딩이 있습니다. 패딩을 왼쪽 및 오른쪽 0px로 래퍼로 변경하십시오.
body { background-color: #FCEBB6; background-image: url(background.gif); color: #221811; font-family: Verdana, Arial, sans-serif; background-image: url(background.gif); } #wrapper { background-color: #231814; width: 100%; margin-right: auto; margin-left: auto; min-width: 900px; max-width: 1280px; box-shadow: 3px 3px 3px #666666; padding-right: 0px; padding-left: 0px; } header { background-color: #D2B48C; height: 150px; background-image: url(javajamlogo.jpg); background-repeat: no-repeat; } h1 { padding-top: 45px; padding-left: 220px; font-size: 3em; } nav { text-align: center; font-weight: bold; font-size: 1.5em; padding-top: 10px; float: left; width: 200px; } nav a { text-decoration: none; } footer { background-color: #D2B48C; font-size: small; font-style: italic; text-align: center; padding-bottom: 10px; border-top: 2px #221811 solid; } main { padding-left: 0; padding-right: 0; padding-bottom: 2em; padding-top: 0; display: block; margin-left: 200px; background-color: #FEF6C2; } h4 { background-color: #d2B48C; font-size: 1.2em; padding-left: 10px; padding-bottom: 5px; text-transform: uppercase; border-bottom: 2px; padding-bottom: 0; clear: left; } .details { padding-left: 20%; padding-right: 20%; overflow: auto; } img { padding-left: 10px; padding-right: 10px; } * { box-sizing: border-box; } #heroroad { background-image: url(heroroad.jpg); background-size: 100%; height: 250px; } #heromugs { background-image: url(heromugs.jpg); background-size: 100%; height: 250px; } #heroguitar { background-image: url(heroguitar.jpg); background-size: 100%; height: 250px; } main h2,h3,h4,p,div,ul,dl { padding-left: 3em; padding-right: 2em; } a:link { color:#FEF6C2;} a:visited { color: #D2B48C;} a:hover { color: #CC9933; } nav ul { text-decoration: none; padding-left: 0; } .floatleft { float: left; padding-right: 20px; padding-bottom: 20px; }
<div id="wrapper"> <header> <h1>JavaJam Coffee House</h1> </header> <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="menu.html">Menu</a></li> <li><a href="music.html">Music</a></li> <li><a href="jobs.html">Jobs</a></li> </ul> </nav> <main> <div id="heroroad"></div> <h2>Follow the Winding Road to JavaJam</h2> <p>We're a little out of the way, but take a drive down Route 42 to JavaJam today! Indulge in our locally roasted free-trade coffee and home-made pastries. You'll feel right at home at JavaJam!</p> <h3>JavaJam Coffee House features:</h3> <ul> <li>Specialty Coffee and Tea</li> <li>Bagels, Muffins, and Organic Snacks</li> <li>Music and Poetry Readings</li> <li>Open Mic Night</li> </ul> <div> 54321 Route 42<br> Ellison Bay, WI 54210<br> 888-555-5555<br><br> </div> </main> <footer> Copyright © 2016 JavaJam Coffee House<br> <a href="mailto:[email protected]">[email protected]</a> </footer> </div>
관련 자료
- html - 탐색 및 스크롤 메인을 수정하는 방법은 무엇입니까?
- pass by reference - php - 이 유형 힌트 오류를 어떻게 수정합니까?
- javascript - Ajax에서 onclick 리스너를 수정하는 방법은 무엇입니까?
- init - 실행되지 않는이 Python 코드를 어떻게 수정할 수 있습니까?
- while loop - 이 자바를 어떻게 고칠 수 있습니까?
- unity - 공중에서 플레이어 서스펜션을 어떻게 고칠 수 있습니까?
- 장고 - 빈 슬러그를 고치는 방법?
- reactjs - 날짜 선택기가 겹치는 텍스트를 수정하는 방법은 무엇입니까?
- javascript - 드래그시 Div 요소 "점프"를 수정하는 방법은 무엇입니까?
- html - CSS를 사용하여 탭을 올바르게 수정하는 방법은 무엇입니까?
- java - noclassdeffounderror - org/hibernate/hibernateexception을 어떻게 수정할 수 있습니까?
- android - Flutter에서 중앙에 있지 않은 앱 바를 수정하는 방법
- c++ - 이 인코딩을 어떻게 수정합니까?
- postgresql - \ copy의"TO"에서 구문 오류를 어떻게 수정합니까?
- Ajax로 나머지 통화에서 추가 된 매개 변수를 수정하는 방법은 무엇입니까?
- python - 뷰에서 HTML로 변수 전달을 수정하는 방법
- python - 'unicodedecodeerror - '수정하는 방법?
- java - "이름으로 빈 생성 오류"수정하는 방법
- python - 'bool'객체 수정 방법에 'get'속성이 없습니다
- android - FAB 내부 활동을 수정하는 방법?
관련 질문
- html : 선택 입력을 클릭할 때 배경 이미지가 확대되는 이유
- html : Mkdocs의 일부 페이지에만 CSS 요소 적용
- javascript : 이 code를 더 잘 작성하고 유사하게 만드는 방법은 무엇입니까? 자바스크립트
- html : 내부 테이블의 내용을 중앙으로 가져오기
- javascript : 이미지 위에 여러 색상이 있는 CSS 오버레이
- javascript : CSS가 추가되면 JS 색상 변경이 작동을 멈춥니다.
- javascript : 동일한 이름을 가진 여러 클래스에 액세스하고 변경하고 반복하여 클릭 시 CSS 변경 사항을 추가하는 방법은 무엇입니까?
- html : cfml 페이지에서 css가 있는 가운데 확인란
- javascript : HTML/CSS 슬라이더가 올바르게 반복되지 않음
- html : 팝업 메뉴가 페이지 여백을 엉망으로 만듭니다.
#wrapper
padding:0
를주십시오