CSS 커서 속성
오늘은 CSS의 커서 속성을 배웠습니다. 첫 번째 블로그를 통해 이를 요약해 보겠습니다.
cursor 속성은 커서의 표시 스타일을 제어하는 데 사용됩니다. 가능한 값은 다음과 같습니다.
cursor:url()*|{auto|default|pointer|crosshair|text|vertical-text|help|not-allowed|no-drop|move|e-reszie|s-resize|w-resize|w-resize|n-resize|all-scroll|ne-resize|se-resize|nw-resize|sw-resize|col-resize|row-resize|}*는 이 값 중 하나 이상을 쓰는 것을 의미하며 URL 뒤의 {}에서 값을 선택할 수 있습니다. .
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>CSS之cursor属性</title>
6 <style>
7 h2#auto{cursor:auto;}
8 h2#default{cursor:defaut;}
9 h2#hand{cursor:hand;}
10 h2#pointer{cursor:pointer;}
11 h2#text{cursor:text;}
12 h2#crosshair{cursor:crosshair;}
13 h2#move{cursor:move;}
14 h2#wait{cursor:wait;}
15 h2#progress{cursor:progress;}
16 h2#help{cursor:help;}
17 h3#ne-resize{cursor:ne-resize;}
18 h3#nw-resize{cursor:nw-resize;}
19 h3#n-resize{cursor:n-resize;}
20 h3#se-resize{cursor:se-resize;}
21 h3#sw-resize{cursor:sw-resize;}
22 h3#s-resize{cursor:s-resize;}
23 h3#w-resize{cursor:w-resize;}
24 h3#e-resize{cursor:e-resize;}
25 h2#vertical-text{cursor:vertical-text;}
26 h2#not-allowed{cursor:not-allowed;}
27 h2#no-drop{cursor:no-drop;}
28 h3#col-resize{cursor: col-resize;}
29 h3#row-resize{cursor: row-resize;}
30 h3#all-scroll{cursor:all-scroll;}
31 h2#url{cursor: url();}
32 tr{border:1px solid red;}
33 </style>
34 </head>
35 <body>
36 <a href="http://www.baidu.com" target="_blank">百度</a>
37 <h1 id="指示和选择光标">指示和选择光标</h1>
38 <h2 id="auto-浏览器默认">auto:浏览器默认</h2>
39 <h2 id="default-操作系统默认光标">default：操作系统默认光标</h2>
40 <h2 id="hand-手型">hand:手型</h2>
41 <h2 id="text-大写的I-水平文本选择">text：大写的I，水平文本选择</h2>
42 <h2 id="vertical-text-大写的I-垂直文本选择">vertical-text：大写的I，垂直文本选择</h2>
43 <h2 id="help-箭头加问号-获取帮助">help：箭头加问号，获取帮助</h2>
44 <h2 id="pointer-手形-表示链接">pointer：手形，表示链接</h2>
45 <h2 id="not-allowed-红色圆圈和斜杠-禁止操作">not-allowed：红色圆圈和斜杠，禁止操作</h2>
46 <h2 id="no-drop-红色圆圈和斜杠-无法释放">no-drop：红色圆圈和斜杠，无法释放</h2>
47 <h2 id="crosshair-十字瞄准-表示精确选择">crosshair：十字瞄准，表示精确选择</h2>
48 <hr/>
49 <h1 id="表程序状态">表程序状态</h1>
50 <h2 id="wait-选转环-表示等待直到不忙-不能交互">wait：选转环，表示等待直到不忙，不能交互</h2>
51 <h2 id="progress-箭头加旋转环-处理中-可以交互">progress：箭头加旋转环，处理中，可以交互</h2>
52
53 <hr />
54 <h1 id="move用于移动对象">move用于移动对象</h1>
55 <h2 id="move-移动对象-两端带箭头的十字">move：移动对象，两端带箭头的十字</h2>
56 <h3 id="all-scroll-移动">all-scroll：移动</h3>
57 <h1 id="在四个角上改变窗口大小">在四个角上改变窗口大小</h1>
58 <h3 id="ne-resize-向东-右-或-和北-上">ne-resize：向东（右）或/和北（上）</h3>
59 <h3 id="sw-resize-向西-左-或-和南-下">sw-resize：向西（左）或/和南（下）</h3>
60 <h3 id="nw-resize-向西-左-或-和北-上">nw-resize：向西（左）或/和北（上）</h3>
61 <h3 id="se-resize-向东-右-或-和南-下">se-resize：向东（右）或/和南（下）</h3>
62 <hr />
63 <h1 id="在四条边上改变窗口大小">在四条边上改变窗口大小</h1>
64 <h2 id="东西用于改变水平宽度">东西用于改变水平宽度</h2>
65 <h3 id="e-resize-向东-右">e-resize：向东（右）</h3>
66 <h3 id="w-resize-向西-左">w-resize：向西（左）</h3>
67 <h2 id="南北用于改变垂直高度">南北用于改变垂直高度</h2>
68 <h3 id="s-resize-向南-下">s-resize：向南（下）</h3>
69 <h3 id="n-resize-向北-上">n-resize：向北（上）</h3>
70 <h3 id="col-resize-改变列宽">col-resize：改变列宽</h3>
71 <h3 id="row-resize-改变行高">row-resize：改变行高</h3>
72 </body>
73 </html>
아직 명확하지 않은 몇 가지 속성 값이 있습니다. hand url col-resize row-resize 명확히 한 후 블로그를 수정하겠습니다.
블로그 작성이 처음이라 모든 것이 익숙하지 않습니다. 제가 배운 내용이 충분히 견고하지 않으므로 수정을 환영합니다.
위 내용은 CSS의 커서 속성 예제 코드에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
@keyframes 및 @Media와 같이 @Rules는 얼마나 많은 특이성을 가지고 있습니까?Apr 18, 2025 am 11:34 AM나는 다른 날이 질문을 받았다. 나의 첫 번째 생각은 : 이상한 질문입니다! 특이성은 선택기에 관한 것이며 At-Rules는 선택기가 아니므로 ... 무의미합니까?
@Media 및 @Support 쿼리를 중첩 할 수 있습니까?Apr 18, 2025 am 11:32 AM그렇습니다. 당신은 할 수 있습니다. 그리고 그것은 실제로 어떤 순서로 중요하지 않습니다. CSS 전 처리기가 필요하지 않습니다. 일반 CSS에서 작동합니다.
빠른 Gulp 캐시 파열Apr 18, 2025 am 11:23 AMCSS 및 JavaScript (및 이미지 및 글꼴 등)와 같은 자산에 멀리 떨어진 캐시 헤더를 설정해야합니다. 브라우저를 알려줍니다
CSS의 품질과 복잡성을 모니터링하는 스택을 찾아Apr 18, 2025 am 11:22 AM많은 개발자들은 CSS 코드베이스를 유지하는 방법에 대해 글을 썼지 만 코드베이스의 품질을 어떻게 측정하는지에 대해 많은 글을 쓰지 않습니다. 물론, 우리는 가지고 있습니다
Datalist는 가치를 시행하지 않고 값을 제안하는 것입니다Apr 18, 2025 am 11:08 AM짧고 임의의 텍스트를 수락 해야하는 양식이 있습니까? 이름이나 다른 것 같습니다. 정확히 무엇을위한 것입니다. 많은 것이 있습니다
취리히에서 열린 전면 회의Apr 18, 2025 am 11:03 AM나는 프론트 컨퍼런스를 위해 스위스 취리히로 향하게되어 매우 기쁩니다 (그 이름과 URL을 사랑합니다!). 나는 전에 스위스에 가본 적이 없기 때문에 나는 흥분했다
CloudFlare Workers와 함께 풀 스택 서버리스 애플리케이션 구축Apr 18, 2025 am 10:58 AM소프트웨어 개발에서 제가 가장 좋아하는 개발 중 하나는 서버리스의 출현이었습니다. 세부 사항에 푹 빠지는 경향이있는 개발자로서
NUXT 응용 프로그램에서 동적 경로 생성Apr 18, 2025 am 10:53 AM이 게시물에서는 들어오는 데이터를 위해 동적 경로를 만드는 방법을 보여주기 위해 NetLify에 구축하고 배포 한 전자 상거래 상점 데모를 사용합니다. 상당히입니다
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SecList
SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.
PhpStorm 맥 버전
최신(2018.2.1) 전문 PHP 통합 개발 도구
Atom Editor Mac 버전 다운로드
가장 인기 있는 오픈 소스 편집기
ZendStudio 13.5.1 맥
강력한 PHP 통합 개발 환경
