测开之路九十五: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>

原文地址:https://www.cnblogs.com/zhongyehai/p/11408068.html

时间: 2024-11-09 17:08:54

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

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

前面做的wtform验证是服务器端的验证,需要把数据传输到服务器,服务器验证后再吧结果传输到前端,网络慢的时候,用户体验不好,所以需要前端验证,且后端验证不能少 传统的js或者jquery如果要验证信息,需要把一个个元素下的信息拿下来,再验证,而validation可以根据元素定位,可以直接就验证了 validation官网:https://jqueryvalidation.org/cnd引用地址:https://www.bootcdn.cn/jquery-validate/引用标签:<scri

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

函数:function 函数名(参数列表) 事件 单击:onclick()表单提交:onsubmit()鼠标经过:onmouseover()值改表时:onchange() window窗体对象转跳:window.location = url 警告框:alert() 确认框:confirm("messge"),返回true 和false 接收用户输入 prompt("请输入内容", "默认值") <!DOCTYPE html><h

测开之路一百五十二:基于jquery的ajax实现(load、get、ajax)

ajax除了用原生的js实现之外,也可以使用jquery实现,而且用jquery更方便 看一个简单的示例,保留上一篇的content路由和html,实现上一篇一样的功能,点击获取内容,局部刷新 准备一个页面用于被调用 <h1>这是content.html的h1标签</h1><p style="background: red"> 这是content.html的p标签,红色 <a href="https://www.baidu.com/&

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

在查询的时候是使用ajax进行请求的 目录结构 personal.models from datetime import datetimefrom flask_sqlalchemy import SQLAlchemy db = SQLAlchemy() class Department(db.Model): """ 部门 """ __tablename__ = 'department' # primary_key=True:主键, autoinc

测开之路三十五:css引入

CSS是一种定义样式结构,如字体.颜色.位置等的语言,被用于描述网页上的信息格式化和现实的方式.CSS样式可以直接存储于HTML网页或者单独的样式单文件.无论哪一种方式,样式单包含将样式应用到指定类型的元素的规则.外部使用时,样式单规则被放置在一个带有文件扩展名css的外部样式单文档中. css引入方式: 1.div标签 2.style标签,在head里面声明给某一个标签加样式,如果body里面的改标签没有特别声明样式,将全部展示为同一声明的样式,类似于继承与重写的关系 3.link标签:外链导

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

玩法 import random money = random.randint(0, 999) def generate_code(money): return list(set([ money[0] + money[1] + money[2], money[0]+money[2]+money[1], money[1] + money[0] + money[2], money[1] + money[2] + money[0], money[2] + money[0] + money[1], mo

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

在static下新建一个css,并写入内容 /*标签选择器,label标签的颜色为红色*/label {color: red;} /*.代表类选择器,绿色*/.test {color: green;} /*#代表id选择器,黄色*/#test {color: yellow;} /*div标签下的魔偶写标签下的lable标签(相对关系),内容的颜色为蓝色*/div label {color: blue;} /*div标签下的直接的lable标签(父子关系),,灰色*/div > label {co

测开之路一百零五:bootstrap的两种引用方式

一:下载到本地引用: 3.3.7版本:https://getbootstrap.com/docs/3.3/getting-started/#download 下载后解压到本地项目中引用 第二种,cdn标签引用:https://www.bootcdn.cn/twitter-bootstrap/ 为了稳定,找3.3.7版本,min.css,复制标签:<link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap

测开之路五十一:代码实现MongoDB增删改查

初始化时连接.析构时断开连接 from pymongo import MongoClient class Mogo(object): def __init__(self, host='127.0.0.1', port=27017): """ 初始化时连接 """ self.connect = MongoClient(host, port) def __del__(self): """ 析构时断开连接 "&q