非常使用的CSS代码

1.段落前面添加三角符号

HTML:

  • 你好
  • 你好
  • 你好

CSS:

ul {
    margin: 0.75em 0;
    padding: 0 1em;
    list-style: none;
}
li:before { 
    content: "";
    border-color: transparent #111;
    border-style: solid;
    border-width: 0.35em 0 0.35em 0.45em;
    display: block;
    height: 0;
    width: 0;
    left: -1em;
    top: 0.9em;
    position: relative;
}


2.页面div居中对其并控制宽度

HTML:


  

 CSS:

#page-wrap {
     width: 800px;
     margin: 0 auto;
}

3.固定页脚

CSS:

#footer{
    position:fixed;
    left:0px;
    bottom:0px;
    height:30px;
    width:100%;
    background:#999;
}
/* Für ie6*/
* html #footer{
    position:absolute;
    top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}	

4.发光的输入框

HTML:


CSS:

input[type=text], textarea {
  @include transition(all 0.30s ease-in-out);
  outline: none;
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid #DDDDDD;
}
 
input[type=text]:focus, textarea:focus {
  @include box-shadow(0 0 5px rgba(81, 203, 238, 1));
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid rgba(81, 203, 238, 1);
}

label {
  width: 150px;
  float: left;
}

body {
  padding: 20px;
}


5.遇到连接鼠标变成小手

CSS:

a[href], input[type='submit'], input[type='image'], label[for], select, button, .pointer {
       cursor: pointer;
}






你可能感兴趣的:(非常使用的CSS代码)