redcrazycss : Red « Templates « HTML / CSS

HTML / CSS » Templates » Red 
redcrazycss
  

<!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" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="en" />
<meta content="all" name="robots" />
<meta name="author" content="zhuzhu1982@gmail.com,id_sonic,Fred Chu" />
<meta name="Copyright" content="Open Source Web Design" />
<meta name="description" content="CCS,Webdesign,layout" />
<meta content="designing, with, web, standards, xhtml, css,xhtml+css,layout, usability, ccessibility, w3cn, CSS+DIV,id_sonic, Fred Chu" name="keywords" />
<style type='text/css'>
/* Create By fred@sicau.edu.cn */
body {
  background: #ececec;
  font-size: 14px;
  }

div#top {
  width: 649px;
  margin-left: auto;
  margin-right: auto;
  background: url(pic/top_bg.png#fff no-repeat;
  height: 62px;
  voice-family: "\"}\"";
  voice-family: inherit;
  }

div#main,div#links {
  width: 649px;
  margin-left: auto;
  margin-right: auto;
  background: url(pic/body_bg.png#fff;
  }

div#bottom {
  width: 649px;
  margin-left: auto;
  margin-right: auto;
  height: 48px;
  background: url(pic/bottom_bg.png#fff no-repeat;
  }

#bottom p {
  margin: 0;
  color: #fff;
  padding-top: 22px;
  padding-left: 15px;
  }

.news {
  margin-left: 20px;
  width: 450px;
  border-right: 1px dashed #C42F3D;
  padding-right: 10px;
  }

.headline h4 {
  margin: 0 0 8px 0;
  border-bottom: 1px solid #999;
  background: #ececec;
  padding: 3px;
  }

.headline p {
  margin: 0 0 15px 0;
  }

.snapshot {
  position: absolute;
  margin-left: 490px;
  top: 70px;
  width: 130px;
/*  border-left: 1px dashed #C33C4E; */
}

.count {
  text-align: right;
  }

.getfirefox {
  margin-top: 5px;
  text-align: center;
  }

/* Search feild */
  #top form {
    top: 0;
    right: 0;
    padding: 12px 20px 0 0;
    background: url("pic/top_tr.gif"no-repeat top right;
    margin: 0/* need for IE Mac */
    text-align: right; /* need for IE Mac */
    white-space: nowrap; /* for Opera */
  }
  #top form label color: #fff; font-size: 100%; }
  #top form input font-size: 85%; }
  
  #top form #submit {
    font-size: 85%;
    background: #A70E1C;
    color: #fff;
    padding: 1px 4px;
    border-right: 1px solid #C42F3D;
    border-bottom: 1px solid #C42F3D;
    border-top: 1px solid #C42F3D;
    border-left: 1px solid #C42F3D;
  }
  
  #top form #q {
    width: 170px;
    font-size: 85%;
    border:  1px solid #C42F3D;
    background: #D9DBE1;
    padding: 2px;
  }
  #top form #q:hover, #top form #q:focus {
    background: #fff;
  }

#mylink p {
  margin: 0;
  background: #ececec;
  padding: 5px;
  border-top: 1px solid #999;
  border-bottom: 1px solid #999;
  }

#mylink {
  clear: both;
  }

.note h4 {
  margin: 0 0 5px 0;
  background: #E5BEC2;
  border-bottom: 1px solid #C42F3D;
  padding: 3px;
  }

.note p {
  margin: 0 0 10px 0;
  padding-bottom: 10px;
/*  border-bottom: 1px solid #EECFD2; */
  }

.headline ul {
  margin: 0 0 0 10px;
  padding: 0;
  }

.headline li {
  margin-top: 5px;
  }

#menu ul,.menu ul {
  margin: 10px 0 0 0;
  list-style: none;
  padding: 0;
  }

#menu li,.menu li {
  margin: 15px 0 0 0;
  display: block;
  }

#menu li a,.menu li a {
  margin: 0;
  background: url(pic/menu1.png);
  text-align: left;
  text-decoration: none;
  display: block;
  width: 110px;
  padding: 5px 5px 5px 35px;
  color: #fff;
  line-height: 21px;
  }

#menu li a:hover,.menu li a:hover {
  background: url(pic/menu2.png);
  }

.w3c {
  margin: 15px 0 0 0;
  text-align: center;
  }

.w3c img {
  margin-bottom: 10px;
  }

.list h4 {
  margin: 0 0 8px 0;
  border-bottom: 1px solid #999;
  background: #ececec;
  padding: 3px;
  }

.list ul {
  margin-top: 0;
  margin-bottom: 0;
  padding-bottom: 10px;
  }

.list li {
  margin-top: 6px;
  }

.list li a:link {
  color: #000;
  text-decoration: none;
  }

.list li a:visited {
  color: #000;
  text-decoration: none;
  }

.list li a:hover {
  color: red;
  }

.html {
  margin: 0 20px 0 20px;
  }

.html .content h3 {
  font-size: 14px;
  }

.html .content h4 {
  font-size: 14px;
  }

.html .content h5 {
  font-size: 14px;
  }
.html .content h2 {
  font-size: 14px;
  }

.html .title h4 {
  font-size: 14px;
  text-align: center;
  margin: 0 0 8px 0;
  border-bottom: 1px solid #999;
  background: #ececec;
  padding: 3px;
  }

.html .content .code {
  color: green;
/*  padding-left: 30px;  */
  }

.layout h4 {
  margin: 10px 0 0 6px;
  border-bottom: 1px solid #999;
  padding: 3px;
  background: #ececec;
  text-align: center;
}

.layout ul {
  padding: 0;
  list-style: none;
  margin: 0 0 0 6px;
}

.layout li {
  line-height: 18px;
  text-align: center;
  padding: 3px;
    border-bottom: 1px solid #ccc;
}

#other_1 {
  background: #eee;
  padding: 10px;
  margin: 10px 0 10px 10px;
  height: 150px;
  color: #aaa;
  font-size: 130%;
  }
  
.getfirefoxs {
  height: 60px;
  border: 1px solid #ccc;
  background: #ececec;
  margin-right: -10px;
  padding: 20px;
  font-size: 130%;
  color: #aaa;
  }
  
.note ul {
  margin-top: 0;
  }
  
#left_c {
  width: 230px;
  margin-right: 10px;
  float: left;
  }
  
#left_c_img {
  border: 1px solid #ccc;
  background: #ececec;
  height: 100px;
  text-align: center;
  font-size: 300%;
  color: #ccc;
  padding-top: 35px;
  margin-bottom: 10px;
  }
  
#right_c {
  border-left: 1px solid #ececec;
  width: 185px;
  float: left;
  padding: 0 5px 0 10px;
  margin-bottom: 10px;
  }


</style>


<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<title>Crazy CSS | CSS Layout | XHTML and CSS</title>
<link rel="stylesheet" href="redcrazycss-style/200501.css" type="text/css" title="01" media="all"  />
</head>


<body>
 <div id="top">
 <form id="search" method="get" action="http://www.google.com/custom" title="caci.go2.icpcn.com Search">
 <div>
 <label for="q" title="Search caci.go2.icpcn.com&quot;s sites">Search</label>
 <input name="cof" value="LW:312;LH:60;GIMP:#cc0000;T:black;ALC:#0000ff;GFNT:grey;LC:#990000;BGC:white;AH:center;VLC:purple;GL:0;GALT:#666633;AWFID:9262c37cefe23a86;" type="hidden" />
 <input name="domains" value="caci.go2.icpcn.com" type="hidden" />
 <input name="sitesearch" value="caci.go2.icpcn.com" type="hidden" />
 <input id="q" name="q" accesskey="s" size="30" type="text" />
 <input id="submit" value="Go" type="submit" />
 </div>
 </form>
 </div>
 <div id="main">
  <div class="news">
  <div class="note">
   <h4>About Design</h4>
   <p>   Sorry for my poor english. I link you can put some importent news and photo at here. If you use this theme on you blog, I think  put your photo and something about you is a good idea. I make this theme on ubuntulinux and made by bluefish and vim editor. <br /><br />
   The template was tested in the usual, and looks good in all:</p>
   <ul>
     <li>Firefox 1.0.5</li>
     <li>Internet Explorer 6.0</li>
     <li>Netscape 7.02</li>
     <li>Opera 8.0</li>
   </ul>
  </div>

  <div class="headline">
   <h4>2-column Layout</h4>
    <div id="left_c">
      <div id="left_c_img">Photo</div>
      <p>In CSS file, I use "14px" font size default, you can change it. I thin "0.9em" is a good idea. <br /><br />
      The file was checked and found to be valid XHTML 1.0 Transitional.</p>
    </div>
    
    <div id="right_c">
      <div id="right_c_img"></div>
      New design and layout finished and uploaded to OSWD. Since it is my first contribution to this site, it has been given the title "RedCrazyCSS".<br /><br />
      If you don't like red color, you can change to other colors, such as green, blue, yellow, or gray.<br /><br />
      You can use my design for blog, homepage or other.<br /><br />
      <em>Shall we make friends?</em><br /><br />
      MSN: id_sonic@hotmail.com<br />
      EMAIL: msnpig@gmail.com 
    </div>

  </div>

  <div id="mylink">
  <p>
   This is a free use template - hope it makes your life easier. If you do end up finding a use for it, send me an e-mail since it's interesting to see my templates in action.
  </p>
  </div>
  </div>
  <div class="snapshot">
  
  <!--
   <div class="count">
    <script src="http://count.3326.com/counter.asp?name=caci"></script>
   </div>
   -->
   <div class="getfirefoxs">
    logo, news or photo.
    <!-- img src="pic/takebacktheweb_125x50.png" alt="" border="0" / -->
   </div>
   <div id="menu">
    <ul>
   <li><a href="#">Home</a></li>
   <li><a href="#">About</a></li>
   <li><a href="#">Services</a></li>
   <li><a href="#">Contact</a></li>
   <li><a href="#">Support</a></li>
    </ul>
   </div>
   
   <div id="other_1">
     Here you can put advs, links, buttons and banners. 
   </div>
   <!--
   <div class="w3c">
    <a href="http://www.creativecommons.cn/licenses/by-nd-nc/1.0/"><img src="pic/somerights_cn.gif" alt="" border="0" /></a>
  <a href="http://validator.w3.org/check/referer"><img src="pic/valid-xhtml10.png" alt="" border="0" /></a>
  <a href="http://jigsaw.w3.org/css-validator/"><img src="pic/vcss.png" alt="" border="0" /></a>
   </div>

   <div class="layout">
    <h4 title="?????????">????</h4>
  <ul>
   <li>??</li>
   <li>??</li>
   <li>??</li>
  </ul>
  -->
   </div>


 </div>
 <div id="bottom">
  <p>Create By msnpig@gmail.com 2005</p>
 </div>
</body>
</html>

   
    
  
Related examples in the same category
1.metamorph_blackandred
2.metamorph_blackonred
3.metamorph_red
4.metamorph_redandblack_lt
5.metamorph_reddie
6.metamorph_redfirm
7.metamorph_redflowers_lt
8.metamorph_redinfinity
9.metamorph_redmadness
10.metamorph_redornament
11.metamorph_redstorm
12.All_The_Reds
13.freecss_lightred
14.simplyred
15.sleek-red
16.red haze
17.red-accent
18.red-round
19.redalert
20.redavenue
21.redBull
22.redbusiness
23.reddy
24.Redfire2
25.redflex
26.redhaze
27.redhive
28.redish
29.RedLight
30.redline
31.RedOneTemplate
32.redpassion
33.redpepper
34.redplanet
35.redroses
36.redsnow
37.RedSquareShadow
38.red_city
39.Red_Hot
40.Red_Hot_Brazil
41.red_music
42.Red_Splash
43.Red_Tube_Simple
44.Red 2
java2s.com  | Contact Us | Privacy Policy
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.