`
sundful
  • 浏览: 1244715 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

html 分割线

    博客分类:
  • 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;`生成的是一条实线,但我们...

    HTML 几种特别分割线特效

    下面我们将详细探讨如何利用CSS实现文中提到的几种特别的HTML分割线特效。 1. **基本线条** 这是最基础的水平线,通常用`&lt;hr&gt;`标签生成。默认情况下,它是一条单色的水平线,可以通过`width`、`color`和`size`属性...

    动态分割线

    在IT行业中,动态分割线的实现通常涉及到前端开发技术,如HTML、CSS和JavaScript。HTML可以创建基础结构,CSS则负责样式设计和动画效果,而JavaScript或相关的库(如jQuery)可以用来实现更复杂的交互和动态行为。 ...

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

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

    HTML5 Canvas波浪分割线特效.zip

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

    jquery分割线

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

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

    本话题将深入探讨如何利用`:after`伪元素来实现分割线和气泡效果。 首先,让我们理解`:after`的基本语法。`:after`伪元素紧跟在选择器后面,然后使用一对花括号 `{}` 包裹内容。内容可以是文本、图像或者任何其他可...

    html5和css3制作不规则的网页背景分割线

    总的来说,通过巧妙地利用HTML5的新元素和CSS3的高级特性,我们可以创造出既美观又灵活的不规则网页背景分割线,同时避免了以往使用图片带来的额外下载时间和维护成本。这种技术不仅提升了用户体验,还展示了现代Web...

    jquery列表分割线插件.rar

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

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

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

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

    总结来说,这个JSP页面的分割线功能结合了HTML、CSS和JavaScript(主要是jQuery)的技术,通过监听鼠标事件实现了用户可拖动的分割线,允许用户自定义页面布局。这个功能对于创建高度定制化的Web界面非常有用,可以...

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

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

    排版分割线;用于灵活地分段设置

    在网页设计中,HTML提供了一些内置的标签来创建分割线,如`&lt;hr&gt;`标签,可以快速插入一条水平分割线。CSS则提供了更丰富的自定义能力,允许开发者调整分割线的颜色、宽度、边距、阴影等属性,以满足不同设计风格的...

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

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

    html5 jquery beforeafter幻灯片插件分割线

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

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

    为了使用这些代码,你需要解压文件,然后在本地环境中打开HTML文件,浏览器将加载CSS和JavaScript资源并执行,从而呈现创意分割线404页面的效果。如果你对代码进行二次修改,可以根据自己的需求调整颜色、动画速度或...

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

    这个名为"jQuery分割线拖拽照片前后对比"的项目,显然是利用jQuery来创建一个可以拖动的分割线,从而让用户能直观地比较两张图片的差异。这种效果常见于产品展示、设计稿对比或者历史变迁的展示等场景。 首先,我们...

    piccutter图像分割器

    3、可以新建水平分割线或者垂直分割线 4、可以自由拖动分割线,拖动时显示水平或者垂直位置 5、在分割线上双击鼠标左键或按鼠标右键可以输入数字实现精确定位 6、可以删除分割线 7、在图像上按鼠标右键可以取消添加...

Global site tag (gtag.js) - Google Analytics