`
neeleon
  • 浏览: 181812 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

HR样式大全

    博客分类：
  • CSS
MicrosoftYahoo 
阅读更多

<HR style="width: 90%;height: 3px;margin: 10 0 10 0;">

<style>
hr {margin:0;HEIGHT: 25;width:100%;border:4px ridge;COLOR:333;}
</style>
<HR>


线条可以改变多种形状
线条样式属性原设值样式是solid
要改成是虚线条是dotted
例子是这样
<HR style="border:1px dotted red;">
看起来点点好像有点大  而且还有原背景的色

这时要多加入一个高度调整他
<HR style="border-top:1px dotted red;HEIGHT:0;">
这样原来背景条色就没了!线条也变细

你使用HEIGHT:1;这样是原预设值

你的线条已被固定了  但你想在排版时!能让线条靠上下左右的距离
利用position:relative;
他是在原地被移动时可用的上 比如说要再往上移 往右移!看下句
<HR style="position:relative;top:-15;right:80; border-top:1px dotted red;HEIGHT:0;">

一般样式：

<HR style="COLOR: red;border-style:dotted; HEIGHT: 8;">

<HR style="COLOR: red;border-style:double; HEIGHT: 20;">

<HR style="COLOR: red;border-style:outset; HEIGHT: 8;">

<HR style="COLOR: red;border-style:inset; HEIGHT: 18;">

<HR style="COLOR: fff;border-left: 1px double red;border-bottom: 1x double red;HEIGHT: 20;">

<HR style="border:8px ridge #FFB600;COLOR:000;HEIGHT: 50;width:100px;top:-25;right:80;position:relative;">

线条创成图片变的比较多采多亮：

<style>
hr {height:10px;border: 1px solid red;background:url(http://tw.yimg.com/a/tw/wenchuan/0813lifea.gif) repeat-x;}
</style><HR>

HR做为广告样子：

<style>
hr {background:red url(http://tw.yimg.com/i/tw/sms/act/20041124.jpg) repeat;width:100%;height:120px;border: 1px solid red;}
</style>
<HR>

HR做为我的照片样式：

<style>
hr {background:red url(http://tw.img.match.yahoo.com/img/show//2/A/9/B/personals-1117330768-580902/photo_s1.jpg") no-repeat;width:75;height:75;border:0;>}
</style>
<HR>

线条隐藏：

<style>hr{display:none;}</style>
<HR>

改线条色 也可让线更细：

<style>hr{border-bottom: 1px solid red;}</style>

<HR>
 
改线条色 高度是原预设：

<style>hr{COLOR: #eee; HEIGHT: 1px;}</style>
<HR>

<body bgcolor="#000000">
<hr style="width:1;border:1 dashed red;height:199;position:absolute;top:100;left:100;">
<hr style="width:1;border:1 dashed lime;height:199;position:absolute;top:100;left:150;">
<hr style="width:1;border:1 dashed cyan;height:199;position:absolute;top:100;left:200;">
<hr style="width:1;border:1 dashed blue;height:199;position:absolute;top:100;left:250;">
<hr style="width:1;border:1 dashed red;height:199;position:absolute;top:100;left:300;">
<hr style="width:1;border:1 dashed lime;height:199;position:absolute;top:100;left:350;">
<hr style="width:1;border:1 dashed cyan;height:199;position:absolute;top:100;left:400;">
<hr style="width:1;border:1 dashed blue;height:199;position:absolute;top:100;left:450;">
<hr style="width:1;border:1 dashed red;height:199;position:absolute;top:100;left:500;">
<hr style="width:1;border:1 dashed lime;height:199;position:absolute;top:100;left:550;">
<hr style="width:1;border:1 dashed cyan;height:199;position:absolute;top:100;left:600;">
<hr style="width:1;border:1 dashed blue;height:199;position:absolute;top:100;left:650;">
<hr style="width:1;border:1 dashed red;height:199;position:absolute;top:100;left:700;">
<hr style="width:1;border:1 dashed lime;height:199;position:absolute;top:100;left:750;">
<hr style="width:1;border:1 dashed cyan;height:199;position:absolute;top:100;left:800;">
<hr style="width:1;border:1 dashed blue;height:199;position:absolute;top:100;left:850;">
<hr style="width:1;border:1 dashed lime;height:199;position:absolute;top:100;left:900;">


<hr size="10" color="#000080" style="filter:alpha(opacity=10,finishopacity=100,style=1,startX=0,startY=0,finishX=100,finishY=100)">

<hr size="10" color="#ffccff" style="filter:alpha(opacity=10,finishopacity=100,style=1,startX=100,startY=100,finishX=0,finishY=0)">

<hr size="10" color="#0000cc" style="filter:alpha(opacity=0,finishopacity=100,style=2)">

<hr size="10" color="#cc0000" style="filter:alpha(opacity=0,finishopacity=100,style=3)">

<hr size="10" style="filter:progid:DXImageTransform.Microsoft.Gradient(gradientType='1',startColorstr='red',endColorstr='blue')">

<hr size="10" style="filter:progid:DXImageTransform.Microsoft.Gradient(gradientType='0',startColorstr='#004040',endColorstr='#C0FFFF')">
<hr style="color:ffff00;height:10;border:3 solid #000000">

<hr style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType='0',startColorstr='#c0c0ff',endColorstr='#0000FF'); WIDTH: 100%;HEIGHT: 8px">

<hr style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType='1',startColorstr='#ff0000',endColorstr='#ffeeee'); WIDTH: 100%;HEIGHT: 8px" >

<hr style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType='1',startColorstr='#FFFFEE',endColorstr='#EEDD00'); WIDTH: 100%;HEIGHT: 8px">

<hr style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType='0',startColorstr='#008800',endColorstr='#ddffdd'); WIDTH: 100%;HEIGHT: 18px">

<hr style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType='1',startColorstr='#006600',endColorstr='#88ff88'); WIDTH: 100%;HEIGHT: 18px">

<hr style="width:1;border:1 dashed red;height:199;position:absolute;top:100;left:100;">
<hr style="width:1;border:1 dashed lime;height:199;position:absolute;top:100;left:150;">
<hr style="width:1;border:1 dashed cyan;height:199;position:absolute;top:100;left:200;">
<hr style="width:1;border:1 dashed blue;height:199;position:absolute;top:100;left:250;">
<hr style="width:1;border:1 dashed red;height:199;position:absolute;top:100;left:300;">
<hr style="width:1;border:1 dashed lime;height:199;position:absolute;top:100;left:350;">
<hr style="width:1;border:1 dashed cyan;height:199;position:absolute;top:100;left:400;">
<hr style="width:1;border:1 dashed blue;height:199;position:absolute;top:100;left:450;">
<hr style="width:1;border:1 dashed red;height:199;position:absolute;top:100;left:500;">
<hr style="width:1;border:1 dashed lime;height:199;position:absolute;top:100;left:550;">
<hr style="width:1;border:1 dashed cyan;height:199;position:absolute;top:100;left:600;">
<hr style="width:1;border:1 dashed blue;height:199;position:absolute;top:100;left:650;">
<hr style="width:1;border:1 dashed red;height:199;position:absolute;top:100;left:700;">
<hr style="width:1;border:1 dashed lime;height:199;position:absolute;top:100;left:750;">
<hr style="width:1;border:1 dashed cyan;height:199;position:absolute;top:100;left:800;">
<hr style="width:1;border:1 dashed blue;height:199;position:absolute;top:100;left:850;">
<hr style="width:1;border:1 dashed lime;height:199;position:absolute;top:100;left:900;">

<hr size="10" color="#000080" style="filter:alpha(opacity=10,finishopacity=100,style=1,startX=0,startY=0,finishX=100,finishY=100)">

<hr size="10" color="#ffccff" style="filter:alpha(opacity=10,finishopacity=100,style=1,startX=100,startY=100,finishX=0,finishY=0)">

<hr size="10" color="#0000cc" style="filter:alpha(opacity=0,finishopacity=100,style=2)">

<hr size="10" color="#cc0000" style="filter:alpha(opacity=0,finishopacity=100,style=3)">

<hr size="10" style="filter:progid:DXImageTransform.Microsoft.Gradient(gradientType='1',startColorstr='red',endColorstr='blue')">

<hr size="10" style="filter:progid:DXImageTransform.Microsoft.Gradient(gradientType='0',startColorstr='#004040',endColorstr='#C0FFFF')">

<hr style="color:ffff00;height:10;border:3 solid #000000">

<hr style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType='0',startColorstr='#c0c0ff',endColorstr='#0000FF'); WIDTH: 100%;HEIGHT: 8px">

<hr style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType='1',startColorstr='#ff0000',endColorstr='#ffeeee'); WIDTH: 100%;HEIGHT: 8px" >

<hr style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType='1',startColorstr='#FFFFEE',endColorstr='#EEDD00'); WIDTH: 100%;HEIGHT: 8px">

<hr style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType='0',startColorstr='#008800',endColorstr='#ddffdd'); WIDTH: 100%;HEIGHT: 18px">

<hr style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType='1',startColorstr='#006600',endColorstr='#88ff88'); WIDTH: 100%;HEIGHT: 18px">

分享到：
| 在google app engine上安装jaikuengine
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    CSS——hr水平线样式

    CSS水平线样式 CSS中的水平线（HR）是一种重要的排版元素，它可以用来分隔文章、区块或其他内容。今天，我们将探讨如何使用CSS来美化水平线的样式，添加更多的效果，从而提高网页的可读性和美观性。 基本样式 在...

    css中hr标签的各种用法

    然而，通过CSS，我们可以进一步定制`&lt;hr&gt;`标签的外观，使其在设计中发挥更多作用。本文将详细介绍`&lt;hr&gt;`标签的各种CSS用法。 1. **基本使用** `&lt;hr&gt;`标签默认会生成一条横跨页面的单线条。例如： ```html &lt;hr&gt; ...

    css控制水平衡线hr标签样式去掉阴影效果

    默认情况下，`&lt;hr&gt;`标签的样式可能会带有阴影效果，这是因为浏览器的默认样式设定使然。为了获得更自定义的视觉效果，我们可以利用CSS来控制`&lt;hr&gt;`标签的样式，比如去除阴影效果。 首先，我们来分析一下`&lt;hr&gt;`标签...

    hr标签效果.txt

    以下是一些具体的示例，展示了如何使用`&lt;hr&gt;`标签及其属性来创建不同样式的水平线。 1. **固定宽度、居中对齐、无阴影的水平线** ```html &lt;hr width="300" size="1" color="#5151A2" align="center" noshade&gt; `...

    HR组织架构用visio输出

    4. **自定义样式**：可以通过更改形状填充颜色、线条样式和文字字体等，使组织架构图更具个性化和专业性。Visio还允许添加背景图片、页边距和页眉页脚等元素。 5. **导入数据**：如果你有现成的数据（例如Excel表格...

    如何定义html hr 样式(多种效果)

    这些代码示例分别展示了几种不同的HR样式效果，包括渐变透明效果、纺锤形、立体效果和钢针效果等。这些效果通过CSS滤镜来实现，可以增强网页设计的视觉吸引力。 标签“html hr 样式”点明了文章的主题，即如何通过...

    HR人事后台页面框架

    总的来说，"HR人事后台页面框架"是一个集成了CSS样式、分页结构、良好用户体验和易用性设计的后台管理系统。它利用现代前端技术，如预处理器、模块化和前端框架，提供了高效的人事管理工作平台。对于开发者而言，...

    用友U8 HR报表学习PPT

    模板设计涉及报表的布局、样式和计算公式；数据提取逻辑则是确定哪些业务数据会被纳入报表；定时任务则确保报表在指定时间自动生成。 五、HR报表的应用价值 1. 数据决策支持：通过对人力资源数据的统计分析，企业...

    关于HR（人力资源）的静态页面

    在IT行业中，构建一个关于HR（人力资源）的静态页面是一个常见的任务，这涉及到网页设计、前端开发以及人力资源信息展示等多个方面。在这个项目中，我们主要关注的是HTML（超文本标记语言），这是创建网页的基础语言...

    hr 样式实现1px直线

    在这个例子中，我们将深入探讨如何使用 CSS 样式来实现 `hr` 标签的1px直线效果，并考虑跨浏览器兼容性问题。 首先，让我们分析提供的 HTML 和 CSS 代码： ```html &lt;!DOCTYPE ...

    HR.rar_HR系统18级B_hr_vb 系统

    开发者可以根据需求自定义报表样式，包括员工花名册、考勤报告、薪资单等，提高工作效率。 此外，VB的事件驱动编程模型使得用户界面设计变得直观易用。通过拖放控件，如按钮、文本框、列表视图等，开发者可以构建出...

    hr 水平线样式示例代码

    本文将深入探讨`&lt;hr&gt;`标签的不同属性及其在创建水平线样式时的应用，以及如何通过CSS来进一步定制水平线的外观。 首先，基础的`&lt;hr&gt;`标签没有设置任何样式时，通常会默认生成一条简单的、薄薄的横线。例如： ```...

    大型HR asp.net源码

    9. JavaScript和CSS：用于前端交互和样式设计，提升用户体验。 10. 图像和其他资源文件：如logo、图标等，用于美化界面。 通过深入研究这套源码，开发者可以学习到如何在ASP.NET环境中组织大型项目的结构，理解C#...

    人力资源管理系统(HR)HTML模板

    它通常包含预设计的页面布局、样式表、脚本和其他Web组件，旨在为开发者提供一个快速开发HR系统前端界面的基础。这个模板以其美观的设计和用户友好的界面为特点，能够提升员工和管理层在处理人事事务时的体验。 在...

    虹润 HR-3000检测字典说明书.pdf

    然而，由于技术限制，OCR扫描过程中可能因为图像质量、文字清晰度或者文字样式等原因，导致识别错误或遗漏个别字词，这可能会影响文档的可读性和准确性。 在使用这类技术文件时，用户应当注意这种技术局限性，对...

    HR Form Editor

    它允许用户创建、修改和管理复杂的HR表单，支持多种格式和样式，以满足不同业务需求。 - **版本**：该文档对应的是 Release 4.6C 版本，发布日期为 2001 年 4 月。 #### 二、版权与法律声明 - **版权所有**：文档...

    .net 学士后第二单元项目 HR人事资源管理系统

    - Bootstrap或自定义CSS样式，确保页面布局美观，响应式设计适应不同设备。 4. **权限管理**： - 实现角色和用户的权限分配，如管理员、人事专员等，可以访问不同的功能模块。ASP.NET内置的角色和身份验证机制能...

    关于分割线 hr 在各浏览器中的差异

    然而，由于不同浏览器对`&lt;hr&gt;`标签的解析和渲染存在差异，特别是在老版本的 Internet Explorer（如 IE6 和 IE7）中，这些差异可能会导致样式表现不一致，从而给开发者带来困扰。本文将深入探讨`&lt;hr&gt;`标签在各浏览器...

Magicbox
Global site tag (gtag.js) - Google Analytics