avooo

avooonoreply@blogger.com (萱萱)Fri, 1 Nov 2024 03:35:15 -0700Blogger http://www.blogger.com39125http://avooo.blogspot.com/en-usnowj9931@gmail.com文章分类（标签）太多，怎么能分两行http://avooo.blogspot.com/2009/04/blog-post_5308.htmlblogger技巧Fri, 3 Apr 2009 17:50:00 -0700tag:blogger.com,1999:blog-4389650673637916373.post-5836266518758079378有些博客上的分类标签太多，可是显示的是一列，空的很多大的空间，怎么能让他变两行或更多呢？更動之前，首先也需備份你的模板，進入blogger後台→修改HTML→勾選展開小裝置範本，找到以下這一行，<b:widget id='Label1' locked='false' title='文章分類' type='Label'>或是label1這個關鍵字，按下ctrl+F，就會跳出搜尋框。看到下面的<div class='widget-content'><ul><b:loop values='data:labels' var='label'><li><b:if cond='data:blog.url == data:label.url'><span 0wj9931@gmail.com (十度)怎么让过长的边栏缩短用卷轴来看http://avooo.blogspot.com/2009/04/blog-post_03.htmlblogger技巧Fri, 3 Apr 2009 17:26:00 -0700tag:blogger.com,1999:blog-4389650673637916373.post-7389443400826955691首先這個元件須先存在才能修改，記得一樣要備份你的原始模板，後台→版面配置→修改HTML，展開小裝置範本１‧在CSS區放入以下程式碼，這是捲動區的定義，記得一定要用scrolling2或是3.4.5..，不可以用scrolling，因為這個scrolling已有內部定義，不能使用的。#scrolling2 {overflow: auto; height: 400px; width: 100%;background-color:#000; border:0px solid #000;margin-bottom: 20px; padding:0px; font-size: 12px;color: #f2984c; text-align: left;}高度height: 100px，可以自己調整，我是調整250px，讓整個元件趨近正方形，當然相關的設定，如顏色或是大小，都可自行調整。２‧找到這個0wj9931@gmail.com (十度)网站目录http://avooo.blogspot.com/2009/04/blog-post_02.htmlThu, 2 Apr 2009 17:25:00 -0700tag:blogger.com,1999:blog-4389650673637916373.post-3889797262041642951Blogger教学课程怎么（如何）打造漂亮blogspot模板教学课程系列专辑CSS属性列表CSS教程，简单易懂，一看就会系列专辑0wj9931@gmail.com (十度)Blogger教学课程http://avooo.blogspot.com/2009/04/blogger.htmlblogger技巧各种教程Thu, 2 Apr 2009 17:15:00 -0700tag:blogger.com,1999:blog-4389650673637916373.post-5985073102017035958Blogger模板教学课程——1概说及基本结构Blogger 模板教学程---2.CSS外观解说Blogger 模板教學課程---3HTML內容架構怎么（如何）打造漂亮blogspot模板教学课程系列专辑相关系列：CSS属性列表CSS教程，简单易懂，一看就会系列专辑0wj9931@gmail.com (十度)怎么（如何）打造漂亮blogspot模板教学课程系列专辑http://avooo.blogspot.com/2009/04/blogspot.htmlblogger技巧各种教程Thu, 2 Apr 2009 17:01:00 -0700tag:blogger.com,1999:blog-4389650673637916373.post-3473725808018519659怎么在文章中添加代码呢怎么给站点加入漂亮rss订阅数图标怎么给站点加入上下卷轴的公布栏（文章）在评论栏留言怎么通过高亮区分作者与网友相关系列CSS教程，简单易懂，一看就会系列专辑Blogger教学课程0wj9931@gmail.com (十度)CSS属性列表http://avooo.blogspot.com/2009/04/css_02.htmlblogger技巧各种教程Thu, 2 Apr 2009 16:46:00 -0700tag:blogger.com,1999:blog-4389650673637916373.post-2317669402502271135属性名称字体属性（Font） font-family font-style font-variant font-weight font-size 颜色和背景属性 Color Background-color Background-image Background-repeat Background-attachment Background-position 文本属性 Word-spacing Letter-spacing Text-decoration Vertical-align Text-transform Text-align Text-indent Line-height 边距属性 0wj9931@gmail.com (十度)CSS教程，简单易懂，一看就会系列专辑http://avooo.blogspot.com/2009/04/css.html各种教程Thu, 2 Apr 2009 06:45:00 -0700tag:blogger.com,1999:blog-4389650673637916373.post-4614566335225965913包括很多容易吸收的 CSS教程，大家来分享，共同交流。CSS教程1.CSS快速入门CSS教程2.怎样编写CSS？CSS教程3.CSS属性1.字体属性CSS教程3.CSS属性2、颜色和背景属性CSS教程3.CSS属性3、文本属性CSS教程3.CSS属性4、“容器”属性CSS教程3.CSS属性5、分级属性CSS教程3.CSS属性6、鼠标属性CSS教程4、CSS定位1.动态转换CSS教程4、CSS定位2.空间定位CSS教程5、CSS滤镜1、概述CSS教程5、CSS滤镜2、alpha属性CSS教程5、CSS滤镜3、blur属性CSS教程5、CSS滤镜4、Chroma属性CSS教程5、CSS滤镜5、DropShadow属性CSS教程5、CSS滤镜6、FlipH、FlipV属性CSS教程5、CSS滤镜7、Glow属性CSS教程5、CSS滤镜8、Gray属性CSS教程5、CSS滤镜　9、Invert0wj9931@gmail.com (十度)CSS教程5、CSS滤镜13、Xray属性http://avooo.blogspot.com/2009/04/css5css13xray.html各种教程Thu, 2 Apr 2009 06:41:00 -0700tag:blogger.com,1999:blog-4389650673637916373.post-1103869855374380278CSS教程，简单易懂，一看就会系列专辑看过上一篇CSS教程5、CSS滤镜12、Wave属性来了解：CSS教程5、CSS滤镜13、Xray属性Xray就是X射线的意思。　　Xray属性，顾名思义，这种属性产生的效果就是使对象看上去有一种X光片的感觉。它的表达式很简单：　　Filter：Xray　　我们还是先来看一个页面（如下图）：如果在上面的页面中加入Xray属性，也就是在<head>的<Style>中，增添下面这一句代码：　　Filter：Xray　　您再看这个页面就会是另一种效果了：（如下图）看，是不是就像给它拍了一张X光片一样。基本结束相关系列：CSS属性列表CSS教程，简单易懂，一看就会系列专辑Blogger教学课程 0wj9931@gmail.com (十度)CSS教程5、CSS滤镜12、Wave属性http://avooo.blogspot.com/2009/04/css5css12wave.html各种教程Thu, 2 Apr 2009 06:36:00 -0700tag:blogger.com,1999:blog-4389650673637916373.post-369658396990368531CSS教程，简单易懂，一看就会系列专辑上一篇CSS教程5、CSS滤镜11、Shadow属性CSS教程5、CSS滤镜12、Wave属性Wave属性用来把对象按照垂直的波纹样式打乱。它的表达式如下：　　Filter：Wave（Add=True（False），Freq=频率，LightStrength=增强光效，　　　　　　Phase=偏移量，Strength=强度）　　我们看到Wave属性的表达式还是比较复杂的，它一共有五个参数。Add参数有两个参数值：True代表把对象按照波纹样式打乱；False代表不打乱；　　Freq参数指生成波纹的频率，也就是指定在对象上共需要产生多少个完整的波纹。　　LightStrength参数是为了使生成的波纹增强光的效果。参数值可以从0到100。　　　Phase参数用来设置正弦波开始的偏移量。这个值的通用值为0，它的可变范围为从0到100。这个值代表开始时0wj9931@gmail.com (十度)CSS教程5、CSS滤镜11、Shadow属性http://avooo.blogspot.com/2009/04/css5css11shadow.html各种教程Thu, 2 Apr 2009 06:30:00 -0700tag:blogger.com,1999:blog-4389650673637916373.post-6536589555621219841CSS教程，简单易懂，一看就会系列专辑上一篇CSS教程5、CSS滤镜10、Mask属性CSS教程5、CSS滤镜11、Shadow属性Shadow属性可以在指定的方向建立物体的投影。它的表达式是这样的：　　Filter：Shadow（Color=color，Direction=direction）　　在这里，Shadow有两个参数值：Color参数用来指定投影的颜色；Direction参数用来指定投影的方向。　　这里说的方向与我们在第二节Blur属性中提到的“方向与角度的关系”是一样的。　　也许您会问，前面讲到的Dropshadow属性和Shadow属性有什么不同吗？　　光说的话，您恐怕还难以理解，让我们看一看分别利用这两个属性做出来的效果有什么不同（见下图）：Shadow效果　Dropshadow效果这样一对比，就可以很明显的看出两者的不同。　　Shadow属性可以在任意角度进行投射0wj9931@gmail.com (十度)CSS教程5、CSS滤镜10、Mask属性http://avooo.blogspot.com/2009/04/css5css10mask.html各种教程Thu, 2 Apr 2009 06:27:00 -0700tag:blogger.com,1999:blog-4389650673637916373.post-8746289090399807238CSS教程，简单易懂，一看就会系列专辑上一篇CSS教程5、CSS滤镜　9、Invert属性CSS教程5、CSS滤镜10、Mask属性Mask属性为对象建立一个覆盖于表面的膜。它的表达式也很简单：　　Filter：Mask（Color=颜色）　　只有一个Color参数，用来指定使用什么颜色作为掩膜。　　同样，我们来看一下一幅图片在加上mask属性前后的效果（见下图）：原图Mask属性效果图加上MASK属性的效果就好象是在用有色眼镜看物体一样。上面的效果的代码如下：<html><head><title> mask filter </title><style>//*设置CSS样式开始*//　　　 <!--　　　　div{position：absolute；top：20；left：40；　　　　filter：mask(color：0wj9931@gmail.com (十度)CSS教程5、CSS滤镜　9、Invert属性http://avooo.blogspot.com/2009/04/css5css9invert.html各种教程Thu, 2 Apr 2009 06:25:00 -0700tag:blogger.com,1999:blog-4389650673637916373.post-4834014382521795984CSS教程，简单易懂，一看就会系列专辑上一篇CSS教程5、CSS滤镜8、Gray属性CSS教程5、CSS滤镜　9、Invert属性Invert属性可以把对象的可视化属性全部翻转，包括色彩、饱和度和亮度值。　　它的表达式也很简单：　　Filter：Invert　　我们再来看一下加上Invert属性前后的图片效果变化（如下图）：原图Invert属性效果图我们看到Invert属性实际上达到的是一种“底片”的效果。　　自己拿别的图来试试吧。本节介绍的是Invert属性，下一节将向您介绍Mask属性。　CSS教程5、CSS滤镜10、Mask属性0wj9931@gmail.com (十度)CSS教程5、CSS滤镜8、Gray属性http://avooo.blogspot.com/2009/04/css5css8gray.html各种教程Thu, 2 Apr 2009 06:22:00 -0700tag:blogger.com,1999:blog-4389650673637916373.post-8904028374245792879CSS教程，简单易懂，一看就会系列专辑上一篇CSS教程5、CSS滤镜7、Glow属性这篇：CSS教程5、CSS滤镜8、Gray属性Gray属性把一张图片变成灰度图。它的表达式很简单：　　Filter：Gray　　其实这个属性没什么好讲的，只需在您定义的IMG样式中加入一句代码：　　{Filter：Gray}就一切OK了。　　下面两幅图分别代表未加Gray属性和添加了Gray属性的效果：原图转成gray属性后的效果图本节讲述的内容比较简单，下一节将向您介绍Invert转化属性。CSS教程5、CSS滤镜　9、Invert属性0wj9931@gmail.com (十度)CSS教程5、CSS滤镜7、Glow属性http://avooo.blogspot.com/2009/04/css-css5css7glow-glow.html各种教程Thu, 2 Apr 2009 06:16:00 -0700tag:blogger.com,1999:blog-4389650673637916373.post-8436544548399814445CSS教程，简单易懂，一看就会系列专辑上一篇CSS教程5、CSS滤镜6、FlipH、FlipV属性 CSS教程5、CSS滤镜7、Glow属性当对一个对象使用“Glow”属性后，这个对象的边缘就会产生类似发光的效果。它的表达式如下：　　Filter：Glow（Color=color，Strength=strength）　　Glow属性的参数只有两个：Color是指定发光的颜色，Strength指定发光的强度，参数值从1到255。让我们先来看一下加上Glow属性的效果图：怎么样，是不是有一种燃烧的火焰的感觉。实现这种效果的代码如下：<html><head><title>filter glow</title><style>//*开始设置CSS样式*//　　　 <!--　　　　.leaf{position：absolute； 0wj9931@gmail.com (十度)CSS教程5、CSS滤镜6、FlipH、FlipV属性http://avooo.blogspot.com/2009/04/css5css6fliphflipv.html各种教程Thu, 2 Apr 2009 06:10:00 -0700tag:blogger.com,1999:blog-4389650673637916373.post-81484766413752282CSS教程，简单易懂，一看就会系列专辑上一篇CSS教程5、CSS滤镜5、DropShadow属性这篇：CSS教程5、CSS滤镜6、FlipH、FlipV属性Flip是CSS滤镜的翻转属性，FlipH代表水平翻转，FlipV代表垂直翻转。它们的表达式很简单，分别是：　　Filter：FlipH　　Filter：FlipV　　我们先来看一幅图：下面我们分别对它实现水平翻转和垂直翻转，并且在图片上方的一段文字，也发生翻转。代码如下：<html><head><title>flip css</title><style>//*设置CSS样式开始*//　　　<!--　　　div{position：absolute；top：20；width：300；　　　　　filter：fliph（flipv）；}　　　//*定义DIV范围内的样式0wj9931@gmail.com (十度)CSS教程5、CSS滤镜5、DropShadow属性http://avooo.blogspot.com/2009/04/css5css5dropshadow.html各种教程Thu, 2 Apr 2009 05:33:00 -0700tag:blogger.com,1999:blog-4389650673637916373.post-2694500102801575047CSS教程，简单易懂，一看就会系列专辑看过了CSS教程5、CSS滤镜4、Chroma属性现在来了解以下：CSS教程5、CSS滤镜5、DropShadow属性DropShadow属性是为了添加对象的阴影效果的。它实现的效果看上去就像使原来的对象离开页面，然后在页面上显示出该对象的投影。看一看它的表达式：　　Filter：DropShadow（Color=color，Offx=Offx，Offy=offy，　　　　　　　　　　　　Positive=positive）　　该属性一共有四个参数： Color代表投射阴影的颜色。 Offx和offy分别X方向和Y方向阴影的偏移量。偏移量必须用整数值来设置。如果设置为正整数，代表X轴的右方向和Y轴的向下方向。设置为负整数则相反。　　Positive参数有两个值：True为任何非透明像素建立可见的投影，False为透明的像素部分建立可见的投影。　　0wj9931@gmail.com (十度)CSS教程5、CSS滤镜4、Chroma属性http://avooo.blogspot.com/2009/04/css5css4chroma.html各种教程Thu, 2 Apr 2009 05:27:00 -0700tag:blogger.com,1999:blog-4389650673637916373.post-6938329941590554096CSS教程，简单易懂，一看就会系列专辑看过CSS教程5、CSS滤镜3、blur属性，来了解：CSS教程5、CSS滤镜4、Chroma属性Chroma属性可以设置一个对象中指定的颜色为透明色，它的表达式如下：　　Filter：Chroma（color=color）　　这个属性的表达式是不是很简单，它只有一个参数。只需把您想要指定透明的颜色用Color参数设置出来就可以了。比如下面这幅图：图中显示两种字体，两种颜色，我们现在对“leaves”字体添加chroma属性，使其透明。代码如下：<html><head><title>chroma filter</title><style><!--　　　 div{position：absolute；top：70；width：200；　　　　　 filter：chroma(color=0wj9931@gmail.com (十度)CSS教程5、CSS滤镜3、blur属性http://avooo.blogspot.com/2009/04/css5css3blur.html各种教程Thu, 2 Apr 2009 05:18:00 -0700tag:blogger.com,1999:blog-4389650673637916373.post-702458154633961315CSS教程，简单易懂，一看就会系列专辑上一篇CSS教程5、CSS滤镜2、alpha属性CSS教程5、CSS滤镜3、blur属性假如您用手在一幅还没干透的油画上迅速划过，画面就会变得模糊。CSS下的blur属性就会达到这种模糊的效果。　　先来看一下blur属性的表达式：　　filter：blur（add=add，direction，strength=strength）　　我们看到blur属性有三个参数：add、direction、strength。　　Add参数有两个参数值：true和false。意思是指定图片是否被改变成模糊效果。　　　Direction参数用来设置模糊的方向。模糊效果是按照顺时针方向进行的。其中0度代表垂直向上，每45度一个单位，默认值是向左的270度。角度方向的对应关系见下表：Strength参数值只能使用整数来指定，它代表有多少像素的宽度将受到模糊影响。默认值是5像0wj9931@gmail.com (十度)CSS教程5、CSS滤镜2、alpha属性http://avooo.blogspot.com/2009/04/css5css2alpha.html各种教程Thu, 2 Apr 2009 05:10:00 -0700tag:blogger.com,1999:blog-4389650673637916373.post-7116518614666584052CSS教程，简单易懂，一看就会系列专辑上一篇说到CSS教程5、CSS滤镜1、概述，现在来说：CSS教程5、CSS滤镜2、alpha属性alpha是来设置透明度的。先来看一下它的表达格式：　　filter：alpha（opacity=opcity，finishopacity=finishopacity，　　style=style，startX=startX，startY=startY，finishX=finishX，　　finishY=finishY）　　哇，怎么这么长。是啊，不过这些参数都各有其用。　　Opacity代表透明度等级，可选值从0到100，0代表完全透明，100代表完全不透明。 Style参数指定了透明区域的形状特征。其中0代表统一形状；1代表线形；2代表放射状；3代表长方形。　　Finishopacity是一个可选项，用来设置结束时的透明度，从而达到一种渐变效果，它的值也是0wj9931@gmail.com (十度)CSS教程5、CSS滤镜1、概述http://avooo.blogspot.com/2009/04/css5css1.html各种教程Thu, 2 Apr 2009 05:07:00 -0700tag:blogger.com,1999:blog-4389650673637916373.post-3380285418625700002CSS教程，简单易懂，一看就会系列专辑看过了 CSS教程4、CSS定位2.空间定位再来了解：CSS教程5、CSS滤镜1、概述好了，下面我们将进入CSS的最精彩的部分--滤镜，它将把我们带入绚丽多姿的多媒体世界。正是有了滤镜属性，页面才变得更加漂亮。　　CSS的滤镜属性的标识符是filter。为了使您对它有个整体的印象，我们先来看一下它的书写格式：　　 filter：filtername（parameters）　　怎么样？是不是很简单，看上去与前面讲的属性定义没什么太大的差别。Filter是滤镜属性选择符。　　也就是说，只要您进行滤镜操作，就必须先定义filter；filtername是滤镜属性名，这里包括alpha、blur、chroma等等多种属性，详细内容请看下表：上面filter表达式中括号内的parameters是表示各个滤镜属性的参数，也正是这些参数决定了滤镜将以怎样的效果0wj9931@gmail.com (十度)CSS教程4、CSS定位2.空间定位http://avooo.blogspot.com/2009/04/css4css2.html各种教程Thu, 2 Apr 2009 05:01:00 -0700tag:blogger.com,1999:blog-4389650673637916373.post-3935339948323425664CSS教程，简单易懂，一看就会系列专辑看过CSS教程4、CSS定位1.动态转换，再来了解：CSS教程4、CSS定位2.空间定位在这一节里，我们来看一个利用z-index定位的例子，这个例子的效果在这里。　　我们看到例子中的两幅图片和一段文字分别处于不同的空间位置，文字覆盖在那朵花的图片上，而挥动小旗的小老鼠却又覆盖在文字的上面。那么这种效果是怎样实现的呢？这里利用了CSS定位的z-index属性，代码如下：<html><head><title>zindex</title><style type=“text/css”>　　　 <!-- 　　　　　　　　　　　　　　　　　　　　　　.pile｛position:absolute；left:2in；top:2in；　　　　width:3in；height:3in；｝//*定义了类0wj9931@gmail.com (十度)CSS教程4、CSS定位1.动态转换http://avooo.blogspot.com/2009/04/css4css1.html各种教程Thu, 2 Apr 2009 04:19:00 -0700tag:blogger.com,1999:blog-4389650673637916373.post-2752177758804931329CSS教程，简单易懂，一看就会系列专辑上一篇CSS教程3.CSS属性6、鼠标属性CSS教程4、CSS定位1.动态转换通过在CSS中设置属性，我们可以准确的定义一个页面的样式，如颜色、字体、边框等。现在我们要讲的CSS定位主要是在页面的布局和控制上进行定义，使您的页面从这两个方面都展现的非常完美，更加富有动感。　　另外，在讲解之前，我们首先介绍两个定义：相对定位和绝对定位。相对定位就是允许在文档的原始位置上进行偏移。而绝对定位则允许任意定位。　　实现CSS的定位最终还是要靠属性。我们来看一下定位属性的详细列表（见下图）：我们在下面举一个例子，其中带了一点Script的内容，我们来看看它是如何实现动态显示的。讲解之前我们还是先看一下这个例子的效果吧，请点击这里　　看，通过简单的CSS定位实现了颇具动感的效果。这种效果的代码如下：<0wj9931@gmail.com (十度)CSS教程3.CSS属性6、鼠标属性http://avooo.blogspot.com/2009/04/css3css6.html各种教程Thu, 2 Apr 2009 04:07:00 -0700tag:blogger.com,1999:blog-4389650673637916373.post-1895347651205239663CSS教程，简单易懂，一看就会系列专辑看过了CSS教程3.CSS属性5、分级属性再来了解：CSS教程3.CSS属性6、鼠标属性我们知道，当把鼠标移动到不同的地方时，当鼠标需要执行不同的功能时，当系统处于不同的状态时，都会使鼠标的形状发生改变。　　用CSS来改变鼠标的属性，就是当鼠标移动到不同的元素对象上面时，让鼠标以不同的形状、图案显示。　　在CSS当中，这种样式是通过“cursor”属性来实现的。Cursor属性有很多的属性值，我们来看一下它的详细列表：我们来看一个例子吧，请看下面这段代码：<html><head><title>changemouse</title></head><body><h1 style=“font-family:文鼎新艺体简”>鼠标效果</h1>//*设置字体*//0wj9931@gmail.com (十度)CSS教程3.CSS属性5、分级属性http://avooo.blogspot.com/2009/04/css3css5.html各种教程Thu, 2 Apr 2009 03:56:00 -0700tag:blogger.com,1999:blog-4389650673637916373.post-7697014552395548210CSS教程，简单易懂，一看就会系列专辑看过了 CSS教程3.CSS属性4、“容器”属性接下来进一步了解：CSS教程3.CSS属性5、分级属性如果您使用过Word，那您一定知道Word中有一个“项目符号和编号”的功能。　　在html中，您无需使用前面提到的一些字体、颜色、容器属性来对字体、颜色和边距、填充距等进行初始化。因为在CSS中，已经提供了进行分级的专用分级属性。　　分级属性包括了“list-style”（列表样式）、“list-item”（列表项）等多种属性，我们先来看一下分级属性的详细列表：下面我们来看一个分级属性的例子，代码如下所示：<html><head><title> fenji css </title><style type=“text/css”>//*定义CSS*//　　<!--p{0wj9931@gmail.com (十度)CSS教程3.CSS属性4、“容器”属性http://avooo.blogspot.com/2009/04/css3css4.html各种教程Thu, 2 Apr 2009 03:41:00 -0700tag:blogger.com,1999:blog-4389650673637916373.post-3110100506251604276CSS教程，简单易懂，一看就会系列专辑看过了CSS教程3.CSS属性3、文本属性来了解容器属性：CSS教程3.CSS属性4、“容器”属性※边距属性听起来是不是很有趣，什么叫“容器”属性呢？CSS的容器属性包括边距、填充距、边框和宽度、高度、浮动、清除等属性。　　您想，网页中的内容肯定是都需要“装”进这个“容器”里。“容器”属性是CSS中非常重要的一种属性，我们将分类进行学习。　　先来看一下边距属性的详细列表：和font属性一样，表中的四个属性可以用一个属性一次。边距顺序是上、右、下、左。我们还是用定义边距属性前后的两个例子来看一下吧。请看下面的这幅图：我们看到上图是没有加上边距属性的效果，而下图则在中加入了如下代码：　　body{margin：1em 2em 3em 4em}　　//*定义文本的上、右、下、左的边距分别为1、2、3、4em*//　　产生的效果如下图所示：定义了边距后的页0wj9931@gmail.com (十度)