01- Emmet

Emmet

Nesting >

Example

ul>li>a 🔁

Result

<ul> <li><a href=""></a></li> </ul>

Sibling +

Example

section+header+nav 🔁

Result

<section></section> <header></header> <nav></nav>

Repeat *

Example

ul>li*3 🔁

Result

<ul> <li></li> <li></li> <li></li> </ul>

Clases .

Example

div.contendor🔁

Result

<div class="contendor"></div>

ID #

Example

nav#menu🔁

Result

<nav id="menU"></nav>

Text {}

Example

div{Lorem Ipsum Dolor}🔁

Result

<div>Lorem Ipsum Dolor</div>

Custom Ahr []

Example

a[enlace]🔁

Result

<a href="www.google.com"></a>

Numbering $

Example

ul.li.num$*3🔁

Result

<ul class="li num1"></ul> <ul class="li num2"></ul> <ul class="li num3"></ul>

Invert numbs @

Example

ul>li.num$@-*3🔁

Result

<ul> <li class="num3"></li> <li class="num2"></li> <li class="num1"></li> </ul>

Base Numb @n

Example

ul>li.num$@3*4🔁

Result

<ul> <li class="num3"></li> <li class="num4"></li> <li class="num5"></li> <li class="num6"></li> </ul>

Leveling ^

Example

section>article>div^p🔁

Result

<section> <article> <div></div> </article> <p></p> </section>

Grouping ( )

Example

(header>nav)+(section>article)🔁

Result

<header> <nav></nav> </header> <section> <article></article> </section>

Dummy Text LOREM

Example

lorem🔁

Result

Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur doloremque, nam id libero ipsam quisquam cumque consequuntur similique eveniet tenetur iusto officia placeat aspernatur, atque odio est accusamus repudiandae nostrum.

RETO

header#header>nav.navbar.navbar-inverse>div. container>(div.navbar-header>(button [type="button"].navbar.navbar-toggle>(span. sr-only{Toggle navigation}+span.icon-bar*3) +a.navbar-brand[href="index.php"]>img [src="imgs/logo.png"])+(div.collapse>ul.nav. navbar-nav>(li>a[href="index.html"].link {Inicio}+li.active.link>a[href="login. html"].link{Ingresar}+li>a[href="registro. html"].link{Registrarse}+li>a [href="contacto.html"].link{Contacto})))

RESULTADO

codigo