HR线条样式CSS定制

转载 2007年09月13日 10:46:00
在一个页面里有许多<hr>  就在<style>里改变做样!!

例如
这里CSS指线宽度90%   高度3px 离上下右下左距离 10px 0px 10px 0px
<style>hr{width: 90%;height: 3px;margin: 10 0 10 0;}</style>  
在页面有了<HR>就会受到有改变hr{}的影响

HTML要贴:

<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;">

补充日期: 2005-10-03 23:31:10

一般样式:

<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>

补充日期: 2005-10-03 23:33:35

以下是引用片段:

<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;">

<br><br><br><br><br><br><br><br><br><br><br><br>
<hr size="10" color="#000080" style="filter:alpha(opacity=10,finishopacity=100,style=1,startX=0,startY=0,finishX=100,finishY=100)">
<br><br>
<hr size="10" color="#ffccff" style="filter:alpha(opacity=10,finishopacity=100,style=1,startX=100,startY=100,finishX=0,finishY=0)">
<br><br>
<hr size="10" color="#0000cc" style="filter:alpha(opacity=0,finishopacity=100,style=2)">
<br><br>
<hr size="10" color="#cc0000" style="filter:alpha(opacity=0,finishopacity=100,style=3)">
<br><br>
<hr size="10" style="filter:progid:DXImageTransform.Microsoft.Gradient(gradientType='1',startColorstr='red',endColorstr='blue')">
<br><br>
<hr size="10" style="filter:progid:DXImageTransform.Microsoft.Gradient(gradientType='0',startColorstr='#004040',endColorstr='#C0FFFF')">
<br><br>
<hr style="color:ffff00;height:10;border:3 solid #000000">
<br><br>
<hr style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType='0',startColorstr='#c0c0ff',endColorstr='#0000FF'); WIDTH: 100%;HEIGHT: 8px">
<br><br>
<hr style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType='1',startColorstr='#ff0000',endColorstr='#ffeeee'); WIDTH: 100%;HEIGHT: 8px" >
<br><br>
<hr style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType='1',startColorstr='#FFFFEE',endColorstr='#EEDD00'); WIDTH: 100%;HEIGHT: 8px">
<br><br>
<hr style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType='0',startColorstr='#008800',endColorstr='#ddffdd'); WIDTH: 100%;HEIGHT: 18px">
<br><br>
<hr style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType='1',startColorstr='#006600',endColorstr='#88ff88'); WIDTH: 100%;HEIGHT: 18px">


 

补充日期: 2005-10-04 00:35:49

<body style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType='0',startColorstr='#008800',endColorstr='#ddffdd');">

 

 

<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;">

 

 

 

<br><br><br><br><br><br><br><br><br><br><br><br>
<hr size="10" color="#000080" style="filter:alpha(opacity=10,finishopacity=100,style=1,startX=0,startY=0,finishX=100,finishY=100)">
<br><br>
<hr size="10" color="#ffccff" style="filter:alpha(opacity=10,finishopacity=100,style=1,startX=100,startY=100,finishX=0,finishY=0)">
<br><br>
<hr size="10" color="#0000cc" style="filter:alpha(opacity=0,finishopacity=100,style=2)">
<br><br>
<hr size="10" color="#cc0000" style="filter:alpha(opacity=0,finishopacity=100,style=3)">
<br><br>
<hr size="10" style="filter:progid:DXImageTransform.Microsoft.Gradient(gradientType='1',startColorstr='red',endColorstr='blue')">
<br><br>
<hr size="10" style="filter:progid:DXImageTransform.Microsoft.Gradient(gradientType='0',startColorstr='#004040',endColorstr='#C0FFFF')">
<br><br>
<hr style="color:ffff00;height:10;border:3 solid #000000">
<br><br>
<hr style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType='0',startColorstr='#c0c0ff',endColorstr='#0000FF'); WIDTH: 100%;HEIGHT: 8px">
<br><br>
<hr style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType='1',startColorstr='#ff0000',endColorstr='#ffeeee'); WIDTH: 100%;HEIGHT: 8px" >
<br><br>
<hr style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType='1',startColorstr='#FFFFEE',endColorstr='#EEDD00'); WIDTH: 100%;HEIGHT: 8px">
<br><br>
<hr style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType='0',startColorstr='#008800',endColorstr='#ddffdd'); WIDTH: 100%;HEIGHT: 18px">
<br><br>
<hr style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType='1',startColorstr='#006600',endColorstr='#88ff88'); WIDTH: 100%;HEIGHT: 18px">

 

相关文章推荐

CSS设置hr样式

line-height:1px;clear:both;display:block;overflow:hidden'>  hr在ie和ff下表现形式可能有所出入, 可以用 div来代替 --------...

设置hr元素颜色

说到颜色变化,大家首先想到的都是color,但是color一般都是针对字体颜色的,线条需要用background-color, 但是单纯的将背景色设为蓝色是不够的,线条还是灰色的,我们需要给线条一个...

css控制hr标签样式去掉阴影

html中水平衡线hr默认高度是两个像素,其中border-top高1px,且颜色为黑,border-bottom高1px颜色为灰,这时看着是阴影效果 去掉阴影效果很简单,只需在css里把borde...

html中各种hr样式

第一种 height:2px;是hr的高度 border:none;是没有边框 border-top:2px dotted #185598;是设置横线的样式 dotted  虚线  #1...

为<hr>添加样式

内容不多,顶多算是随笔了。 默认样式( 没有空格标签就给编译成下面这个样子了..): 首先是一个块元素,类似带有默认样式的div元素。那我们就知道怎么对它修改样式了,常见的需...

去除Bootstrap输入框聚焦时的边框轮廓线

使用Bootstrap3的时候,好处是有很多现有的控件可以使用,坏处是个性化起来会遇到不少麻烦,单独的静态页面显示正常的, 引入Bootstrap后,有些类/通用界面组件的样式会被覆盖。想去除默认风格...

bootstrap中六种表格样式

表格 表格是Bootstrap的一个基础组件之一,Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格。在使用Bootstrap的表格过程中,只需要添加对应的...

css改变hr颜色

html中用css改变颜色, 如果不加border:0;的话,虽然颜色改变了,但是会显示一条黑色的边框。 如果不加height:1px;的话,在firefox下会不显示。
  • amohan
  • amohan
  • 2013-10-21 15:17
  • 16974

Bootstrap fileinput.js,最好用的文件上传组件

本篇介绍如何使用bootstrap fileinput.js(最好用的文件上传组件)来进行图片的展示,上传,包括springMVC后端文件保存。

PHP自适应分页代码,可以灵活定制CSS样式和分页链接效果!

{CSDN:CODE:301489}
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)