国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

Home Web Front-end CSS Tutorial Zen Coding css, replace html abbreviation with Daguan and quickly write html and css_Experience exchange

Zen Coding css, replace html abbreviation with Daguan and quickly write html and css_Experience exchange

May 16, 2016 pm 12:04 PM
css html

Before reading this article, first read the website article carefully. Zen Coding implementation of quickly writing HTML/CSS code

Copy code The code is as follows:

E
Element name (div, p);
E#id
Element using id (div#content, p #intro, span#error);
E.class
Use class elements (div.header, p.error.critial). You can also use class in combination with idID: div#content.column.width;
E>N
Child elements (div>p, div#footer>p>span);
E N
Sibling elements (h1 p, div#header div#content div#footer);
E*N
Element multiplication (ul#nav>li*5>a);
E$*N
Item number (ul#nav>li.item-$*5);

zen coding replaces 'api'.

zen coding is an editor plug-in written by Russians (supports most popular editors today). Its installation is also very simple. Just install the plug-in, and then Just copy the js file in the project. When the project is published, the js file can be deleted. Its main task is to liberate front-end engineers from the tedious HTML and CSS structure codes, but there are many replacement abbreviations that need to be memorized. Based on the principle that it is better to watch it ten times than to do it manually, I can only memorize it while using it.

The css replacement function is also very good. However, there are also many redundant and useless substitutions in it. I am using it while correcting the substitutions that the original author defined that are unreasonable in actual production.

The zen_settings file will be sent up later, and the replacement code will be briefly explained.

It was definitely a bit unfamiliar at first, and I had to think about this structure while writing. But after getting used to it, I feel it is very convenient. I can use the word "speed" to summarize my mood when writing.

As for other experiences and experiences, I will slowly share them after using them for reference.

Zen features a profound imitation of CSS selectors. The jquery selector is also learned from the css selector, so people who are familiar with these two technologies will get started quickly. For additional details, please refer to the source website.

The html tag replacement learning--the source code is in its package zen-settings.js. I have listed most of the commonly used ones, and some less commonly used ones are not listed. Refer to the source file. The previous line is Manual input, the next line is the zen output after pressing the shortcut key (alt E), the environment is Aptana 2.0.2:
no longer exists, and the file cannot be downloaded.
This file was last updated in 2009. The main contents of this update are:

1. Add units after width is equal to the value.

2. Make commonly used abbreviations more user-friendly.

3. There are also several new abbreviations added.

In the past two days, we have done crazy experiments and improvements on the css replacement function. We have simplified the replacements that are used too frequently. For those that are difficult to remember, we use stress to distinguish them. This change also Change the extended shortcut key to alt s, because I usually use these two keys to send QQ messages. I am more accustomed to ctlr enter, left hand ctrl and right hand enter. It is too troublesome to combine the right hand ctrl enter and it takes too long to complete, so I have to finish it with the left hand. Let me share my experience as follows. The first letter is the original element, the next line is the element after zen expansion output, and so on:
In the original zen, the css attributes and attribute values ????take the first letter colon and then the attribute value. This is how I write it. Simplified. Commonly used attributes are abbreviated. For example
Copy code The code is as follows:

The original p is padding, and the original zen is pos. It feels too troublesome, so it is reduced to pp, and then its attribute value.
ppa
position:absolute;

ppr
position:relative;

There are similar ones:
fl
float:left;
fr
float:right;
cb
clear:both;
db
display:block;
di
display:inline;
dib
display: inline-block;
oh
overflow:hidden;

Other css classes:
Copy code The code is as follows: div>

m
margin:;
mt
margin-top:;
mr
margin-right:; ml
margin-left:;
mb
margin-bottom:;

padding:;
pt, pr, pb, pl are the same as margin
bg
background:url() 0 0 no-repeat;
bg:n
background:none;
bg:x
background:url() 0 0 repeat-x;
bg: y
background:url() 0 0 repeat-y;
bg:ie
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='x.png');

border :1px solid #000;
bd:n
border:none;
bdc
border-color:#000;
c
color:#000;
d display:block;
f
font-size:12px;
h:;
height:;
w
width:;
d:i
display:inline;
d:b
display:block;
fl
float:left;
fr
float:right;
cl
clear:both;
c:l
clear:left;
c:r
clear:right;
c:n
clear:none;
t
top:; bt
bottom:;
r
right:;
l
left:;
r
right:;
z
z-index: ;
v
visibility:hidden;
o:h
overflow:hidden;
zoo
zoom:1;
m:a
margin:0 auto;
ol
outline:;
q
quotes:;
tc
text-align:center;
tl
text-align:left;
tr
text-align:right;
td
text-decoration:none;
te
text-emphasis:;
to:n
text-outline:none; whs:n
white-space:normal;
whs:nw
white-space:nowrap;
wob:k
word-break:keep-all;
fz
font-size:12px;
fw
font-weight:bold;
ff
font-family:;
op
opacity:;
c:p
cursor:pointer;

html class:
Comprehensive class: div#a div#b div.c-$*5 li*10
Copy code The code is as follows:



















  • div#width>p#a>p#a>p*10>p#a
    復(fù)制代碼 代碼如下:














    ul#a>li.c-$*5 li.0>a.title
    復(fù)制代碼 代碼如下:










    html:xt
    復(fù)制代碼 代碼如下:









    aaa



    更多的
    復(fù)制代碼 代碼如下:

    cc:ie6

    cc:ie

    cc:noie

    aa


    link:css

    a:mail

    meta:utf

    link

    style

    script

    script:src

    img

    iframe

    embed

    object

    param

    map

    area

    form

    form:get

    form:post

    label

    input

    input:hidden

    input:h

    input:text

    input:t

    input:search

    input:email

    input:url

    input:p

    input:date

    input:datetime

    input:month

    input:week

    input:time

    input:number

    input:color

    input:checkbox

    input:c

    input:radio

    input:r

    input:f

    input:s

    input:i

    input:reset

    input:button

    input:b

    select

    option

    textarea

    menu:c

    bq

    cap

    optg

    opt

    fst

    leg

    sect

    tarea

    hdr


    ol



    ul



    dl




    map

    table





    tr



    select
    optgroup

    optg
    empty


    Commonly used shortcut keys are modified to:

    Wrap with Abbreviation: alt x

    Toggle Comment : alt 1

    Match pair:alt D

    Go to Matching Pair:alt s

    In addition, the reasons for recommending the Aptana tool are as follows:

    1. The shortcut key support is very complete.

    For example, the more commonly used deletion of a single line: ctrl D;

    Formatting: ctrl shift F;

    Copying a single line: ctrl alt pageup

    Moving a single line: alt pageup

    2. js prompt is relatively powerful among the tools currently accepted by the front desk. It also has another feature, which is that it can be combined with firebug in Firefox to track the program execution process with breakpoints and view variables in real time. The value is very good.

    3. The most powerful reason for the current recommendation is that it can be combined with zen coding to make your work as fast as lightning.

    Its disadvantages:

    1. Because the tool is relatively powerful, it requires a lot of memory consumption, but with the current hardware price, 2G of memory is basically acceptable.

    2. Although the latest version 2.0.2 is a pure green version, you must install sun's jdk before installation. This thing is a headache and requires a lot of configuration. The front desk staff must have looked confused.

    3. The built-in browsing method is relatively slow, purely static page, why is it so complicated, just browse it locally.

    Pay attention to copyright, please indicate the source when reprinting http://www.cnblogs.com/jikey/archive/2009/12/19/1628002.html.

    Statement of this Website
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

    Hot AI Tools

    Undress AI Tool

    Undress AI Tool

    Undress images for free

    Undresser.AI Undress

    Undresser.AI Undress

    AI-powered app for creating realistic nude photos

    AI Clothes Remover

    AI Clothes Remover

    Online AI tool for removing clothes from photos.

    Clothoff.io

    Clothoff.io

    AI clothes remover

    Video Face Swap

    Video Face Swap

    Swap faces in any video effortlessly with our completely free AI face swap tool!

    Hot Tools

    Notepad++7.3.1

    Notepad++7.3.1

    Easy-to-use and free code editor

    SublimeText3 Chinese version

    SublimeText3 Chinese version

    Chinese version, very easy to use

    Zend Studio 13.0.1

    Zend Studio 13.0.1

    Powerful PHP integrated development environment

    Dreamweaver CS6

    Dreamweaver CS6

    Visual web development tools

    SublimeText3 Mac version

    SublimeText3 Mac version

    God-level code editing software (SublimeText3)

    What are the essential HTML elements for structuring a webpage? What are the essential HTML elements for structuring a webpage? Jul 03, 2025 am 02:34 AM

    The web page structure needs to be supported by core HTML elements. 1. The overall structure of the page is composed of , , which is the root element, which stores meta information and displays the content; 2. The content organization relies on title (-), paragraph () and block tags (such as ,) to improve organizational structure and SEO; 3. Navigation is implemented through and implemented, commonly used organizations are linked and supplemented with aria-current attribute to enhance accessibility; 4. Form interaction involves , , and , to ensure the complete user input and submission functions. Proper use of these elements can improve page clarity, maintenance and search engine optimization.

    CSS tutorial for creating loading spinners and animations CSS tutorial for creating loading spinners and animations Jul 07, 2025 am 12:07 AM

    There are three ways to create a CSS loading rotator: 1. Use the basic rotator of borders to achieve simple animation through HTML and CSS; 2. Use a custom rotator of multiple points to achieve the jump effect through different delay times; 3. Add a rotator in the button and switch classes through JavaScript to display the loading status. Each approach emphasizes the importance of design details such as color, size, accessibility and performance optimization to enhance the user experience.

    Implementing client-side form validation using HTML attributes. Implementing client-side form validation using HTML attributes. Jul 03, 2025 am 02:31 AM

    Client-sideformvalidationcanbedonewithoutJavaScriptbyusingHTMLattributes.1)Userequiredtoenforcemandatoryfields.2)ValidateemailsandURLswithtypeattributeslikeemailorurl,orusepatternwithregexforcustomformats.3)Limitvaluesusingmin,max,minlength,andmaxlen

    How to group options within a select dropdown using html? How to group options within a select dropdown using html? Jul 04, 2025 am 03:16 AM

    Use tags in HTML to group options in the drop-down menu. The specific method is to wrap a group of elements and define the group name through the label attribute, such as: 1. Contains options such as apples, bananas, oranges, etc.; 2. Contains options such as carrots, broccoli, etc.; 3. Each is an independent group, and the options within the group are automatically indented. Notes include: ① No nesting is supported; ② The entire group can be disabled through the disabled attribute; ③ The style is restricted and needs to be beautified in combination with CSS or third-party libraries; plug-ins such as Select2 can be used to enhance functions.

    Implementing Clickable Buttons Using the HTML button Element Implementing Clickable Buttons Using the HTML button Element Jul 07, 2025 am 02:31 AM

    To use HTML button elements to achieve clickable buttons, you must first master its basic usage and common precautions. 1. Create buttons with tags and define behaviors through type attributes (such as button, submit, reset), which is submitted by default; 2. Add interactive functions through JavaScript, which can be written inline or bind event listeners through ID to improve maintenance; 3. Use CSS to customize styles, including background color, border, rounded corners and hover/active status effects to enhance user experience; 4. Pay attention to common problems: make sure that the disabled attribute is not enabled, JS events are correctly bound, layout occlusion, and use the help of developer tools to troubleshoot exceptions. Master this

    JavaScript time object, someone builds an eactexe, faster website on Google Chrome, etc. JavaScript time object, someone builds an eactexe, faster website on Google Chrome, etc. Jul 08, 2025 pm 02:27 PM

    Hello, JavaScript developers! Welcome to this week's JavaScript news! This week we will focus on: Oracle's trademark dispute with Deno, new JavaScript time objects are supported by browsers, Google Chrome updates, and some powerful developer tools. Let's get started! Oracle's trademark dispute with Deno Oracle's attempt to register a "JavaScript" trademark has caused controversy. Ryan Dahl, the creator of Node.js and Deno, has filed a petition to cancel the trademark, and he believes that JavaScript is an open standard and should not be used by Oracle

    What is CSS and what does it stand for? What is CSS and what does it stand for? Jul 03, 2025 am 01:48 AM

    CSS,orCascadingStyleSheets,isthepartofwebdevelopmentthatcontrolsawebpage’svisualappearance,includingcolors,fonts,spacing,andlayout.Theterm“cascading”referstohowstylesareprioritized;forexample,inlinestylesoverrideexternalstyles,andspecificselectorslik

    How to embed content from another site using the html iframe tag? How to embed content from another site using the html iframe tag? Jul 04, 2025 am 03:17 AM

    Use tags to embed other website content into your own web page. The basic syntax is:, you can add width, height, and style="border:none;" to control the appearance; in order to achieve responsive layout, you can set the size through percentage or use containers to combine padding and absolute positioning to maintain the aspect ratio, while paying attention to cross-domain restrictions, loading performance, SEO impact, and security policies. Common uses include embedding maps, third-party forms, social media content and internal system integration.

    See all articles