>  기사  >  웹 프론트엔드  >  웹 페이지 레이아웃 튜토리얼: CSS 웹 페이지 레이아웃 속성 소개

웹 페이지 레이아웃 튜토리얼: CSS 웹 페이지 레이아웃 속성 소개

高洛峰
高洛峰원래의
2017-03-10 11:29:221460검색

레이아웃 튜토리얼 예제이기 때문에 레이아웃의 세부 사항에 더 많은 시간을 할애하지 않았습니다. 그러나 CSS를 아는 사람들은 그것을 다운로드하여 더 자세한 아트를 만들 수 있다고 생각합니다. 매우 좋은 웹페이지가 될 것입니다. 예비 학습 중인 사람들은 이를 다운로드하여 속성 매개변수를 수정하고 수정하여 속성의 특성을 더욱 생생하게 파악하여 CSS를 더 깊이 익히는 목적을 달성할 수 있습니다. CSS는 실제로 배우기 어려운가요? 레이아웃 튜토리얼 예제이기 때문에 레이아웃의 세부 사항에 더 많은 시간을 투자하지는 않았지만 템플릿의 레이아웃은 좋다고 생각합니다. CSS를 아시는 분들은 다운로드하여 더 자세한 아트를 만들 수 있을 것입니다. 예비 학습을 위한 아주 좋은 웹 페이지입니다. CSS를 더 깊이 익히기 위해 속성 매개변수를 수정하고 속성의 특성을 보다 생생하게 파악하려면 다운로드하세요.


CSS는 정말 배우기 어려운가요? 사실 경험이 부족해서 책으로 공부하면 이득이 있을까요? 경험한 사람으로서 기억하고 싶은 것을 수동적으로 배우는 것은 어렵다고 생각합니다. 본질을 익히면 이러한 속성은 자연스럽게 귀하의 요구를 충족시키기에 충분하지 않으며 지식을 추구하게 만들고 자동으로 다른 관련 속성을 확장하여 CSS에 대한 이해를 자연스럽게 마스터하고 심화시킵니다. 이것이 제가 생각하는 방법입니다(아쉽게도 내가 공부할 때 누군가가 나에게 이 말을 했다면 우회하는 일이 훨씬 줄어들었을 것입니다). 처음으로 여러분과 공유하는 글쓰기 경험입니다. 언어 구성에 다소 부족한 점이 있을 수 있으므로 네티즌 여러분께도 포함시켜 달라고 부탁하고 싶지만 앞으로 더 많은 경험을 쌓으면 더 잘 쓸 수 있을 것이라 믿습니다. 다음은 제가 경험한 내용과 필요하다고 생각되는 몇 가지 개념적 설명입니다. 공유하고 싶은 경험이 있다면 함께 토론할 수 있는 댓글을 남겨주세요.

현재의 웹 기술에서는 CSS+p가 주류 웹사이트 표준이 되었으며, 이를 웹표준(webstandard)이라고 부를 수 있습니다. CSS는 영어로 Cascading Style Sheets의 약자로 HTML이나 XML 등의 파일 형식을 표현하는 데 사용되는 컴퓨터 언어입니다.

CSS를 이해하고 배우기 전에 먼저 이 컴퓨터 언어의 장점과 편리함을 이해해야 합니다. 이를 이해하는 것은 개인적으로 매우 기본적이지만 필요하며 CSS+p 학습을 명확하게 하는 데 도움이 될 것입니다. 목적. 스크립트하우스는 웹사이트 기술과 디자이너의 경험을 결합하여 네트워크 응용의 관점에서 CSS+p 웹사이트 디자인의 장점과 문제점을 다음과 같이 요약합니다.

우선 CSS의 가장 큰 장점이 반영되어 있습니다. 간결한 코드로 대규모 웹사이트의 경우 대역폭을 많이 절약할 수 있습니다(실제 의미는 웹페이지 전체 코드에서 효과적인 키워드의 비율을 높인다는 것입니다). 웹 표준을 사용하여 만든 웹사이트는 검색 엔진 친화적이고 프로그램과 웹 페이지 아트의 측면에서 볼 때 이 둘은 서로 독립적일 수 있으며 작업량을 줄이고 과도한 개발을 피하기 위해 결합될 수 있습니다.

둘째, CSS+p로 제작된 웹사이트는 웹사이트 수정이 상대적으로 간단합니다. 많은 문제는 프로그램 변경 없이 CSS만 변경하면 되므로 웹사이트 수정 비용이 절감되고 시간도 많이 절약됩니다. 비슷한 프로젝트 사례를 개발실 동료들과 함께 일해 본 경험이 있어서, 동료들도 이것의 실질적인 편의성을 어느 정도 인식할 것이라고 믿습니다.

마지막 포인트는 처음 접했을 때 컨트롤이 너무 어렵다는 느낌이 들었습니다. 대신 테이블 위치 컨트롤이 더 잘됐다는 느낌이 들어서 사용하기 꺼려질 수도 있겠네요. p 웹 페이지 레이아웃을 작성합니다. 사실 이것은 적응 과정이다. 우리는 많은 실제적인 작업과 연습을 통해 핵심 사항을 주의 깊게 이해할 수 있다. 그 후에는 페이지의 레이아웃에 따라 레이아웃을 작성하는 방법이 다를 수 있지만 코드는 한 가지 원칙을 따릅니다. 즉, 정의된 이름은 다음과 같습니다. 즉, 최소한의 코드를 사용하여 더 많은 상자 금형을 정의하는 것(한 사람이 여러 용도로 사용할 수 있음)이라고 부르며, 다른 디자이너가 쉽게 이해하고 사용할 수 있도록 명명을 표준화하고 조합해야 합니다. 다른 하나는 ID를 사용할 것인지 Class를 사용할 것인지에 대한 것입니다. 사실 상대적이긴 하지만 지금은 주로 수업을 더 많이 활용하는 편이 더 편하고 제 글쓰기 습관에도 맞는 것 같아요.

다음은 PHP 중국어 웹사이트에서 먼저 이해하고 숙달해야 한다고 생각하는 기본적으로 일반적으로 사용되는 속성입니다.

CSS에서 이해하고 숙달해야 하는 중요한 속성:

여백: 부동 소수점 숫자와 단위 식별자 백분율로 구성된 길이 값으로 자동 | 백분율은 상위 개체의 높이를 기준으로 합니다. 인라인 개체의 경우 왼쪽 및 오른쪽 외부 여백은 음수 값일 수 있습니다.

패딩: 길이 부동 소수점 숫자와 단위 식별자 또는 백분율로 구성된 길이 값입니다. 백분율은 상위 개체의 너비를 기준으로 합니다.

Float: 없음 | 왼쪽 | 오른쪽 레이아웃을 정의할 때 반드시 사용해야 하는 속성입니다. 사용 시 많이 발생하는 위치 지정 및 브라우저 호환성 문제에 주의해야 합니다. practice 작동 중에 이 속성에 대해 자세히 알아보세요. 이 속성을 가지려면 다음 지원 속성인 "clear"를 이해해야 합니다.

지우기: 없음 | 오른쪽 | 둘 모두에서 부동 개체를 허용하지 않음. 왼쪽에 떠 있는 물체를 허용합니다. 오른쪽에 떠 있는 물체를 허용하지 않는 떠다니는 물체 오른쪽이 있습니다.

background:url(images/aardvark.gif) 왼쪽 상단 no-repeat |peat-x |repeat-y 레이아웃을 아름답게 하기 위해 배경 이미지를 정의하는 것도 매우 일반적으로 사용되는 속성입니다.

overflow: visible | auto | hide | scroll 저는 브라우저 호환성 문제를 방지하고 해결하기 위해 주로 레이아웃에서 이 기능을 사용합니다.

border:1px solid #CCCCC 이것은 테두리 크기, 선을 정의하는 것입니다. , 색상 속성.

list-style-image list-style-position list-stle-type 이 목록 속성은 일반적으로 순서가 지정된 목록에 사용되며 목록은 웹 페이지 제목 색인 텍스트 링크를 정의하는 데 자주 사용됩니다. CSS 정의는 테이블 표현보다 우수합니다.

위의 내용은 Script House가 CSS를 학습할 때 꼭 기억하고 이해해야 한다고 생각하는 CSS 속성입니다. 해당 속성을 완전히 이해하면 애플리케이션 레이아웃의 자유도가 크게 높아질 수 있습니다. 그래서 이것을 익히는 것은 어렵지 않습니다. 위의 스타일을 익히고 나면 이전에 이해하지 못했을 때 페이지를 만들 때 무능하다고 느꼈던 것을 마스터하고 나면 자연스럽게 레이아웃을 깨닫게 될 것입니다. 자신만의 논리적인 사고를 바탕으로 원하는 레이아웃을 만들어내면 CSS Resistance가 많이 완화될 것입니다.

이에 관해 이야기하면서 아주 흔한 질문 하나를 드리고 싶습니다. 나는 WEB 표준이 모든 테이블에서 p를 사용하는 것을 금지한다고 생각하지 않습니다. 나조차도 처음 시작할 때 이런 잘못된 생각을 가지고 있었습니다. "표준"에 대한 나의 이해는 표준 디자이너가 좋은 글쓰기 습관을 개발하고 주류 통합을 달성한다는 것입니다. 어떤 경우에는 웹 페이지의 기능적 구현 측면에서 여전히 테이블이 p보다 우수하며, p를 제한 없이 과도하게 사용하면 IE 파싱을 소모하고 CPU의 부담을 증가시킵니다. 이 역시 우리가 주목해야 할 문제이다.

위의 일반적으로 사용되는 속성을 익히면서 다음은 Design Ming이 인터넷 블로그에 작성한 CSS 3단 레이아웃 템플릿입니다. 주로 CSS의 본질을 익히는 방법과 웹 페이지 레이아웃 튜토리얼을 배우는 데 중점을 둡니다. 네티즌들은 이 템플릿을 다운로드할 수 있습니다. 기술을 이해하고 숙달할 수 있도록 기사의 내용에 따라 템플릿을 신중하게 고려했습니다. 이 템플릿은 위에 나열된 중요한 CSS 속성을 다루기 위해 당사 사이트에서 컴파일되었습니다.

레이아웃 튜토리얼 예제이기 때문에 레이아웃의 세부 사항에 더 많은 시간을 할애하지는 않았지만, CSS를 아시는 분들은 다운받아서 더 자세히 작성하시면 좋을 것 같습니다. art. 예비 학습의 경우 웹 페이지를 다운로드하여 속성 매개변수를 수정하고 수정하여 속성의 특성을 더욱 생생하게 파악함으로써 CSS를 더욱 깊이 익히는 데 도움이 될 것입니다.

위 내용은 웹 페이지 레이아웃 튜토리얼: CSS 웹 페이지 레이아웃 속성 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.