Basic knowledge of HTML. Detailed introduction to css style sheets and style attributes-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

Basic knowledge of HTML. Detailed introduction to css style sheets and style attributes

php中世界最好的语言

Jan 22, 2018 am 10:43 AM

html basic knowledge

This time I will bring you the basic knowledge of HTML. A detailed introduction to css style sheets and style attributes. What are the precautions for using css style sheets and style attributes? The following are Let’s take a look at practical cases.

position: fixed

Lock position (position relative to the browser), such as the pop-up window in the lower right corner of some websites.

2. Position: absolute

Absolute position:

1. The outer layer does not have position: absolute (or relative); then p is positioned relative to the browser, as shown in the figure below b (50 pixels from the right border of the browser and 20 pixels from the bottom border).

2. The outer layer has position: absolute (or relative); then p is positioned relative to the outer border, as shown in the figure below (50 pixels from the right border of d, 20 pixels from the lower border of d) .

3. Position: relative

Relative position:

As shown below, it is fixed relative to a certain position of p that contains this p. If the outer layer does not contain it, the relative position is fixed relative to the browser.

4. Layering (

z-index)

Layering in the z-axis direction can be understood as dividing into a pile of paper. The higher the number of layers, the higher it is.

In the relative example above, we see that aa covers a. This is because the display level of the code written later is higher. So how can a cover aa without changing the code order? . As follows:

5. Float: left, right

There is no need to specify the position (left, top) for Left and right, it is directly relative to the browser. If the outer is wrapped, the upper left or upper right of the position excluding one line relative to the outer p is displayed.

Additional: 1.

overflow：hidden；    //超出部分隐藏；scroll，显示出滚动条；
<p >
</p>   //截断流

Copy after login

2. Cursor: pointer The shape when the mouse points to it;

3. Translucent effect:

    <p class="box">透明区域<p>
             在样式表中的代码为：
             .box
             {
             opacity:0.5; -moz-opacity:0.5 ; filter:alpha(opacity=50)
             }

Copy after login

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>无标题文档</title>  
<style type="text/css">  
.a   
{   
    border:5px solid blue;   
    width:1000px;   
    height:100px;   
    margin:10px;   
    left:150px;   
    top:80px;   
    position:absolute;}   
.b   
{   
    border:5px solid blue;   
    width:240px;   
    height:200px;   
    margin:10px;   
    left:150px;   
    top:200px;   
    position:absolute;}   
.c   
{   
    border:5px solid blue;   
    width:740px;   
    height:300px;   
    margin:10px;   
    left:410px;   
    top:200px;   
    position:absolute;}   
.d   
{   
    border:5px solid blue;   
    width:740px;   
    height:200px;   
    margin:10px;   
    left:410px;   
    top:520px;   
    position:absolute;}   
.e   
{   
    border:5px solid blue;   
    width:240px;   
    height:1500px;   
    margin:10px;   
    left:150px;   
    top:420px;   
    position:absolute;}   
.f   
{   
    border:5px solid blue;   
    width:240px;   
    height:150px;   
    margin:10px;   
    left:150px;   
    top:1940px;   
    position:absolute;}   
.g   
{   
    border:5px solid blue;   
    width:740px;   
    height:1350px;   
    margin:10px;   
    left:410px;   
    top:740px;   
    position:absolute;}       
.h   
{   
    border:5px solid blue;   
    width:1000px;   
    height:200px;   
    margin:10px;   
    left:150px;   
    top:2110px;   
    position:absolute;}   
.i   
{   
    border:5px solid blue;   
    width:1000px;   
    height:200px;   
    margin:10px;   
    left:150px;   
    top:2330px;   
    position:absolute;}   
</style>  
</head>  
  
<body bgcolor="#F0F0F0">  
<p class="a">a</p>  
<p class="b">b</p>  
<p class="c">c</p>  
<p class="d">d</p>  
<p class="e">e</p>  
<p class="f">f</p>  
<p class="g">g</p>  
<p class="h">h</p>  
<p class="i">i</p>  
</body>  
</html>

Copy after login

Believe it After reading these cases, you have mastered the methods. For more exciting information, please pay attention to other related articles on the PHP Chinese website!