XHTML WordPress Header.php模板
<!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" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php wp_title('&laquo;', true, 'right'); ?> <?php bloginfo('name'); ?></title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
</head>
<body>XHTML XHTML Doctype 4.01 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>untitled</title>
<meta name="generator" content="TextMate http://macromates.com/">
<meta name="author" content="jmann">
<!-- Date: 2010-05-10 -->
</head>
<body>
</body>
</html>XHTML 流行的字体系列
Helvetica,Helvetica Neue,sans-serifXHTML 没有Flash，iPhone和iPad友好的终极全屏图像
<!--
* Scaler: Scaling background images to fill browser window with centering and aspect ratio. iPad and iPhone friendly - v3 - 04/06/2010
* http://klippoglim.no/
* http://kirie.no/
*
* DEMO: http://klippoglim.no/blog/2010/06/ultimate-full-screen-images-without-flash-iphone-and-ipad-friendly/
*
* Copyright (c) 2010 Eirik Backer
* Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
* and GPL (http://www.gnu.org/licenses/gpl-2.0.html) licenses.
-->
<!DOCTYPE html>
<html lang="no">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /><title>Scaler by Eirik Backer</title>
<meta name="description" content="" /><meta name="keywords" content="" />
<style type="text/css">
body,html{width:100%;height:100%;overflow:hidden;background:#000 url(load.gif) 50% 50% no-repeat;padding:0;margin:0;border:0}
#bg,#bg div,#bg img{-moz-user-select:-moz-none;-webkit-user-select:none} /*Prevent selection of the background*/
#bg{width:100%;height:100%;overflow:hidden;position:absolute;left:0;bottom:0} /*Container preventing scrolling-bug in opera*/
#bg div{position:absolute;width:200%;height:200%;top:-50%;left:-50%;display:table} /*Create canvas*/
#bg div div{left:0;top:50%;width:100%;display:block;height:auto} /*IE center verticaly*/
#bg div > div{display:table-cell;vertical-align:middle;height:100%;position:static;top:0} /*Others center verticaly*/
#bg img{position:absolute;top:-99999px;left:-99999px;width:50%;display:none} /*Display none AND hide (for later loading with block)*/
#bg img.bgshow{position:static;display:block;margin:0 auto;-ms-interpolation-mode:bicubic} /*Show image, with IE-scaling fix*/
*+html #bg div div{position:absolute;top:50%;height:auto} /*IE7 fix centerer*/
*+html #bg img{position:relative;top:-50%} /*IE7 fix image*/
* html #bg img{height:50%;position:relative;top:-50%} /*IE6 fix image*/
</style>
<!--[if IE]><meta http-equiv="imagetoolbar" content="no" /><meta http-equiv="X-UA-Compatible" content="IE=8" /><![endif]-->
<!--The previous line is for tweeking IE a bit - I do not like the imagetoolbar and IE8s backwards compability mode-->
</head>
<body>
<!--Example start-->
<div style="padding:10px;background:#fff;position:absolute;left:10px;bottom:10px;z-index:3;cursor:default">
Just an example showing the floater disappearing, safe to remove when using the code
</div>
<!--Example end-->
<div id="bg"> <!--Prevent scrolling on Opera, iPhone and iPad -->
<div> <!--Create canvas for centering -->
<div> <!--Center verticaly -->
<img alt="" src="photos/1.jpg" class="bgshow" />
<img alt="" src="photos/2.jpg" />
<img alt="" src="photos/3.jpg" />
<img alt="" src="photos/4.jpg" />
<img alt="" src="photos/5.jpg" />
</div>
</div>
</div>
<script type="text/javascript">
function Scaler(id){
var imgs=document.getElementById(id).getElementsByTagName('img'),index=0; //Get images and set current index
var resize=function(to){
var to=((to==='+1'?index+1:(to==='-1'?index-1:(isNaN(to)?index:to)))%imgs.length),to=to<0?imgs.length-1:to; //Get current index
if(to!=index)for(var i=0,l=imgs.length;i<l;i++){imgs[i].className=i==to?'bgshow':'';imgs[i].style.display='block'} //Change current and start loading
var i=imgs[to],nw=Math.round(document.body.clientHeight*(i.offsetWidth/i.offsetHeight)); //Get img and calculate new width
i.style.width=(i.offsetWidth>i.offsetHeight&&document.body.clientWidth>nw)?'50%':nw+'px'; //Scale by css if possible
return index=to;
}
if(window.attachEvent){window.attachEvent('onload',resize);window.attachEvent('onresize',resize)} //Attact events IE
else{window.addEventListener('load',resize,false);window.addEventListener('resize',resize,false)} //Attact events others
return resize;
};
</script>
<script type="text/javascript">
(function(){
var bg=document.getElementById('bg'),float=document.createElement('span');
var scale=Scaler('bg'), //Create and bind scaler-function
addEvent=function(el,on,fn){el.attachEvent?el.attachEvent('on'+on,fn):el.addEventListener(on,fn,false)}, //Function for cross-borwser addEvent
move=function(e){
float.style.left=(e=e||window.event).clientX+20+'px';
float.style.top=e.clientY+20+'px';
if(float._next!=(e.clientX>(document.body.offsetWidth/2)))float.innerHTML=(float._next=!float._next)?'next':'previous'; //Change html onlyt if needed
},
swap=function(e){
var key=(e=e||window.event).type=='click'?(e.clientX>(document.body.clientWidth/2)?40:37):e.keyCode;
if(key>36&&key<41)scale(key>38?'+1':'-1');
}
addEvent(window,'keydown',swap);
addEvent(bg,'mouseout',function(){float.style.display='none'}); //Hide floater when not over image
addEvent(bg,'mouseover',function(){float.style.display='block'});
addEvent(bg,'mousemove',move);
addEvent(bg,'click',swap);
float.style.position='absolute';
float.style.zIndex='2';
float.style.color='#fff';
bg.style.cursor='pointer';
bg.appendChild(float);
})();
</script>
</body>
</html>XHTML 带CSS的简单XHTML表单
-----------CSS-----------------
label {
width: 4em;
float: left;
text-align: right;
margin-right: 0.5em;
display: block;
}
.submit input {
margin-left: 4.5em;
}
#form input:hover, #form textarea:hover{
background-color: lightyellow;
}
input:focus, textarea:focus{
background-color: lightyellow;
}
-----------Form----------------
<form action="#">
<p><label for="name">Name</label> <input type="text" id="name" /></p>
<p><label for="e-mail">E-mail</label> <input type="text" id="e-mail" /></p>
<p class="submit"><input type="submit" value="Submit" /></p>
</form>XHTML CSS圆角工作在所有浏览器没有图像和JavaScript
Code HTML :
<!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" />
<link rel="Stylesheet" media="screen" type="text/css" href="css/style.css" />
<title>Rounded Corner Without image Work in all Browsers</title>
</head>
<body>
<!-- Rounded Corner -->
<div class="RoundedCorner"> <b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<div align="center">
<h1>Rounded Corner Without image Work in ie 6 </h1>
</div>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b> </div>
<!-- Rounded Corner -->
</body>
</html>
Code CSS :
div.RoundedCorner {
background: #6c18cb
}
b.rtop, b.rbottom {
display:block;
background: #fff
}
b.rtop b, b.rbottom b {
display:block;
height: 1px;
overflow: hidden;
background: #6c18cb
}
b.r1 {
margin: 0 5px
}
b.r2 {
margin: 0 3px
}
b.r3 {
margin: 0 2px
}
b.rtop b.r4, b.rbottom b.r4 {
margin: 0 1px;
height: 2px
}
div.RoundedCorner h1
{
font-family:Tahoma, Geneva, sans-serif;
color:white;
}XHTML 100％高度3列布局
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
* {margin:0px; padding:0px;}
body{background:#def5f9; font-family:verdana, helvetica, sans-serif; font-size:0.8em}
#container{position:relative; width:900px; background:#f9f9f9; border:1px solid #900; margin:auto auto; padding: 10px 5px; overflow:hidden; text-align:center; z-index:1;}
#header{width:890px; background:#333; margin:auto auto; padding:16px; margin:-16px; margin-bottom:10px;}
#header h1{color:#fff; text-align:left;}
#leftcol{width:240px; float:left; background:#f6d4d4; padding: 10px 5px; margin:0px 5px; padding-bottom:4000px; margin-bottom:-4000px; }
#midcol{width:360px; float:left; background:#a3f9d8; padding: 10px 5px; margin:0px 5px; padding-bottom:4000px; margin-bottom:-4000px; text-align:left;}
#midcol p{margin-bottom:10px;}
#rightcol{ width:240px; float:left; background:#fa0; padding: 10px 5px; overflow:hidden; margin:0px 5px; padding-bottom:4000px; margin-bottom:-4000px;}
#footer{position:relative; width:890px; background:#333; margin:auto auto; padding:16px; margin:-16px; margin-bottom:10px; height:100px; clear:both; z-index:20; margin-bottom:-20px; margin-top:30px; color:#fff;}
</style>
</head>
<body>
<div id="container">
<div id="header"><h1>This is the Header</h1></div>
<!-- START LEFT COLUMN -->
<div id="leftcol">
<h2>The left column</h2>
<p>And the text for the left column</p>
</div>
<!-- START CENTER COLUMN -->
<div id="midcol">
<h2>The middle column</h2>
<p>And some text for the center column</p>
</div>
<!-- START RIGHT COLUMN -->
<div id="rightcol">
<h2>The right column</h2>
<p>And then again, some text for the right column</p><p>And then again, some text for the right column</p>
<p>And then again, some text for the right column</p><p>And then again, some text for the right column</p>
</div>
<hr style="display:block; height:0.1em; clear:both; visibility:hidden;" />
<div id="footer">Footer</div>
</div>
</body>
</html>XHTML XHTML模板
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<html xmlns='http://www.w3.org/1999/xhtml'>
<title>{pagetitle}</title>
<base href="{base}">
<link rel="stylesheet" type="text/css" href="{css}">
</head>
<body>
<div class="PageHeader">&nbsp;</div>
<div class="PageContainer">
<div class="ContentContainer">
{main_menu}
{main_content}
</div>
</div>
<div class="PageFooter">
{footer_menu}
</div>
</body>
</html>XHTML XHTML 1.1 Web标准模板 - 已修复
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" dir="ltr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>title goes here » Site title here</title>
<base href="" />
<meta name="Author" content="#" />
<meta name="Description" content="#" />
<meta name="Copyright" content="#" />
<meta name="Robots" content="#" />
<meta name="Generator" content="#" />
<meta name="Keywords" content="#" />
<meta http-equiv="Expires" content="#" />
<meta http-equiv="Cache-Control" content="#" />
<meta http-equiv="imagetoolbar" content="false" />
<link rel="Shortcut Icon" href="/favicon.ico" type="image/x-icon" />
<link href="/script/javascript.js" type="text/javascript" />
<style type="text/css" xml:space="preserve">
/*<![CDATA[*/
@import url(/css/style.css) all;
/*]]>*/
</style>
<link rel="stylesheet" href="/css/screen.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="/css/print.css" type="text/css" media="print" />
<!--[if IE]>
<link rel="stylesheet" href="/css/win-ie-all.css" type="text/css" media="screen, projection" />
<![endif]-->
</head>
<body>
</body>
</html>XHTML XHTML 1.0 STRICT模板
<!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" dir="ltr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>title goes here &raquo; Site title here</title>
<base href="" />
<meta name="Author" content="#" />
<meta name="Description" content="#" />
<meta name="Copyright" content="#" />
<meta name="Robots" content="#" />
<meta name="Generator" content="#" />
<meta name="Keywords" content="#" />
<link rel="Shortcut Icon" href="/favicon.ico" type="image/x-icon" />
<link href="/script/javascript.js" type="text/javascript" />
<link rel="stylesheet" href="/css/screen.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="/css/print.css" type="text/css" media="print" />
<!--[if IE]>
<link rel="stylesheet" href="/css/win-ie-all.css" type="text/css" media="screen, projection" />
<![endif]-->
</head>
<body>
</body>
</html>