光标样式：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进阶之光标和溢出内容处理的更多相关文章

  1. 测开之路九十：css的引用方式

    第一种:内联,直接在标签里面加style属性,优先级别最高,但是不利于维护 第二种:页面嵌入,在head标签里面写一个style标签,以类选择器的形式写入,优先级别第二 第三种:外联,样式表链接,单独 ...

  2. 测开之路九十四：css之盒子模型

    盒子模型 为了演示方便,把内容放到盒子里面 引用css 演示内容 外边距: 4个方向分开写 简写为一条指令,顺序为上右下左 简写为一条指令,第一个值为上下,第二个值为左右 简写为一条指令,只有一个值时 ...

  3. 测开之路九十六：css进阶之元素显示和可见性

    元素显示效果:display 块级元素,会导致换行:p.div.h...内联元素,不会导致换行:span.strong... 修改属性 让span标签换行 让指定div不换行 元素可见性:visibi ...

  4. 测开之路九十二：css之背景色和背景

    引用css 设置背景色: 背景图片 整个页面的背景图片 图片当局部背景图 也可以简写 css /* css基本样式 */ /* 设置p标签的文字前景色.背景色 */p{ /*字体颜色为蓝色*/ col ...

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

    前面做的wtform验证是服务器端的验证,需要把数据传输到服务器,服务器验证后再吧结果传输到前端,网络慢的时候,用户体验不好,所以需要前端验证,且后端验证不能少 传统的js或者jquery如果要验证信 ...

  6. 测开之路一百五十四：ajax+json前后台数据交互

    在实际工作中,前后端数据交互大部分都是用的json格式,后端把数据处理完后,把json传给前端,前端再解析 项目结构 models里面加入把数据转为字典的方法 from datetime import ...

  7. 测开之路一百五十三：ajax之load、get、ajax在项目中的体现

    在查询的时候是使用ajax进行请求的 目录结构 personal.models from datetime import datetimefrom flask_sqlalchemy import SQ ...

  8. 测开之路一百五十二：基于jquery的ajax实现之load、get、ajax

    ajax除了用原生的js实现之外,也可以使用jquery实现,而且用jquery更方便 看一个简单的示例,保留上一篇的content路由和html,实现上一篇一样的功能,点击获取内容,局部刷新 准备一 ...

  9. 测开之路一百五十一：ajax的作用和基本实现原理

    有些情况需要请求和刷新部分资源,但是又不希望整个页面都刷新,这个时候就需要用ajax来处理,即页面的某一部分触发请求和刷新内容 准备两个视图和html from flask import Flask, ...

随机推荐

  1. Git 使用疑问

    1)  fatal: remote origin already exists. 解决办法 ..$ git remote add origin git@git.*.com:tang/comment_s ...

  2. 事件流程以及dom2级事件绑定

    事件流程分为三个阶段:捕获阶段.目标阶段.冒泡阶段. 捕获阶段:事件从最顶层元素开始执行,一层层往下,直到精确元素. 目标阶段:事件在精确元素上执行. 冒泡阶段:事件从精确元素开始执行,一层层往上,直 ...

  3. Dva框架从初识到上手

    引言 最近工作需要用dva框架,同事帮我培训了一下,有一点点认识,在此总结. 当然,以后对dva可能会了解更透彻,文章会不断更新的.   初识 开始看架构代码,没有看文档的时候,不知道里面的几个关键字 ...

  4. Java第三阶段复习

    Java第三阶段复习: 1. Spring 1. IOC: 定义:Inverse Of Controller:反转控制,将bean对象的创建和对象之间的关联关系的维护由原来我们自己创建.自己维护反转给 ...

  5. 感想 - 猴子刷视频app

    看到一个视频,内容是一只猿猴熟练地像人一样刷短视频app,惟妙惟肖:https://pan.baidu.com/s/10-eibLmuybKtRJ-CKnruYA 抽象思考和语言才是人类独有的能力,视 ...

  6. RPC协议解析

    RPC(Remote Procedure Call Protocol)远程过程调用协议,它是一种通过网络从远程计算机程序上请求服务,而不需要了解底层网络技术的协议.简言之,RPC使得程序能够像访问本地 ...

  7. maven整合eclise

    -Dmaven.multiModuleProjectDirectory=$M2_HOME

  8. POJ 3111 K Best ( 二分 )

    题意 : 给出 N 个物品的价值和重量,然后要求选出 K 个物品使得选出来物品的单位重量价值最大,最后输出被选物品的编号. 分析 :  很容易去想先算出每个物品的单位价值然后升序排序取前 K 个,但是 ...

  9. 10分钟学会React Context API

    Create-react-app来学习这个功能: 注意下面代码红色的即可,非常简单. 在小项目里Context API完全可以替换掉react-redux. 修改app.js import React ...

  10. GeoServer-2.12安装MbTiles扩展插件