`
xcc258
  • 浏览: 73806 次
  • 性别: Icon_minigender_1
  • 来自: 合肥
社区版块
存档分类
最新评论

各种分割线Html代码

    博客分类:
  • WEB
阅读更多

转自:(http://hi.baidu.com/%B7%C9%BB%A8%C9%C1%C9%C1/blog/item/0f36232af69bdf25d52af1f8.html

 

各种分割线Html代码

1、<HR>

 

2、<HR align=center width=300 color=#987cb9 SIZE=1>
align 线条位置(可选left、right、center);width 线条长度;color 颜色;size 厚度


 

二、特效(效果并不是孤立的,可相互组合)
1、两头渐变透明:
<HR style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="80%" color=#987cb9 SIZE=3>


 

2、纺锤形:
<HR style="FILTER: alpha(opacity=100,finishopacity=0,style=2)" width="80%" color=#987cb9 SIZE=10>


 

3、右边渐变透明:
<HR style="FILTER: alpha(opacity=100,finishopacity=0,style=1)" width="80%" color=#987cb9 SIZE=3>


 

4、左边渐变透明:
<HR style="FILTER: alpha(opacity=0,finishopacity=100,style=1)" width="80%" color=#987cb9 SIZE=3>


 

5、虚线:
<HR style="border:1 dashed #987cb9" width="80%" color=#987cb9 SIZE=1>


 

6、双线:
<HR style="border:3 double #987cb9" width="80%" color=#987cb9 SIZE=3>


 

7、立体效果:
<HR style="FILTER: progid:DXImageTransform.Microsoft.Shadow(color:#987cb9,direction:145,strength:15)" width="80%" color=#987cb9 SIZE=1>


 

8、钢针效果:
<HR style="FILTER: progid:DXImageTransform.Microsoft.Glow(color=#987cb9,strength=10)" width="80%" color=#987cb9 SIZE=1>


9.垂直分割线

<table border="1px" cellpadding="0" cellspacing="0" style="height:265px;border-left-style:solid; border-bottom-style:none;border-right-style:none;border-top-style:none">

分享到:
评论

相关推荐

    html设置分割线虚线,css border设置虚线样式

    首先,HTML没有专门的标签用于创建分割线,但我们可以使用`&lt;hr&gt;`标签来模拟分割线的效果。`&lt;hr&gt;`标签在页面中生成一条水平线,可以用来分隔内容或视觉上区分不同的部分。默认情况下,`&lt;hr&gt;`生成的是一条实线,但我们...

    html5+css3制作各种响应式不规则的网页单元分割线

    本教程将深入探讨如何利用HTML5的SVG(可缩放矢量图形)和CSS3的伪元素技术,来创建各种不规则的响应式网页分割线,为你的单页模板增添独特的美感。 首先,HTML5的SVG是一种用于描述二维图形的标记语言,它可以生成...

    创意分割线404页面代码.rar

    【创意分割线404页面代码】是一种网页设计中的元素,用于当用户访问不存在的页面时展示一个有吸引力且信息明确的错误页面。这个压缩包包含的资源是针对这一特定需求设计的特效代码,旨在提供一种创新且引人注目的404...

    HTML5 Canvas波浪分割线特效.zip

    这个"HTML5 Canvas波浪分割线特效.zip"文件显然包含了一个利用Canvas实现的特殊效果,即创建出波浪形状的分割线,适用于网页设计中的标题与正文之间进行视觉分隔。 在HTML5中,Canvas元素是一个矩形区域,通过...

    Jquery网页分割线进行前后图片对比_鼠标拖动分割线进行前后图

    本主题聚焦于利用jQuery实现一个具有鼠标拖动功能的网页分割线,以实现前后图片的动态对比。jQuery是一个强大的JavaScript库,它简化了DOM操作、事件处理以及动画效果的实现。 首先,我们需要理解jQuery的基本用法...

    [CSS] 用伪元素:after实现分割线和气泡

    通过灵活地调整`content`、`display`、`position`、`border`、`background`等CSS属性,我们可以创造出各种各样的分割线和气泡效果,满足不同的设计需求。同时,`CSSAfterDemo.html`可能包含了实际的示例代码,通过...

    jquery分割线

    3. **插入HTML**:然后,函数会在选中的元素内部或周围插入相应的HTML代码,通常是一个div元素,通过CSS设置边框、背景色等属性来模拟分割线。 4. **添加样式**:为了使分割线有更丰富的视觉效果,开发者会在CSS中...

    jsp 页面分割线,鼠标可以拖动

    1. 创建分割线HTML元素,并设置适当的CSS样式,如宽度、背景色、边框等,以使其看起来像一条线。 2. 使用jQuery选择器获取分割线元素,并为其绑定鼠标事件。 3. 在mousedown事件中,记录鼠标初始位置和分割线的原始...

    jquery列表分割线插件.rar

    本篇文章将详细介绍一个名为"jQuery列表分割线插件"的工具,它能够方便地为HTML列表添加动态分割线效果。 首先,我们来看这个插件的基本使用。在`index.html`文件中,通常会包含HTML结构,其中包含了需要添加分割线...

    js实现分割条效果纯js代码

    这个"js实现分割条效果纯js代码"的项目,名为`spliter`,就是基于上述逻辑实现的一个例子。你可以下载源代码进行测试和调试,以适应你的具体需求。通过理解并实践这个例子,你将能更好地掌握JavaScript在网页交互中...

    HTML5 Canvas波浪分割线特效特效代码

    在这个"HTML5 Canvas波浪分割线特效特效代码"中,我们将探讨如何利用Canvas API来实现一种独特的波浪形分割线效果,这种效果常用于网页标题和正文之间的区分,增添设计感。 首先,我们需要了解Canvas的基本概念。...

    分割线拖拽照片前后对比.zip

    标题中的“分割线拖拽照片前后对比.zip”指的是一个包含前端开发中的一种特效,这个特效允许用户通过拖动一条分割线来比较两张图片的差异。这个功能通常用于展示产品的变化或者对比效果,如“前后”对比,或者在设计...

    html链接和分割线的实现.rar

    在HTML中,链接和分割线是两个基本但至关重要的元素,它们极大地提升了网页的交互性和可读性。 首先,我们来详细讨论HTML链接。链接,也称为超链接,是网页间跳转的基础。在HTML中,我们通过`&lt;a&gt;`标签来创建链接。`...

    html5 jquery beforeafter幻灯片插件分割线

    总的来说,"html5 jquery beforeafter幻灯片插件分割线"是一个利用HTML5和jQuery技术构建的创新展示工具,它通过一个可交互的分割线,为用户提供了一种直观的比较和展示变化的方式。通过学习和运用这个插件,开发者...

    分割线拖拽照片前后对比特效代码

    "分割线拖拽照片前后对比特效代码"是一个很好的例子,它利用了CSS3的强大功能来实现一个直观且有趣的交互式功能。这个特效允许用户通过拖动中间的分割线来比较两张图片的差异,为网站增添了一种现代感和互动性。 ...

    HTML 几种特别分割线特效

    一、基本线条 二、特效(效果并不是孤立的,可相互组合)1、两头渐变透明:(opacity=100,finishopacity xss=removed width=80% color=#987cb9 SIZE=3&gt;   2、纺锤形:(opacity=100,finishopacity xss=removed ...

    薛之谦专题页面HTML代码

    7. 分割线元素:`&lt;hr&gt;`用于在内容之间插入一条水平线,增加视觉层次感。 页面的布局和美化通常会结合CSS(Cascading Style Sheets)进行,但根据描述,这个专题页可能仅使用了基础HTML,没有涉及复杂的样式设计。...

    html基础代码,html+css教程

    ` `标签用于强制换行,而`&lt;hr&gt;`标签创建水平分割线,可以用于区分文档的不同部分。 在样式方面,HTML可以通过内联样式、内部样式表(在内)或外部样式表(引用CSS文件)来控制。`&lt;style&gt;`标签用于在内定义CSS,...

    HTML代码.txt

    从给定的“HTML代码.txt”文件中,我们可以解析出一系列HTML标签及其用法,这为我们提供了关于HTML语言的关键知识点。HTML(HyperText Markup Language)是用于创建网页的标准标记语言,通过这些标签,我们能够构建...

    HTML5数字雨代码

    这段代码的意思是创建一个长度为256的数组,数组中的每个元素都初始化为1,然后将其转换为字符串并分割成单个字符。这里选择256是因为它足够大,可以覆盖屏幕的宽度。 #### 六、绘制背景 为了模拟数字雨的效果,...

Global site tag (gtag.js) - Google Analytics