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"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