光标样式：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. Gradle Settings 类的学习

    # 任务 了解 Settings 类作用于 Gradle 构建的哪个阶段? 了解 Settings 类与 settings.gradle 的关系 了解和使用 inlcude 方法 hook 初始化阶段 ...

  2. MongoDB入门_MongoDB安装与配置

    MongoDB运行环境 MongoDB环境:CentOS-6.7-i386 MongoDB版本:MongoDB 2.6.5 ssh工具:xshell 文本编辑工具:vim与editplus++ 编译M ...

  3. Error response from daemon: Container ************** is not running

    $ sudo docker run -d centos:last 8022826ebd567e2b1818e90ce33c3b68ea9aeac0286001154eb05fc2283e0238$ s ...

  4. 魔咒词典 HDU - 1880 （字符串hash 单hash转int或者 双hash ）

    哈利波特在魔法学校的必修课之一就是学习魔咒.据说魔法世界有100000种不同的魔咒,哈利很难全部记住,但是为了对抗强敌,他必须在危急时刻能够调用任何一个需要的魔咒,所以他需要你的帮助. 给你一部魔咒词 ...

  5. 1125. Chain the Ropes (25)

    Given some segments of rope, you are supposed to chain them into one rope. Each time you may only fo ...

  6. pandas数据排序（series排序 & DataFrame排序）

    # pandas数据排序 # series的排序: # Series.sort_values(ascending = True,inplace = False) # 参数说明: # ascending ...

  7. 日记（OI 无关，文化课无关）

    2019.11.13 今天在研究 wss 的代码为什么比我快那么多. 看见他定义了一个结构体叫 thxorz,一定是因为 orz 了 thx 得到了信仰加成了. 然后刚说完这句话就看见 thx 走了进 ...

  8. bzoj4011 [HNOI2015]落忆枫音 拓扑排序+DP

    题目传送门 https://lydsy.com/JudgeOnline/problem.php?id=4011 题解 首先考虑如果没有那么一条被新加进来的奇怪的边的做法. 我们只需要给每一个点挑一个父 ...

  9. FCC 成都社区·前端周刊 第 9 期

    1. Node.js 10 将带来什么? Node.js 10 的第一个版本将于本周二(4 月 24 日)发布,并将在 10 月份推出 LTS 版本,将带来哪些更新? N-API,持续 HTTP/2 ...

  10. tomcat的内存配置

    WEB站点在跑安全测试时,跑一会儿就连接不上,考虑是否是tomcat内存溢出问题. Linux环境,修改Tomcat的内存配置: 修改bin/catalina.sh文件,在cygwin=false前面 ...