웹 프론트엔드 HTML 튜토리얼 样式最常用的命名规则_html/css_WEB-ITnose

样式最常用的命名规则_html/css_WEB-ITnose

Jun 24, 2016 pm 12:04 PM
이름 일반적으로 사용되는 스타일 규칙

前端开发命名规则很重要,但是网上的命名规则一大篇,下面是我总结的一些常用的短语,希望能帮到大家,肯定不全,欢迎大家补充。

1.如果是模块,可以这样前缀:

弹出:pop                    公共:global(缩写:gb) 
标题:title,tit                提示:hint
菜单:menu                 信息:info
预览:pvw                   导航:nav 

2.类型:
按钮:btn                    文本:txt
段落:p                       图标:icon
颜色:color(缩写:c)  背景:bg
边框:bor

3.作用:
设置:set                    添加:add
删除:del                    操作:op
密码:pw                    导入:inc

4.状态:
成功:suc                  失败:lost                透明:tran

基本上常用的就这么多,大家可以一起来补充

 

5.下面我列的几个小例子:
文本输入框: .input_txt
段落文本颜色: .tx_c_p
密码输入框: .input_pw
相册弹出的设置层: .pop_set_photo
登录密码输入框: .input_pw_login
日志设置成功提示: .hint_suc_blogset
公共提示: .hint_gb

......

6.常用的块命名
页头: header            登录条: loginBar
标志: logo                侧栏: sideBar
广告: Banner            导航: nav
子导航: subNav         菜单: menu
子菜单: subMenu       搜索: search
滚动: scroll               页面主体:main
内容: content           标签页: tab
文章列表:list             提示信息:msg
小技巧: tips              栏目标题:title
加入: joinus             指南: guild
服务: service            热点: hot
新闻: news              下载: download
注册: regsiter           状态: status
投票: vote               友情链接:friendLink   

页脚: footer             版权: copyRight

 

 

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

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 최고의 그래픽 설정
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25 : Myrise에서 모든 것을 잠금 해제하는 방법
4 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

macOS: 데스크탑 위젯의 색상을 변경하는 방법 macOS: 데스크탑 위젯의 색상을 변경하는 방법 Oct 07, 2023 am 08:17 AM

macOS Sonoma에서는 이전 버전의 Apple macOS에서처럼 위젯을 화면 외부에 숨기거나 알림 센터 패널에서 잊어버릴 필요가 없습니다. 대신 Mac의 데스크탑에 직접 배치할 수 있으며 대화형이기도 합니다. 사용하지 않을 때 macOS 데스크탑 위젯은 단색 스타일로 배경으로 페이드되어 방해 요소를 줄이고 활성 애플리케이션이나 창에서 진행 중인 작업에 집중할 수 있도록 해줍니다. 그러나 바탕 화면을 클릭하면 풀 컬러로 돌아갑니다. 단조로운 모양을 선호하고 데스크탑의 통일성을 유지하고 싶다면 영구적으로 만드는 방법이 있습니다. 다음 단계에서는 이 작업이 수행되는 방법을 보여줍니다. 시스템 설정 앱을 엽니다.

C++ 함수 이름 지정 시 매개변수 순서에 대한 고려 사항 C++ 함수 이름 지정 시 매개변수 순서에 대한 고려 사항 Apr 24, 2024 pm 04:21 PM

C++ 함수 이름 지정에서는 가독성을 높이고 오류를 줄이며 리팩토링을 용이하게 하기 위해 매개변수 순서를 고려하는 것이 중요합니다. 일반적인 매개변수 순서 규칙에는 작업-객체, 개체-작업, 의미론적 의미 및 표준 라이브러리 준수가 포함됩니다. 최적의 순서는 함수의 목적, 매개변수 유형, 잠재적인 혼동 및 언어 규칙에 따라 달라집니다.

WordPress 웹 페이지 정렬 문제 해결 가이드 WordPress 웹 페이지 정렬 문제 해결 가이드 Mar 05, 2024 pm 01:12 PM

잘못 정렬된 WordPress 웹 페이지 해결 가이드 WordPress 웹 사이트 개발 시 때로는 웹 페이지 요소가 잘못 정렬되는 경우가 있습니다. 이는 다양한 장치의 화면 크기, 브라우저 호환성 또는 부적절한 CSS 스타일 설정 때문일 수 있습니다. 이러한 잘못된 정렬을 해결하려면 문제를 주의 깊게 분석하고, 가능한 원인을 찾아 단계별로 디버그하고 복구해야 합니다. 이 문서에서는 몇 가지 일반적인 WordPress 웹 페이지 정렬 문제와 해당 솔루션을 공유하고 개발에 도움이 되는 특정 코드 예제를 제공합니다.

CSS 웹 배경 이미지 디자인: 다양한 배경 이미지 스타일 및 효과 만들기 CSS 웹 배경 이미지 디자인: 다양한 배경 이미지 스타일 및 효과 만들기 Nov 18, 2023 am 08:38 AM

CSS 웹 페이지 배경 이미지 디자인: 다양한 배경 이미지 스타일과 효과를 생성합니다. 구체적인 코드 예제가 필요합니다. 요약: 웹 디자인에서 배경 이미지는 페이지의 매력과 가독성을 효과적으로 향상시킬 수 있는 중요한 시각적 요소입니다. 이 문서에서는 몇 가지 일반적인 CSS 배경 이미지 디자인 스타일과 효과를 소개하고 해당 코드 예제를 제공합니다. 독자는 더 나은 시각 효과와 사용자 경험을 얻기 위해 자신의 필요와 선호도에 따라 이러한 배경 이미지 스타일과 효과를 선택하고 적용할 수 있습니다. 키워드: CSS, 배경 이미지, 디자인 스타일, 효과, 코드 표현

포인터 비교에 대한 규칙과 예외는 무엇입니까? 포인터 비교에 대한 규칙과 예외는 무엇입니까? Jun 04, 2024 pm 06:01 PM

C/C++에서 포인터 비교 규칙은 다음과 같습니다. 동일한 객체를 가리키는 포인터는 동일합니다. 다른 객체에 대한 포인터는 동일하지 않습니다. 예외: 널 주소에 대한 포인터는 동일합니다.

캔버스 프레임워크를 배우고 일반적으로 사용되는 캔버스 프레임워크에 대해 자세히 설명합니다. 캔버스 프레임워크를 배우고 일반적으로 사용되는 캔버스 프레임워크에 대해 자세히 설명합니다. Jan 17, 2024 am 11:03 AM

Canvas 프레임워크 탐색: 일반적으로 사용되는 Canvas 프레임워크가 무엇인지 이해하려면 특정 코드 예제가 필요합니다. 소개: Canvas는 풍부한 그래픽 및 애니메이션 효과를 얻을 수 있는 HTML5에서 제공되는 그리기 API입니다. 그리기의 효율성과 편의성을 향상시키기 위해 많은 개발자들이 다양한 Canvas 프레임워크를 개발했습니다. 이 기사에서는 일반적으로 사용되는 몇 가지 캔버스 프레임워크를 소개하고 독자가 이러한 프레임워크를 사용하는 방법을 더 깊이 이해하는 데 도움이 되는 특정 코드 예제를 제공합니다. 1. EaselJS 프레임워크 Ea

공개된 Spring 주석: 공통 주석 분석 공개된 Spring 주석: 공통 주석 분석 Dec 30, 2023 am 11:28 AM

Spring은 Java 개발을 단순화하고 향상시키기 위해 많은 주석을 제공하는 오픈 소스 프레임워크입니다. 이 기사에서는 일반적으로 사용되는 Spring 주석을 자세히 설명하고 구체적인 코드 예제를 제공합니다. @Autowired: Autowired @Autowired 주석은 Spring 컨테이너에 Bean을 자동으로 연결하는 데 사용할 수 있습니다. 종속성이 필요한 @Autowired 주석을 사용하면 Spring은 컨테이너에서 일치하는 Bean을 찾아 자동으로 주입합니다. 샘플 코드는 다음과 같습니다. @Auto

PHP 함수의 명명 규칙 및 규칙 PHP 함수의 명명 규칙 및 규칙 May 19, 2023 am 08:14 AM

매우 널리 사용되는 스크립팅 언어인 PHP는 강력한 함수 라이브러리 지원을 제공하며 함수 명명 규칙과 규칙은 개발 효율성과 코드 가독성에 중요한 영향을 미칩니다. 이 글에서는 PHP 함수의 명명 규칙과 규칙을 소개합니다. 1. 명명 스타일 PHP에서 함수 이름은 명명 사양 및 규칙을 엄격하게 준수해야 합니다. 사양에는 주로 명명 스타일과 명명 규칙이라는 두 가지 측면이 포함됩니다. 1. 밑줄 명명법 밑줄 명명법은 PHP 함수의 이름을 지정하는 가장 일반적으로 사용되는 방법이며 공식적으로 권장되는 방법이기도 합니다. 이 패턴을 따르는 함수 이름

See all articles