Some css practical skills and have to pay attention to matters of personal summary:
1. Notes Notes: html in comments can not write:
<div> </ div> < -------- This is the wrong wording -------!>
<div> </ div> <-! That's right ======= written ======== ->
The wording, FF will ignore their following.
Remember 2.CSS comments after the / * and * / before a space, otherwise there will be problems in some languages, the correct wording:
Front #div {style} / * * Notes to space /
3. The easiest to distinguish the IE and FF HACK wording:
{#layer
padding-Top: 20px; / * defined in the FF * /
* Top-padding: 10px; / * * are defined in IEs /
}
Create a front-end learning qun438905713, most in the group are zero-based learners, we help each other, answer each other, and also to prepare a lot of learning materials, welcomed the zero-based junior partner to the exchange.
4. Empty div (not FF) is in the IE is the default height can be defined by:
div { witdh:100%; background:#9c0; ling-height:0}
Way to remove the default height
stereoscopic effect when the button is pressed 5.:
a: hover {position: relative; top: 1px; left: 1px} / * * must remember if the relative positioning /
6. Close the current page code:
<Div οnclick = "window.close ();"> Close the current page </ div>
7. The entire station dimmed codes (added style sheet):
html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}
8. Home Code:
<span οnclick="var strHref=window.location.href;this.style.behavior='url(#default#homepage)';this.setHomePage('');" style="CURSOR:hand">设为首页</span>
9. Favorite Code:
<Script Language = "the JavaScript">
function webjxcom ()
{window.external.AddFavorite ( '', 'wzsky.net');}
IF (the document.all) document.write ( '<A the href = "##" the onClick = "webjxcom ();" title = " the" wzsky.net "! to your favorites"> Favorite </a> ')
</ Script>
10. The method defined navigation between the vertical lines:
CSS part:
{.nav
width: 408px; / * The width of this width must press operator in good li * /
a float: right;
the display: inline;
overflow: hidden
}
.nav UL {
margin: 0;
padding: 0
}
.nav {li
a float: right;
width: 80px;
height: Auto;
text-align = left: Center;
padding: 0 10px;
border-right: 1px Solid # 444;
margin-right: -1px;
}
html part:
<div class="nav">
<ul>
<li><a href="show.htm">产品展示</a></li>
<li><a href="case.htm">成功案例</a></li>
<li><a href="service.htm">客户服务</a></li>
<li><a href="download.htm">下载中心</a></li>
</ul>
</div>
11. English underlined alignment (using the images align = "absmiddle"):
<img src="img.gif" align="absmiddle">中英文并排:<a href="/">中文 gollum</a>
BACKGROUND 12.li alternates Code:
ul {
list-style:none;
font-size:12px;
line-height:20px;
color:#666;
}
ul li {
background-color:expression(this.sourceIndex%2==0?'#EAF8FD':'#ffffff');
}
13. The use of precaution IE6 css reset password form and text of unequal length, add to the css reset:
input {
font-family:Arial, Helvetica, sans-serif;
}
When 14.FF margin invalid, the timely response to a write overflow parent div: hidden or overflow: auto; may be written in the child a div float: left; display: inline.
15. Stroke Text Effects:
<div style = "position: relative ; width: 200px; height: 25px; line-height: 25px; text-align: center; font-size: 14px; color: #fff; background: # 9c0;">
This is described side text <span style = "position: absolute ; left: -1px; top: -1px; color: # 444; width: 200px; height: 25px; display: block"> this character stroke is </ span>
</ div>
BACKGROUND fillet 16. The easiest way is rounded PS line, then table with adaptive
17. em to achieve the effect of a small triangle is defined by:
{*
Font-size: 14px; / * must wildcard font size * /
}
EM {
Run the display: Block;
font: 0/0 "Times New Roman"; / * upon his own fumble, only the most standard in Times New Roman * /
border: 7px solid; / * border larger value, the larger triangle * /
border-color: #fff #fff #fff # 444; / * by changing the color value, can produce different effects, their experiments * /
margin-Top: 5px
}
After addition of the above code in the style, the body with <em> </ em> effect can be obtained by a small triangle.
18. If the test was found in FF or dislocation layer below the top layer went, sorta reason is not clear float, adding that problems in the layer style:
clear:both
It can be.
When 10px storey below, the effect will occur under high 19.IE6 10px added, the simplest way is added to the layer in the pattern defined values:
font-size:0;
Flew to their colors
20. The split sections follow the layout 62%: 38% principle.
When the wide section 21. The text in the container section and continued truncated with an ellipsis character:
overflow:hidden;text-overflow:ellipsis;
With a two-piece, single-use problems. Invalid and looks at the FF, groping ..
22. In order to make the code look neat standards, do not forget to perform after writing code in DW: Command --- Apply source format:
23.display the line-block of HACK:
{.menu
the display: -moz-inline-Stack; / FF * Exclusive also be used -moz-inline-box defined * /
* the display: inline;
Zoom:. 1; / * this line and the line for activating IE6 / 7 the layout, to achieve similar effects * /
}
24. transparency filter usage:
{.navbg
filter: Alpha (Opacity = 40); / * * IEs /
-moz-Opacity: 0.4; / * * Moz + the FF /
Opacity: 0.4; / * CSS3 supported browser (FF 1.5 also supports) * /
}
25. A fixed column, a column adaptive methods
26. WEB standard, h1 can appear only once on the same page. Many, but ignored the use of a considerable number of people who know the concept of people.
27. The definition of the table border color is not an abbreviation, such as:
bordercolor = "# 3399cc"
can not be written as:
bordercolor="#39c"
28. Row Height define the most convenient way to join in the body:
line-height: 1.5; / * 1.5 can not have the unit, meaning 1.5 times the font size can be customized * /
If you do not want some text to the row height as a standard, according to the CSS priority redefined.
28. When the image does not exist, it can be used instead of a general picture show:
<img src="image.gif" οnerrοr="this.src='noimage.gif'" />
Create a front-end learning qun438905713, most in the group are zero-based learners, we help each other, answer each other, and also to prepare a lot of learning materials, welcomed the zero-based junior partner to the exchange.
29. A stacking order of objects retrieved or set:
z-index: auto | number
This property is only applied to the attribute value relative position of the object or an absolute see the DEMO.
30. A make one layer vertically centered in the browser:
div {
position:absolute;
top:50%;
left:50%;
margin:-100px 0 0 -100px;
width:200px;
height:200px;
border:1px solid red;
}
31. How to make three horizontal arrangement
div {
float:left;
margin:1px;
width:200px;
height:200px;
background:orange
}
32. Global CSS was added the following code, the need to add a closed div class = "clearfix" can be, tested.
/* Clear Fix */
.clearfix:after
{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix
{
display:inline-block;
}
/* Hide from IE Mac */
.clearfix {display:block;}
/* End hide from IE Mac */
/* end of clearfix */
33. For a label to the inner content plus the style, you need to set display: block (common in navigation label).
