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

猜你喜欢