CSS Development Summary

Source: Internet
Author: User

I have been doing a lot of web development recently. I would like to summarize the CSS skills I have encountered:


1. compatibility issues with layer transparency

Most people are used to using the unique filter of IE to create a translucent Div layer. What should I do when I encounter other browsers? Each browser has its own transparent syntax. It is better to use the following method to make them compatible:


. Layer {<br/> position: absolute; <br/> width: 100px; <br/> Height: 100px; <br/> top: 0; <br/> left: 0; <br/> Z-index: 10; <br/> filter: alpha (opacity = 60);/* supports ie */<br/>-moz-opacity: 0.6;/* supports Firefox */<br/> opacity: 0.6;/* supports other browsers */<br/>}


2. Font Center

After defining a SPAN or label, the font is displayed at the top boundary by default. to center the font horizontally, use text-align: Center. However, to center the font vertically, you can only use line-height to set a value similar to the Span Height to center.


3. Width of span and label

Sometimes a SPAN or label is defined and the width: 200px is set in the style. However, they actually adapt the width according to the content in the style, in this case, you must add row-level settings to the style to specify its width (that is, add display: inline-block ;)


4. Image anti-leeching

For images placed in the IMG label, you can right-click and save them as images and copy them. If you do not want them to be stolen, you can set the images to the background-image attribute of a certain span, however, it also sacrifices some browsers to provide flexible and unique support for IMG labels.


5. HTML editor

I made an HTML editor by myself. There are three methods in which I prefer to use IFRAME and set its designMode = 'on'; To achieve editable effect. In fact, I replaced the selected style, many examples Use pastehtml replacement. I tried the Execcommand function provided by the document object itself to achieve the same effect using simple code (for example)


<IFRAME class = "htmleditor" id = "htmleditor" marginwidth = "0" marginheight = "0"> </iframe> </P> <p> <button onclick = "Format ('bold ', '')"> bold </button> </P> <p> <MCE: Script Type = "text/JavaScript"> <! -- <Br/> Function Format (what, OPT) {<br/> If (OPT = NULL) htmleditor.document.exe ccommand (what); <br/> else htmleditor.document.exe ccommand (what, "", OPT); </P> <p> htmleditor. focus (); <br/>}< br/> // --> </MCE: SCRIPT>

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.