psd 파일부터 html 튜토리얼 공유까지

개요

• 레이아웃 계획, 전체 구조 나누기

• 콘텐츠 영역, 전체에서 부분으로, 부분에서 공통 부분, 상황에 따라 스타일 적용

• public-header( public-header), tail( public-footer)

• 공용 컨테이너(public-container/inner-center)

• css 파일, html 구조, 더 생각해 보세요

• 인라인 요소를 허용하지 마세요 블록 수준 요소는 동일한 수준에 있어야 합니다.

• reset.css, common.css, index.css

• 플로팅해야 하는 요소, 상위 요소는 모두 정리되고 통합 클래스 클리어픽스가 제공됩니다.

• 너비와 높이: 짝수 단위를 사용하세요.

• 좋은 코딩 표준 및 이름 지정

• 3개 수준의 이름 지정을 넘을 수 없습니다.

• 속성과 요소의 영리한 조합이 있나요?

• 오버플로를 사용하여 일부 사진을 타겟팅하세요. , 텍스트가 숨겨진 상황을 초과합니다.

• text-overflow, 초과된 텍스트 부분은 줄임표로 표시됩니다.

• a 태그는 p, h, div 및 기타 태그(새 사양에 따라)에 중첩될 수 있습니다. 일반적으로 해당 태그는 해당 태그에 연결되는 동일한 제목, 그림 및 텍스트 조합 그룹에서 발견됩니다. 같은 장소이므로 넓은 지역에서 점프하려면 링크 스타일이 필요하므로 더 편리합니다. HTML 구조가 합리적인 지에 대한 반사가 합리적인지에 대한 반사체에 대해 반사된다.

• 아직 준비되지 않았다면 이 튜토리얼 시리즈의 첫 번째 부분을 끝까지 읽어 보시기 바랍니다

• :

• 사진을 사용하여 작고 현대적인

• 디자인하기 가게

• 제품 홈페이지

• ,

• 두 번째 부분에는

• psd

이 필요하기 때문입니다.

• 첫 번째 부분에서 완성된 파일입니다.

• 첫 번째 부분을 건너뛰려면 첫 번째 부분의 소스 파일을 직접 다운로드할 수 있으며, 계속하려면 아래에서 필요합니다.

• 파일 구조 생성 및 파일 준비

• 1

• 바탕 화면에 새 빈 디렉토리를 생성하고 이름을 지정합니다. 오

• .

• 2

• portfolio

• 아래에서

• images

을 계속 생성하세요.
• 디렉토리

  디렉토리는 사진을 저장하는 데 사용됩니다.

• 3

• 다음으로 두 개의 빈 파일

• styles.css

• 및

을 만듭니다.

• index.html

• 전체 구조

• page-content

• header

• section-feature (추가/삭제 가능)

• section-main

• section-post 스크립트(추가 가능 /삭제)

footer

공개 섹션
inner-center
• or

• page-content

• header

• 섹션 기능( 추가/삭제 가능)

• section-name-1

section-name-2
...

footer

공개 섹션

내부 중심 /public-container
• section-main
  사이드바 디자인 없음

<a href="#" class="title">
    <h4>Voluptate cillum fugiat.</h4>
    <p class="comment">Cheese, tomato, mushrooms, onions.</p>
</a>

왼쪽 사이드바 디자인

section.section-main>.inner-center

이중 사이드바 디자인

section.section-main>.inner-center
    aside.aside-left
    main.main>.content

특정 요구사항

반응형 디자인

백분율 디자인

고정 너비 디자인

• 코드 사양

HTML(fex-team)

CSS(fex-team)

네이밍 규칙 및 적용

공통 클래스 키워드
레이아웃 클래스 : 헤더 , footer, 컨테이너, main, content, aside, page, section
Wrapping 클래스: Wrap, inner
Block 클래스: Region, block, box

구조 클래스: hd, bd, ft, top , 하단, 왼쪽, 오른쪽, 중간, 열, 행, 그리드, 범위
목록 클래스: 목록, 항목, 필드
기본 및 보조 클래스: 기본, 보조, 하위, 부

크기 범주 : s, m, l, xl, 대형, 소형

• 상태 카테고리: 활성, 현재, 확인됨, 가리키기, 실패, 성공, 경고, 오류, 켜짐, 꺼짐

• 导航类：nav, prev, next, breadcrumb, forward, back, indicator, paging, first, last

• 交互类：tips, alert, modal, pop, panel, tabs, accordion, slide, --scroll, overlay,

• 星级类：rate, star

• 分割类：group, seperate, divider

• 等分类：full, half, third, quarter

• 表格类：table, tr, td, cell, row

• 图片类：img, thumbnail, original, album, gallery

• 语言类：cn, en

• 论坛类：forum, bbs, topic, post

• 方向类：up, down, left, right

• 其他语义类：btn, close, ok, cancel, switch; link, title, info, intro, more, icon; form, label, search, contact, phone, date, email, user; view, loading...

• 图片命名与图标命名，index-header-logo,index-footer-logo.

• iconfont平台

约定规则

• 关键词间以中划线-连接 以中划线连接，如.item-img

• 使用两个中划线表示特殊化，如.item-img.item-img--small表示在.item-img的基础上特殊化

• 状态类直接使用单词，参考上面的关键词，如.active, .checked

• 图标以icon-为前缀（字体图标采用.icon-font.i-name方式命名）。

• 模块采用关键词命名，如.slide, .modal, .tips, .tabs，特殊化采用上面两个中划线表示，如.imgslide--full, .modal--pay, .tips--up, .tabs--simple

• js操作的类统一加上js-前缀

• 不要超过四个class组合使用，如.a.b.c.d

• 一个类名，不要超过三个单词的连接。

• 主体结构命名前加上该页的命名，如index-banner，index-main。

实践应用

• 通过添加前缀修饰关键词

  public-header,article-header，index-banner,index-panel

• 通过层级关系特殊化类，一般子元素接着父元素的最后一个单词（继承式）

  ul.card-list 
      li.list-item 
          a.item-img-link>img.item-img 
          h3.item-tt>a.item-tt-link 
          p.item-text
  <ul>
       <li> 
          <a href="#"><img src="" alt=""></a> 
          <h3><a href="#"></a></h3> 
          <p></p> 
      </li> 
  </ul>

参考资料

• 什么鬼，又不知道怎么命名class了

• HTML整站结构设计

• 慕课网《从psd到html》

위 내용은 psd 파일부터 html 튜토리얼 공유까지의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!