注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

启野的博客

淡淡的雾,淡淡的雨,淡淡的云彩悠悠的游。

 
 
 

日志

 
 

HTML 用一张透明角隅图片做角隅边框的代码(启野独立创作)  

2011-02-16 02:56:10|  分类: HTML专区 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
 

  

 

 

 

            角隅边框制作代码

博文简介:

 

用一张透明角隅图片做边框四角:左上角、右上角、左下角、右下角。

Filter滤镜里只有FlipH(水平滤镜)和FlipV(垂直滤镜)两个滤镜实现翻转,所以只能做出左上角、左下角、右上角、三个的代码,缺少右下角。

搜遍整个网络没有制作右下角的代码,但通过想象和思考终于找出了解决的办法。这两个滤镜不仅可以实现文字和图片的翻转,而且可以实现html表格的翻转(有人会想表格是方的翻转没有意义,但表格里有图片翻转就有所不同了,不怕做不到,就怕想不到)。

我先用FlipH(水平滤镜)翻转做出左上角、右上角的代码,在进行FlipV(垂直滤镜)翻转,做出了左下角、右下角,最后合成代码。

 
滤镜介绍:

 

FlipCSS滤镜的翻转属性:

FlipH代表水平方向翻转

FlipV代表垂直方向翻转

它们的原理都是制作一个镜像,然后让指定元素在水平或垂直方向实现翻转。它们的表达式很简单,分别是:

Filter:FlipH

Filter:FlipV

备注:当代码在运用的过程中不能翻转,一定是自己的代码中的标点符不是英文标点符号,及时替换过来。

 

制作总述:

 

制作文本修饰边框基本的方法是表格嵌套

(学习表格嵌套方法—点击HTML表格标记详解8:表格嵌套

 

角隅边框的制作最基本的是做四组代码进行表格嵌套:

依次顺序分别是

背景图代码

水平翻转顶栏代码

编辑文本框代码

垂直翻转底栏代码

 

背景图代码是总表格负责整体的排版。

水平翻转顶栏代码、编辑文本框代码、垂直翻转底栏代码是嵌套的表格负责各个子栏目的排版,并插入到背景图代码(总表格)的相应位置中。

 

下面将分步介绍制作:

 

基本素材:
1、背景图代码(总表格)
HTML代码: 相关设置详细说明:

 

<TABLE cellSpacing=0 cellPadding=0 width=100% background=背景图片地址 border=0>
<TBODY>
<TR>
<TD>文本编辑</TD></TR></TBODY></TABLE>

 

cellSpacing=0单元格间距属性

cellPadding=0单元格边距属性

在这里不需要,设置为0,如你需要自行设置。

 

width=100%是表格的宽度,因为是总表格建议设置为100%,让表格自适应。

height自适应,去掉了高度。

 

background=背景图片地址是背景图像属性

border=0是表格的边框属性,在这里设为0,如你需要自行设置。

 

相关参考链接:

HTML表格标记详解1:标签定义 TABLE参数设定

 

示例: 

文本编辑

 

 

 

 

2、水平翻转顶栏代码(并列嵌套的第一个表格)
HTML代码: 相关设置详细说明:

 

<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD width="2%"><IMG height=高度 src="角隅图片地址" width=宽度></TD>
<TD width="50%">
<P align=right><IMG style="FILTER: FlipH" height=高度 src="角隅图片地址" width=宽度></P></TD></TR></TBODY></TABLE>

红色宽度数值的百分比根据不同的ie浏览器的需要更改,才能正确显示角隅图像的宽度。

 

 

表格里添加了两个标准单元格<TD>,在单元格内添加角隅图片并定位。

第一个<TD>单元格

 定位图片为左上角:

width="2%"定位图片为左边,占据表格的空间比例。

 带入图片代码:

<IMG height=高度 src="角隅图片地址" width=宽度>,可以修改图片的大小。

第二个<TD>单元格

定位图片为左上角:

width="50%" align 属性规定段落中文本的对齐方式,<P align=right>图片右对齐,这样定位图片为右边,占据表格的空间比例。

带入图片代码:

<IMG style="FILTER: FlipH" height=高度 src="角隅图片地址" width=宽度>,添加角隅图片地址与第一个<TD>单元格的角隅图片地址相同,并调节图片大小也相同。其中style="FILTER: FlipH"定义图片样式为水平滤镜(即:水平翻转)。

 备注:当代码在运用的过程中不能翻转,一定是自己的代码中的标点符不是英文标点符号,及时替换过来。

 

示例:
 
用一张透明角隅图片做角隅边框的代码(启野独立创作) - qy-0824 - 启野的博客

用一张透明角隅图片做角隅边框的代码(启野独立创作) - qy-0824 - 启野的博客


3、编辑文本框代码(并列嵌套的第二个表格)
HTML代码: 相关设置详细说明:

 

<CENTER>
<TABLE style="WIDTH: 750px; HEIGHT: 1px" background=边框线图片地址 border=0>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=5 cellPadding=10 width=750 background=背景图片地址 border=0>
<TBODY>
<TR>
<TD>文本编辑</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></CENTER>

 

 

1.这个表格由两个表格在<TD>标签中进行了嵌套。

分为外表格和内表格,内表格嵌套在外表格的<TD>标签中。

2.加入了<CENTER>标签对其包围的文本进行水平居中处理。

3.在这里需要设置

cellSpacing(单元格间距属性)

cellPadding(单元格边距属性)

4.根据自己的需要调节宽度,调节上下两个表格的图片宽度相同并小于总表格背景图的宽度。

 
示例:
 

文本编辑

 

 

4、垂直翻转底栏代码(并列嵌套的第三个表格)
HTML代码: 相关设置详细说明:

 

<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD style="Filter:FlipV">
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD width="2%" ><IMG height=高度 src="角隅图片地址" width=宽度></TD>
<TD width="50%">
<P align=right><IMG style="FILTER: FlipH" height=高度 src="角隅图片地址" width=宽度

></P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

 红色宽度数值的百分比根据不同的ie浏览器的需要更改,才能正确显示角隅图像的宽度。

 

 

 

这个表格和编辑文本框代码一样由两个表格在<TD>标签中进行了嵌套组成。

分为内表格和外表格

内表格直接借用水平翻转顶栏代码

外表格<TD>标签内加入style="FilterFlipV"定义表格样式为垂直滤镜(即:垂直翻转)。

在这里是表格垂直翻转,同样表格内的图片也就垂直翻转了。

备注:当代码在运用的过程中不能翻转,一定是自己的代码中的标点符不是英文标点符号,及时替换过来。

 

 

 

 

示例:
HTML 用一张透明角隅图片做角隅边框的代码(启野独立创作) - 启野 - 启野的博客

HTML 用一张透明角隅图片做角隅边框的代码(启野独立创作) - 启野 - 启野的博客


5、角隅边框代码的合成
HTML代码: 相关设置详细说明:

 

<TABLE cellSpacing=0 cellPadding=0 width=100% background=背景图片地址 border=0>
<TBODY>
<TR>
<TD><TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD width="2%" ><IMG height=高度 src="角隅图片地址" width=宽度></TD>
<TD width="50%">
<P align=right><IMG style="FILTER: FlipH" height=高度 src="角隅图片地址" width=宽度></P></TD></TR></TBODY></TABLE><CENTER>
<TABLE style="WIDTH: 800px; HEIGHT: 1px" background=边框线图片地址 border=0>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=5 cellPadding=10 width=800 background=背景图片地址 border=0>
<TBODY>
<TR>
<TD>文本编辑</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></CENTER><TABLE cellSpacing=0 cellPadding=0 width="100%"

border=0>
<TBODY>
<TR>
<TD style="Filter:FlipV">
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD width="2%" ><IMG height=高度 src="角隅图片地址" width=宽度></TD>
<TD width="50%">
<P align=right><IMG style="FILTER: FlipH" height=高度 src="角隅图片地址" width=宽度></P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

 红色宽度数值的百分比根据不同的ie浏览器的需要更改,才能正确显示角隅图像的宽度。

 

背景图代码是总表格看成是外表格负责整体的排版。

水平翻转顶栏代码、编辑文本框代码、垂直翻转底栏代码是并列内表格,并且有序的嵌套起来。就如同学生的书包装书,上层是水平翻转顶栏代码、中层是编辑文本框代码、下层是垂直翻转底栏代码。形象理解,看简单!

在嵌套时,先不要删除背景代码的文本编辑四个字,容易找到嵌套的位置,最后一次嵌套就时就删除。

备注:当代码在运用的过程中不能翻转,一定是自己的代码中的标点符不是英文标点符号,及时替换过来。

 

 

示例:
复制——

用一张透明角隅图片做角隅边框的代码(启野独立创作) - qy-0824 - 启野的博客

用一张透明角隅图片做角隅边框的代码(启野独立创作) - qy-0824 - 启野的博客

启野博客欢迎你光临交流

文本编辑

文本编辑

这里是输入文字的地方,还可以放图片代码、Flash动画代码和gif动态小图代码。

欢迎光临启野博客!风起的日子给自己冲杯咖啡,在苦涩中捕捉那瞬间的美,将生活中的往事细细回味,伤心时的累,开心时的醉,抬头望望天空依然很美!

 

 

 

用一张透明角隅图片做角隅边框的代码(启野独立创作) - qy-0824 - 启野的博客

用一张透明角隅图片做角隅边框的代码(启野独立创作) - qy-0824 - 启野的博客

复制——
相关链接:
相关透明角隅边框图片链接: 相关素材、表格制作链接: 其他博客技巧链接:

 

配图素材链接

精美透明花开四季 

精美透明蝴蝶01

精美透明蝴蝶02

精美透明蝴蝶03

精美透明蝴蝶04

黑色背景闪图分隔线

 

颜色代码链接

颜色代码表(一)

颜色代码表(二)

 

文本框滚动代码链接

HTML文本框滚动代码1:卷轴基本语法

HTML文本框滚动代码2:为卷轴加外框

HTML文本框滚动代码3:为卷轴调色

HTML文本框滚动代码4:卷轴变化应用

HTML文本框滚动代码5:卷轴黑白灰色应用模板

HTML文本框滚动代码6:卷轴彩色应用模板

 

HTML表格制作链接 

HTML表格初步制作

HTML表格标记详解1:标签定义 TABLE参数设定

HTML表格标记详解2:TR参数设定

HTML表格标记详解3:TD参数设定

HTML表格标记详解4:TD参数中设定跨列跨行属性

HTML表格标记详解5:TH参数中设定

HTML表格标记详解6:CAPTION标题参数设定

HTML表格标记详解7:THEAD表首标记/TBODY表主体标记/TFOOT表尾标记

HTML表格标记详解8:表格嵌套

HTML表格标记详解9:表格边框的css修饰语法

HTML网页列表标记:ul、ol、dir、dl、menu、dt、dd、li

HTML水平线段标记:HR

 

边框代码链接

水晶博客边框代码——应用(一)

水晶博客边框代码——应用(二)

水晶博客边框代码——应用(三)

水晶博客边框代码——应用(四)

 

文字特效代码链接

文字特效代码(一)

文字特效代码(二)

 

图片特效链接

在线制作水波纹动感图片

多张图片串联式放映代码

多图重叠移动代码及效果图

图片雾化移动特效代码

图片移动效果的欣赏与制作(一)

图片移动、及其图片链接网址移动代码(二)

让图片产生梦幻效果的代码

图片梦幻显现隐藏移动的特效制作(一)

图片梦幻显现隐藏的特效制作(二)

图片浮雕效果

图片虚线边框并黑白效果

图片加边框代码

图片CSS滤镜效果—灰度

图片CSS滤镜—左右旋转效果

图片CSS滤镜—阴影效果

图片CSS滤镜—波形加上半透明合成效果

图片CSS滤镜效果—透明

图片CSS滤镜—X光效果

图片CSS滤镜—发光效果

图片CSS滤镜—色彩对换效果

图片CSS滤镜—波形效果

图片CSS滤镜—图片模糊效果

图片CSS滤镜—图片动感模糊效果

图片CSS滤镜—扭曲效果

图片CSS滤镜—倒影效果

图片CSS静态滤镜样式(filter)说明

 

Flash代码链接

Flash圆形雾化移动特效代码

Flash透明动画或文字特效添加一幅背景图

Flash透明动画多个叠加在一张背景图片上

自动播放swf格式小视频

  

音画代码链接

大图音画拼合的代码使用

大图音画拼合效果配图——一卷轻愁书红颜(未调整的效果)

大图音画拼合效果配图——一卷轻愁书红颜(调整后的效果)

宽屏大图片音画教程——缱绻殇效果

大图音画拼合效果配图——蝴蝶之梦

不显示播放器代码

背景音乐制作

 

其他技巧代码

所有代码的粘贴法

在首页添加QQ和POPO在线交谈

一种找到图片地址(或者存大图)极简单的方法

文字图片的链接

日志文字与图片添加

日志中导入图片的三种方法

日志列表式能使日志成单页面打开并找准日志地址:

日志文字的编排——借用word设置(启野原创)

博客中的准确网址(原创)

博客首页的顶区和底区上传图片

如何让网易博客日志显示最大的宽度

怎样添加自定义模块和在自定义模块中做动画的超级链接

 

欢迎光临启野博客!
  评论这张
 
阅读(1133)| 评论(1)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017