Practical code collection and CSS for creating webpages

Source: Internet
Author: User

Web pages are very practical.CodeSet

 

Controls the display and hiding of horizontal and vertical scroll bars?
<Body style = "overflow-Y: hidden"> remove the X axis.
<Body style = "overflow-X: hidden"> remove the Y axis.
<Body scroll = "no"> hide
Table color change
<TD onmouseover = "This. style. backgroundcolor = '# ffff '"
Onmouseout = "This. style. backgroundcolor = ''"
Style = "cursor: Hand">

Prohibit copying, drag and select
<Body ondragstart = Window. event. returnvalue = false oncontextmenu = Window. event. returnvalue = false onselectstart = event. returnvalue = false>
IFRAME adaptive height
<IFRAME name = "pindex" src = "index. ASP "frameborder = false scrolling =" Auto "width =" 100% "Height =" 100% "frameborder = No onload =" document.allpolic'pindex').style.height?pindex.doc ument. body. scrollheight "> </iframe>

Change to your own icon in front of the IE Address Bar & your icon can be displayed in favorites
<LINK rel = "shortcut icon" href = "favicon. ICO">
<LINK rel = "bookmark" href = "favicon. ICO">

Font size scaling
More and more people are making a bubble for a long time, and the penetration rate of glasses is getting higher and higher, which makes the text bigger and clearer to more users.
<SCRIPT type = "text/JavaScript">
Function dozoom (size)
{Document. getelementbyid ('zoom '). style. fontsize = size + 'px ';}
</SCRIPT>
<Span id = "zoom"> text to be specified </span>
<A href = "javascript: dozoom (16)"> large </a> <a href = "javascript: dozoom (14) "> medium </a> <a href =" javascript: dozoom (12) "> small </a>

How to block Div with select
Add the following code to the DIV and adjust it as needed.
<IFRAME src = "javascript: false" scrolling = "no" frameborder = "0" style = "Z-index:-1; position: absolute; top: 5px; left: 2px; width: 168; Height: 100px; ">
</Iframe>
IFRAME (embedded frame) Adaptive height
The entered embedded address must be on the same site as the current page. Otherwise, the system will prompt "Access Denied !". You have permission for cross-Origin references. For more information, see.
<IFRAME name = "Guestbook" src = "gbook/index. ASP "scrolling = no width =" 100% "Height =" 100% "frameborder = No onload =" document.all+'guestbook').style.height#guestbook.doc ument. body. scrollheight "> </iframe>

New jump menu window
<Select name = "select" onchange = "window. Open (this. Options [This. selectedindex]. Value)">
<Option value = "http://www.microsoft.com/ie"> Internet Explorer </option>
<Option value = "http://www.microsoft.com"> Microsoft home </option>
<Option value = "http://msdn.microsoft.com"> Developer Network </option>
</SELECT>

FlashTransparent options
<Param name = "wmode" value = "Transparent">

Add to favorites and set as Homepage
Add to favorites:
<A href = "javascript: window. External. AddFavorite ('HTTP: // link', 'description');"> Add to favorites </a>
Set as homepage:
<A href = # onclick = This. style. behavior = 'url (# default # homepage) '; this. setHomePage ('HTTP: // link');> set as homepage </a>

Record and display the last modification time of the webpage
<Script language = JavaScript>
Document. Write ("Last Update time:" + document. lastmodified + "")
</SCRIPT>

Holiday countdown
<Script language = "JavaScript">
VaR TimeDate = new date ("October 1,2002 ");
VaR times = "National Day ";
VaR now = new date ();
VaR date = TimeDate. gettime ()-Now. gettime ();
VaR time = math. Floor (Date/(1000*60*60*24 ));
If (Time> = 0)
Document. Write ("now" + times + "and:" + time + "day ")
</SCRIPT>

Add to head
Disable caching
<Meta http-equiv = "expires" content = "0">
<Meta http-equiv = "cache-control" content = "no-Cache">
<Meta http-equiv = "Pragma" content = "no-Cache">
Make the background of documents in the IFRAME framework transparent
<IFRAME src = "about: <body style = 'background: transparent'>" allowtransparency> </iframe>

Maximize when a window is opened
<Script language = "JavaScript">
<! -- Begin
Self. moveTo (0, 0)
Self. resizeTo (screen. availwidth, screen. availheight)
// End -->
</SCRIPT>

Add background music
<Bgsound src = "mid/windblue [1]. Mid" loop = "-1"> only applicable to IE
<Embed src = "music. Mid" auto_old = "true" loop = "true" hidden = "true"> applicable to both Netscape and IE

Scroll
<Marquee direction = up Height = 146 onmouseout = start () onmouseover = stop () scrollamount = 2> scroll Information
</Marquee>

When you click an empty link, the page is often reset to the header.
The Code "javascript: void (null)" replaces the original "#" mark Reprinted statement: This article from http://blog.sina.com.cn/s/blog_4b441077010006op.html=========================================================================

25 tips and tips for making CSS webpages

1. UL labels have padding values by default in Mozilla, while only margin has values in IE.

2. The same class selector can be repeated in a document, but the ID selector can only appear once. CSS definition is performed for a label using both Class and ID, if the definition is repeated, the definition of the ID selector is valid because the weight of the ID is greater than that of the class.

3. A stupid way to adjust compatibility (ie and Mozilla:
A beginner may encounter this situation: it is normal to set the attribute of the same tag to a for display in IE, and B for display in Mozilla, or two for display.
Temporary solution:Selector {property name: B! Important; attribute name:}

4. If some spacing is required between a group of labels to be nested, leave it to the margin attribute of the label located inside, rather than defining the padding of the label located outside.

5. We recommend that you use the icon before the Li label.Background-ImageInstead of list-style-image.

6. ie cannot tell the differences between the inheritance relationship and the parent-child relationship. All are inheritance relationships.

7. When adding a selector to your tag, do not forget to add comments to the selector in CSS. When you modify your CSS later, you will know why.

8. If you set a deep background image and a bright text effect for a label. We recommend that you set a deep background color for your tag at this time.

 

9. Pay attention to the order of the four states of the link:Link visited hover active

10. Use background for images unrelated to content

11. Defining colors can be abbreviated# 8899ff = # 89f

12. Table performs better in some aspects than other labels. Use it where column alignment is required.

13. <SCRIPT> the language attribute does not exist. It should be written as follows:
<SCRIPT type = "text/JavaScript">

14. The title is the title, and the text of the title is the text of the title. Sometimes the title does not need to display text, so:

15. Perfect single-pixel external box table (tests can be performed in ie5, IE6, IE7, and ff1.0.4)
Table {border-collapse: collapse ;}
TD {border: #000 solid 1px ;}

16. The negative value of margin can be used for relative positioning when the label is absolutely positioned. When the page is centered, the left: xxpx attribute is not suitable for the layer with absolute positioning. Place this layer next to a tag to be located, and then use the negative value of margin as a good method.

17. When absolute positioning is performed, you can use the margin value to locate the position relative to the position of the window. This is different from the top, left, and other attributes. The advantage of absolute positioning is that it allows other elements to ignore its existence.

18. If the text is too long, the excessive text will be displayed as ellipsis: ie5, FF is invalid, but can be hidden. IE6 is valid.
<Div style = "width: 120px; Height: 50px; Border: 1px solid blue; overflow: hidden; text-overflow: ellipsis">
<Nobr> for example, a row of text is long and cannot be displayed in a table. </nobr>

19. In IE, you can change the comment:
<! -[If! IE]> put your commentary in here... <! [Endif]->

20. How to Use CSS to call external Fonts
Syntax:
@ Font-face {font-family: Name; SRC: URL (URL); srules}Valid value:
Name: font name. Any possible font-family attribute values
URL: Specifies the opentype font file with an absolute or relative URL.
Srules: style sheet Definition

21. How to vertically center the text in a text box in a form?
If the Row Height and height groups are ineffective in FF, you can define the upper and lower whitelists to achieve the desired effect.

22. Notes for defining the tag:
When we define a {color: red;}, it represents the four state styles of A. If we want to define the State put by a mouse at this time, we only need to define: the other three States are the styles defined in.
When defining only one A: Link, remember to define the other three States!

23. Not all styles must be abbreviated as follows:
When P {padding: 1px 2px 3px 4px} is defined in the style sheet, a style is added in the subsequent project to add 5 PX and 6 PX. We do not have to write P. style1 {padding: 5px 6px 3px 4px }. Can be writtenP. style1 {padding-top: 5px; padding-Right: 6px ;},You may feel that writing like this is not as good as it was before, but you never thought about it. Your style is defined repeatedly in your writing, in addition, you do not need to find the value of the original bottom and left fill! If the previous style P changes later, the style of P. style1 you define will also change.

24. The larger the website, the more CSS styles it has. make full preparations and planning before you start, including naming rules. Page block division, internal Style Classification, and so on.

25. Several Common CSS styles:
1) Align the two ends of the text:Text-align: justify; text-justify: Inter-ideograph;

2) fixed width Chinese Character truncation: overflow: hidden; text-overflow: ellipsis; white-space: nowrap .) (Ie5 or above) FF cannot. It only hides.

3) fixed-width Chinese character (Word) lines:Table-layout: fixed; Word-break: Break-all;(Ie5 or above) FF cannot.

4) <acronym Title = "Enter the text to be prompted" style = "cursor: help;"> text </acronym> move the cursor over the text to see the effect. This effect can be seen on many foreign websites, with few in China.

5) set the image to translucent:. Halfalpha {background-color: #000000; filter: alpha (opacity = 50 )}The test passed in IE6 and ie5, and FF failed. This is because the style is private to IE;

6) Flash transparency: Select SWF, open the original code window, and enter<Param name = "wmode" value = "Transparent">The above is the code for IE.
Similar parameters are added to the <embed> label for Firefox.Wmode = "transparent"

7) When you place your mouse over an image for a webpage, the image will become brighter. You can use the image replacement technique or the following filter:
. Pictures IMG {
Filter: alpha (opacity = 45 );}
. Pictures A: hover IMG {
Filter: alpha (opacity = 90 );}

 

Reprinted statement: This article from http://hi.baidu.com/shujin2001/blog/item/75342b11179e747dcb80c43c.html=========================================================================

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.