zoukankan      html  css  js  c++  java
  • HR线条样式CSS定制

    这里CSS指线宽度90%   高度3px 离上下右下左距离 10px 0px 10px 0px

    <style>hr{ 90%;height: 3px;margin: 10 0 10 0;}</style>  

    在页面有了<HR>就会受到有改变hr{}的影响

    HTML要贴:

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

    <style>

    hr {margin:0;HEIGHT: 25;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;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;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;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>

  • 相关阅读:
    洛谷7月月赛 B 题解
    undone
    树剖学习
    关于两周后noip---小计划
    线段树技巧练习--GSS1
    链式前向星存图及注意要点
    错题集合
    树上差分问题
    2020暑假学习内容整理及后续计划
    安利大佬博客
  • 原文地址:https://www.cnblogs.com/pricks/p/1611197.html
Copyright © 2011-2022 走看看