HTML/CSS/CSS Attributes and Javascript Style Properties/display

Материал из Web эксперт
Перейти к: навигация, поиск

display: block

 
<?xml version="1.0" encoding="iso-8859-1"?>
<!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>
<title>CSS Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style rel="stylesheet" type="text/css">
code {
  display: block;
}
</style>
</head>
<body>
<p>the <code>write()</code> <code>onload</code> </p>
</body>
</html>



"display" Example

    
<html>
<head>
<style>
.style1 { 
    display:none 
}
</style>
<script language="JavaScript">
function function1() {
    item1.style.display="";
    item2.style.display="none";
    item3.style.display="none";
    }
function function2() {
    item1.style.display="none";
    item2.style.display="";
    item3.style.display="none";
    }
function function3() {
    item1.style.display="none";
    item2.style.display="none";
    item3.style.display="";
    } 
function function5() {
    item1.style.display="";
    item2.style.display="";
    item3.style.display="";
    }
function function6() {
    item1_1.style.visibility="visible";
    item2_1.style.visibility="visible";
    item3_1.style.visibility="visible";
    }
</script>
</head>
<body>
<table cellspacing=5 cellpadding=5 border=2>
    <tr>
       <th>header 1</th>
       <th>header 2</th>
       <th>Header 3</th>
    </tr>   
    <tr id="item1">
       <td>Cars</td>
       <td id="item1_1">item 1</td>
       <td>item 2</td>
    </tr>
    <tr id="item2">
       <td>item 3</td>
       <td id="item2_1">item 4</td>
       <td>High</td>
    </tr>
    <tr id="item3">
       <td>item 5</td>
       <td id="item3_1">item 6</td>
       <td>Slow</td>
    </tr>
</table>
<p>
<input type=button style="width:175" onclick="function1()" value="Show some ">
<input type=button style="width:175" onclick="function2()" value="Show some other">
<input type=button style="width:175" onclick="function3()" value="Show some other else">
<input type=button style="width:175" onclick="function6();function5()" value="Reset">
<ul>
    <li onclick="className="style1"">Item 1 ? Double-click me</li>
    <li onclick="className="style1"">Item 2</li>
    <li onclick="className="style1"">Item 3</li>
    <li onclick="className="style1"">Item 4</li>
    <li onclick="className="style1"">Item 5</li>
</ul>
</body>
</html>



display: inline

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/div/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <title>font-size</title>
        <style type="text/css">
            body {
                font-family: "Rockwell";
            }
            h1, h2, h3, h4, h5, h6 {
              display: inline;
              margin: 0;
              font-weight: normal;
            }        
        </style>
    </head>
    <body>
         <div>
        <h1>&lt;h1&gt;</h1>
         <span style="font-size: 24pt;">
             font-size: 24pt;
           </span>
         </div>
    </body>
</html>



display: none

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#navsite p {
 display: none;
}
</style>
</head>
<body>
  <div id="navsite">
   <p>Site navigation:</p>
   <ul>
    <li><a href="">Home</a></li>
    <li><a href="">About</a></li> 
    <li><a href="">Archives</a></li>
    <li><a href="">Writing</a></li>
    <li><a href="">Speaking</a></li>
    <li><a href="">Contact</a></li>
   </ul>
  </div>
</body>
</html>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/CSS_Attributes_and_Javascript_Style_Properties/display&oldid=4961»