非常使用的CSS代码_网上下载的css代码怎么使用-CSDN博客

本文链接：https://blog.csdn.net/weifangyh/article/details/9011751

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

HTML：

<ul>
   <li>你好</li>
   <li>你好</li>
   <li>你好</li>
</ul>

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:

<body>
  <div id="page-wrap">
    <!-- all websites HTML here -->
  </div>
</body>

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:

<form action="#" method="post">
  
    <div>
        <label for="name">Text Input</label>
        <input type="text" name="name" id="name" value="" tabindex="1" />
    </div>
  
    <div>
        <label for="textarea">Textarea</label>
        <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
    </div>
  
</form>

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