집 > 기사 > 웹 프론트엔드 > CSS 레이아웃에서 주의해야 할 몇 가지 사항

CSS 레이아웃에서 주의해야 할 몇 가지 사항

php中世界最好的语言원래의: 2017-11-20 17:07:181720검색

웹페이지의 레이아웃은 사용자 경험과 Baidu 순위에 큰 영향을 미칩니다. 웹사이트의 콘텐츠가 아무리 좋아도 레이아웃이 좋지 않으면 아무 소용이 없습니다. 이미지를 분석한 후에만 웹 페이지에 아무렇게나 추가할 수는 없습니다. 좋은 CSS 레이아웃을 만들 수 있습니다.

웹페이지 아트 사진을 분석할 때 레이아웃이 큰 부분을 차지합니다. 웹페이지 아트 사진이 괜찮은지 분석하는 것이 아니라 CSS 레이아웃 분석을 기반으로 웹페이지 아트 사진을 분석합니다. HTML 페이지의 후속 CSS 재구성이 작성하기 쉬운지 여부에 직접적인 영향을 미칩니다.

레이아웃 지식:

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

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

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

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

다음은 설명하기 위한 예입니다 CSS 레이아웃을 분석하기 위해 DIVCSS5 목록 페이지를 사용합니다.

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

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

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

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>css布局案例实验页面-www.divcss5.com.cn</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 레이아웃_div 정보 CSS 레이아웃의 중요성은 매우 크므로 여러분에게 도움이 되기를 바랍니다. 위의 사례들은 자세히 설명되어 있지 않습니다. 직접 연습해 보아야 실력이 향상될 수 있기를 바랍니다.

CSS 레이아웃에서 주의해야 할 몇 가지 사항

관련 기사