ul结合CSS制作网页相册滑动浏览效果

英文原文：Sliding Photograph Galleries
翻译整理：西米CC-www.ximicc.com

效果：

运行代码框
!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; charset=gb2312" /title别开生面纯CSS实现相册预览 ximicc.com/titlestyle type="text/css"body{font-size:12px;color: #CC0000;}p {background-color: #F1FAFE;}#gallery {width:495px;height:240px;border: 1...<a href="http://www.tulaoshi.com/n/20160219/1629832.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/1629832.html" target="_blank">ul结合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/1564367" target="_blank"><img src="http://img.tulaoshi.com/201602/15/ef78f0b84ed6cb3dfda08aa4fbdd59a6_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/20160215/1564367.html" target="_blank">Photoshop结合DW制作超酷的网页相册效果</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"> 本教程适用对象：有一定的PS基础，最好有网页设计制作基础，那样在PS处理好后可以在DM里面做一个后期的CSS以及布局方面的处理，当然，DM&FW也可做图片批处理并生成相册，不过我个人认为PS&DM的效果比较好。 PS的批处理功能是很强大的，如果利用好可以做为我们做很多工作。今天我想讲的是PS批处理设计制作图片展示 开始吧 一、准备好自己要做相册的素材，产品展示啦，案例展示了，照片展示了都可以...<a href="http://www.tulaoshi.com/n/20160215/1564367.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:;">2</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1517960" target="_blank"><img src="http://img.tulaoshi.com/201601/30/0257a32bff48cec93ce552c4dc3eb4d5_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/20160130/1517960.html" target="_blank">Photoshop结合Dreamweaver制作网页相册</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"> Photoshop（以下简称PS）的批处理功能是很强大的，如果利用好可以做为我们做很多工作。今天我们介绍“PS批处理设计制作网页相册”。 一、准备好自己要做相册的素材，产品展示、案例展示、照片展示等都可以，统一将这些图片放在一个文件夹下，我这里将这个文件叫做“Res_IMg"，这里面放的都是大的图片，小图片一会儿ps会为我们做的。 二、打开PS，选择菜单如下： 三、这个就是PS制作图片展示的主要...<a href="http://www.tulaoshi.com/n/20160130/1517960.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:;">32</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1621819" target="_blank"><img src="http://img.tulaoshi.com/201602/19/43444d436f6d6e46aeab69ebc24ef846_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/1621819.html" target="_blank">网页制作:不同浏览器CSS Hack写法</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 区别IE6与FF： background:orange;*background:blue; 区别IE6与IE7： background:green !important;background:blue; 区别IE7与FF： background:orange; *background:green; 区别FF，IE7，IE6： background:orange;*background:green !important;*background:blue; 注：IE都能识别*;标准浏览器(如FF)不能识别*； IE6能识别*，但不能识别 !important, ...<a href="http://www.tulaoshi.com/n/20160219/1621819.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/木子李88106/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/19.jpg" /><span>木子李88106</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/1629453" target="_blank"><img src="http://img.tulaoshi.com/201602/19/6acd25e98927978cd6becd765ef660cb_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/1629453.html" target="_blank">CSS教程:使用ul进行网页的多列布局</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写三列布局的时候突然想到的这样一个方法，这个想法自己都觉得有些疯狂，如果其中有什么不对的地方请各位不吝指教。 当需要写一个三列布局的时候，一般情况下我会选择使用如下的DIV布局方式： 使用这样的嵌套方式无疑可以使代码出错的概率减少很多，但同时这样的布局也略显复杂，对于后期的维护也略显不便。我们在布局导航时经常会使用到一个方法，那就是使用ul列表来进行布局，而导航可...<a href="http://www.tulaoshi.com/n/20160219/1629453.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:;">34</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1603254" target="_blank"><img src="http://img.tulaoshi.com/201602/19/66d19a1f2be3f932070e59084b8b42ff_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/1603254.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"> 以前用FLASH作过一个FLASH相册—网络版 这个效果有点学这个的意思。 为了一行了的代码，我已经花了两个晚上来想了，结果下来就是感觉IE有点变态。用正常的想法去作，FIREFOX 等浏览器都没有问题，只有IE不可以。只有加那么一行垃圾代码，IE才能正常显示。 以下就是效果： !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"...<a href="http://www.tulaoshi.com/n/20160219/1603254.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:;">40</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1623711" target="_blank"><img src="http://img.tulaoshi.com/201602/19/e17c3073c848a32d5f4a9082f3e2effe_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/1623711.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"> 代码如下： 以下是引用片段： style #galleryh {   padding:0;   margin:0 auto 5em auto;   list-style-type:none;   overflow:hidden;   width:495px;   height:240px;   border:1px solid #888;   background:#fff url(/imagelist/06/24/o9642o826u4n.gif);   } #galleryh li {   float:left;   } #galleryh li a {   display:block;...<a href="http://www.tulaoshi.com/n/20160219/1623711.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/641095056qq/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/21.jpg" /><span>641095056qq</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">35</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1629822" target="_blank"><img src="http://img.tulaoshi.com/201602/19/503504f0d3358786855ef485eab0abae_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/1629822.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"> 斜角导航条看上去立体感比较强，但实现起来比较麻烦；这是前几天写的一个测试代码，实现时，本来想用简单的图片加负数来实现；但GIF图片对半透明的效果无法有很好的支持；所以一边写代码，一边在改图，图片改的比较乱，CSS也没有优化； 但效果出来了； 写出来和大家分享一下； 首先说一下，要实现的目标： 滑动门，要兼容每个TAB可能出现的宽度（字数）不统一的问题； 后台程序实现起来简单，主要是标记...<a href="http://www.tulaoshi.com/n/20160219/1629822.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:;">32</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1623779" target="_blank"><img src="http://img.tulaoshi.com/201602/19/3bcb1af6a5b4b0b6bcc070a911b5c2e7_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/1623779.html" target="_blank">纯CSS制作的网页中的lightbox效果</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> “Lightbox”是一个别致且易用的图片显示效果，它可以使图片直接呈现在当前页面之上而不用转到新的窗口。lightbox效果网络上有很多js版本的介绍。不过都下载一个lightbox的js小则几十K，大则上百K。如果你只是需要一个类似Lightbox的效果，这种百分之百纯CSS制造，不含js的办法倒是可以试试。 以下是引用片段： !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" html   &nbs...<a href="http://www.tulaoshi.com/n/20160219/1623779.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/czq111012/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/29.jpg" /><span>czq111012</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/1606594" target="_blank"><img src="http://img.tulaoshi.com/201602/19/fc3678076d32023bcf72ba1c7b59f33e_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/1606594.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 2.1开始，你就可以方便地控制用户浏览网页时使用的光标。 标准的CSS光标呈箭头状，一般来说，它都能满足一个网页或网站的需求，但有些时候你可能需要使用其它的光标。在这些情况下，CSS标准提供了众多选项。 CSS光标类型 下表概括说明了CSS标准中的一些光标类型。 默认光标：使用标准的箭头。 手状光标：光标呈手形，...<a href="http://www.tulaoshi.com/n/20160219/1606594.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/99999918位粉丝/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/4.jpg" /><span>99999918位粉丝</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/1520415" target="_blank"><img src="http://img.tulaoshi.com/201601/30/28323a818636e6ba1e03edd7d1083669_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/20160130/1520415.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">               （ 1 ）选取“文件 - 浏览”，打开文件浏览器。 （ 2 ）在“文件夹”调板中，找到要放置到 Web 页上的照片所在的文件夹。 Photoshop 将在画廊中显示相应的缩览图。 （ 3 ）要重排图像的顺序，将缩览图图像拖移到需要的位置即可。 （ 4 ）如果只想在画廊中包括部分图像，可按住 Ctrl 键选择要包括的图像。 <P style="...<a href="http://www.tulaoshi.com/n/20160130/1520415.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/无聊淡蓝123/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/15.jpg" /><span>无聊淡蓝123</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">19</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1599220" target="_blank"><img src="http://img.tulaoshi.com/201602/19/2bf3e679c33af06fb3f9223de92d38fc_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/1599220.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"> !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; charset=utf-8" /titleby 阿会楠 2008-12-4/titlescript language="javascript" type="text/javascript"//js辅助window.onload = function(){ var initleft = 200;// 初始化第...<a href="http://www.tulaoshi.com/n/20160219/1599220.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/空白记忆ljh/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/10.jpg" /><span>空白记忆ljh</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/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/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/1578398" target="_blank"><img src="http://img.tulaoshi.com/201602/17/b06e199f74f034c86e9fb345e039844d_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/1578398.html" target="_blank">看看CSS3制作的一些网页演示效果</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"> 下面这些都是使用CSS3制作的网页动画演示，通过这些内容可以了解CSS3的强大，此外部分动画结合了Javascript脚本来运行，其中有些演示内容是十分有用的，可以应用在网页制作中，而且大多数演示功能看起来很帅，不过如果要浏览这些演示效果的话可能最好别用IE浏览器(作者原话：）) 1.使用jQuery的CSS3时钟 2.模拟时钟 3.使用方向键旋转的3D盒子 4.多个3D盒子(滑入/滑出) 5. CSS3折叠 6. 自动滚动的视...<a href="http://www.tulaoshi.com/n/20160217/1578398.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:;">6</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <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/1621752" target="_blank"><img src="http://img.tulaoshi.com/201602/19/3623b552395e1c14cf0139a4a1199f30_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/1621752.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"> Web2.0中，圆角效果是很常见的，以前都是用图片来模仿，现在直接用css就能实现，例子代码如下 Html代码： !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" html head titleUntitled Document/title meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /head style type="text/css" body{ padding: 20px; background-color: #FFCC66; font: 100.01% "Tr...<a href="http://www.tulaoshi.com/n/20160219/1621752.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/1629410" target="_blank"><img src="http://img.tulaoshi.com/201602/19/bdbfd1eb6df4e9ed5bb4692160916656_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/1629410.html" target="_blank">CSS教程：li和ul标签用法举例</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> LI代码的格式化: A).运用CSS格式化列表符： ul li{ list-style-type:none; } B).如果你想将列表符换成图像，则： ul li{ list-style-type:none; list-style-image: url(/blog/images/icon.gif); } C).为了左对齐，可以用如下代码： ul{ list-style-type:none; margin:0px; } D).如果想给列表加背景色，可以用如下代码： ul{ list-style-type: none; margin:0px; } ul li{ background:#CCC; } E).如果想给列...<a href="http://www.tulaoshi.com/n/20160219/1629410.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/a345251879/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/20.jpg" /><span>a345251879</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">19</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1613820" target="_blank"><img src="http://img.tulaoshi.com/201602/19/c69b63d6c4cf8879645256d676553702_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/1613820.html" target="_blank">DIV+CSS 中UL,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"> 在做导航条或产品目录的样式都差不时习惯用到ul，在做圆角这样的图形我也喜欢，用到他们可以最小化减少DIV的套用。但有几个地方需要在CSS控制，不然会出现左边会出现很大的空边。 下面是登陆窗口的CSS代码，为了避免DIV的嵌套，所以运用了DIV.开始未对ul进行定义，只对ul li进行定义，结果左边空出很大的空隔，看来偷懒是不行的。 #login{ width:217px; height:150px; margin:0; ...<a href="http://www.tulaoshi.com/n/20160219/1613820.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/wangjinpeng95/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/1.jpg" /><span>wangjinpeng95</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/1606656" target="_blank"><img src="http://img.tulaoshi.com/201602/19/ec11fca28c0942719b9b16d3fce78e57_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/1606656.html" target="_blank">网页制作：使用css设置iframe样式</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123">iframe应用很普遍，通常的需求有两种： 1. 获取iframe效果，就是带一个滚动条，可以省不少版面。 2. 要嵌一个页面，实现框架链接。 如果不方便使用iframe，可以有如下相应解决方案： 1. 可以使用css布局来实现，即可以少一个页面，也可以提高执行效率。 2. 可以采用xmlhttp远程获取数据。 A. 直接模拟iframe 用层做容器 #content { overflow:auto; height:185px; widt...<a href="http://www.tulaoshi.com/n/20160219/1606656.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/6.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/1618190" target="_blank"><img src="http://img.tulaoshi.com/201602/19/6b4b3eb766c0d17518210623b317ef43_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/1618190.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缩写语法总结》，这里就不展开描述。 二.明确定义单位，除非值为0 忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写width=100，但是在CSS中，你必须给一个准确的单位，比如：width: 100px width:100em。只有两个例外情况可以不定义单位：行高和0值。除此以外，其...<a href="http://www.tulaoshi.com/n/20160219/1618190.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/ok吊毛的故事/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/20.jpg" /><span>ok吊毛的故事</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> </ul> <div id="pages" class="clearfix"> <a href="/reader/21308.html">上一页</a><a href="/reader/21305.html">21305</a><a href="/reader/21306.html">21306</a><a href="/reader/21307.html">21307</a><a href="/reader/21308.html">21308</a><a href="/reader/21309.html" class="cur">21309</a><a href="/reader/21310.html">21310</a><a href="/reader/21311.html">21311</a><a href="/reader/21312.html">21312</a><a href="/reader/21313.html">21313</a><a href="/reader/21310.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>