HTML/CSS/CSS Attributes and Javascript Style Properties/content section

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

Content background

   <source lang="html4strict">

<!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" title="text/css"> body { 

   padding: 0;
   margin: 0;
   background: #8b8b8b;

} p { margin-top: 0; }

  1. content {
   background: #ffffff;
   width: 500px;
   margin: 0;
   padding: 10px;

} </style> </head> <body>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec mattis velit id dolor laoreet tempor. Nam nonummy rhoncus urna. Duis fermentum, mauris eget mollis vulputate, tortor sem pharetra arcu, sed nonummy nisl est et eros. In augue nisl, iaculis vel, tincidunt in, ullamcorper vitae, mauris. Suspendisse venenatis nisl varius felis. In commodo purus vel neque.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec mattis velit id dolor laoreet tempor. Nam nonummy rhoncus urna. Duis fermentum, mauris eget mollis vulputate, tortor sem pharetra arcu, sed nonummy nisl est et eros. In augue nisl, iaculis vel, tincidunt in, ullamcorper vitae, mauris. Suspendisse venenatis nisl varius felis. In commodo purus vel neque.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec mattis velit id dolor laoreet tempor. Nam nonummy rhoncus urna. Duis fermentum, mauris eget mollis vulputate, tortor sem pharetra arcu, sed nonummy nisl est et eros. In augue nisl, iaculis vel, tincidunt in, ullamcorper vitae, mauris. Suspendisse venenatis nisl varius felis. In commodo purus vel neque.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec mattis velit id dolor laoreet tempor. Nam nonummy rhoncus urna. Duis fermentum, mauris eget mollis vulputate, tortor sem pharetra arcu, sed nonummy nisl est et eros. In augue nisl, iaculis vel, tincidunt in, ullamcorper vitae, mauris. Suspendisse venenatis nisl varius felis. In commodo purus vel neque.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec mattis velit id dolor laoreet tempor. Nam nonummy rhoncus urna. Duis fermentum, mauris eget mollis vulputate, tortor sem pharetra arcu, sed nonummy nisl est et eros. In augue nisl, iaculis vel, tincidunt in, ullamcorper vitae, mauris. Suspendisse venenatis nisl varius felis. In commodo purus vel neque.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec mattis velit id dolor laoreet tempor. Nam nonummy rhoncus urna. Duis fermentum, mauris eget mollis vulputate, tortor sem pharetra arcu, sed nonummy nisl est et eros. In augue nisl, iaculis vel, tincidunt in, ullamcorper vitae, mauris. Suspendisse venenatis nisl varius felis. In commodo purus vel neque.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec mattis velit id dolor laoreet tempor. Nam nonummy rhoncus urna. Duis fermentum, mauris eget mollis vulputate, tortor sem pharetra arcu, sed nonummy nisl est et eros. In augue nisl, iaculis vel, tincidunt in, ullamcorper vitae, mauris. Suspendisse venenatis nisl varius felis. In commodo purus vel neque.

</body> </html> 

</source>


Content DIV

   <source lang="html4strict">

<!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" title="text/css"> body { 

   padding: 0;
   margin: 0;
   background: red;

} p { 

   margin-top: 0;

}

  1. content {
   background: yellow;
   width: 500px;
   margin: 0 auto;
   padding: 10px;

} </style> </head> <body>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec mattis velit id dolor laoreet tempor. Nam nonummy rhoncus urna. Duis fermentum, mauris eget mollis vulputate, tortor sem pharetra arcu, sed nonummy nisl est et eros. In augue nisl, iaculis vel, tincidunt in, ullamcorper vitae, mauris. Suspendisse venenatis nisl varius felis. In commodo purus vel neque.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec mattis velit id dolor laoreet tempor. Nam nonummy rhoncus urna. Duis fermentum, mauris eget mollis vulputate, tortor sem pharetra arcu, sed nonummy nisl est et eros. In augue nisl, iaculis vel, tincidunt in, ullamcorper vitae, mauris. Suspendisse venenatis nisl varius felis. In commodo purus vel neque.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec mattis velit id dolor laoreet tempor. Nam nonummy rhoncus urna. Duis fermentum, mauris eget mollis vulputate, tortor sem pharetra arcu, sed nonummy nisl est et eros. In augue nisl, iaculis vel, tincidunt in, ullamcorper vitae, mauris. Suspendisse venenatis nisl varius felis. In commodo purus vel neque.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec mattis velit id dolor laoreet tempor. Nam nonummy rhoncus urna. Duis fermentum, mauris eget mollis vulputate, tortor sem pharetra arcu, sed nonummy nisl est et eros. In augue nisl, iaculis vel, tincidunt in, ullamcorper vitae, mauris. Suspendisse venenatis nisl varius felis. In commodo purus vel neque.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec mattis velit id dolor laoreet tempor. Nam nonummy rhoncus urna. Duis fermentum, mauris eget mollis vulputate, tortor sem pharetra arcu, sed nonummy nisl est et eros. In augue nisl, iaculis vel, tincidunt in, ullamcorper vitae, mauris. Suspendisse venenatis nisl varius felis. In commodo purus vel neque.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec mattis velit id dolor laoreet tempor. Nam nonummy rhoncus urna. Duis fermentum, mauris eget mollis vulputate, tortor sem pharetra arcu, sed nonummy nisl est et eros. In augue nisl, iaculis vel, tincidunt in, ullamcorper vitae, mauris. Suspendisse venenatis nisl varius felis. In commodo purus vel neque.

</body> </html> 

</source>


Content scrolls, fixed footer

   <source lang="html4strict">

<?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>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css">

  1. footer {
 height:100px;
 background:#ccc;
 width:100%;
 border-top:3px solid red;
 position:fixed;
 bottom:0;
 left:0;
 text-align:center;

}

  1. content {
 position:absolute;
 overflow:auto;
 background:#aaa;
 top:0;
 left:0;
 width:100%;
 bottom:103px;

} </style> </head> <body>

Some text to scroll

Some text to scroll

Some text to scroll

Some text to scroll

Some text to scroll

Some text to scroll

Some text to scroll

Some text to scroll

Some text to scroll

Some text to scroll

Some text to scroll

Some text to scroll

Some text to scroll

Some text to scroll

Some text to scroll

Some text to scroll

Some text to scroll

Some text to scroll

Some text to scroll

Some text to scroll

Some text to scroll

Some text to scroll

Some text to scroll

Some text to scroll

Some text to scroll

Some text to scroll

Some text to scroll

Some text to scroll

Some text to scroll

Some text to scroll

Some text to scroll

Some text to scroll

Some text to scroll

Some text to scroll

Some text to scroll

Some text to scroll 1

Some text to scroll 2

end

</body> </html> 

</source>


Content section with border

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> 

    <head>
     <meta http-equiv="content-type" content="text/xhtml; charset=windows-1252" />
     <meta http-equiv="content-language" content="en-us" />
       <style type="text/css">
           h1, h2 {
               margin: 0;
               background: gray;
           }
           h1 {
               font-size: 1.6em;
               padding: 0.3em;
               border-bottom: 5px solid black;
               letter-spacing: -0.08em;
           }
           div {
               background: lightgrey;
               padding: 0.7em;
               clear: left;
           }
           h2 {
               font-size: 1em;
               padding: 0.2em;
           }
           p {
               border: 0.05em solid black;
               padding: 0.8em;
           }
           h3:target {
               color: yellow;
               background: red;
           }
       </style>
   </head>
   <body>

This is the title

This is the sub title

  • <a href="#">This is a test. </a>
  • <a href="#">This is a test. </a>
  • <a href="#">This is a test. </a>
  • <a href="#">This is a test. </a>
  • <a href="#">This is a test. </a>
  • <a href="#">This is a test. </a>

header 3<a href=""></a>

This is a test. 

   </body>

</html> 

</source>


Set

and

in extra content section

   <source lang="html4strict">

<!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=ISO-8859-1" /> <title></title> <style type="text/css"> div#extra h2, div#extra p { 

 margin-left: 10px;
 margin-right: 10px;

} </style> </head> <body> 

     <h2>Contact Form</h2>
   
   <p>This is a test.</p>
   
     <p>Please fill out our form below in order to contact me. </p>
     <form id="form1" name="form1" method="post" action="/">
   
       <label for="fmname" accesskey="n">Name</label>
       <input type="text" name="fmname" id="fmname" />
   
       <label for="fmemail" accesskey="e">Email</label>
       <input type="text"  name="fmemail" id="fmemail" />
   
       <label for="fmstate" accesskey="a">State/Province</label>
       <input type="text" name="fmstate" id="fmstate" />
   
       <label for="fmstate" accesskey="y">Country</label>
       <input type="text" name="fmcountry" id="fmcountry" />
   
       <label for="fmmsg">Message</label>
       <textarea name="fmmsg" accesskey="m" id="fmmsg" rows="5" cols="14"></textarea>
   
       <input type="submit" name="submit" value="send »" class="submit" />
     </form>
     

   <h2>header</h2>
   <p>This is a text</p>

</body> </html> 

</source>


Set <h2> in extra content

   <source lang="html4strict">

<!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=ISO-8859-1" /> <title></title> <style type="text/css"> div#extra h2, div#extra p { 

 margin-left: 10px;
 margin-right: 10px;

} </style> </head> <body> 

     <h2>Contact Form</h2>
     <form id="form1" name="form1" method="post" action="/">
       <label for="fmname" accesskey="n">Name</label>
       <input type="text" name="fmname" id="fmname" />
   
       <label for="fmemail" accesskey="e">Email</label>
       <input type="text"  name="fmemail" id="fmemail" />
   
       <label for="fmstate" accesskey="a">State/Province</label>
       <input type="text" name="fmstate" id="fmstate" />
   
       <label for="fmstate" accesskey="y">Country</label>
       <input type="text" name="fmcountry" id="fmcountry" />
   
       <label for="fmmsg">Message</label>
       <textarea name="fmmsg" accesskey="m" id="fmmsg" rows="5" cols="14"></textarea>
   
       <input type="submit" name="submit" value="send" class="submit" />
     </form>

   <h2>quid pro quo</h2>

</body> </html> 

</source>


stretching content

   <source lang="html4strict">

<!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></title>
       <style rel="stylesheet" type="text/css">

body { 

   background: lightyellow;
   font: 12px sans-serif;
   margin: 0;
   padding: 0;

} p { 

   background: pink;
   border: 1px solid red;
   padding: 5px;
   margin: 5px;
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0

} 

       </style>
   </head>
   <body>
       <p>
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit.


   </body>

</html> 

</source>


Use
to create a section

   <source lang="html4strict">

<!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"> body { 

width: 600px;
padding-left: 50%;

}

  1. frame {
width: 600px;
margin-left: -300px;

} </style> </head>

<body>

Header

This is a test.

</body> </html> 

</source>


use
to mark content

   <source lang="html4strict">

<!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=ISO-8859-1" /> <title></title> <style type="text/css"> div#content p { 

 line-height:1.5;

} </style> </head> <body> 

     <h2>Contact Form</h2>
     <form id="form1" name="form1" method="post" action="/">
   
       <label for="fmname" accesskey="n">Name</label>
       <input type="text" name="fmname" id="fmname" />
   
       <label for="fmemail" accesskey="e">Email</label>
       <input type="text"  name="fmemail" id="fmemail" />
   
       <label for="fmstate" accesskey="a">State/Province</label>
       <input type="text" name="fmstate" id="fmstate" />
   
       <label for="fmstate" accesskey="y">Country</label>
       <input type="text" name="fmcountry" id="fmcountry" />
   
       <label for="fmmsg">Message</label>
       <textarea name="fmmsg" accesskey="m" id="fmmsg" rows="5" cols="14"></textarea>
   
       <input type="submit" name="submit" value="send" class="submit" />
     </form>

   <h2>quid pro quo</h2>

</body> </html> 

</source>


use
to mark extra content

   <source lang="html4strict">

<!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=ISO-8859-1" /> <title></title> <style type="text/css"> div#extra{ 

 color: #333;

} </style> </head> <body> 

     <h2>Contact Form</h2>
     <form id="form1" name="form1" method="post" action="/">
       <label for="fmname" accesskey="n">Name</label>
       <input type="text" name="fmname" id="fmname" />
   
       <label for="fmemail" accesskey="e">Email</label>
       <input type="text"  name="fmemail" id="fmemail" />
   
       <label for="fmstate" accesskey="a">State/Province</label>
       <input type="text" name="fmstate" id="fmstate" />
   
       <label for="fmstate" accesskey="y">Country</label>
       <input type="text" name="fmcountry" id="fmcountry" />
   
       <label for="fmmsg">Message</label>
       <textarea name="fmmsg" accesskey="m" id="fmmsg" rows="5" cols="14"></textarea>
   
       <input type="submit" name="submit" value="send" class="submit" />
     </form>

   <h2>quid pro quo</h2>

</body> </html>

</source>