网页制作教程:制作拖拽翻页

原本是为自己的博客网站设计的，周二产生的灵感，周三周四逃课两天算坐标，周五回家，到傍晚才算写出了第一版，发布之后没想到评价还不错，此后太多人问我这个效果应该怎么修改，才能用到自己的网站上，所以现在发这个帖子详细解释一下这个效果的原理

在此正式将此效果命名为 ThrowPage ，而且我肯定会继续完善这个效果，并发布封装好的代码，方便大家调用，可能一个月后，也可能一年后，In Me God Trust

本文将按结构层、表现层、行为层三层分开的顺序来写：

运行代码框
htmlheadtitleThrowPage/titlestyle type="text/css"html,body{width:100%;height:100%;border:0px;margin:0px;overflow:hidden;}#menu{width:1000px;height:500px;overflow:hidden;background:lightblue;}.page{position:absolute;width:300px;height:400px;left:350px;...<a href="http://www.tulaoshi.com/n/20160220/1631143.html" target="_blank">[ 查看全文 ]</a></p> <div class="img_yyy_2"> <span>2016-02-20</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/20160220/1631143.html" target="_blank">网页制作教程:制作拖拽翻页</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/1631048" target="_blank"><img src="http://img.tulaoshi.com/201602/20/18782ba88eaf66f4071ef751da9c4d7a_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/20160220/1631048.html" target="_blank">网页制作学习教程:CSS Position</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. position:static 所有元素的默认定位都是：position:static，这意味着元素没有被定位，而且在文档中出现在它应该在的位置。一般来说，不用指定 position:static，除非想要覆盖之前设置的定位。 #div-1 { position:static;} 2. position:relative 如果设定 position:relative，就可以使用 top,bottom,left 和 right 来相对于元素在文档中应该出现的位置来移动这个元素。 #div-1 { position:relati...<a href="http://www.tulaoshi.com/n/20160220/1631048.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/8.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/1631104" target="_blank"><img src="http://img.tulaoshi.com/201602/20/1023fb5aa98c1072860ad47469c7d1c6_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/20160220/1631104.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"> 从前没有网页设计师，最早的网页都只有文字，后来有Html，便开始有了网页设计师。如今有很多人都片面的认为网页设计师从事的是平面设计的工作，但如果不懂得html,很难算得上是一流的网页设计师。 Html让纯文本的网页变得丰富起来，图形图像、音频、视频、FLASH动画开始让网络世界变得五彩斑斓，打开了一扇窗。 ...<a href="http://www.tulaoshi.com/n/20160220/1631104.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/半岛1215/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/4.jpg" /><span>半岛1215</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/1569492" target="_blank"><img src="http://img.tulaoshi.com/201602/16/9dbfa3e4048fdad1ed745958b4edf5df_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/20160216/1569492.html" target="_blank">Photoshop制作精美的网页按钮教程</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/ps/" target="_blank">PS</a> <a href="http://www.tulaoshi.com/psjichu/" target="_blank">PS基础</a></div> <div class="span_em_123"> 先看效果图。 1、新建文档，尺寸自定，背景白色，建新层，画一黑色圆角矩形。 2、分别添加投影、描边这两个图层样式。效果如下图所示。 3、创建一个新图层，使用圆角矩形工具制作一个小一点的白色矩形，你可以使用自由变换调整它的大小和位置，如图所示。 4、为白色的圆角矩形添加投影、内阴影、渐变叠加和描边这几种图层样式，如图所示。效果如下图所示。 5、新建...<a href="http://www.tulaoshi.com/n/20160216/1569492.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/12.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/1569500" target="_blank"><img src="http://img.tulaoshi.com/201602/16/d127c71520ed657f03313fcf45cc93dc_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/20160216/1569500.html" target="_blank">Photoshop制作质感的网页LOGO教程</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/ps/" target="_blank">PS</a> <a href="http://www.tulaoshi.com/psjichu/" target="_blank">PS基础</a></div> <div class="span_em_123"> 先看看最终效果图新建文档300x300像素，背景白色。建新层，前景色#91d638画一个多边形。添加图层样式。效果如下。建新层，画一个白色的小多边形。建新层，前景色#91d638画一个更小的多边形。添加图层样式。合并除背景之外的所有层，ctrl+J复制一层，ctrl+T垂直翻转，往下挪一段距离。输入一些文字。 <a href="http://www.tulaoshi.com/n/20160216/1569500.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/20.jpg" /><span>小僧无礼了</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/128644" target="_blank"><img src="http://img.tulaoshi.com/201501/09/e3371822d607b2cef70c0717d1c9e335.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20150109/128644.html" target="_blank">photoshop教程制作简单网页小技巧</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/psjiaocheng/" target="_blank">PS教程</a> <a href="http://www.tulaoshi.com/psjichu/" target="_blank">PS基础</a></div> <div class="span_em_123"> 一篇文章配上一个漂亮的版面，可以使人耳目一新或着是一种视觉享受。版面设计可以用photoshop软件制作，用PS制作网页版面可以很好的控制和调整网页框架的布局或色彩的协调搭配，也便于整体的修改和局部的细致刻画，使网页更具个性化。用PS制作网页前，应对制作的网页有个初步的构思，等把大的色块做好后，再调整色块间的明暗度、对比度、饱和度进行调整，而后再...<a href="http://www.tulaoshi.com/n/20150109/128644.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/Ehime/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/4.jpg" /><span>Ehime</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">37</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/1569090" target="_blank"><img src="http://img.tulaoshi.com/201602/16/5fdcc0e34d036d413b7f155a1d3f15df_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/20160216/1569090.html" target="_blank">Photoshop设计教程：ipad主题网页制作教程</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/ps/" target="_blank">PS</a> <a href="http://www.tulaoshi.com/psjichu/" target="_blank">PS基础</a></div> <div class="span_em_123"> 最终效果图 ipad电脑图片 #3a3a3a，#111111。以增加背景的层次感。新建图层，用矩形工具拉出一个矩形框，使用渐变来填充矩形框。用矩形选择工具选中ipad显示屏区域，添加一些好看的图片进去文本区域看起来很单调，最好的方法是加入一些按钮与图标等，这里先加入以个圆角矩形按钮加入一些图标同样的方法在ipad功能说明去添加其他矩形文字区块在功能...<a href="http://www.tulaoshi.com/n/20160216/1569090.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:;">7</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1624647" target="_blank"><img src="http://img.tulaoshi.com/201602/19/f3f30d9aff7101ab33786eb96b45ed4f_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/1624647.html" target="_blank">Dreamweaver网页制作技巧</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 本文汇集了一些Dreamweaver制作网页时的可以用的一些小技巧。希望对您有所帮助。 1）怎样将 Dreamweaver 集成到 IE 浏览器？ Dreamweaver 安装程序会在上下文选单增加一个“ Edit with Dreamweaver ”命令，我们还可以修改 Windows 的注册表使它与 IE 集成。就象 MS Word 、 Frontpage 和 Notepad 一样，通过 IE 工具栏的编辑按钮来调用 Dreamweaver 打开当前网页。将下面文本的最后...<a href="http://www.tulaoshi.com/n/20160219/1624647.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/qq601036953/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/27.jpg" /><span>qq601036953</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/1505037" target="_blank"><img src="http://img.tulaoshi.com/201601/29/9f9bbccd689068418438e545188543ca_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/1505037.html" target="_blank">Photoshop网页制作教程：设计制作汽车网站头部流程</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/ps/" target="_blank">PS</a> <a href="http://www.tulaoshi.com/psjiaocheng/" target="_blank">PS教程</a></div> <div class="span_em_123"> 在学习中遇到问题可以到论坛发贴交流！首先选择一张汽车的图片素材在PS中将汽车图片的上部去除使用我们准备的风景图片 [next] 将风景图片拖动到汽车图层之后作为背景为了使图片更真实，我们要把车窗部分扣出，并将其不透明度调整为80%，这样车窗就能出现真实透明效果的感觉了由于白云部分的图片过于图片，我们将白云区域选中 [next] 新建一个图层，...<a href="http://www.tulaoshi.com/n/20160129/1505037.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/27.jpg" /><span>情痴一浪子</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">25</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1630802" target="_blank"><img src="http://img.tulaoshi.com/201602/19/4ab683f9c27f44194875f9ac595079b2_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/1630802.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书写格式是我自创的，常有朋友提出异议，这里做个简单总结：分类，一个模块或者同类功能定义为一类定义，每类定义之间用段落隔开；分级，每类定义中的每个定义语句，根据结构或语意级别使用Tab缩进纵向对齐；分断，每个定义内的每个属性定义之间，用分号+空格隔开，注意定义语句与分号间无空格，{}内前有空格而后无空格；连排，每个定义不换行，一直横排。某些编辑器会自动换行，但无大影响，...<a href="http://www.tulaoshi.com/n/20160219/1630802.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:;">2</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1622379" target="_blank"><img src="http://img.tulaoshi.com/201602/19/5736245f6c67e6df4a80869b2498ebc1_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/1622379.html" target="_blank">Dreamweaver网页制作教程：层及其应用</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 层（Layer）是一种 HTML 页面元素，您可以将它定位在页面上的任意位置。层可以包含文本、图像或其它 HTML 文档。层的出现使网页从二维平面拓展到三维。可以使页面上元素进行重叠和复杂的布局。首先，请看下图：我们首先来做一个层 1、在「窗口」菜单＞选“层”，或点「插入」菜单＞布局对象＞选“层”。 2、在页面中显示一个层。 3、通过周围的黑色调整柄拖动控制层的大小 ...<a href="http://www.tulaoshi.com/n/20160219/1622379.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/9.jpg" /><span>曾经的戈哥</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">13</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1625896" target="_blank"><img src="http://img.tulaoshi.com/201602/19/27b96d20bec57c4e6bd068075075635f_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/1625896.html" target="_blank">网页制作之用Dreamweaver优化网页</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 优化网页，加快网页下载速度，除了对图片进行优化之外，还需对网页其他各个元素进行优化。在网页编织过程中如能充分利用编辑工具，也可以在网页制作中达到优化目的。下面是Dreamweaver中的一些优化技法：合理调用CSS 进行网页设计时，运用样式表单CSS来对页面元素进行布置，可以大大地减少HTML代码，这点我们已经很清楚。Dreamweaver中样式表的加入方法有多种，一是选定对象，从右键菜单中选...<a href="http://www.tulaoshi.com/n/20160219/1625896.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/信誉32650缎卣/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/16.jpg" /><span>信誉32650缎卣</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/1577994" target="_blank"><img src="http://img.tulaoshi.com/201602/17/fafa64bc4d83efa45170cbed97011370_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/1577994.html" target="_blank">设计教程：多种网页图案制作方法</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"> 关于网页图案，首先需要说明的是，用作页面背景的网页图案一定要简单，效果不能太强烈，只需要提供一点点质感就可以了，要不就抢了页面内容的风头。而实际上页面内容才应该是整个网站的视觉焦点。这种经验我们可以在给手机换壁纸的时候收获到，我们经常是本能的去挑选那些非常漂亮的风景照或者非常抢眼的图片作为手机的背景图片，可等真正将壁纸换上去之后发现效果并不理想，原因是手机的屏幕不是光秃秃一片...<a href="http://www.tulaoshi.com/n/20160217/1577994.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/24.jpg" /><span>依然小先森</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">8</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1569080" target="_blank"><img src="http://img.tulaoshi.com/201602/16/4dcb6af9d1c37b3cd8d7633282f02f17_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/20160216/1569080.html" target="_blank">Photoshop制作网页常见卷页效果教程</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/ps/" target="_blank">PS</a> <a href="http://www.tulaoshi.com/psjichu/" target="_blank">PS基础</a></div> <div class="span_em_123"> 最终效果 1) 利用圆角矩形工具建立一条路径;使用转换点工具移动左上角路径节点,使其产生卷页的形状; 2) 用任意一种色彩填充工作路径;再复制下半部分;对其添加图层样式,如图所示. 3) 用任意一种色彩绘制一个圆角矩形;将其图层移至红色矩形之后;添加图层样式,如图所示. 4) 再新建一层,绘制圆色矩形,颜色为黑色,高度与红色矩形相同;按CTRL键点击黑色矩形所在图层,调出黑色矩形选区,将选区向...<a href="http://www.tulaoshi.com/n/20160216/1569080.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/20.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/1567814" target="_blank"><img src="http://img.tulaoshi.com/201602/16/6461d2cfdcd551d7dcaf939953ff6ca8_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/20160216/1567814.html" target="_blank">Photoshop制作好看的网页按钮教程</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/ps/" target="_blank">PS</a> <a href="http://www.tulaoshi.com/psjichu/" target="_blank">PS基础</a></div> <div class="span_em_123"> 先看看效果图打开photoshop，新建空白文档。为了不让白色背景看起来乏味，增加一个渐变叠加效果。渐变颜色为# f3f3f3到# c6c6c6。选择圆角矩形工具，创建按钮的的主要形状，半径为5 px。添加渐变叠加图层样式。渐变颜色从#0d3079到#557bc9。现在让按钮从背景中突显出来，添加1 px描边，颜色为深蓝色(#0b2258)。为了增加按钮立体感，添加一个1像素内发光。颜色为白色(#FFFFF...<a href="http://www.tulaoshi.com/n/20160216/1567814.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/14.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/1604253" target="_blank"><img src="http://img.tulaoshi.com/201602/19/4d846410356e6cd17beb51e1dc50899f_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/1604253.html" target="_blank">怎样设计网页？怎样制作网页？</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/1604253.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/3.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/1630089" target="_blank"><img src="http://img.tulaoshi.com/201602/19/38f2fb070e75c239b335d06bb24152da_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/1630089.html" target="_blank">制作网页评论表单</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> vadim，usabilitypost 的读者，发表过一篇很有意思的文章，《评论表单设计》。文章里说他在网上留心很久，发现了网上的大多数表单都把姓名和Email 作为必填的选项，不过作为评论表单来说和传统表单应该有区别了，除了姓名和Email外，评论项也是必不可少的，如图： vadim提到，他曾特意去观察一些有上百条评论的热门博客，他发现这些博客的评论表单的选项非常多也没有注明是否必填，很多人不得不在某些...<a href="http://www.tulaoshi.com/n/20160219/1630089.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/trippizza16/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/9.jpg" /><span>trippizza16</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/1626554" target="_blank"><img src="http://img.tulaoshi.com/201602/19/9333b73ceb2d946df80ddf71cff76a8c_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/1626554.html" target="_blank">网页制作秘招</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 刚上网时感觉自己就像一个海绵，拼命地汲取网上的丰富资源，一副不吸完不罢休的样子。日子一天天的滑过，而自己也从一个初级网民修炼成了一只高级网虫，这才发现网上的宝藏是采之不尽，用之不竭的。从此不再仅限于如饥似渴地浏览，转向开辟属于自己的王国，建立自己的主页，向全世界宣传自己，展示自己，这才像一个名副其实的"冲浪"者。可每次"冲浪"Java和HTML这两个家伙总死死地守在门外，虽然有FrontPa...<a href="http://www.tulaoshi.com/n/20160219/1626554.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/14.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/1501918" target="_blank"><img src="http://img.tulaoshi.com/201601/29/a20da2d2a025a6e55378fe44e92cea8f_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/1501918.html" target="_blank">初探SSI网页制作</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/asp/" target="_blank">ASP</a></div> <div class="span_em_123"> SSI（Server Side Include)，通常称为服务器端嵌入，是一种类似于ASP的基于服务器的网页制作技术。大多数（尤其是基于Unix平台）的WEB服务器如Netscape Enterprise Server等均支持SSI命令。  SSI工作原理： 在一个通常以.shtml为扩展名的SSI文件中，标准的HTML编码会被直接送到浏览器上，而内嵌Perl语言形式的SSI命令则先被网络服务器解释执行，如果是标准输出的话...<a href="http://www.tulaoshi.com/n/20160129/1501918.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:;">2</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1619090" target="_blank"><img src="http://img.tulaoshi.com/201602/19/d1f903542b38a64b737c2e28248d768a_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/1619090.html" target="_blank">Fireworks教程：简单制作网页新闻播报框</A></div> <div class="span_em_123"> 先看一下做完的效果吧效果我说一下有可能不清楚的地方，特别简单的我就不说了，免得浪费大家时间。灰色的四边形是矩形移动结点出来的：为了让四边形按扭有一些质感，用了一个“轮廓”渐变（选中四边形后，在属性面板中直接选就OK）。 <a href="http://www.tulaoshi.com/n/20160219/1619090.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/20.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> </ul> <div id="pages" class="clearfix"> <a href="/reader/21283.html">上一页</a><a href="/reader/21280.html">21280</a><a href="/reader/21281.html">21281</a><a href="/reader/21282.html">21282</a><a href="/reader/21283.html">21283</a><a href="/reader/21284.html" class="cur">21284</a><a href="/reader/21285.html">21285</a><a href="/reader/21286.html">21286</a><a href="/reader/21287.html">21287</a><a href="/reader/21288.html">21288</a><a href="/reader/21285.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="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>  <script type="text/javascript" src="http://static.tulaoshi.com/js/zt.js"></script> </body> </html>