css拾遗

1、ol的妙用

无序列表，一般用于需要排序的时候，可以使用他的       list-style-type       属性可以一、二 、三 和其他想要的排序

   配合使用       list-style-position: inside;会有不一样的效果

list-style-image   允许自定义 前缀图片

2、文字环绕图片 

图片直接添加float

https://blog.csdn.net/yiyelanxin/article/details/75006925

 

3、妙用transition实现鼠标移入文字颜色改变

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box{
				
				background: #e9e9e9;
				overflow: hidden;
			}
			#oldText{ 
				position: relative;
				color: #333;
			}
			#oldText::before{
				display: block;
				height: 100%;
				content: '';
				position: absolute;
			    left: 0;
			    top: 0;
			    overflow: hidden;
			    transition: 3.5s width;  
				width: 0%;
				color: red;
                z-index: 999;
			}
			#oldText.active::before{
				color: red;
				width: 100%;
				transition: 3.5s width;  
			}
			#oldText.leave::before{
				color: blueviolet;
				width: 100%;
				transition: 3.5s width;  
			}
		</style>
	</head>
	<body>
		<input type="button" id="btn"  value="点击"/>
		<div id="box">
			<p id="oldText">在我小时候,一位前辈对我说:"男孩子只要心地善良,开朗大方,长得不帅，没钱没房也会有女孩儿喜欢的."现在麻烦那位前辈你出来一下,我保证不打死你</p>
		</div>
		<script type="text/javascript">
//			
//			console.log(document.getElementById('oldText').style.color);
			
//			var oldBefores=oldText.querySelector(':before');

            window.onload=function(){
            	var oldText=document.getElementById('oldText');
            	var btn=document.getElementById('btn');
			    var oldBefores=oldText.querySelector(':before');
                
                var styles=document.createElement('style');
                var sty1=document.createTextNode("#oldText::before{content:"+"'"+oldText.innerHTML+"'"+"}");
                
                styles.appendChild(sty1);
                document.body.appendChild(styles);
                
//              btn.onclick=function(){
//              	oldText.setAttribute('class','active')
//              }
                oldText.onmouseover=function(){
                	oldText.setAttribute('class','active');
                }
                oldText.onmouseleave=function(){
                	oldText.removeAttribute('class','active');
                	oldText.setAttribute('class','leave');
                }
            }
		</script>
	</body>
</html>

4、实体字符

https://www.cnblogs.com/kiter/archive/2011/08/05/2128309.html

5、文字渐变：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <style>

    span {
        background: linear-gradient(to right, red, blue);
        -webkit-background-clip: text;
        color: transparent;
    }
    </style>
</head>

<body>
        <span>前端简单说</span>
</body>
</html>

6/select默认下拉箭头改变、option样式清除

/* --ie清除--*/

select::-ms-expand{ display: none; }

/* --火狐、谷歌清除--*/

select{
     appearance:none;  
    -moz-appearance:none;  
    -webkit-appearance:none;
     background: url("arrow.png") no-repeat scroll right center transparent;
     padding-right: 14px;
}
option::-ms-expand{ display: none; }
option{
    -moz-appearance:none; /* Firefox */
    -webkit-appearance:none; /* Safari 和 Chrome */
    appearance:none;
}
/* --背景色字体颜色--*/
option:hover{
    color:#fff;
    background-color:#1E90FF;
}

7、文字阴影：

text-shadow: 1px 1px 0px #097bb7,
               2px 2px 0px #0875ae,
               3px 3px 0px #086fa4,
               4px 4px 0px #07689a,
               4px 4px 2px #000;

8、BFC(block formating context)块级格式化上下文：

9、引入外部字体

@font-face {

    /* font-properties */

    font-family: pictos;

    src:url('pictos/pictos-web.woff'), 

    url('pictos/pictos-web.ttf'),

    url('pictos/pictos-web.eot'); /* IE9 */

}

posted @ 2018-09-28 10:16  smartwange  阅读(18)  评论(0)    收藏  举报