版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_21383977/article/details/81046070
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