0
면책 조항 : 나는 코딩에 매우 익숙하며,이 사이트에 대한 첫 번째 질문이므로, 제게는 에티켓 부족을 지적하십시오. 또한, 내 코딩에 대한 주제 오프 관련 포인터는 환영입니다.왜 내 웹 페이지가 너무 넓습니까?
내가 포트폴리오 페이지를 구축하고 내 페이지에 응답하기 위해 노력했다 몇 가지 이유를 들어
(그들을 이미지, 텍스트, 패딩 등의 사용), 페이지 표시가 너무 광범위하게 (오른쪽으로 스크롤 할 필요가 센터 콘텐츠로). 누군가가 올바른 방향으로 나를 가리킬 수 있을까요? 이 웹 페이지를 알려줍니다으로
* {
box-sizing: border-box
}
이, 반응 설계에 필수적이다 :
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<nav>
<!-- Start of Navigation -->
<div class="container-fluid">
<ul>
<li id="name">Nathan King</li>
<li><a href="#contact">Contact</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#about">About</a></li>
</ul>
</div>
</nav>
<!-- End of Navigation/Start of Content -->
<div class="content">
<div class="about">
<!-- Start of About -->
<a id="about"></a>
<h2>Enter text about my education and skills<h2/><img src="https://preview.ibb.co/i1JZv6/me.jpg" class=".img-responsive">
</div><!-- End of About/Start of Portfolio -->
<div class="portfolio" id="portfolio">
<h1>Portfolio</h1>
<div class="row">
<div class="photo span4"></div>
<div class="photo span4"></div>
</div>
<div class="row">
<div class="photo"></div>
<div class="photo"></div>
</div>
</div>
<!-- End of Portfolio/Start of Contact -->
<div class="contact">
<a id="contact"></a>
<h2>Contact me:</h2>
<div id="soc-btn">
<a href="https://www.facebook.com/#" class="fa fa-facebook" target="_blank"></a>
<a href="https://twitter.com/#" target="_blank" class="fa fa-twitter"></a>
</div>
</div>
</body>
CSS를
body {
margin: 0 auto;
padding: 0;
background-color: #ccccff;
width 100%;
}
nav {
margin: 0 auto;
padding: 0 auto;
width: 100%;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #9099a2;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
width: 100%;
}
li {
display: inline;
float: right;
}
nav a {
text-decoration: none;
font-family: arial;
display: block;
padding: 1em 0.5em 1em 0.5em;
color: white;
width: 5em;
text-align: center;
}
nav a:hover {
opacity: 0.7;
}
nav a.active {
background-color: #63799d;
font-weight: bold;
}
#name {
float: left;
font-family: arial;
padding: 1em 0.5em 1em 1em;
color: white;
}
.content {
margin: 0 auto;
padding: 0 auto;
width: 100%;
}
.about {
padding: 4em 2em 2em 2em;
margin: 0 auto;
background-color: #6d7993;
width: 100%;
}
.about h2 {
text-align: center;
color: #d5d5d5;
}
.about img {
height: 9em;
width: 9em;
border-radius: 50%;
margin-top: 1em;
}
h1,
h2,
p {
font-family: calibri;
}
.portfolio {
padding: 4em 2em 4em 2em;
margin: 0 auto;
background-color: #d5d5d5;
text-align: center;
height: 100%;
width: 100%;
}
.portfolio h1 {
color: Black;
}
.photo {
width: 10em;
height: 5em;
background-color: #6d7993;
padding: 4em;
margin: 4em;
display: inline-block;
border-radius: 1em 4em 1em 4em/2em 1em 2em 1em;
-moz-border-radius: 1em 4em 1em 4em/2em 1em 2em 1em;
-webkit-border-radius: 1em 4em 1em 4em/2em 1em 2em 1em;
}
.contact {
padding: 4em 2em 4em 2em;
background-color: #96858f;
color: #d5d5d5;
height: 100%;
width: 100%;
text-align: center;
}
.soc-btn {
margin: 0 auto;
}
.fa {
padding: 20px;
font-size: 30px;
width: 30px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 50%;
}
.fa:hover {
opacity: 0.7;
}
.fa-facebook {
background: #3b5998;
color: white;
}
.fa-twitter {
background: #55acee;
color: white;
}
HTML에서 수정 된 내용과 수정 된 내용을 설명하면 OP가 도움이 될 것입니다. 내 말은, 당신은 링크가 있지만, 당신은 당신의 대답에 관련 부분을 복사해야합니다. –
덕분에 많은 매력을했습니다! –