光标样式：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. Vue 数据持久化

    方法一:使用 localStorage 存储数据 window.localStorage.setItem(key,value) 方法二:使用 vuex-persistedstate插件 vuex 存在 ...

  2. JavaScript回顾

    JavaScript是Web编程语言. JavaScript是一种基于对象的脚本语言 它是解释执行的 在客户端的浏览器中运行 可以被嵌入HTML文件中 代码以纯文本的形式存储在文件中 可以使用任何一种 ...

  3. SQLSERVER还原数据库失败：错误: 3154

    在SQL Server 2008版本中还原从sql server 2005备份出来的数据库时,提示错误:“备份集中的数据库备份与现有的 '***' 数据库不同.RESTORE DATABASE 正在异 ...

  4. Python 通过dmidecode获取Linux服务器硬件信息

    通过 dmidecode 命令可以获取到 Linux 系统的包括 BIOS. CPU.内存等系统的硬件信息,这里使用 python 代码来通过调用 dmidecode 命令来获取 Linux 必要的系 ...

  5. .net 敏捷开发框架7.0.3 旗舰版

    联系QQ:1516462411 索取

  6. Comet OJ - Contest #2 B　她的想法、他的战斗（概率　＋　数学）

    题目描述 Takuru 是一名情报强者,所以他想利用他强大的情报搜集能力来当中间商赚差价. Takuru 的计划是让 Hinae 帮他去市场上买一个商品,然后再以另一个价格卖掉它.Takuru 会给 ...

  7. pycharm设置SDK

    1.一看到这个提示,就知道Pycharm中尚未配置Python解释器,此时不用慌,并不是Pycharm没有安装成功,而是因为有个配置尚未完成,只需要配置好Python解释器之后,一切都会正常.其实Py ...

  8. vue-cli项目中引入全局scss

    加载一个全局设置文件 在每个组件里加载一个设置文件,而无需每次都将其显式导入,是一个常见的需求.比如为所有组件全局使用 scss 变量.为了达成此目的: npm install sass-resour ...

  9. Python网络爬虫数据解析的三种方式

    request实现数据爬取的流程: 指定url 基于request发起请求 获取响应的数据 数据解析 持久化存储 1.正则解析: 常用的正则回顾:https://www.cnblogs.com/wqz ...

  10. handy源码阅读（四）：Channel类

    通道,封装了可以进行epoll的一个fd. struct Channel: private noncopyable { Channel(EventBase* base, int fd, int eve ...