首页
网络新闻
seo优化
网络营销
网络推广
建站知识
网络安全
网络编程
网络编程
奇闻怪事
主页
/
建站知识
/
CSS+DIV 拼图(26个英文字母)
建站知识
2021-07-03 08:42
www.168986.cn
长沙网站建设
<!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 扑克牌效果实现代码
长沙网站设计
设计网站建设:网站设计网站开发流程
四川网站建设价格 四川网站建设公司
做网站公司:做网站公司排名
深圳的网站建设公司
网站建设系统 网站建设系统开发
湖北网站建设 湖北网站建设制作
忻州网站建设 忻州网站建设的方法
湖南网站建设方案 湖南网站建设公司
梧州网站设计:梧州网站制作设计
专业网站设计公司 专业网站设计制作公司
茂名网站建设多少钱 茂名网站建设公司哪家好
通化网站制作 通化网站制作公司
网站公司建设:网页网站设计公司
营销型网站建设公司
什么是云主机 云主机是什么
德国服务器大全 租用德国服务器
狼蚁网络搜索
狼蚁网络导航
长沙seo优化
设计网站建设:网站设计网站开发流程
四川网站建设价格 四川网站建设公司
做网站公司:做网站公司排名
深圳的网站建设公司
网站建设系统 网站建设系统开发
长沙网络营销
1
免费私人服务器
2
南宁企业建站
3
html网站模板建站
4
wordpress 插件 wordpress安装和配置插件
5
中国域名服务商有哪些?2021年中国十大域名注册
长沙网站建设
前端实现字符串GBK与GB2312的编解码(小结)
网站用户体验与公交车的用户体验
购买美国主机的4个误区新手参考
使用CSS3设计地图上的雷达定位提示效果
集团网站设计