改变网页中被选中文字的背景色方法
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=utf-8 />
<title>无标题文档</title>
<style>
#box{ /* 我们第一步要创建一个flex文档流（创建伸缩容器） */
display:flex;
/* 然后我们定义伸缩流方向，并且可以换行
* 记得我们要这样设置:
* flex-direction: row;
* flex-wrap: wrap;
*/
flex:row wrap;
/* 然后我们定义了如何分配伸缩容器的剩余空间 */
justify-content:space-between;
width:100%;
height:100px;
align-items:flex-end;
background:#ccc;
}
#box span{ *display:inline-block; border-radius:50px; background:green; width:50px; height:50px;}
#box1{display:flex;flex-direction:row-reverse; width:100%; height:100px; justify-content:space-around; align-items:center;align-content: space-around; background:#efefef;}
#box1 span{ *display:inline-block;border-radius:50px; background:green; width:50px; height:50px;line-height:50px;font-size:24px; color:#fff;text-align:center;}
/*假设网站顶部有一个右对齐的导航，希望在小屏幕下能单列居中显示Large*/
#textfield{border:1px solid #000;height:16px;}
#button{background:#FFF;color:#000;border:1px solid #000;height:20px; float:left;}
/*改变浏览器默认的选择好弄文字的颜色*/
::selection {color:#fff; background-color:forestgreen;}
::-moz-selection { color:#fff; background-color:forestgreen;}
::-webkit-selection { color:#fff; background-color:forestgreen;}
</style>
</head>
<body>
<!--浮动盒子flexbox-->
<div id="box">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div id="box1">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
<div>
<form> <input type="text" name="textfield" id="textfield" />
<input type="submit" name="button" id="button" value="提交" />
</form>
</div>
<!--end-->
<!--改变选中文本背景色-->
<span>111111111111</span>
<!--end-->
</body>
</html>
评论