Eight tips for sharing CSS

零下一度
Release: 2017-05-13 14:15:04
Original
1484 people have browsed it

CSS has many functions. Here, the editor will share with you eight tips in CSS.

1. A method that is compatible with all browsers to display translucent effects

<div class="transparent"></div>
.transparent {
    filter: progid:DXImageTrans
for
m.Microsoft.Alpha(opacity=50);
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
    opacity: .5;
    
width
: 200px;
    
height
: 200px;
    
margin
: 0 auto;
    
background
: url("../img/pic.jpg");
}
Copy after login

2. The role of _height, _width

Use _height to solve the problem of float For the problem that the div is not closed, you can remove the _height attribute to achieve the effect.

<div id="wrap">
    <div class="column_
left
">
        <h1>Float left</h1>
    </div>
    <div class="column_
right
">
        <h1>Float right</h1>
    </div>
</div>
#wrap {
    b
ord
er: 6px solid #ccc;
    
overflow
: auto;
    _height: 1%;
}
.column_left {
    width: 20%;
    
padding
: 10px;
    float: left;
}
.column_right {
    float: right;
    width: 75%;
    padding: 10px;
    border-left: 6px solid #ccc;
}
Copy after login

3. Use min-height min-width to solve the fixed height problem of div or span

Sometimes we need to set a fixed height of an element, but under firefox or opera only Set the height. When the content is not enough, the expected effect cannot be achieved. At this time, we can use min-height

4. Use the media directive to introduce two types of css: the printing version of css and the screen display css.

<link type="text/css" rel="stylesheet" href="url" media="screen" charset="utf-8">
<link type="text/css" rel="stylesheet" href="url" media="print" charset="utf-8">
Copy after login

5. Use .fixTable{ table-layout: fixed; overflow:hidden; } and add the nobr tag to hide

6. You can use page-break-after, page-break- before controls paging during printing

7. The function of *html{} is to be compatible with IE versions below 6.0. When selecting html nodes, other browsers consider the html tag to be the root node of the document. IE versions below ie6 think that there is a root node above the html tag

8. Use text-indent to display pictures and hide text

h1 {    background: url(../img/pic.jpg) no-repeat;    width: 200px;    height: 200px;    text-indent: -2000px}
Copy after login

[Related recommendations]

1. Special recommendation: "php Programmer Toolbox" V0.1 version download

2. Freecssonlinevideotutorial

3. php.cnDugujiujian (2)-css video tutorial

The above is the detailed content of Eight tips for sharing CSS. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template