html 常用样式

如果觉得写得可以 或者太差 就 评论一下或者赞一下呗,多谢支持!!

如果一时找不到想要的 样式  可以 按下  ctrl+F  快速搜索 (我会不断更新)

1. 去掉<a>标签下的下划线  text-decoration: none;

2. 标签div中的元素对其方式: 

  align-items:  

     { flex-start  项目位于容器的开头。}

     {flex-end  项目位于容器的结尾。}

     {stretch   默认值。项目被拉伸以适应容器。}     

     {baseline  项目位于容器的基线上。}     
     
     {center  项目位于容器的中心。}     
     

     {initial 设置该属性为它的默认值}

3.<div>元素边框 

   //这样看起来有立体感

       #test{
            width: 200px;
            height:200px;
            border: 10px fuchsia;
            border-style: outset;
        }
        #test:hover{
            width: 200px;
            height:200px;
            border: 10px fuchsia;
            border-style: inset;

        }

//虚线
border-style: dashed;

//双线条

border-style: double;

//直线

 border-style: solid;

//点边框

 border-style: dotted;

//立体的突起边框(灯光从右边照射)

border-style: groove;

//立体的突起边框(灯光从左边照射)

border-style: ridge;

//消失

border-style: inherit;(不占位置)

border-style: none;(不占位置)

4.<div>标签的影子

      #test{
            width: 100px;
            height: 100px;
            box-shadow: black 4px 4px 6px;
        }

       box-shadow: 影子颜色 左右位移  上下位移  模糊程度  缩放大小

5.<div> 滚动条

//任何时候都隐藏滚动条
overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;
//超过才显示滚动条
overflow: auto;
overflow-x: auto;
overflow-y: auto;
//均显示滚动条
overflow: scroll;
overflow-x: scroll;

overflow-y:  scroll;

6. <div>背景颜色渐变

       #test{
            width: 100px;
            height: 100px;
            background: -webkit-gradient(linear, left top, left bottom,
             from(#c60),to(#fd8));
        }
        #test:hover{
            width: 100px;
            height: 100px;
            background: -webkit-gradient(linear, left top, left bottom,
            from(#fd8), to(#c60));

        }

7.<div>透明程度

     #test{
            width: 100px;
            height: 100px;
            background-color: black;
            opacity: 0.1;

        }

8. <div>隐藏 

     display: none/block;    隐藏后 不占位置

     visibility: visible/hidden;  隐藏后 占位置

9.文字画横线

     text-decoration: line-through;   //文字中间划横线
     text-decoration: overline;  //文字上面画横线

     text-decoration: underline; //文字下面划横线

10.文字首行空出

     text-indent: 10%;

11.文字首尾加内容

       添加双引号
        #test:before{
            content: '\201c';
        }
        #test:after{
            content: '\201d';
        }
        添加小括号
        #test:before{
            content: '(';
        }
        #test:after{
            content: ')';
        }
       添加中括号
        #test:before{
            content: '[';
        }
        #test:after{
            content: ']';

        }

      添加大括号
        #test:before{
            content: '{';
        }
        #test:after{
            content: '}';
        }
     添加尖括号
        #test:before{
            content: '<';
        }
        #test:after{
            content: '>';

        }

12. 给文字添加背景

    text-shadow: #000000 3px 3px 4px 5px;

     text-shadow: 颜色 左右偏移量 上下偏移量 模糊程度 缩放程度;

13.文字行间距加大

   //分割线
    -webkit-column-rule: dashed 1px #888888; */
    -o-column-rule: dashed 1px #888888;
    column-rule: dashed 1px #888888;
    -moz-column-gap: 20px;
 //每块之间的间隔
  /* -webkit-column-gap: 20px; */
    -o-column-gap: 20px;
    column-gap: 20px;
 分成几列
   -moz-column-count: 3;
    /* -webkit-column-count: 3; */
    -o-column-count: 3;

    column-count: 3;

14.文字首字母自动大小写

    text-transform: capitalize;  //每个单词的首字母都大写

    font-variant: small-caps;  /所有的字母都大写 并且首字母的第一个字母 字体变大

    text-transform: lowercase;   //只有第一个单词的首字母大写

    text-transform: uppercase;  //所有字母都大写

15.特殊符号

 

16.图片旋转

  transform: rotate(90deg);  旋转90度

  transition: all .7s;  可以再加上这个 让按钮旋转
    (transition-property: all;
    transition-duration: 0.7s;
    transition-timing-function: initial;

    transition-delay: initial;)

17.鼠标触动 后慢慢变大   

 #test{
    transition: all 0.2s;
    width: 50px;
    height: 50px;
}
#test:hover{
    transition: all 0.2s;
    width: 150px;
    height: 150px;
}

    transition: all 2s cubic-bezier(0.68, -0.55, 0.27, 1.55);  改变改变时候的线性变化(可以再浏览器进行调节)

    transform: scale(1.1);  对图片进行缩放

如果图片位于最上边 加上     vertical-align: top;  就会让图片相对于左上角放大  如果不加 就相对于最下角放大
如果图片位于最下边  则相对于左下角放大

<img src="555.jpg" id="test">

18.<span>的边框

  display: inline-block;

19. <ul> 横向排列

    display: inline;

20.各种小图标

http://www.runoob.com/try/demo_source/bootstrap-glyph-customization.htm

21. 基本颜色 (个人感觉这几种颜色很自然)

  '#8543E0',  //紫色
  '#F04864',  //红色
  '#FACC14',  //黄色
  '#1890FF',  //蓝色
  '#13C2C2',  //青色
  '#2FC25B',  //绿色
  '#fa8c16',  //橘黄色
  '#a0d911',  //浅绿色

22.文字强制换行

word-wrap:break-word

23. 文字自动换行, 一般用于  "简介" 超出的部分隐藏

  overflow: hidden;

  word-wrap:break-word;

24.自定义 滚动条样式

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar
{
  width: 5px;
  height: 16px;
  background-color: #F5F5F5;
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track
{
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  border-radius: 10px;
  background-color: #F5F5F5;
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb
{
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  background-color: #555;

}

25.  一个获取访问者ip的例子

<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>   
<script>   
      document.write(returnCitySN["cip"]+','+returnCitySN["cname"])   

</script> 

26.让滑块滑动到最下边

  e=document.getElementById("divId")

   e.scrollTop=e.scrollHeight;

27.防止浏览器记住密码

<input type="text"  name="user_password" οnfοcus="this.type='password'" id="passwordInput">

28. input 输入限制

  可以输入小数
  <input onBlur="if(isNaN(value))execCommand('undo')" οnkeyup="if(isNaN(value))execCommand('undo')"    onafterpaste="if(isNaN(value))execCommand('undo')" name="goodsCost">
   只能整数
 <input onBlur="this.value=this.value.replace(/\D/g,'')" οnkeyup="this.value=this.value.replace(/\D/g,'')"    onafterpaste="this.value=this.value.replace(/\D/g,'')" name="goodsSum">

 只能输入英文字母和数字,不能输入中文
<input οnkeyup="value=value.replace(/[^\w\.\/]/ig,'')">

只能输入整数:
<input onBlur="this.value=this.value.replace(/\D/g,'')" οnkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" >

能输入整数和小数:
<input onBlur="if(isNaN(value))execCommand('undo')" οnkeyup="if(isNaN(value))execCommand('undo')" onafterpaste="if(isNaN(value))execCommand('undo')"  >

只能输入英文字母和数字和符号,不能输入中文
<input type="text" οnkeyup="value=value.replace(/[^\w\.\/]/ig,'')" οnblur="value=value.replace(/[^\w\.\/]/ig,'')">
<input onBlur="value=value.replace(/[^\d|chun]/g,'')"  onKeyUp="value=value.replace(/[^\d|chun]/g,'')">

只能输入数字和英文

<input  onBlur="value=value.replace(/[^\d|chun]/g,'')"  onKeyUp="value=value.replace(/[^\d|chun]/g,'')">

文本框只能输入数字代码(小数点也不能输入)
<input οnkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')">

只能输入数字,能输小数点.
<input οnkeyup="if(isNaN(value))execCommand('undo')" onafterpaste="if(isNaN(value))execCommand('undo')">
<input name=txt1 οnchange="if(/\D/.test(this.value)){alert('只能输入数字');this.value='';}">

数字和小数点方法二
<input type=text   οnkeypress="if(!this.value.match(/^[\+\-]?\d*?\.?\d*?$/))this.value=this.t_value;else this.t_value=this.value;if(this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/))this.o_value=this.value" οnkeyup="if(!this.value.match(/^[\+\-]?\d*?\.?\d*?$/))this.value=this.t_value;else this.t_value=this.value;if(this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/))this.o_value=this.value" οnblur="if(!this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?|\.\d*?)?$/))this.value=this.o_value;else{if(this.value.match(/^\.\d+$/))this.value=0+this.value;if(this.value.match(/^\.$/))this.value=0;this.o_value=this.value}">

只能输入字母和汉字
<input οnkeyup="value=value.replace(/[\d]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[\d]/g,''))" maxlength=10 name="Numbers">

只能输入数字和英文<font color="Red">chun</font>
<input onKeyUp="value=value.replace(/[^\d|chun]/g,'')">

小数点后只能有最多两位(数字,中文都可输入),不能输入字母和运算符号:
<input onKeyPress="if((event.keyCode<48 || event.keyCode>57) && event.keyCode!=46 || /\.\d\d$/.test(value))event.returnValue=false">

小数点后只能有最多两位(数字,字母,中文都可输入),可以输入运算符号:
<input οnkeyup="this.value=this.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')">

输入中文:
<input type="text" οnkeyup="this.value=this.value.replace(/[^\u4e00-\u9fa5]/g,'')">

输入数字:

<input type="text" οnkeyup="this.value=this.value.replace(/\D/g,'')">

输入英文:

<input type="text" οnkeyup="this.value=this.value.replace(/[^a-zA-Z]/g,'')">

三个合在一起
<input οnkeyup="value=value.replace(/[^\w\u4E00-\u9FA5]/g, '')">

只输入数字和字母
：<INPUT class=input maxLength=12 size=15 name=username id="username" onKeyUp="value=value.replace(/[\W]/g,'')">

除了英文的标点符号以为 其他的人都可以中文，英文字母，数字，中文标点
<input type="text" οnkeyup="this.value=this.value.replace(/^[^!@#$%^&*()-=+]/g,'')">

29.  福利  两个好看 flash  直接引用

<body>
<div>
<embed src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_wh.swf" quality="high" bgcolor="#ffffff" width="160" height="70" name="honehoneclock"  allowscriptaccess="always" >
</div>
<div>
<object type="application/x-shockwave-flash" style="outline:none;" data="http://cdn.abowman.com/widgets/hamster/hamster.swf?up_bodyColor=f0e9cc&amp;up_feetColor=D4C898&amp;up_eyeColor=000567&amp;up_wheelSpokeColor=DEDEDE&amp;up_wheelColor=FFFFFF&amp;up_waterColor=E0EFFF&amp;up_earColor=b0c4de&amp;up_wheelOuterColor=FF4D4D&amp;up_snoutColor=F7F4E9&amp;up_bgColor=F0E4E4&amp;up_foodColor=cba920&amp;up_wheelCenterColor=E4EB2F&amp;up_tailColor=E6DEBE&amp;" width="200" height="160" title="Adobe Flash Player" id="360videoname"></object>
</div>
<script type="text/javascript" color="255,0,0" opacity="0.5" count="99" src="https://www.whatled.com/content/templates/whatled/js/canvas-nest.min.js"></script>
</body>