홈>

html - 디자인 수정 방법

웹 사이트의 왼쪽과 오른쪽에있는 검은 색 테두리에 문제가 있습니다. 어떻게 수정합니까? 수정하려면 어떤 요소를 변경해야합니까? 거기에 빠진 것이 있습니까? 교과서에서 이것을 복사했습니다. 그러나 왜 작동하지 않는지 모르겠습니다. 수업 시간에 강사가 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&#39;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&#39;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 &copy; 2016 JavaJam Coffee House<br>
    <a href="mailto:yourfirstname@yourlastname.com">yourfirstname@yourlastname.com</a>
    </footer>
    </div>

htmlcss
  • 답변 # 1

    #wrapper padding:0 를주십시오 

    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:0;
}
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&#39;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&#39;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 &copy; 2016 JavaJam Coffee House<br>
<a href="mailto:yourfirstname@yourlastname.com">yourfirstname@yourlastname.com</a>
</footer>
</div>

  • 답변 # 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&#39;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&#39;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 &copy; 2016 JavaJam Coffee House<br>
<a href="mailto:yourfirstname@yourlastname.com">yourfirstname@yourlastname.com</a>
</footer>
</div>

관련 자료

  • 이전 javascript - 파슬리 양식을 두 번 제출하지 마십시오jquery
  • 다음 php - 업로드 한 워드 프레스의 이미지 URL이 내 웹 사이트에 표시되지 않습니다
    • 관련 질문