집 >웹 프론트엔드 >CSS 튜토리얼 >CSS 레이아웃 기술은 무엇입니까?

CSS 레이아웃 기술은 무엇입니까?

php中世界最好的语言원래의: 2017-11-23 14:07:172030검색

CSS는 어떻게 배치해야 하나요? CSS 레이아웃을 디자인할 때 어떤 측면에 주의해야 합니까? CSS 레이아웃 기술은 무엇입니까? 오늘은 그 내용을 하나씩 요약해 보겠습니다. 좋은 CSS 레이아웃을 갖는 방법.

그래픽 디자이너가 가져온 PS(그림)를 CSS 재구성자가 리팩토링할 때 웹페이지 아트 그림을 분석해야 CSS 레이아웃을 얻을 수 있다는 것은 누구나 알고 있습니다.

따라서 DIV CSS 레이아웃이 분석의 큰 부분을 차지합니다. 웹페이지 아트 사진을 분석할 때 사진이 잘 보이는지 분석하는 것이 아니라 CSS 레이아웃을 기반으로 웹페이지의 아트 사진을 분석합니다. , CSS 레이아웃 분석은 HTML 페이지의 향후 CSS 재구성에 직접적인 영향을 미칩니다. 작성하기 쉬운 단계입니까?

레이아웃 지식:

DIV+CSS 레이아웃, CSS 레이아웃은 div 태그 + CSS 스타일시트 코드를 통해 개발 및 제작되는 웹페이지(html)의 총칭입니다.

div+css 레이아웃의 장점: 유지 관리가 쉽고, SEO에 유리하며(Google은 웹 페이지 열기 속도를 순위 요소 및 SEO 요소로 사용함), 웹 페이지 열기 속도가 더 빠르고, 웹 표준을 준수합니다.

div+css 웹페이지를 만들기 전에 레이아웃에 대해 생각해 보세요.

먼저 웹페이지 아트 그림을 얻고 상하, 상중하, 왼쪽-오른쪽, 상단-중간(포함)부터 생각해 보겠습니다. 왼쪽 및 오른쪽) 레이아웃 프레임워크.

다음은 CS 레이아웃 분석을 설명하는 예입니다. 목록 페이지를 사용하여 CSS 레이아웃을 분석합니다.

먼저 DIV CSS 레이아웃을 분석하고 이 페이지의 구조적 프레임워크를 재구성할 수 있습니다. 상단, 중간 및 하단 구조에는 왼쪽 및 오른쪽 구조도 포함됩니다.

그래서 이 페이지의 CSS와 HTML을 작성할 때 먼저 CSS와 HTML을 위에서 아래로, 외부에서 내부로 작성해야 합니다.

먼저 웹 폴더를 만들고 이 폴더에 index.html이라는 새 html 페이지와 index.css라는 CSS 파일을 만듭니다. 여기서 요령은 템플릿을 가져와서 CSS 및 HTML 초기 페이지를 구축한 다음, CSS 파일을 템플릿에 소개한 CSS 템플릿인 HTML에 참조한 다음, CSS 템플릿을 기반으로 CSS를 작성하고 추가하는 것입니다.

다음은 index.html의 html 코드입니다.

인용 내용은 다음과 같습니다.

<!DOCTYPE "> 
<html "> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>css布局案例实验页面</title> 
<link href="index.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
<div id="header">我是头部（上）</div> 
<div id="centers"> 
<div class="c_left">我是中的左</div> 
<div class="c_right">我是中的右</div> 
<div class="clear"> </div> 
</div> 
<div id="footer">我是底部（下）</div> 
</body> 
</html>

index.css의 CSS 코드는 다음과 같습니다.

인용 내용은 다음과 같습니다.

body, div, address, blockquote, iframe, ul, ol, dl, dt, dd, li, dl, h1, h2, h3, h4, h5, h6, p, pre, table, caption, th, td, form, legend, fieldset, input, button, select, textarea {margin:0; padding:0; font-weight: normal;font-style: normal;font-size: 100%; font-family: inherit;} 
ol, ul ,li{list-style: none;} 
img {border: 0;} 
body {color:#000;background:#FFF; text-align: center; font: 12px/1.5 Arial, Helvetica, sans-serif;} 
.clearfix:after {clear:both; content:"."; display:block; height:0pt; visibility:hidden; overflow:hidden;} 
.clear{clear:both;height:1px; margin-top:-1px; width:100%;} 
.dis{display:block;} 
.undis{display:none;} 
/*此上面代码是初始CSS模板，下面是新写CSS布局框架代码*/ 
#header ,#centers ,#footer{ width:100%; margin:0 auto; clear:both;font-size:18px; line-height:68px; font-weight:bold;} 
#header{ height:68px; border:1px solid #CCCCCC; } 
#centers{ padding:8px 0;} 
#footer{ border-top:1px solid #CCCCCC; background:#F2F2F2;} 
#centers .c_left{ float:left; width:230px; border:1px solid #00CC66; background:#F7F7F7; margin-right:5px; } 
#centers .c_right{ float:left; width:500px;border:1px solid #00CC66; background:#F7F7F7}

할 수 있습니다. 이 두 가지 코드를 테스트하여 새로운 아트 페이지를 생성해 보세요. 일단 위 아트 페이지의 CSS 및 HTML 프레임워크를 배치한 다음 각 콘텐츠에 따라 CSS 및 HTML 소스 코드를 계속 추가해 보겠습니다.

CSS 레이아웃의 중요성과 설명은 이미 모두가 이해하고 있다고 생각합니다. 더 흥미로운 내용을 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!