We would like to know how to create code/pre section style.
<!--from w w w . j a va 2s . c o m-->
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
#content pre {
padding: 1em;
border: 1px dashed #2f6fab;
color: black;
background-color: #f9f9f9;
white-space: pre;
margin: 1em 0px;
display: block;
font-family: monospace, Courier;
line-height: 1.1em;
}
#content h3 {
font-size: 188%;
line-height: 1.2em;
color: black;
background: none;
font-weight: normal;
margin: 0;
overflow: hidden;
padding-top: .5em;
padding-bottom: .17em;
border-bottom: 1px solid #aaa;
margin-bottom: 1em; /* make space below border */
}
#content h1, h2 {
color: black;
background: none;
font-weight: normal;
margin: 0;
overflow: hidden;
padding-top: .5em;
padding-bottom: .17em;
}
#content h1:after, h2:after {
content: '';
display: block;
width: 30%;
height: 0;
margin: 0 auto;
border-bottom: 1px solid #aaa;
}
</style>
</head>
<body>
<DIV id='content'>
<h3>Main Title</h3>
<h2>Sub Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
eros odio, venenatis ut suscipit eget, vestibulum id est. Vivamus
aliquet lacus sit amet enim tempus in fermentum ipsum ornare.
<h2>Code Section</h2>
<pre>
This is a test.
This is a test.
This is a test.
</pre>
</DIV>
</BODY>
</HTML>
</body>
</html>
The code above is rendered as follows: