Table des matières
HTML DOM选定
CSS元素编辑(实时预览)
CSS像素微调技巧
概览区域
Firebug全局快捷键,支持自定义
Maison interface Web tutoriel HTML Firebug折腾记_(2)HTML&CSS定位及调试小技巧_html/css_WEB-ITnose

Firebug折腾记_(2)HTML&CSS定位及调试小技巧_html/css_WEB-ITnose

Jun 24, 2016 am 11:38 AM

题外话

传统的开发我们是在编辑器操作代码保存,再到浏览器预览查看效果的;
而如今的firebug和chrome的内置调试器就不需要了..可以直接实时编辑且看到效果;
在调试中对代码的操作不会保存到本地实际代码中..是不是很赞!!;

定位HTML元素的三种方式
  1. 进入调试工具界面,按下”瓢虫”旁边的小鼠标,再进行网页元素的选择
  2. 默认快捷键,Ctrl + shift + C
  3. 鼠标移动到网页的某一块元素,鼠标右键,使用Firebug查看元素

HTML及CSS简单调试

##HTML元素编辑
除了写死的代码结构不能操作外(比如DIV块标签),内部的各种属性和内容都支持实时修改和预览的;
修改其中内容,只要单击你选中的东东即可,会有一个小小的蓝色框框出来
比如:

  • 类(class)
  • 行内样式(style)
  • 目标(target)
  • 链接(href)
  • 文本内容
  • 增加额外属性,在包含块的第一个标签的括号内单击即可添加自己想要增加的
  • HTML DOM选定

    可以轻而易举的选定各种包裹层和父类,单击即可

    CSS元素编辑(实时预览)

  • 支持禁用某个属性,点击属性旁边的红色圈圈,被禁用属性会变成灰色
  • 修改某个属性
  • 增加某个属性
  • CSS像素微调技巧

    CSDN不支持GIF动态图..所以没做…..百看不如一试

  • 方向键↑或者方向键↓,上增加1px(em==),下减去1px(em==)
  • Ctrl+↑ 或者Ctrl+↓,上增加0.1px(em==),下减去0.1px(em==)
  • shift+↑ 或者shift+↓,上增加10px(em==),下减去10px(em==)
  • 概览区域

  • 计算出样式可以 ? 可以计算我们选定块的整体大小,很实用
  • 布局 ? 盒模型查看,用来调试布局妥妥的
  • 快捷键及自定义

    全局自定义快捷键调用: ctrl+shift+alt+b,当然也可以点击”瓢虫进去”

    Firebug全局快捷键,支持自定义

    哪个和你的习惯冲突了.修改内部快捷键保存确定即可生效

    版权声明:本文为博主原创文章,未经博主允许不得转载。

    Déclaration de ce site Web
    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

    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

    Video Face Swap

    Video Face Swap

    Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

    Outils chauds

    Bloc-notes++7.3.1

    Bloc-notes++7.3.1

    Éditeur de code facile à utiliser et gratuit

    SublimeText3 version chinoise

    SublimeText3 version chinoise

    Version chinoise, très simple à utiliser

    Envoyer Studio 13.0.1

    Envoyer Studio 13.0.1

    Puissant environnement de développement intégré PHP

    Dreamweaver CS6

    Dreamweaver CS6

    Outils de développement Web visuel

    SublimeText3 version Mac

    SublimeText3 version Mac

    Logiciel d'édition de code au niveau de Dieu (SublimeText3)

    HTML est-il facile à apprendre pour les débutants? HTML est-il facile à apprendre pour les débutants? Apr 07, 2025 am 12:11 AM

    HTML convient aux débutants car il est simple et facile à apprendre et peut rapidement voir les résultats. 1) La courbe d'apprentissage de HTML est fluide et facile à démarrer. 2) Il suffit de maîtriser les balises de base pour commencer à créer des pages Web. 3) Flexibilité élevée et peut être utilisée en combinaison avec CSS et JavaScript. 4) Les ressources d'apprentissage riches et les outils modernes soutiennent le processus d'apprentissage.

    Quel est le but du & lt; Progress & gt; élément? Quel est le but du & lt; Progress & gt; élément? Mar 21, 2025 pm 12:34 PM

    L'article traite du HTML & lt; Progress & GT; élément, son but, son style et ses différences par rapport au & lt; mètre & gt; élément. L'objectif principal est de l'utiliser & lt; Progress & gt; pour l'achèvement des tâches et & lt; mètre & gt; pour stati

    Les rôles de HTML, CSS et JavaScript: responsabilités de base Les rôles de HTML, CSS et JavaScript: responsabilités de base Apr 08, 2025 pm 07:05 PM

    HTML définit la structure Web, CSS est responsable du style et de la mise en page, et JavaScript donne une interaction dynamique. Les trois exercent leurs fonctions dans le développement Web et construisent conjointement un site Web coloré.

    Quel est le but du & lt; datalist & gt; élément? Quel est le but du & lt; datalist & gt; élément? Mar 21, 2025 pm 12:33 PM

    L'article traite du HTML & lt; Datalist & GT; élément, qui améliore les formulaires en fournissant des suggestions de saisie semi-automatique, en améliorant l'expérience utilisateur et en réduisant les erreurs. COMMANDE COMPRES: 159

    Quel est le but du & lt; mètre & gt; élément? Quel est le but du & lt; mètre & gt; élément? Mar 21, 2025 pm 12:35 PM

    L'article traite du HTML & lt; mètre & gt; élément, utilisé pour afficher des valeurs scalaires ou fractionnaires dans une plage, et ses applications courantes dans le développement Web. Il différencie & lt; mètre & gt; De & lt; Progress & gt; et ex

    Quel est un exemple d'une balise de départ dans HTML? Quel est un exemple d'une balise de départ dans HTML? Apr 06, 2025 am 12:04 AM

    Anexampleofastartingtaginhtmlis, qui abinginsaparagraph.startingtagsaressentialtinhtmlastheyinitiateelements, définit les éventualités, et la faculté de réduction des pages et de la construction de la création.

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

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

    Gitee Pages STATIQUE Le déploiement du site Web a échoué: comment dépanner et résoudre les erreurs de fichier unique 404? Gitee Pages STATIQUE Le déploiement du site Web a échoué: comment dépanner et résoudre les erreurs de fichier unique 404? Apr 04, 2025 pm 11:54 PM

    GiteEpages STATIQUE Le déploiement du site Web a échoué: 404 Dépannage des erreurs et résolution lors de l'utilisation de Gitee ...

    See all articles