기본 사이트 레이아웃 및 탐색

Question

내가 도와 준 지역 아트 갤러리의 소규모 프로젝트를위한 간단한 웹 페이지를 만들어 달라는 요청을 받았습니다. 문제는 내 HTML 지식이 오래되었습니다. 나는 그것을 테이블을 사용하여 만들었지 만, 생각하기가 더 어려워졌습니다.

• 블루

  Here's a basic design mockup.는 헤더이며, 100 %의 폭을 갖는다.

• 녹색은 사이트 본문으로 고정 폭 (예 : 800px)을 가지고 화면 하단으로 이동합니다.
• 노란색은 본체 안쪽 하단에 붙은 바닥 글입니다.
• 빨간색은 navblocks이며 내 주요 문제입니다. 그들은 고정 된 너비 (예 : 180px) 안에 텍스트가 왼쪽으로 정렬됩니다. 그들은 같은 간격의 형태로 서로 겹치고 왼쪽 끝과 오른쪽 끝은 본체 끝과 정렬되지만 화면 너비를 축소하면 가까워집니다.

는 일부 인터넷 검색 후 나는 스팬 및 사용 등 간격 navblocks를 만들기 위해 관리 "텍스트 정렬 : 센터"하지만 navblocks는 중앙에 정렬 안에 그 또한 텍스트를합니다.

본체의 끝 부분에 맞춰 지도록 고정 너비 (180 + 800 + 180)의 컨테이너를 사용하려고했으나 시도 할 때마다 스팬 정렬을 제동합니다.

제 질문은 다음과 같습니다. 어떻게이 navblocks에 접근합니까?

Answer 1

귀하의 질문을 이해하는 한, 여기에 작은 codepen 링크가 있습니다. 희망은 도움이됩니다.

Codepen Link

HTML :

<header> 
    <nav> 
     <a href="#">Link 1</a> 
     <a href="#">Link 2</a> 
     <a href="#">Link 3</a> 
     <a href="#">Link4</a> 
    </nav> 
</header> 
<div class="wrapper"> 
<div class="content"> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus aperiam, debitis labore ratione doloribus adipisci quia repellat voluptatem tempora laborum vel possimus dolorum numquam, esse, dignissimos qui iste, assumenda laudantium. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat recusandae provident similique nemo, hic delectus dolorem totam, minima maiores quas, distinctio dolorum. Numquam aperiam, rem consectetur tempora, tempore dignissimos. Recusandae. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam voluptatum recusandae dolorem necessitatibus, vel nihil possimus voluptate obcaecati dignissimos, magni repellat, iusto atque, provident? Veniam error quaerat iusto, et explicabo? 
    </div> 

    <footer> 
    footer 
    </footer> 
</div> 

CSS :

/* http://meyerweb.com/eric/tools/css/reset/ 
    v2.0 | 20110126 
    License: none (public domain) 
*/ 

html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
b, u, i, center, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, 
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary, 
time, mark, audio, video { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-size: 100%; 
    font: inherit; 
    vertical-align: baseline; 
} 
/* HTML5 display-role reset for older browsers */ 
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { 
    display: block; 
} 
body { 
    line-height: 1; 
} 
ol, ul { 
    list-style: none; 
} 
blockquote, q { 
    quotes: none; 
} 
blockquote:before, blockquote:after, 
q:before, q:after { 
    content: ''; 
    content: none; 
} 
table { 
    border-collapse: collapse; 
    border-spacing: 0; 
} 
header{ 
    background:blue; 
    padding:10px 0; 
    border-bottom:2px solid #000; 
} 
nav { 
    width: 80%; 
    margin:0 auto; 
} 
nav a{ 
    color:#fff; 
    width:20%; 
    text-align:center; 
    display: inline-block; 
} 
.wrapper{ 
    width:800px; 
    margin:0 auto; 
    background-color:green; 
    color:#fff; 
} 
.content{ 
    padding:20px ; 
} 
footer{ 
    background:yellow; 
    padding:20px; 
    color:#000; 
}