测开之路九十五:css进阶之光标和溢出内容处理

Posted zhongyehai

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了测开之路九十五:css进阶之光标和溢出内容处理相关的知识,希望对你有一定的参考价值。

 

光标样式:cursor

准备文字

技术图片

css

技术图片

 

溢出内容处理:overflow,默认溢出部分是显示

先把内容放到盒子里面

技术图片

技术图片

 

正常显示

技术图片

技术图片

 

不显示溢出内容

技术图片

技术图片

 

显示为滚动条

技术图片

技术图片

 

自动处理

技术图片

技术图片

 

css

/* 光标样式 */
p
/* 默认default */
cursor: default;

/*!*pointer:小手、*!*/
/*cursor: pointer;*/

/*!*text、*!*/
/*cursor: text;*/

/*!*移动样式move*!*/
/*cursor: move;*/



/* 溢出内容 */
#box
width: 200px;
height: 200px;
background-color: blue;


/* 溢出部分 */
#box
/* 自动处理 */
overflow: auto;

/*!* 显示为滚动条 *!*/
/*overflow: scroll;*/

/*!* 不显示溢出内容 *!*/
/*overflow: hidden;*/

/*!* 正常显示 *!*/
/*overflow: visible;*/

 

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文字样式</title>
<link rel="stylesheet" href="../css/css07.css">
</head>
<body>
<p>CSS光标样式</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto eaque facilis, id nesciunt nisi nulla provident
quod! Accusamus architecto debitis dignissimos doloremque explicabo nobis non optio pariatur sapiente, temporibus
vitae!</p>
<div id="box">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae delectus harum, magnam maiores nihil qui
repellat tempora? Asperiores dolorem, earum laudantium magni necessitatibus nisi placeat, praesentium quae quasi
sapiente ut!</p>
</div>
</body>
</html>

 

以上是关于测开之路九十五:css进阶之光标和溢出内容处理的主要内容,如果未能解决你的问题,请参考以下文章

测开之路一百一十五:常用组件之面板

测开之路九十九:js函数事件window窗体对象

测开之路七十五:性能测试平台简介

测开之路二十五:彩票游戏

测开之路三十六:常用的css选择器

测开之路一百五十五:jquery-validation前台数据验证