Table des matières
1、创建模板
2.css 和 js 导入
3.开始装逼之旅
4.CSS登场
Maison interface Web tutoriel HTML 前端必备快速编码工具_html/css_WEB-ITnose

前端必备快速编码工具_html/css_WEB-ITnose

Jun 24, 2016 am 11:15 AM

最受大家喜欢的一个快速编码的工具就是Emmet (Zen Coding),这是一种一种新的使用仿CSS选择器的语法来快速开发HTML和CSS的方法。

也许对于我们这些菜鸟级别的程序员来说,脚踏实地的一字字的打代码才是正确的选择。但是,学会快速的把整个框架和重复代码用最快的速度码出来,这个对每个程序员来说都是很有必要的,而且在工程上还能大大的缩减开发时间。

声明:这里只和大家说最常用的也够你使用的形式,具体的可参考官方文档 ZenCodingCheatSheet.pdf

1、创建模板

开始编码的时候,我们需要一个模板,我们以html5为例。

html:5
Copier après la connexion

几个字符,敲一下 Tab 键就搞定了,生成的模板如下:

<!DOCTYPE HTML><html lang="en-US"><head>    <meta charset="UTF-8">    <title></title></head><body></body></html>
Copier après la connexion

这里要说明一下,不是所有的编辑器都敲Tab 键,有的是 Ctrl + E 或 Ctrl + J,这要看你的编辑器是什么而定。

2.css 和 js 导入

导入css
link:css
Copier après la connexion
<link rel="stylesheet" type="text/css" href="style.css" media="all">
Copier après la connexion
导入js
script:src
Copier après la connexion
<script type="text/javascript" src=""></script>
Copier après la connexion

3.开始装逼之旅

开始之前先来熟知一下下面的这些语法:

  • E元素名(div、p);
  • E#id带Id的元素(div#content、p#intro、span#error);
  • E.class带class的的元素(div.header、p.error),id和class可以连着写,div#content.column
  • E>N子元素(div>p、div#footer>p>span)
  • E*N多项元素(ul#nav>li*5>a)
  • E+N多项元素E$*N带序号的元素
以上的语法够你用的了,光说不练嘴把戏,看代码吧!
Copier après la connexion

元素名最简单,其实就是为你创建一个该名称的标签,有的成双成对,有的就只能是单身狗,o(^▽^)o

div  或 input
Copier après la connexion
<div></div> 或 <input type="">
Copier après la connexion
创建带id的元素
div#divid
Copier après la connexion
<div id="divid"></div>
Copier après la connexion
创建带class的元素
div.divclass
Copier après la connexion
<div class="divclass"></div>
Copier après la connexion
带一个儿子
div.divclass>p
Copier après la connexion
<div class="divclass">    <p></p></div>
Copier après la connexion
带一个兄弟
div.divclass>p+span
Copier après la connexion
<div class="divclass">    <p></p>    <span></span></div>
Copier après la connexion
带多个儿子和多个兄弟
div.divclass>p*3+span*2
Copier après la connexion
<div class="divclass">    <p></p>    <p></p>    <p></p>    <span></span>    <span></span></div>
Copier après la connexion
给儿子们取名字和给兄弟不同称呼
div.divclass>p#son$*3+span.brother$*2
Copier après la connexion
<div class="divclass">    <p id="son1"></p>    <p id="son2"></p>    <p id="son3"></p>    <span class="brother1"></span>    <span class="brother2"></span></div>
Copier après la connexion

是不是很神奇,现在来给来个小小的栗子吃,我们用这种方式创建一个导航的简单架构:

div#header>img.logo+ul#nav>li*4>a
Copier après la connexion

见证奇迹的时刻

<div id="header">    <img src="" alt="" class="logo">    <ul id="nav">        <li><a href=""></a></li>        <li><a href=""></a></li>        <li><a href=""></a></li>        <li><a href=""></a></li>    </ul></div>
Copier après la connexion

他是怎么实现的呢?这些实现的主要是在一个叫 Zen Coding.js 的文件里面,快捷键方式也是里面决定的。

如果觉得没事的话,自己可以去看看!

细心的朋友应该发现了什么吧,不是说有快速开发CSS的方法么,怎么只有HTML的方法,哈哈,那个太多了!不过小编这边还是大概的和大家总结一下,想要更加详细的内容,可以看看上面提供的官方文档。

4.CSS登场

特殊单词的缩写,除下面外,其它的都用首写字母。
单词 缩写 单词 缩写
position pos float fl
compact cp clip cp
overflow ov marquee mq
zoom zoo table tb
box bx shadow sh
max ma min mi
border bd collapse cl
background bg break bk
background-size bgz avoid av
list-style lis content ct
counter co white wh
word wo emphasize em
smooth sm stretch st
resize rz cursor cur
page pg window wid
radius rz orphans orp

好像很多啊,不过这些能用到的也不是很多,不要紧张,最常用到的也就那几个标上粗体的。

这里为大家演示几个栗子:

pos:s          --->   position:static;fl:r           --->   float:right;ov:h           --->   overflow:hidden;bxz:bb         --->   box-sizing:border-box;bxsh:n         --->   box-shadow:none;whs:nw         --->   white-space:nowrap;cur:p          --->   cursor:pointer;bg:n           --->   background:none;... ...
Copier après la connexion

大家在看官方文档的时候,还会看到一种是用加号(+)的,这个主要是用来做后面有多个参数使用的,但是那也只是提示,不是让你跟着写上去用,如果你写上去了,那就变成这样子:

bxsh+           --->   <bxsh+></bxsh+>这是什么鬼????正确的应该是:bxsh            --->   box-shadow:;
Copier après la connexion

有前缀的要怎么写呢?

-webkit- 的缩写 w-moz- 的缩写 m

再来给栗子:

bdi:m           --->   -moz-border-image:url() 0 0 0 0 stretch stretch;bdi:w           --->   -webkit-border-image:url() 0 0 0 0 stretch stretch;
Copier après la connexion
好了,写的也差不多了。如果学到的话,就来点赞吧!^_^
Copier après la connexion
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.

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 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 ...

Comment implémenter la disposition adaptative de la position de l'axe y dans l'annotation Web? Comment implémenter la disposition adaptative de la position de l'axe y dans l'annotation Web? Apr 04, 2025 pm 11:30 PM

L'algorithme adaptatif de la position de l'axe y pour la fonction d'annotation Web Cet article explorera comment implémenter des fonctions d'annotation similaires aux documents de mots, en particulier comment gérer l'intervalle entre les annotations ...

Comment utiliser CSS3 et JavaScript pour réaliser l'effet de la diffusion et de l'agrandissement des images environnantes après avoir cliqué? Comment utiliser CSS3 et JavaScript pour réaliser l'effet de la diffusion et de l'agrandissement des images environnantes après avoir cliqué? Apr 05, 2025 am 06:15 AM

Pour obtenir l'effet de la diffusion et de l'élargissement des images environnantes après avoir cliqué sur l'image, de nombreuses conceptions Web doivent obtenir un effet interactif: cliquez sur une certaine image pour faire les environs ...

HTML, CSS et JavaScript: outils essentiels pour les développeurs Web HTML, CSS et JavaScript: outils essentiels pour les développeurs Web Apr 09, 2025 am 12:12 AM

HTML, CSS et JavaScript sont les trois piliers du développement Web. 1. HTML définit la structure de la page Web et utilise des balises telles que, etc. 2. CSS contrôle le style de page Web, en utilisant des sélecteurs et des attributs tels que la couleur, la taille de la police, etc. 3. JavaScript réalise les effets dynamiques et l'interaction, par la surveillance des événements et les opérations DOM.

See all articles