>  기사  >  웹 프론트엔드  >  html 및 CSS 태그의 명명 규칙 요약

html 및 CSS 태그의 명명 규칙 요약

黄舟
黄舟원래의
2017-07-26 11:43:061634검색

폴더는 주로 다음과 같은 폴더를 생성합니다:
 1. 이미지는 웹사이트에서 일반적으로 사용되는 일부 사진을 저장합니다.
 2. CSS는 일부 CSS 파일을 저장합니다.
 4. PSD는 일부 PSD 소스 파일을 저장합니다. 5, Temp는 모든 임시 이미지 및 기타 파일을 저장합니다.
 6. 저작권 저작권 정보(선택 사항)
 8. Readme 설명 파일
 통합 CSS 이름 지정
 참고: 이 CSS 이름 지정 규칙은 개체 테이블 생성 모드에만 적합합니다
 1. 통합 CSS 파일을 css 폴더 아래에 저장하고 이름을 css.css
  2로 지정합니다. 기본 스타일 정의: body, table, td, tr, a
  3. 링크 스타일 정의: link_white(흰색) link_blue(파란색) 등;
 참고: 중복된 항목이 있는 경우 link_red01과 같이 그 뒤에 아라비아 숫자를 추가하고 linkred
 4와 같이 밑줄을 긋습니다. 텍스트 스타일 정의: 글꼴_red(빨간색); 글꼴_red_14(빨간색 14포인트 글꼴); Font_red_14b(빨간색 14포인트 굵게)
 5. 테두리 스타일 정의: border_red_tblr(4개 변이 있는 빨간색); border_red_blr(왼쪽 및 오른쪽 변이 3개 있는 빨간색); border_red_lr(왼쪽 및 오른쪽 두 개가 있는 빨간색);
 6. 양식 스타일 정의: text_100(텍스트 필드 너비는 100); textarea_200_red(빨간색 테두리가 있는 텍스트 영역 너비는 200);
 참고: 형식은 너비로 정의되며 가장 긴 단어는 To: "text_100_red"
 7. 선 스타일 정의: line_X(가로선); line_Y(세로선); line_X_red2 (2픽셀의 빨간색 가로선); 참고: 선에서만 정의됩니다. 점선과 실선은 테두리에 정의됩니다
 8. 기타 스타일 정의: 여기서는 주로 카테고리 중첩 파일을 정의합니다.
  article_channel.asp Article_channel 페이지
 article_list.asp 기사_목록 페이지
 article_detail.asp 기사_표시 페이지
 참고: 기사 채널이 여러 개인 경우 기사01, 기사02, 기사03 등을 사용하세요.
 exhibit_channel .asp 전시회 정보_채널 페이지
 exhibit_list.asp 전시회 정보_목록 페이지
 exhibit_detail .asp 전시회 information_display 페이지
 product_channel.asp 제품 center_channel 페이지
 product_list.asp product center_list 페이지
 product_detail.asp product center_ Display 페이지
 corporation_channel.asp Member_channel 페이지
 corporation_list.asp Member_list 페이지
 corporation_detail.asp Member_display 페이지
 information_channel.asp 사업기회정보_채널페이지
 information_list.asp 사업기회정보_목록페이지
 information_detail.asp 사업기회정보_표시페이지
  job_channel.asp 채용_채널페이지
 job_list.asp 채용_목록페이지
 job_detail.asp 채용_표시페이지
 hr_channel.as p 채용정보_채널페이지
 hr_list.asp 채용정보_목록 페이지
hr_detail.asp 채용정보 검색_표시 페이지
  job_hr_channel.asp 인재 센터_채널 페이지
  job_hr_lisr.asp 인재 센터_목록 페이지
 job_hr_detail.asp 인재 센터 표시 페이지
 copyright.asp 저작권 페이지
 사진 이름 지정
 1. 탐색 이름 지정 : menu.gif 예: menuubg .gif (탐색 배경 이미지)
 2. 회원 로그인: login.gif 예: loginbg.gif (회원 로그인 배경 이미지)
 3. 검색 이름: search.gif 예: search_bg.gif (검색 배경 이미지)
 4 작은 아이콘: ico_number.gif 예: ico_001.gif
5. 줄 이름 지정: line_X_color.gif 예: line_X_red.gif(빨간색 가로 점선) 설명: 줄만 점선의 이름을 지정합니다.
Line_Y_red.gif(빨간색 세로 점선) )
 6. 광고명: ad_number.gif 예: ad001.gif
 7. 기타 열의 사진: 열 이름의 첫 글자.gif
 예: xwzx_bg.gif(뉴스센터 배경) cpzx_l.gif(제품 중앙 좌측 사진)
8. 제품 및 컬럼의 핫스팟 사진 : pic_number.gif 예 : pic_001.gif
참고 : 상, 하, 좌, 우는 T, B, L, R로 약칭 가능
CSS 표준화된 디자인 명명
1. 클래스 명명 규칙 예
Head: header
Content: content/container
Tail: footer
Navigation: nav
Sidebar: sidebar
Column: columns
페이지 주변 장치 제어 전체 레이아웃 너비: Wrapper
왼쪽 및 오른쪽 중앙: 왼쪽 오른쪽 중앙
로그인 바: loginbar
로고: 로고
광고: 배너
페이지 본문: 메인
핫스팟: hot
뉴스: news
다운로드: download
하위 탐색: subnav
메뉴: menu
하위 메뉴: submenu
검색: search
친숙한 링크: friendlink
바닥글: footer
저작권: copyright
스크롤: 스크롤
내용: content
태그 페이지: tab
글 목록: list
프롬프트 메시지: msg
팁: Tips
칼럼 제목: title
가입: Joinus
가이드: guild
서비스: service
등록: regsiter
상태: status
투표: vote
파트너: Partner
2. 댓글 작성 방법
/ Footer /
콘텐츠 영역
/ End Footer /
  3. id에 대한 명명 규칙의 예
                                                            in in us in in in id 열: 열
페이지 주변 제어 전체 레이아웃 너비: 래퍼
왼쪽 및 오른쪽 중앙: 왼쪽 오른쪽 중앙
(2) Navigation
탐색: nav
메인 탐색: mainbav
하위 탐색: subnav
상단 탐색: topnav
측면 탐색: sidebar
왼쪽 탐색: leftsidebar
오른쪽 탐색: rightsidebar
메뉴: menu
하위 메뉴: submenu
제목: title
요약: summary
(3) 기능
로고: logo
광고: 배너
로그인: login
로그인 바: loginbar
등록: regsiter
검색: search
리본: shop
제목: title
가입: Joinus
상태: status
버튼: btn
스크롤: 스크롤
탭: 탭
기사 목록: 목록
프롬프트 메시지: msg
현재: 현재
팁: 팁
아이콘: 아이콘
참고: note
가이드: guild
서비스: service
핫스팟: hot
뉴스: news
다운로드: 다운로드
투표: vote
파트너: 파트너
친근한 링크: link
저작권: copyright
  4. 수업에 대한 작성 사양 예시
   (1) 색상: 색상 이름 또는 16진수 코드를 사용합니다. 예:

.red { color: red; }
  .f60 { color: #f60; }
  .ff8600 { color: #ff8600; }

   (2) 글꼴 크기, '글꼴 글꼴 크기'를 이름으로 직접 사용, 예를 들어
 
.font12px { font-size: 12px; }
  .font9pt {font-size: 9pt; }

   (3) 정렬 스타일,
 
.left { float:left; }
  .bottom { float:bottom; }

   등 정렬 대상의 영문 이름을 사용, (4) 제목 표시줄 스타일을 사용

 

.barnews { }
  .barproduct { }

 5.와 같은 '카테고리 함수' 이름 지정 방법 CSS 파일 명명 예

  메인 master.css

모듈 module.css
기본적으로 base.css

레이아웃, 레이아웃.css

Themes.css
Columns.css 공유

텍스트 글꼴.css

양식 Forms.css
패치 mend.css
인쇄. css
 6. 메모
  (1) 모두 소문자
  (2) 가능한 한 영어를 사용하세요.
  (3) 대시는 추가하지 마세요. 그리고 밑줄
  (4) 한눈에 알아볼 수 있는 단어가 아닌 이상 단어를 축약하지 마세요

위 내용은 html 및 CSS 태그의 명명 규칙 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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