recherche
Maisoninterface Webtutoriel HTMLCSS之cursor属性_html/css_WEB-ITnose

CSS之cursor属性 

今天学习了CSS的cursor属性,第一篇博客就用来总结它吧。

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  弄清楚了再在修改博客。

第一次写博客,各种不熟悉。学的也不够扎实,欢迎指正。

Déclaration
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
L'avenir de HTML, CSS et JavaScript: Tendances de développement WebL'avenir de HTML, CSS et JavaScript: Tendances de développement WebApr 19, 2025 am 12:02 AM

Les tendances futures de HTML sont la sémantique et les composants Web, les tendances futures de CSS sont CSS-in-JS et CSShoudini, et les tendances futures de JavaScript sont WebAssembly et sans serveur. 1. La sémantique HTML améliore l'accessibilité et les effets de référencement, et les composants Web améliorent l'efficacité du développement, mais l'attention doit être accordée à la compatibilité du navigateur. 2. CSS-in-JS améliore la flexibilité de gestion du style mais peut augmenter la taille du fichier. CSShoudini permet le fonctionnement direct du rendu CSS. 3.WeBassembly optimise les performances de l'application du navigateur mais a une courbe d'apprentissage abrupte, et sans serveur simplifie le développement mais nécessite une optimisation des problèmes de démarrage à froid.

HTML: The Structure, CSS: The Style, Javascript: Le comportementHTML: The Structure, CSS: The Style, Javascript: Le comportementApr 18, 2025 am 12:09 AM

Les rôles de HTML, CSS et JavaScript dans le développement Web sont: 1. HTML définit la structure de la page Web, 2. CSS contrôle le style de page Web, et 3. JavaScript ajoute un comportement dynamique. Ensemble, ils construisent le cadre, l'esthétique et l'interactivité des sites Web modernes.

L'avenir de HTML: évolution et tendances de la conception WebL'avenir de HTML: évolution et tendances de la conception WebApr 17, 2025 am 12:12 AM

L'avenir de HTML est plein de possibilités infinies. 1) Les nouvelles fonctionnalités et normes comprendront plus de balises sémantiques et la popularité des composants Web. 2) La tendance de la conception Web continuera de se développer vers une conception réactive et accessible. 3) L'optimisation des performances améliorera l'expérience utilisateur grâce à des technologies de chargement d'image réactives et de chargement paresseux.

HTML vs CSS vs JavaScript: un aperçu comparatifHTML vs CSS vs JavaScript: un aperçu comparatifApr 16, 2025 am 12:04 AM

Les rôles de HTML, CSS et JavaScript dans le développement Web sont: HTML est responsable de la structure du contenu, CSS est responsable du style et JavaScript est responsable du comportement dynamique. 1. HTML définit la structure et le contenu de la page Web via des balises pour assurer la sémantique. 2. CSS contrôle le style de page Web via des sélecteurs et des attributs pour le rendre beau et facile à lire. 3. JavaScript contrôle le comportement de la page Web via les scripts pour atteindre des fonctions dynamiques et interactives.

HTML: Est-ce un langage de programmation ou autre chose?HTML: Est-ce un langage de programmation ou autre chose?Apr 15, 2025 am 12:13 AM

HtmlisnotaprogrammingNanguage; itisamarkupLanguage.1) htmlstructuresAndFormaSwebContentUsingTags.2) itworkswithcssforStylingandjavaScriptForIterActivity, EnhancingWebDevelopment.

HTML: construire la structure des pages WebHTML: construire la structure des pages WebApr 14, 2025 am 12:14 AM

HTML est la pierre angulaire de la construction de la structure des pages Web. 1. HTML définit la structure et la sémantique du contenu et les utilisations, etc. Tags. 2. Fournir des marqueurs sémantiques, tels que, etc., pour améliorer l'effet SEO. 3. Pour réaliser l'interaction de l'utilisateur via des balises, faites attention à la vérification de la forme. 4. Utilisez des éléments avancés tels que, combinés avec JavaScript pour obtenir des effets dynamiques. 5. Les erreurs courantes incluent des étiquettes non clôturées et des valeurs d'attribut non déposées et des outils de vérification sont nécessaires. 6. Les stratégies d'optimisation comprennent la réduction des demandes HTTP, la compression du HTML, l'utilisation de balises sémantiques, etc.

Du texte aux sites Web: la puissance de HTMLDu texte aux sites Web: la puissance de HTMLApr 13, 2025 am 12:07 AM

HTML est un langage utilisé pour créer des pages Web, définissant la structure des pages Web et le contenu via des balises et des attributs. 1) HTML organise la structure des documents via des balises, telles que. 2) Le navigateur analyse HTML pour construire le DOM et rend la page Web. 3) De nouvelles caractéristiques de HTML5, telles que, améliorez les fonctions multimédias. 4) Les erreurs courantes incluent des étiquettes non clôturées et des valeurs d'attribut non attribuées. 5) Les suggestions d'optimisation incluent l'utilisation de balises sémantiques et la réduction de la taille du fichier.

Comprendre HTML, CSS et JavaScript: un guide pour débutantComprendre HTML, CSS et JavaScript: un guide pour débutantApr 12, 2025 am 12:02 AM

WebDevelopmentReliesOnHTML, CSS, etjavascript: 1) HTMLSTRUCTURESCONTENT, 2) CSSSTYLESIT, et3) JavascriptAdddsInterActivity, Forming TheasisofmodernweBEBExperiences.

See all articles

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

Listes Sec

Listes Sec

SecLists est le compagnon ultime du testeur de sécurité. Il s'agit d'une collection de différents types de listes fréquemment utilisées lors des évaluations de sécurité, le tout en un seul endroit. SecLists contribue à rendre les tests de sécurité plus efficaces et productifs en fournissant facilement toutes les listes dont un testeur de sécurité pourrait avoir besoin. Les types de listes incluent les noms d'utilisateur, les mots de passe, les URL, les charges utiles floues, les modèles de données sensibles, les shells Web, etc. Le testeur peut simplement extraire ce référentiel sur une nouvelle machine de test et il aura accès à tous les types de listes dont il a besoin.

PhpStorm version Mac

PhpStorm version Mac

Le dernier (2018.2.1) outil de développement intégré PHP professionnel

Télécharger la version Mac de l'éditeur Atom

Télécharger la version Mac de l'éditeur Atom

L'éditeur open source le plus populaire

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Puissant environnement de développement intégré PHP