HTML/CSS/Box Model/border bottom

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

Add bottom dotted green

 
<!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" xml:lang="en" lang="en">
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Anchors</title>
  <style type="text/css" media="screen">
  
  body {
    font-family: verdana, sans-serif;
    font-size: 12px;
    }
  
  div {
    margin-bottom: 50px;
    }  
  
  #divID a:link {
    color: green;
    text-decoration: none;
    border-bottom: 1px dotted green;
    }
  
  
  </style>
</head>
<body>

<div id="divID">
<p><a href="#oranges">About Oranges</a></p>

</body>
</html>



border-bottom: 1px solid #778

 

<!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 ul {
 padding: 3px 0; 
 margin-left: 0; 
 border-bottom: 1px solid #778; 
 font: bold 12px Verdana, sans-serif; 
}
</style>
</head>
<body>
   <div id="navsite">
   <h5>Site navigation:</h5>
   <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="" id="current">Speaking</a></li> 
    <li><a href="">Contact</a></li>
   </ul>
  </div>
</body>
</html>



border-bottom: 1px solid steelblue

 
<!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" xml:lang="en">
    <head>
        <title>text-align</title>
        <style rel="stylesheet" type="text/css">
body {
    font: 12px sans-serif;
}
h1 {
    font: 14px sans-serif;
    margin: 0;
    color: darkslateblue;
    border-bottom: 1px solid steelblue;
}
     
        </style>
    </head>
    <body>
        <h1>header</h1>
    </body>
</html>



border-bottom shortcut: 2px dashed black;

 
<!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>border-bottom shortcut: 2px dashed black;</title>
<style type="text/css">
h2 {
 border-bottom: 2px dashed black;
}
p {
 margin: 0;
 padding: 10px 0 0 0;
}
</style>
</head>
<body>
  <h2>This is a header</h2>
  <p>This is a test</p>
</body>
</html>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/Box_Model/border_bottom&oldid=5302»