光标样式：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. C++------流星雨

    用C++实现模拟数字.字母流星雨,其主要用到链表.win32编程基础. demo实例: // DataRainDemo.cpp : 定义应用程序的入口点. // #include "stda ...

  2. Spring基础09——Bean的自动装配

    1.XML配置的Bean自动装配 SpringIOC容器可以自动装配Bean,需要做的仅仅是在<bean>的autowire属性里指定自动装配的模式,而不需要手工去指定要装配的Bean,a ...

  3. make_smbcodepage - 为Samba创建代码页文件

    总览 make_smbcodepage c|d 代码页 输入文件 输出文件 描述 这个工具是是Samba组件的一部分. 针对Samba 2.2的国际化功能,使用make_smbcodepage可以编译 ...

  4. 斯托克斯公式（Stokes' theorem）

    参考:http://spaces.ac.cn/archives/4062/ 参考:https://en.wikipedia.org/wiki/Exterior_derivative 比如Ω是一个曲面( ...

  5. 笔记42 Spring Web Flow——Demo（2）

    转自:https://www.cnblogs.com/lyj-gyq/p/9117339.html 为了更好的理解披萨订购应用,再做一个小的Demo. 一.Spring Web Flow 2.0新特性 ...

  6. Attention Points

    Attention Points 数组范围 无向图.树,边表的范围是边数的两倍. 因为最近树的题目做的比较多,一定要注意分清是树还是图,不能冲上去就去开struct Edge{int to,ne,w; ...

  7. Django【第27篇】：ModelForm

    基于Form组件实现的增删改和基于ModelForm实现的增删改 一.ModelForm的介绍 ModelForm a. class Meta: model, # 对应Model的 fields=No ...

  8. Mongodb的几条命令

    最近.... #设置用户名密码db.createUser({user: 'root', pwd: '123456', roles: ['root']}) #开启认证nohup mongod --aut ...

  9. SpringBoot框架(4)-- 类装配及Bean装配监听器

    1.普通方式装配类对象   (1)添加带有@Bean注解的方法  User.java(带@Component注解) package com.demo.boot.bootenable.beanDemo1 ...

  10. Eclipse搭建Maven项目并上传SVN备份

    本文出自:http://www.cnblogs.com/2186009311CFF/p/7226127.html 背景:近段时间在学着Java,想着用Java做BS的项目.但是项目一遇到问题又要重做, ...