CSS实例教程:CSS制作虚线的2种方法

如何用CSS定义虚线？在CSS中定义虚线一般有两种方法:一种是定义DIV的CSS样式，另一种是通过hr的CSS样式实现。

我们首先需要了解，关于线条的CSS的两个样式：
dotted : 　在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线
dashed : 　在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线

水平线条，我们可以用hr来实现，也可以定义一个div，将它的高度设为1px或其它你想要的高度。
CSS定义一条水平虚线hr的方法：
!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"headmeta http-equiv="Content-Type" content="text/html; charse...<a href="https://www.tulaoshi.com/n/20160220/1631634.html" target="_blank">[ 查看全文 ]</a></p> <div class="img_yyy_2"> <span>2016-02-20</span> <i>标签:</i> <div class="yyy_2_a"><a href="https://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="https://www.tulaoshi.com/n/20160220/1631634.html" target="_blank">CSS实例教程:CSS制作虚线的2种方法</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/1631622" target="_blank"><img src="https://img.tulaoshi.com/201602/20/3da27cb8828b288115481362b7494554_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="https://www.tulaoshi.com/n/20160220/1631622.html" target="_blank">CSS实例教程:CSS Hack</A></div> <div class="xiang_righ_lable">标签：<a href="https://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 写完第七课，因为时间问题没有继续写第八课有关浏览器兼容方面的文章，以为大家可以自己掌握这方面的知识，不过发现有很多同学找了很多资料，很多文章去研究，费时费力的，效果也不好，今天是星期六，我呢就再给大家补写这篇教程，带领大家用最短的时间掌握CSS Hack！说到浏览器兼容性问题，就必须说CSS Hack！提到Hack大家肯定会想到电脑黑客(hacker)、和病毒程序联系到一块，不过在CSS中，Hack是指一种...<a href="https://www.tulaoshi.com/n/20160220/1631622.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/快乐时尚的我/" target="_blank"><img src="https://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/12.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="https://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="https://www.tulaoshi.com/n/20160219/1611394.html" target="_blank">CSS实例教程:CSS制作星级评价的功能</A></div> <div class="xiang_righ_lable">标签：<a href="https://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 效果很简单，可能现在您现在脑子里已经有实现的思路了。下面先看一下我们通常情况下的实现方法： CSS：以下为引用的内容： .jsstar { list-style: none; margin: 0px; ...<a href="https://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="https://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/1631099" target="_blank"><img src="https://img.tulaoshi.com/201602/20/0b25976f2acf6d5b1c4e4071fee102e1_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="https://www.tulaoshi.com/n/20160220/1631099.html" target="_blank">CSS实例教程:制作网页2级导航</A></div> <div class="xiang_righ_lable">标签：<a href="https://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 除非你的网站只有一页,不然你一定会用的导航的.事实上,导航在网页设计中是最重要部分之一.你要用很多时间去考虑如何让浏览者更容易访问你的网站. 在以前做网站导航时,往往依赖于图像,表格,和javascript.而这些都严重的影响了网站的可访问性和可使用性.如果在一个缺乏支持javascript的用户,那么你的网站导航将无算正常的显示.比如说一个用户把浏览器的javascript关闭掉,或者在一个只能读纯文字的手持设备-...<a href="https://www.tulaoshi.com/n/20160220/1631099.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/BY96678/" target="_blank"><img src="https://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/29.jpg" /><span>BY96678</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/1629932" target="_blank"><img src="https://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="https://www.tulaoshi.com/n/20160219/1629932.html" target="_blank">CSS网页制作布局实例教程</A></div> <div class="xiang_righ_lable">标签：<a href="https://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 相关文章：用CSS建设网站的实例原文博客：veerle 翻译整理：西米CC 来自国外博客veerle的一个系列教程，分八个部分讲解一张完整CSS页面的构建过程。虽然它不是每个步骤都解释得非常详细，但是其中提及的很多技巧和经验都很值得初学者借鉴，从界面设计到页面构建，强调了很多细节的设计理念。在翻译的过程中，个人觉得本教程比较薄弱的环节是页面整体布局的搭建，篇幅不是很充分，不过大家仍然可以通...<a href="https://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="https://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/1607189" target="_blank"><img src="https://img.tulaoshi.com/201602/19/494a01bddb07d7f31a2ce26b305d6be2_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="https://www.tulaoshi.com/n/20160219/1607189.html" target="_blank">玩转CSS CSS精彩实例教程(一)</A></div> <div class="xiang_righ_lable">标签：<a href="https://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> CSS(Cascading Stylesheets，层叠样式表)是一种制作网页的新技术，现在已经为大多数的浏览器所支持，成为网页设计必不可少的工具之一。使用CSS能够简化网页的格式代码，加快下载显示的速度，也减少了需要上传的代码数量，大大减少了重复劳动的工作量。尤其是当你面对的是有数百个网页的站点时，CSS简直象是神对我们的恩赐! 前言 CSS(Cascading Stylesheets，层叠样式表)是一种制作网页的新技术...<a href="https://www.tulaoshi.com/n/20160219/1607189.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/安然vfcjx/" target="_blank"><img src="https://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/29.jpg" /><span>安然vfcjx</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/1607134" target="_blank"><img src="https://img.tulaoshi.com/201602/19/1e784ec88b5d76599f5e8209ff0a45d5_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="https://www.tulaoshi.com/n/20160219/1607134.html" target="_blank">玩转CSS CSS精彩实例教程(三)</A></div> <div class="xiang_righ_lable">标签：<a href="https://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 十二、控制BOX的样式样式表规定了一个容器BOX，它将要储存一个对象的所有可操作的样式。包括了对象本身、边框空白、对象边框、对象间隙四个方面。为了大家更好地理解这些属性的意义，以及互相之间的关系，请看下面这个图示: 1.边框空白(MARGIN) 如图所示，位于BOX模型的最外层，包括四项属性。格式分别如下: ·margin-top:顶部空白距离 ·margin-right:右边...<a href="https://www.tulaoshi.com/n/20160219/1607134.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/假如你说Max/" target="_blank"><img src="https://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/4.jpg" /><span>假如你说Max</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/1607126" target="_blank"><img src="https://img.tulaoshi.com/201602/19/c984fc34744b412b55cd6c512e7ec293_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="https://www.tulaoshi.com/n/20160219/1607126.html" target="_blank">玩转CSS CSS精彩实例教程(二)</A></div> <div class="xiang_righ_lable">标签：<a href="https://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 七、控制文字的样式控制文字的样式包括文字大小写、文字修饰两个部分。 1.文字大小写文字大小写使网页的设计者不用在输入文字时就完成文字的大小写，而可以在输入完毕后，再根据需要对局部的文字设置大小写。基本格式如下: text-transform: 参数参数取值范围: ·uppercase:所有文字大写显示 ·lowercase:所有文字小写显示 ·capitalize:每个单词的头...<a href="https://www.tulaoshi.com/n/20160219/1607126.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/莎莎小女王22/" target="_blank"><img src="https://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/26.jpg" /><span>莎莎小女王22</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/1631525" target="_blank"><img src="https://img.tulaoshi.com/201602/20/63033836cb005f4b8373253c3a8604bc_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="https://www.tulaoshi.com/n/20160220/1631525.html" target="_blank">CSS实例教程:纯CSS实现圆角框</A></div> <div class="xiang_righ_lable">标签：<a href="https://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 序言：在我的文章《超圆滑圆角框的半完美解决方案》中已经总结了七种不同的圆角框解决方案，基本上总结完了目前网络上比较流行的圆角框实现方案。而在我的另一篇文章《无图片山顶角》中又是一个另类的实现方法。纯CSS实现圆角框是一件大家都说烂了的事件，我也写过两篇总结文章，为什么还会有这篇文章呢，事情是这样的。在我们的以前的项目中，实现圆角框往往是用背景图片来实现的，但是，当这些项目发...<a href="https://www.tulaoshi.com/n/20160220/1631525.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/夏天夏日啊/" target="_blank"><img src="https://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/5.jpg" /><span>夏天夏日啊</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/1631093" target="_blank"><img src="https://img.tulaoshi.com/201602/20/fb46cf82aad6cf56eb736fe80f63cc55_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="https://www.tulaoshi.com/n/20160220/1631093.html" target="_blank">CSS实例教程:制作网站横向导航</A></div> <div class="xiang_righ_lable">标签：<a href="https://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 在上面一节我们讲到的是垂直的导航.但是大多网站用的还是横向的导航,那么就来跟我学下横向导航是如何实现的. 要怎么实现下面的效果.只要在列表项之间避免换行就行了,所以要把li转换为内联. HTML和CSS代码如下: ============================= !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quo...<a href="https://www.tulaoshi.com/n/20160220/1631093.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/大红门937/" target="_blank"><img src="https://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/23.jpg" /><span>大红门937</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/1604824" target="_blank"><img src="https://img.tulaoshi.com/201602/19/44beb8813a855d1b05b80344e6a42f64_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="https://www.tulaoshi.com/n/20160219/1604824.html" target="_blank">Div CSS实例教程：页面制作方法</A></div> <div class="xiang_righ_lable">标签：<a href="https://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123">做前端也有几年时间了，不敢说能把他看地多透，但是多多少少还是有些自己的东西。就制作而言，我将一张页面分为四层：框架、布局、模块、列表和数据块。一、框架页面的框架基本上都是：“头”、“主体”、“尾”。但是对于一些页面如Tudou.com，由于布局的需要，还应在“头”的下面还要加个“菜单”。二、布局（以下用#ID表示页面元素） #Head和#Foot里的就不说了，具体查看...<a href="https://www.tulaoshi.com/n/20160219/1604824.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/古府夜风/" target="_blank"><img src="https://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/4.jpg" /><span>古府夜风</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/1631596" target="_blank"><img src="https://img.tulaoshi.com/201602/20/920cfb036052324f39708055a1483f85_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="https://www.tulaoshi.com/n/20160220/1631596.html" target="_blank">CSS实例教程:清除浮动Clear</A></div> <div class="xiang_righ_lable">标签：<a href="https://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 课程关键词：清除浮动Clear 还记得第二课我们做的例子的效果么？最后效果是，红色方块和蓝色方块都处于一行，我们使用Float:left，打击了块状元素的霸道即块状元素不允许其他元素和它处于同一行。我们将红色方块的CSS代码中加入了Float:left;后，红色方块终于允许蓝色方块和它处于同一行。如图：我们换一种方法表达上面的意思，因为红色方块的左侧浮动，才导致蓝色方块上移至红色方块的尾后；在上个...<a href="https://www.tulaoshi.com/n/20160220/1631596.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/Mrfbck/" target="_blank"><img src="https://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/16.jpg" /><span>Mrfbck</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/1631589" target="_blank"><img src="https://img.tulaoshi.com/201602/20/5bbb5d6f4f8a1daa8f6fae26dbc859ee_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="https://www.tulaoshi.com/n/20160220/1631589.html" target="_blank">css实例教程:理解Float的含义</A></div> <div class="xiang_righ_lable">标签：<a href="https://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 课程关键词：浮动页面布局有两种方式 1）浮动Float 2）定位Position 今天就来一个小小的练习，让大家理解Float的含义要求： 1）两个方块，一个红色#900，一个蓝色#009； 2）红色方块宽度和高度均为200像素，蓝色方块宽度为300像素，高度为200像素； 3）红色方块蓝的上外边距(margin-top)和左外边距(margin-left)均为20像素；页面效果如下：源代码：例子2.rar 大家应该注意到了，虽然...<a href="https://www.tulaoshi.com/n/20160220/1631589.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/爱迷失方向的狼/" target="_blank"><img src="https://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/9.jpg" /><span>爱迷失方向的狼</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/1630917" target="_blank"><img src="https://img.tulaoshi.com/201602/19/037a1f8e506c13954421078a3e68dd9e_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="https://www.tulaoshi.com/n/20160219/1630917.html" target="_blank">CSS教程(2)：通过实例学习CSS背景</A></div> <div class="xiang_righ_lable">标签：<a href="https://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 本教程一共三个例子：1、设置背景颜色;2、设置文本的背景颜色;3、将图像设置为背景。参考网页教学网关于CSS背景的理论知识：CSS教程(1)：学习CSS背景相关知识 1、设置背景颜色本例演示如何为元素设置背景颜色。 html head style type="text/css" body {background-color: yellow} h1 {background-color: #00ff00} h2 {background-color: transparent} p {background-color: rgb(250,0,255...<a href="https://www.tulaoshi.com/n/20160219/1630917.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/遭殃煽叵/" target="_blank"><img src="https://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/27.jpg" /><span>遭殃煽叵</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/1630365" target="_blank"><img src="https://img.tulaoshi.com/201602/19/c6c5ac188d306d47722dd633886cd7ba_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="https://www.tulaoshi.com/n/20160219/1630365.html" target="_blank">CSS网页布局教程：CSS伪类定义3种方法</A></div> <div class="xiang_righ_lable">标签：<a href="https://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 在CSS网页布局中，不可避免的会涉及到CSS伪类的问题。到底该如何正确的定义CSS伪类呢？虽然webjx中有很多相关的介绍，但复习一下也无妨。大家看下面的代码就能明白。 a.webjxcom{text-decoration:none;} a.webjxcom:link{color:#f90;} a.webjxcom:hover{color:#fff;background-color:#FF5900;} a.webjxcom:active{color:#FF5900;} a href="http://www.webjx.com/" class="webjxcom"...<a href="https://www.tulaoshi.com/n/20160219/1630365.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/enjoyabandon4/" target="_blank"><img src="https://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/15.jpg" /><span>enjoyabandon4</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/1577797" target="_blank"><img src="https://img.tulaoshi.com/201602/17/3006a5fe693687bf8cf2965abce54d05_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="https://www.tulaoshi.com/n/20160217/1577797.html" target="_blank">CSS实例教程：十步学会用CSS建站</A></div> <div class="xiang_righ_lable">标签：<a href="https://www.tulaoshi.com/pmsj/" target="_blank">平面设计</a> <a href="https://www.tulaoshi.com/hbsj/" target="_blank">海报设计</a> <a href="https://www.tulaoshi.com/ggsj/" target="_blank">广告设计</a> <a href="https://www.tulaoshi.com/huabaosheji/" target="_blank">画报设计</a> <a href="https://www.tulaoshi.com/qmsj/" target="_blank">签名设计</a> <a href="https://www.tulaoshi.com/fzsj/" target="_blank">服装设计</a> <a href="https://www.tulaoshi.com/mpsj/" target="_blank">名片设计</a> <a href="https://www.tulaoshi.com/huacesheji/" target="_blank">画册设计</a> <a href="https://www.tulaoshi.com/banshisheji/" target="_blank">版式设计</a> <a href="https://www.tulaoshi.com/shangbiaosheji/" target="_blank">商标设计</a></div> <div class="span_em_123"> 本教程主要参考Creating a CSS Layout from scratch，由Jorux翻译，以意译为主，其间加入了不少Jorux的个人观点，省略了一些多余的说明，请读者明鉴。目录：第一步：规划网站，本教程将以图示为例构建网站；第二步：创建html模板及文件目录等；第三步：将网站分为五个div，网页基本布局的基础；第四步：网页布局与div浮动等；第五步：网页主要框架之外的附加结构的布局与表现；第六步：页面...<a href="https://www.tulaoshi.com/n/20160217/1577797.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/home辉煌哥/" target="_blank"><img src="https://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/7.jpg" /><span>home辉煌哥</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">56</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1577009" target="_blank"><img src="https://img.tulaoshi.com/201602/17/d6fb019910be0dda3a893fd85f4d8f0e_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="https://www.tulaoshi.com/n/20160217/1577009.html" target="_blank">CSS实例教程：制作图片水平垂直居中</A></div> <div class="xiang_righ_lable">标签：<a href="https://www.tulaoshi.com/pmsj/" target="_blank">平面设计</a> <a href="https://www.tulaoshi.com/hbsj/" target="_blank">海报设计</a> <a href="https://www.tulaoshi.com/ggsj/" target="_blank">广告设计</a> <a href="https://www.tulaoshi.com/huabaosheji/" target="_blank">画报设计</a> <a href="https://www.tulaoshi.com/qmsj/" target="_blank">签名设计</a> <a href="https://www.tulaoshi.com/fzsj/" target="_blank">服装设计</a> <a href="https://www.tulaoshi.com/mpsj/" target="_blank">名片设计</a> <a href="https://www.tulaoshi.com/huacesheji/" target="_blank">画册设计</a> <a href="https://www.tulaoshi.com/banshisheji/" target="_blank">版式设计</a> <a href="https://www.tulaoshi.com/shangbiaosheji/" target="_blank">商标设计</a></div> <div class="span_em_123"> 做为一个前端设计人员，对于产品展示页面的设计一定不会陌生，其中产品图片摆放是必定经历的一步，并且水平居中和垂直居中又是最多的。有时需要产品图片水平垂直居中显示，这种展示用CSS来实现又是比较棘手的一件事，我想很多前端攻程师都有研究过或者说是搜索过这些方法吧。很多网站都是使用table来实现产品图片垂直居中，实现也是相当的方便，唯一不足之处就是结构繁锁，那么今天和大家一起看几种不是使用t...<a href="https://www.tulaoshi.com/n/20160217/1577009.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/845534928/" target="_blank"><img src="https://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/29.jpg" /><span>845534928</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/1631557" target="_blank"><img src="https://img.tulaoshi.com/201602/20/c9e87f2f3ec4022e2f2f4a3b1c65ba59_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="https://www.tulaoshi.com/n/20160220/1631557.html" target="_blank">CSS3制作的精彩的网页实例教程</A></div> <div class="xiang_righ_lable">标签：<a href="https://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 今天看到 Joshua Johnson 的一篇 10 Amazing Examples of Innovative CSS3 Animation 很是精彩，大概翻译如下： CSS3带来了很多令人印象深刻的新功能，最有意思的或许是很多基于javascript来实现的功能，现在可以用CSS动画来制作。以下是我找到的用CSS3创建的精彩案例：注意：以下演示代码在IE6等低端浏览器下无效，请下载并安装现代浏览器旋转相册：教程 | 演示地址黑客帝国：教程 | 演示地...<a href="https://www.tulaoshi.com/n/20160220/1631557.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/上帝已嫁人/" target="_blank"><img src="https://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/7.jpg" /><span>上帝已嫁人</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/1630699" target="_blank"><img src="https://img.tulaoshi.com/201602/19/4d97c68d870752a233f8e23a67bcd67f_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="https://www.tulaoshi.com/n/20160219/1630699.html" target="_blank">CSS实例:CSS制作的像素图</A></div> <div class="xiang_righ_lable">标签：<a href="https://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"html xmlns="http://www.w3.org/1999/xhtml"headmeta http-equiv="Content-Type" content="text/html; char...<a href="https://www.tulaoshi.com/n/20160219/1630699.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/kimi金池/" target="_blank"><img src="https://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/19.jpg" /><span>kimi金池</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">9</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1631607" target="_blank"><img src="https://img.tulaoshi.com/201602/20/42f97df23b1d74166b54cae0703fceb9_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="https://www.tulaoshi.com/n/20160220/1631607.html" target="_blank">CSS实例教程:浮动(float)页面布局</A></div> <div class="xiang_righ_lable">标签：<a href="https://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 前四节的大练习大家做的怎么样？有没有难度，如果你觉着有难度没有关系，这节课，我带着大家做一下这个练习！我们先来分析一下这个页面页面主要分5大块，顶部的Logo、导航条Nav、Banner、Content、Footer，如下图这样HTML就很容易写出来了 div id="Logo"/div div id="Nav"/div div id="Banner"/div div id="Content"/div div ...<a href="https://www.tulaoshi.com/n/20160220/1631607.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/铁月情/" target="_blank"><img src="https://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/27.jpg" /><span>铁月情</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/1631519" target="_blank"><img src="https://img.tulaoshi.com/201602/20/428ab7fea00f02d10617352ab95ca2d0_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="https://www.tulaoshi.com/n/20160220/1631519.html" target="_blank">CSS实例教程:分号引起页面混乱</A></div> <div class="xiang_righ_lable">标签：<a href="https://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 昨天由于一个页面的css样式增加，需要在原有的css里面增加样式。由于在头部增加了一些修改信息，所以，样式表的最上面修改了一下！原来最上面是：@charset "utf-8"; 后来我增加东西之后又把这个：@charset "utf-8";放到最上面但是不小心把分号给去掉了，变成了这样：@charset "utf-8"结果页面出现有的样式没有应用上。百思不得其解，最后又重新上传原来备份的样式，一...<a href="https://www.tulaoshi.com/n/20160220/1631519.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/MXZ晴天/" target="_blank"><img src="https://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/29.jpg" /><span>MXZ晴天</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> </ul> <div id="pages" class="clearfix"> <a href="/reader/21272.html">上一页</a><a href="/reader/21269.html">21269</a><a href="/reader/21270.html">21270</a><a href="/reader/21271.html">21271</a><a href="/reader/21272.html">21272</a><a href="/reader/21273.html" class="cur">21273</a><a href="/reader/21274.html">21274</a><a href="/reader/21275.html">21275</a><a href="/reader/21276.html">21276</a><a href="/reader/21277.html">21277</a><a href="/reader/21274.html">下一页</a> </div> </div> </div>  <script type="text/javascript">tls.output.show_foot();</script> <div class="float_bottom" id="fixbottom" style="bottom:30px;"> <a href="https://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="https://www.tulaoshi.com//">收藏网站</a> <a href="javascript:;" class="icon_hu" id="totop">回到头部</a> </div>  <script type="text/javascript" src="https://static.tulaoshi.com/js/zt.js"></script> </body> </html>