CSS+DIV 拼图(26个英文字母)

时间：2016-04-19

<!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=gb2312" /> 
<title>Letters</title> 
<style type="text/css"> 
/*=================================== 
author:gongwei8401 
email: gongwei8401@hotmail.com 
====================================*/ 
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{padding: 0;margin: 0;} 
body{font-family: Verdana,"宋体";line-height: 22px;font-size: 12px;word-break: break-all;text-align: center;background: #fff;} 
fieldset,img{border: 0;} 
table{border-collapse: collapse;border-spacing: 0;} 
ol,li,ul{list-style: none;} 
address,caption,cite,code,dfn,em,th,var{font-weight: normal;font-style: normal;} 
caption,th{text-align: left;} 
h1,h2,h3,h4,h5,h6{font-size: 100%;} 
q: before,q: after{content: '';} 
abbr,acronym{border: 0;} 
input,select,textarea{font: normal normal 12px "Verdana";} 
/*start to define some color blocks*/.wrapper{margin: 0 auto;width: 644px;height: auto;overflow: hidden;} 
.box{width: 72px;height: 80px;margin: 10px 10px;float: left;display: inline;} 
.r,.w{width: 18px;height: 18px;float: left;overflow: hidden;} 
.r{background-color: #f00;} 
.cl{clear: both;} 
.w{background-color: #FFF;} 
.halfl{background-color: #f00;width: 12px;height: 18px;overflow: hidden;margin-right: 6px;} 
.halfl2{background-color: #f00;width: 6px;height: 18px;overflow: hidden;margin-right: 12px;} 
.halfl22{background-color: #fff;width: 6px;height: 18px;overflow: hidden;margin-right: 12px;} 
.halfr{background-color: #f00;width: 12px;height: 18px;overflow: hidden;margin-left: 6px;} 
.halfr2{background-color: #f00;width: 6px;height: 18px;overflow: hidden;margin-left: 12px;} 
.halfr22{background-color: #fff;width: 6px;height: 18px;overflow: hidden;margin-left: 12px;} 
.halflh9{background-color: #f00;width: 12px;height: 9px;overflow: hidden;margin-right: 6px;display: block;} 
.halfrh9{background-color: #f00;width: 12px;height: 9px;overflow: hidden;margin-left: 6px;display: block;} 
.halflh3{background-color: #f00;width: 6px;height: 6px;overflow: hidden;margin-right: 12px;} 
.halfrh3{background-color: #f00;width: 6px;height: 6px;overflow: hidden;margin-left: 12px;} 
.halflh1{background-color: #f00;width: 3px;height: 3px;overflow: hidden;margin-right: 15px;} 
.halfrh1{background-color: #f00;width: 3px;height: 3px;overflow: hidden;margin-left: 15px;} 
.w1{width: 18px;height: 18px;float: left;overflow: hidden;} 
</style> 
</head> 
<body> 
<div class="wrapper"> 
<div class="box"> <div class="w"></div><div class="r"></div><div class="r"></div><div class="w"></div> <div class="r"></div><div class="w"></div><div class="w"></div><div class="r"></div> <div class="r"></div><div class="r"></div><div class="r"></div><div class="r"></div> <div class="r"></div><div class="w"></div><div class="w"></div><div class="r"></div> <div class="r"></div><div class="w"></div><div class="w"></div><div class="r"></div> 
</div> 
<div class="box"> <div class="r"></div><div class="r"></div><div class="r"></div><div class="w"></div> <div class="r"></div><div class="w"></div><div class="w"></div><div class="r"></div> <div class="r"></div><div class="r"></div><div class="r"></div><div class="r"></div> <div class="r"></div><div class="w"></div><div class="w"></div><div class="r"></div> <div class="r"></div><div class="r"></div><div class="r"></div><div class="w"></div> 
</div> 
<div class="box"> <div class="r"></div><div class="r"></div><div class="r"></div><div class="w"></div> <div class="r"></div><div class="w"></div><div class="w"></div><div class="r"></div> <div class="r"></div><div class="w"></div><div class="w"></div><div class="w"></div> <div class="r"></div><div class="w"></div><div class="w"></div><div class="r"></div> <div class="r"></div><div class="r"></div><div class="r"></div><div class="w"></div> 
</div> 
<div class="box"> <div class="r"></div><div class="r"></div><div class="r"></div><div class="w"></div> <div class="r"></div><div class="w"></div><div class="w"></div><div class="r"></div> <div class="r"></div><div class="w"></div><div class="w"></div><div class="r"></div> <div class="r"></div><div class="w"></div><div class="w"></div><div class="r"></div> <div class="r"></div><div class="r"></div><div class="r"></div><div class="w"></div> 
</div> 
<div class="box"> <div class="r"></div><div class="r"></div><div class="r"></div><div class="r"></div> <div class="r"></div><div class="w"></div><div class="w"></div><div class="w"></div> <div class="r"></div><div class="r"></div><div class="r"></div><div class="r"></div> <div class="r"></div><div class="w"></div><div class="w"></div><div class="w"></div> <div class="r"></div><div class="r"></div><div class="r"></div><div class="r"></div> 
</div> 
<div class="box"> <div class="r"></div><div class="r"></div><div class="r"></div><div class="r"></div> <div class="r"></div><div class="w"></div><div class="w"></div><div class="w"></div> <div class="r"></div><div class="r"></div><div class="r"></div><div class="r"></div> <div class="r"></div><div class="w"></div><div class="w"></div><div class="w"></div> <div class="r"></div><div class="w"></div><div class="w"></div><div class="w"></div> 
</div> 
<div class="box"> <div class="r"></div><div class="r"></div><div class="r"></div><div class="r"></div> <div class="r"></div><div class="w"></div><div class="w"></div><div class="w"></div> <div class="r"></div><div class="w"></div><div class="r"></div><div class="r"></div> <div class="r"></div><div class="w"></div><div class="w"></div><div class="r"></div> <div class="r"></div><div class="r"></div><div class="r"></div><div class="r"></div> 
</div> 
<div class="box"><div class="r"></div><div class="w"></div><div class="w"></div><div class="r"></div> <div class="r"></div><div class="w"></div><div class="w"></div><div class="r"></div> <div class="r"></div><div class="r"></div><div class="r"></div><div class="r"></div> <div class="r"></div><div class="w"></div><div class="w"></div><div class="r"></div> <div class="r"></div><div class="w"></div><div class="w"></div><div class="r"></div> 
</div><div class="box"> <div class="r"></div><div class="r"></div><div class="r"></div><div class="r"></div> <div class="w"></div> <div class="r"><div class="halfl22"></div></div> <div class="r"><div class="halfr22"></div></div><div class="w"></div><div class="w"></div> <div class="r"><div class="halfl22"></div></div><div class="r"><div class="halfr22"></div></div><div class="w"></div><div class="w"></div> <div class="r"><div class="halfl22"></div></div> <div class="r"> <div class="halfr22"></div> </div> <div class="w"></div> <div class="r"></div><div class="r"></div><div class="r"></div><div class="r"></div> 
</div> 
<div class="box"> <div class="r"></div><div class="r"></div><div class="r"></div><div class="r"></div> <div class="w"></div><div class="w"></div><div class="r"></div><div class="w"></div> <div class="w"></div><div class="w"></div><div class="r"></div><div class="w"></div> <div class="w"></div><div class="w"></div><div class="r"></div><div class="w"></div> <div class="r"></div><div class="r"></div><div class="r"></div><div class="w"></div> 
</div> 
<div class="box"> <div class="r"></div><div class="w"></div><div class="w"></div><div class="r"></div> <div class="r"></div><div class="w"></div><div class="r"></div><div class="w"></div> <div class="r"></div><div class="r"></div><div class="w"></div><div class="w"></div> <div class="r"></div><div class="w"></div><div class="r"></div><div class="w"></div> <div class="r"></div><div class="w"></div><div class="w"></div><div class="r"></div> 
</div> 
<div class="box"> <div class="r"></div><div class="w"></div><div class="w"></div><div class="w"></div> <div class="r"></div><div class="w"></div><div class="w"></div><div class="w"></div> <div class="r"></div><div class="w"></div><div class="w"></div><div class="w"></div> <div class="r"></div><div class="w"></div><div class="w"></div><div class="w"></div> <div class="r"></div><div class="r"></div><div class="r"></div><div class="r"></div> 
</div> 
<div class="box"> <div class="r"></div><div class="w"> <div class="halfl"></div><div class="cl"></div></div><div class="w"><div class="halfr"></div><div class="cl"></div></div><div class="r"></div> <div class="r"></div><div class="w"><div class="halfrh9"></div><div class="halfrh3"></div><div class="halfrh1"></div><div class="cl"></div></div><div class="w"><div class="halflh9"></div><div class="halflh3"></div><div class="halflh1"></div><div class="cl"></div></div><div class="r"></div> <div class="r"></div><div class="w"></div><div class="w"></div><div class="r"></div> <div class="r"></div><div class="w"></div><div class="w"></div><div class="r"></div> <div class="r"></div><div class="w"></div><div class="w"></div><div class="r"></div> 
</div> 
<div class="box"> <div class="r"></div><div class="w"></div><div class="w"></div><div class="r"></div> <div class="r"></div><div class="r"></div><div class="w"></div><div class="r"></div> <div class="r"></div><div class="w"></div><div class="r"></div><div class="r"></div> <div class="r"></div><div class="w"></div><div class="w"></div><div class="r"></div> <div class="r"></div><div class="w"></div><div class="w"></div><div class="r"></div> 
</div> 
<div class="box"> <div class="r"></div><div class="r"></div><div class="r"></div><div class="r"></div> <div class="r"></div><div class="w"></div><div class="w"></div><div class="r"></div> <div class="r"></div><div class="w"></div><div class="w"></div><div class="r"></div> <div class="r"></div><div class="w"></div><div class="w"></div><div class="r"></div> <div class="r"></div><div class="r"></div><div class="r"></div><div class="r"></div> 
</div> 
<div class="box"> <div class="r"></div><div class="r"></div><div class="r"></div><div class="r"></div> <div class="r"></div><div class="w"></div><div class="w"></div><div class="r"></div> <div class="r"></div><div class="r"></div><div class="r"></div><div class="r"></div> <div class="r"></div><div class="w"></div><div class="w"></div><div class="w"></div> <div class="r"></div><div class="w"></div><div class="w"></div><div class="w"></div> 
</div> 
<div class="box"> <div class="r"></div><div class="r"></div><div class="r"></div><div class="r"></div> <div class="r"></div><div class="w"></div><div class="w"></div><div class="r"></div> <div class="r"></div><div class="w"></div><div class="w"></div><div class="r"></div> <div class="r"></div><div class="w"></div><div class="r"></div><div class="r"></div> <div class="r"></div><div class="r"></div><div class="r"></div><div class="r"></div> 
</div> 
<div class="box"> <div class="r"></div><div class="r"></div><div class="r"></div><div class="r"></div> <div class="r"></div><div class="w"></div><div class="w"></div><div class="r"></div> <div class="r"></div><div class="r"></div><div class="r"></div> <div class="r"> <div class="halfr22"></div> </div> <div class="r"></div><div class="w"></div><div class="r"></div><div class="w"></div> <div class="r"></div><div class="w"></div><div class="w"></div><div class="r"></div> 
</div> 
<div class="box"> <div class="r"></div><div class="r"></div><div class="r"></div><div class="r"></div> <div class="r"></div><div class="w"></div><div class="w"></div><div class="w"></div> <div class="r"></div><div class="r"></div><div class="r"></div><div class="r"></div> <div class="w"></div><div class="w"></div><div class="w"></div><div class="r"></div> <div class="r"></div><div class="r"></div><div class="r"></div><div class="r"></div> 
</div> 
<div class="box"> <div class="r"></div><div class="r"></div><div class="r"></div><div class="r"></div> <div class="w"></div> <div class="r"> <div class="halfl22"></div> </div> <div class="r"> <div class="halfr22"></div> </div> <div class="w"></div> <div class="w"></div> <div class="r"> <div class="halfl22"></div> </div> <div class="r"> <div class="halfr22"></div> </div> <div class="w"></div> <div class="w"></div> <div class="r"> <div class="halfl22"></div> </div> <div class="r"> <div class="halfr22"></div> </div> <div class="w"></div> <div class="w"></div> <div class="r"> <div class="halfl22"></div> </div> <div class="r"> <div class="halfr22"></div> </div> <div class="w"></div> 
</div> 
<div class="box"> <div class="r"></div><div class="w"></div><div class="w"></div><div class="r"></div> <div class="r"></div><div class="w"></div><div class="w"></div><div class="r"></div> <div class="r"></div><div class="w"></div><div class="w"></div><div class="r"></div> <div class="r"></div><div class="w"></div><div class="w"></div><div class="r"></div> <div class="r"></div><div class="r"></div><div class="r"></div><div class="r"></div> 
</div> 
<div class="box"> <div class="r"></div><div class="w"></div><div class="w"></div><div class="r"></div> <div class="r"></div><div class="w"></div><div class="w"></div><div class="r"></div> <div class="r"></div><div class="w"></div><div class="w"></div><div class="r"></div> <div class="r"></div><div class="w"></div><div class="w"></div><div class="r"></div> <div class="w"></div><div class="r"></div><div class="r"></div><div class="w"></div> 
</div> 
<div class="box"> <div class="r"></div><div class="w"><div class="halfr2"></div></div><div class="w"><div class="halfl2"></div></div><div class="r"></div> <div class="r"></div><div class="w"><div class="halfr2"></div></div><div class="w"><div class="halfl2"></div></div><div class="r"></div> <div class="r"></div><div class="w"><div class="halfr2"></div></div><div class="w"><div class="halfl2"></div></div><div class="r"></div> <div class="r"></div><div class="w"><div class="halfr2"></div></div><div class="w"><div class="halfl2"></div></div><div class="r"></div> <div class="w"></div><div class="r"></div><div class="r"></div><div class="w"></div> 
</div> 
<div class="box"> <div class="r"></div><div class="w"></div><div class="w"></div><div class="r"></div> <div class="w"></div> <div class="r"> <div class="halfr22"></div> </div> <div class="r"> <div class="halfl22"></div> </div> <div class="w"></div> <div class="w"></div> <div class="r"> <div class="halfl22"></div> </div> <div class="r"> <div class="halfr22"></div> </div> <div class="w"></div> <div class="w"></div> <div class="r"> <div class="halfr22"></div> </div> <div class="r"> <div class="halfl22"></div> </div> <div class="w"></div> <div class="r"></div><div class="w"></div><div class="w"></div><div class="r"></div> 
</div> 
<div class="box"> <div class="r"></div><div class="w"></div><div class="w"></div><div class="r"></div> <div class="r"></div><div class="w"></div><div class="w"></div><div class="r"></div> <div class="w"></div><div class="r"><div class="halfr22"></div></div><div class="r"><div class="halfl22"></div></div><div class="w"></div> <div class="w"></div><div class="w"><div class="halfr2"></div></div><div class="w"><div class="halfl2"></div></div><div class="w"></div> <div class="w"></div><div class="w"><div class="halfr2"></div></div><div class="w"><div class="halfl2"></div></div><div class="w"></div> 
</div> 
<div class="box"> <div class="r"></div><div class="r"></div><div class="r"></div><div class="r"></div> <div class="w"></div><div class="w"></div><div class="w"></div><div class="r"></div> <div class="w"></div><div class="w"></div><div class="r"></div><div class="w"></div> <div class="w"></div><div class="r"></div><div class="w"></div><div class="w"></div> <div class="r"></div><div class="r"></div><div class="r"></div><div class="r"></div> 
</div> 
</div> 
</body> 
</html>

提示：您可以先修改部分代码再运行

上一条：CSS 扑克牌效果实现代码 下一条:css 模拟表格斜线

CSS+DIV 拼图(26个英文字母)

相关文章

最新文章