CSS实例：用CSS制作网页像素画

在cssplay网站看到有一组CSS像素画，于是也想摩仿一下，于是在网络上找到一组头像图标，看其结构比较简单，就拿它开刀吧！先看看预览图

图一

基本原理：

没有什么技术含量，主要是利用背景色和边框色来渲染每一个像素点，加上绝对定位，就可以变换出不同的风格。在制作一幅图片之前最好是将图片黑白风格化，然后用PS放大图片，将各个点的位置计算精确。剩下的事情就是无穷的耐心和细心了。

演示：

运行代码框
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "...<a href="http://www.tulaoshi.com/n/20160219/1630373.html" target="_blank">[ 查看全文 ]</a></p> <div class="img_yyy_2"> <span>2016-02-19</span> <i>标签:</i> <div class="yyy_2_a"><a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> </div> </div> </div> </div> <div class="xiangguan_gg xiangguan_reader clearfix"> <div class="xiang_892_1" style="width:1158px;"> <h3><a href="http://www.tulaoshi.com/n/20160219/1630373.html" target="_blank">CSS实例：用CSS制作网页像素画</a>的相关文章</h3> </div> <div class="xiang_892_2" style="width:1158px;"> <ul id="loadmore_container" style="width:1158px;"> <li> <div class="xiang_892_2_1"><a href="/reader/1621532" target="_blank"><img src="http://img.tulaoshi.com/201602/19/327795e58ef5a6e03a3b3ce5a552c4c9_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160219/1621532.html" target="_blank">CSS制作网页实例：用CSS控制li标记样式</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> list-style-type版本：CSS1/CSS2 兼容***：IE4+ NS4+ 继承***：有 语法： list-style-type : disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none | armenian | cjk-ideographic | georgian | lower-greek | hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha | lower-latin | upper-latin 参数： disc : CSS1 实心...<a href="http://www.tulaoshi.com/n/20160219/1621532.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/逸风309/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/2.jpg" /><span>逸风309</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">12</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1629932" target="_blank"><img src="http://img.tulaoshi.com/201602/19/78d50a325fa36c2d1f0e0f8630eb48b0_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160219/1629932.html" target="_blank">CSS网页制作布局实例教程</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 相关文章： 用CSS建设网站的实例 原文博客：veerle 翻译整理：西米CC 来自国外博客veerle的一个系列教程，分八个部分讲解一张完整CSS页面的构建过程。虽然它不是每个步骤都解释得非常详细，但是其中提及的很多技巧和经验都很值得初学者借鉴，从界面设计到页面构建，强调了很多细节的设计理念。在翻译的过程中，个人觉得本教程比较薄弱的环节是页面整体布局的搭建，篇幅不是很充分，不过大家仍然可以通...<a href="http://www.tulaoshi.com/n/20160219/1629932.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/外外是王的女人/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/2.jpg" /><span>外外是王的女人</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">5</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1614991" target="_blank"><img src="http://img.tulaoshi.com/201602/19/deb67c212c35140332f18c7dc43c4c4f_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160219/1614991.html" target="_blank">网页制作实例：用CSS实现图片垂直居中方法</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 网页制作，用CSS实现图片垂直居中方法 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"style type="text/css"!--body {margin:0;padding:0}div {width:500px;height:500px;line-height:500px;border:1px solid #ccc;overflow:hidden;position:relative;text-align:center;margin:auto}div p ...<a href="http://www.tulaoshi.com/n/20160219/1614991.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/山水相连528/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/1.jpg" /><span>山水相连528</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">5</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1611377" target="_blank"><img src="http://img.tulaoshi.com/201602/19/df8e9dd4f0722ed48d1b191fc7e4bf41_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160219/1611377.html" target="_blank">实例详解CSS网页布局原理</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> DIV+CSS布局 用CSS来布局很容易。如果你已经习惯用表格布局的话，起先会感觉比较困难。其实不难，只不过动机不同，并且在实践中更有意义。 你可以把这一页面的各个部分当作独立的版块来看待，无论你选择哪一块。你可以绝对或相对地用彼块取代此块。 定位 定位属性position用于定义一个元素是否absolute(绝对)，relative(相对)，static(静态)，或者fixed(固定)。 static值是元素...<a href="http://www.tulaoshi.com/n/20160219/1611377.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/蜜桃坏坏/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/17.jpg" /><span>蜜桃坏坏</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">4</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1609277" target="_blank"><img src="http://img.tulaoshi.com/201602/19/b8c167ef0135c312b541250f1de6dc38_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160219/1609277.html" target="_blank">网页头部css代码优化实例</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 在div+css布局中，一般都这样来整体构架的： div id="header"/div div id="center"/div div id="footer"/div 而对于header部分，肯定要显示网站标题，除了显示网站标题外，还可能要显示其他比较重要的对象，比如网站的导航栏： div id="header" div id="title"这里是网站的标题/div div id="nav"这里是网站导航栏/div /div 很多人一般都这样写的，当然这样写并没有什么语法错误。但对于div来说有个原则，...<a href="http://www.tulaoshi.com/n/20160219/1609277.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/qq991183084/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/17.jpg" /><span>qq991183084</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">5</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1626422" target="_blank"><img src="http://img.tulaoshi.com/201602/19/8855ecfeb90ab418f0a58e95a17ed506_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160219/1626422.html" target="_blank">css布局实例:网页布局的方法</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 许多网页设计师都喜欢，将两个或者多个容器等高的并排放置，并在里面展示每个容器的内容，就象经典表格布局中的单元格控制几个栏目的位置，也喜欢容器的内容居中或顶部对齐显示。 但是你又不喜欢用table来实现他，那怎么办呢？实现的方法很多，有根据视觉错觉实现的，有用JS控制使高度相等的，还有采用容器溢出部分隐藏和列的负底边界和正的内补丁相结合的方法来解决列高度相同的问题。 其实...<a href="http://www.tulaoshi.com/n/20160219/1626422.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/疯子VS教授/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/2.jpg" /><span>疯子VS教授</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">26</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1623517" target="_blank"><img src="http://img.tulaoshi.com/201602/19/ff5a30f5eb741e29b45f096b6246ecbf_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160219/1623517.html" target="_blank">实例学习CSS网页技术基本语法</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 1. 基本语法 CSS的定义是由三个部分构成：选择符（selector），属性（properties）和属性的取值（value）。 基本格式如下： selector {property: value}    （选择符 {属性：值}） 选择符是可以是多种形式，一般是你要定义样式的HTML标记，例如BODY、P、TABLE……，你可以通过此方法定义它的属性和值，属性和值要用冒号隔开： body {color: black}   选择符body是指...<a href="http://www.tulaoshi.com/n/20160219/1623517.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/你自己qq/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/7.jpg" /><span>你自己qq</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">1</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1484214" target="_blank"><img src="http://img.tulaoshi.com/201601/29/68b564b522a358ca23daa83ddd66177f_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160129/1484214.html" target="_blank">用CSS控制网页总体风格</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/html/" target="_blank">Html</a> <a href="http://www.tulaoshi.com/cssbuju/" target="_blank">CSS布局</a> <a href="http://www.tulaoshi.com/divcss/" target="_blank">Div+CSS</a> <a href="http://www.tulaoshi.com/xhtml/" target="_blank">XHTML</a></div> <div class="span_em_123">   网页设计中我们通常需要统一网页的整体风格，统一的风格大部分涉及到网页中文字属性、网页背景色以及链接文字属性等等，如果我们应用CSS来控制这些属性，会大大提高网页设计速度，更加统一网页总体效果。     为了达到修改整个网页的目的，我们需要编辑一个外挂式的CSS文档。根据这个文档定义和修改不同CSS属性并在页面元素相同或者相似的网页里调用它。   &nbs...<a href="http://www.tulaoshi.com/n/20160129/1484214.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/Deerway丶any/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/24.jpg" /><span>Deerway丶any</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">26</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1630318" target="_blank"><img src="http://img.tulaoshi.com/201602/19/77112c4b108eb742cb2f3ddaf86ca78c_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160219/1630318.html" target="_blank">CSS学习之CSS网页制作的10个技巧</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 1.marquee 滚动样式是IE独有的,FF不支持 2.css中的filter效果是IE的私有属性,同样所有的非IE浏览器都不认识的. 3.text-transform:capitalize 强制第一个字母大写；   text-transform:lowercase 强制所有字母小写   text-transform:uppercase 强制所有字母大写 4.按钮陷下去的效果   a:hover { position:relative; top:1px; left:1px} 5.禁止内容换行与强制内容换行   在表格...<a href="http://www.tulaoshi.com/n/20160219/1630318.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/平仔闯天涯/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/28.jpg" /><span>平仔闯天涯</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">4</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1611394" target="_blank"><img src="http://img.tulaoshi.com/201602/19/95df018d35ecce666960c32d50fa4798_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160219/1611394.html" target="_blank">CSS实例教程:CSS制作星级评价的功能</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 效果很简单，可能现在您现在脑子里已经有实现的思路了。下面先看一下我们通常情况下的实现方法： CSS： 以下为引用的内容：           .jsstar         {   list-style: none;             margin: 0px;        ...<a href="http://www.tulaoshi.com/n/20160219/1611394.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/淋漓的忧伤/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/4.jpg" /><span>淋漓的忧伤</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">0</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1621298" target="_blank"><img src="http://img.tulaoshi.com/201602/19/8bed2ceb5eae33238a29837c7ea8168e_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160219/1621298.html" target="_blank">CSS布局实例</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> Source Code to Run html head style type="text/css" !-- body {  margin: 0;  padding: 0;  font-size:12px; } #layout{  background-color: #FFFFFF;  border: 0;  width: 400px;  margin: 0 auto; } .list{  margin: 0px 10px 20px;  text-align: left; } .list ul{  list-style-type: none;  margin: 0px;  padding: 0px; } .list li...<a href="http://www.tulaoshi.com/n/20160219/1621298.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/atjqz8/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/8.jpg" /><span>atjqz8</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">12</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1606626" target="_blank"><img src="http://img.tulaoshi.com/201602/19/55e30cae5ca064f5e106dbd781871c2b_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160219/1606626.html" target="_blank">Div+CSS网页制作误区</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> “重构”的春风吹遍大江南北，互联网一时间风声鹤唳，“div+CSS”俨然已成为一种“时尚”，难以尽数的网站都不约而同地开始了自己的“重构”。然而打开这形形色色网站的源代码，却时常令人哑然失笑—— 我们看到有嵌套6、7层的div布局，有不用table的表格，有纯div+a构成的页面，有成百上千的表现层class……现在关于标准的书籍越来越多，除了少数几本标榜“高级技巧”的书籍以外，很少有人不会在自...<a href="http://www.tulaoshi.com/n/20160219/1606626.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/iceonly666/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/6.jpg" /><span>iceonly666</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">0</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1629954" target="_blank"><img src="http://img.tulaoshi.com/201602/19/7fd20c0562ec6ac3d366542ce4388fcc_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160219/1629954.html" target="_blank">CSS设计网页边框的几个实例</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 掌握CSS网页布局技术，网页边框效果的定义是基础内容，其中也涉及到CSS盒模型知识以及CSS属性简写知识。 相关文章阅读：CSS设计网页时的一些常用规范 实例一： CSS： p {padding: 15px; border: 1px solid black; }  h5{padding: 0px; border: 1px solid red;} XHTML： pThis is a paragraph that has a padding of 15 pixels on every side: top, right, bottom, and left./p h5This header ha...<a href="http://www.tulaoshi.com/n/20160219/1629954.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/ukiuykjhk/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/24.jpg" /><span>ukiuykjhk</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">12</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1630139" target="_blank"><img src="http://img.tulaoshi.com/201602/19/4da1af664c83a8f529ce983ecd3151a2_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160219/1630139.html" target="_blank">网页制作css不解析问题</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 网页采用了 UTF-8 编码格式，这本来没有问题，问题是外部 CSS 文件默认是 ANSI 编码，并没有保存为 UTF-8 格式。可能你会发现在一般情况下这样也是没有问题的，然而当 CSS 文件中包含有中文注释时就可能不尽如人意了！估计是 IE6 版本以下的浏览器在解析这个 CSS 文件时因为编码问题而无法正确解析，所以才会发生 CSS 在 IE6 下不起作用的情况。看来微软已注意到这个问题，在 IE7 中把它修复了。但是用 ...<a href="http://www.tulaoshi.com/n/20160219/1630139.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/小_桥_流水/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/29.jpg" /><span>小_桥_流水</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">6</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1578339" target="_blank"><img src="http://img.tulaoshi.com/201602/17/82275e5fa3cdebb2b6ea6c3464d1e750_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160217/1578339.html" target="_blank">CSS实例教程：制作网页气泡状文本框</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/pmsj/" target="_blank">平面设计</a> <a href="http://www.tulaoshi.com/hbsj/" target="_blank">海报设计</a> <a href="http://www.tulaoshi.com/ggsj/" target="_blank">广告设计</a> <a href="http://www.tulaoshi.com/huabaosheji/" target="_blank">画报设计</a> <a href="http://www.tulaoshi.com/qmsj/" target="_blank">签名设计</a> <a href="http://www.tulaoshi.com/fzsj/" target="_blank">服装设计</a> <a href="http://www.tulaoshi.com/mpsj/" target="_blank">名片设计</a> <a href="http://www.tulaoshi.com/huacesheji/" target="_blank">画册设计</a> <a href="http://www.tulaoshi.com/banshisheji/" target="_blank">版式设计</a> <a href="http://www.tulaoshi.com/shangbiaosheji/" target="_blank">商标设计</a></div> <div class="span_em_123"> 气泡对话框在网页中经常用于说明提示等功能，可以形象生动的现实一些需要用户注意的文字与内容，本文介绍仅用CSS来实现这种简单的网页效果。 气泡状文本框，是一种很生动的网页设计手段。 它可以用来表示用户的发言。 也可以用来作为特定信息的提示符。 DVD租借网站Netflix，还用它显示碟片的详细信息。 制作CSS气泡框的传统方法，需要5张背景图片，分别是： * tl.gif，左上方的圆角。 ...<a href="http://www.tulaoshi.com/n/20160217/1578339.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/ranccf2/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/9.jpg" /><span>ranccf2</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">3</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1621520" target="_blank"><img src="http://img.tulaoshi.com/201602/19/61fd8cc242765d2c7a28a4799fcaa242_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160219/1621520.html" target="_blank">如何学习DIV CSS制作网页</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 我接触的很多人都问，如何学习Web标准制作网页呢？我想每一个刚刚接触web标准的人都会问这样的问题，我就根据自己的经验总结。 1.不要一味使用DW等工具设计网页，去熟悉(X)HTML语言和CSS语言 因为web标准对代码的要求提高了，没有对xhtml代码没有一定的了解是无法通过校检的。DW工具也可以使用，但是要看着代码写网页了。 首先是xhtml代码，不是很多，知道他们如何使用，怎么正确书写，而...<a href="http://www.tulaoshi.com/n/20160219/1621520.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/鸣1165/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/20.jpg" /><span>鸣1165</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">0</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1615990" target="_blank"><img src="http://img.tulaoshi.com/201602/19/5b8225194767141b146b282582b3e337_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160219/1615990.html" target="_blank">用CSS制作照片走廊</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> CSS代码 以下是引用片段：#info { position:relative; background:#fff url(../../updata/pic1b.gif) 175px 44px no-repeat;} #scrollbox { width:400px; height:80px; background:#f4f4f4; overflow:auto; border:1px solid #aaa; margin-left:175px; margin-top:70px;} a.gallery, a.gallery:visited { display:block;  color:#000;  ext-decoration:none; border:1px solid #000; width:75px; h...<a href="http://www.tulaoshi.com/n/20160219/1615990.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/玉树传说/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/10.jpg" /><span>玉树传说</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">53</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1612684" target="_blank"><img src="http://img.tulaoshi.com/201602/19/e28f02fa37323ff04c72cb6a525cf61e_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160219/1612684.html" target="_blank">用css使网页图片半透明</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 你用过css么？当然，我是指你喜欢做网页的话，用过？很好，那你用过它的特效么？没有？那请跟我来。 让我先通俗的介绍一下css，css不属于html，它属于html的辅助语言，在没有css之前，网页是静态的，但自从有了css 后，网页制作的历史就要重写了，css能给网页加入许多你想象不到的动态效果，这也是其中一点而已，因为css中有很多特效，例如我们今天讲的利用css使图片变透明。 也许你会问，GIF...<a href="http://www.tulaoshi.com/n/20160219/1612684.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/响亮白羊/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/4.jpg" /><span>响亮白羊</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">0</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1630079" target="_blank"><img src="http://img.tulaoshi.com/201602/19/13c9d687d0f1274f05b13a6db9940e77_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160219/1630079.html" target="_blank">用CSS进行网页布局的好处</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 符合WEB标准的CSS网页布局相对于传统TABLE布局的一些优势： 一、代码臃肿 首先，Table里面唯一无法用CSS定义的属性只有Cellspacing，Cellpadding几个，其它属性都可以并且应当使用CSS，这样，剩下的，就是tabletrtd和div的对决，我相信一个动辄几十K大小的网页，即使使用了几十个Table，因此多出来的代码也可以忽略不计，那些埋怨Table代码臃肿的人其实该检查自己的编码习惯，能将Table写得十...<a href="http://www.tulaoshi.com/n/20160219/1630079.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/__llllllll_/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/29.jpg" /><span>__llllllll_</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">2</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1618050" target="_blank"><img src="http://img.tulaoshi.com/201602/19/aba730cdfe4857cd0d797c8da10d665a_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160219/1618050.html" target="_blank">网页制作学习：用CSS创建三栏页布局</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123">     三栏布局是目前最常见的网页布局，主要页内容放在中间一栏，边上的两栏放置导航链接之类的内容。基本布局一般是标题之下放置三栏，三栏占据整个页面的宽度，最后在页的底端放置页脚，页脚也占据整个页面宽度。     绝大多数网页设计者都熟悉传统的网页设计技术，用这些技术可以生成带有表格、创建固定宽度布局或者“液态”（它可以根据用户浏览器窗口宽度自动伸缩）布局...<a href="http://www.tulaoshi.com/n/20160219/1618050.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/謎途丘比特/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/1.jpg" /><span>謎途丘比特</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">6</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> </ul> <div id="pages" class="clearfix"> <a href="/reader/21297.html">上一页</a><a href="/reader/21294.html">21294</a><a href="/reader/21295.html">21295</a><a href="/reader/21296.html">21296</a><a href="/reader/21297.html">21297</a><a href="/reader/21298.html" class="cur">21298</a><a href="/reader/21299.html">21299</a><a href="/reader/21300.html">21300</a><a href="/reader/21301.html">21301</a><a href="/reader/21302.html">21302</a><a href="/reader/21299.html">下一页</a> </div> </div> </div> <!--footer底部--> <script type="text/javascript">tls.output.show_foot();</script> <div class="float_bottom" id="fixbottom" style="bottom:30px;"> <a href="http://m.tulaoshi.com//" class="icon_hu3">手机页面</a> <div class="float_bot_2"> <a href="javascript:;"id="show_search_input"> <input type="submit" class="input_sub" id="fixbottom_search_btn"> <input type="text" class="text_a_input" placeholder="输入你想搜索的关键词" style="display:none;" id="fixbottom_search_input"> </a> </div> <a href="javascript:;" class="icon_hu2" id="fav_site_btn" data-url="http://www.tulaoshi.com//">收藏网站</a> <a href="javascript:;" class="icon_hu" id="totop">回到头部</a> </div> <!--tag PC分类 标签--> <script type="text/javascript" src="http://static.tulaoshi.com/js/zt.js"></script> </body> </html>