개요

레이아웃 계획, 전체 구조 나누기
콘텐츠 영역, 전체에서 부분으로, 부분에서 공통 부분, 상황에 따라 스타일 적용

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

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

or
page-content
header
섹션 기능( 추가/삭제 가능)

section-name-1

footer

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)

네이밍 규칙 및 적용

크기 범주 : 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>

로그인 후 복사