8.12笔记

于 2024-08-12 20:16:15 发布
阅读量71 收藏
点赞数 2
文章标签： 笔记 c# 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aaaaaaaallllll/article/details/141139831
版权

文本换行：

1.word-wrap让文字换行：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            border: 1px solid#f00;
            word-wrap: break-word;
            width: 300px;
        }
    </style>
</head>
<body>
    <p>asdfhjkashjsadjkhasdjkhasjkdfhjksadhfjdsajkfhjksd</p>
</body>
</html>

2.word-break允许在单词内换行：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            border: 1px solid#f00;
            /* word-wrap: break-word; */
            width: 300px;
            word-break: break-all;
        }
    </style>
</head>
<body>
    <p>document document document document document document document document document document document</p>
</body>
</html>

3.单行文本省略：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            border: 1px solid#f00;
            /* word-wrap: break-word; */
            width: 300px;
            /* word-break: break-all; */
            
            /* 不允许换行 */
            white-space: nowrap;
            /* 超出隐藏 */
            overflow: hidden;
            /* 添加省略号 */
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
    <p>document document document document document document document document document document document</p>
</body>
</html>

4.多行文本省略：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            border: 1px solid#f00;
            /* word-wrap: break-word; */
            /* word-break: break-all; */
            width: 300px;
            /* 不允许换行
            white-space: nowrap;
            /* 超出隐藏 */
            /* overflow: hidden; */
            /* 添加省略号 */
            /* text-overflow: ellipsis;  */

            /* 变弹性盒子 */
            display: -webkit-box;
            /* 垂直方向排序 */
            -webkit-box-orient: vertical;
            /* 保留对应的行数 */
            line-clamp:2;
            -webkit-line-clamp:2;
            /* 多余的行数隐藏 */
            overflow: hidden;
        }
    </style>
</head>
<body>
    <p>document document document document document document document document document document document</p>
</body>
</html>

文字阴影：

        单层阴影：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            border: 1px solid#f00;
            /* word-wrap: break-word; */
            /* word-break: break-all; */
            width: 300px;
            /* 不允许换行
            white-space: nowrap;
            /* 超出隐藏 */
            /* overflow: hidden; */
            /* 添加省略号 */
            /* text-overflow: ellipsis;  */

            /* 变弹性盒子 */
            /* display: -webkit-box; */
            /* 垂直方向排序 */
            /* -webkit-box-orient: vertical; */
            /* 保留对应的行数 */
            /* line-clamp:2;
            -webkit-line-clamp:2; */
            /* 多余的行数隐藏 */
            /* overflow: hidden; */
        }
        div {
            font-size: 100px;
            text-shadow: 10px 10px red;
        }
    </style>
</head>
<body>
    <!-- <p>document document document document document document document document document document document</p> -->
     <div>是的</div>
</body>
</html>

        多层阴影：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
             font-size: 100px;
            text-shadow: 10px 10px red,5px 5px blue; 
        }
    </style>
</head>
<body>
     <div>是的</div>
</body>
</html>

盒子阴影：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
             font-size: 100px;
            border: 1px solid red;
            width: 300px;
            height: 200px;
            box-shadow:2px 2px 5px 3px blue ;
        }
    </style>
</head>
<body>
     <div>

     </div>
</body>
</html>

 

        内阴影：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
             font-size: 100px;
            border: 1px solid red;
            width: 300px;
            height: 200px;
            box-shadow:2px 2px 5px 3px blue inset;
        }
    </style>
</head>
<body>
     <div>

     </div>
</body>
</html>

超链接伪类：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       /* 未被访问的链接 */
       a:link {
        color: black;
        }
        /* 已访问的链接 */
        a:visited {
            color: red;
        }
        /* 鼠标悬浮链接 */
        a:hover {
            color: blue;
        }
        /* 已选中的链接 */
        a:active {
            color: yellow;
        }
    </style>
</head>
<body>
    <a href="##">点击</a>
</body>
</html>

其他伪类：

focus:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      input:focus {
        color: red;
        outline: 0;
      }
    </style>
</head>
<body>
    <form action="">
        <input type="text">
    </form>
</body>
</html>

元素获取:

第一行变色：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      ul li:first-child {
        color: red;
      }
    </style>
</head>
<body>
    <ul>
        <li>会发生大家考核方式打开基金会</li>
        <li>撒反对和撒旦金克拉金克拉</li>
        <li>按时发货的就看撒</li>
        <li>回复大家开始发</li>
        <li>啊士大夫艰苦哈是否克拉克</li>
    </ul>
</body>
</html>

最后一行变色将first改为last

中间行变色：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      ul li:nth-child(3){
        color: red;
      }
    </style>
</head>
<body>
    <ul>
        <li>会发生大家考核方式打开基金会</li>
        <li>撒反对和撒旦金克拉金克拉</li>
        <li>按时发货的就看撒</li>
        <li>回复大家开始发</li>
        <li>啊士大夫艰苦哈是否克拉克</li>
    </ul>
</body>
</html>

偶数行变色：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      ul li:nth-child(2n){
        color: red;
      }
    </style>
</head>
<body>
    <ul>
        <li>会发生大家考核方式打开基金会</li>
        <li>撒反对和撒旦金克拉金克拉</li>
        <li>按时发货的就看撒</li>
        <li>回复大家开始发</li>
        <li>啊士大夫艰苦哈是否克拉克</li>
    </ul>
</body>
</html>

奇数行将2n变为2n+1

伪元素：

首行：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
        }
       div::first-line {
            color: red;
        }
    </style>
</head>
<body>
   <div>撒地方回家萨迪克大数据库监考老师艰苦拉萨JFK的就是饭卡卡洛斯的</div>
</body>
</html>

首字母：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
        }
       div::first-letter {
            color: red;
        }
    </style>
</head>
<body>
   <div>撒地方回家萨迪克大数据库监考老师艰苦拉萨JFK的就是饭卡卡洛斯的</div>
</body>
</html>

after before:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
        }
       div::after {
            content: "阿萨的恢复健康环境开发";
            color: red;
        }
    </style>
</head>
<body>
   <div>撒地方回家萨迪克大数据库监考老师艰苦拉萨JFK的就是饭卡卡洛斯的</div>
</body>
</html>

before同上

aaaaaaaallllll653
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
EssentialPIM Pro 8.12.1 个人信息管理专家 密码管理器 笔记管理 日程管理
03-05
EssentialPIM是一个全功能的个人信息管理器，使用简单易用的直观工具处理所有日程安排，联系人，列表和笔记。可以将任何文件或文件的链接存储在其数据库中。每个元素，无论是任务，注释，待办事项还是联系人都可以...
Mendix-8.12.4.10115-Setup.exe
02-21
Mendix-8.12.4.10115-Setup.exe
8.12 学习笔记
weixin_42927835的博客
08-13 120
有的地方卡住了，竟然锲而不舍研究到12点了。好久没享受这种钻研数学题的感觉了！爽！，今晚做的不错，明天继续努力。 至此，1.1 The Robbins–Monro Algorithm就结束了。3-13页看了四天（当然每天付出的时间有限）。刚开始接触，进入状态比较慢很正常。会越来越好的~ ...
8.12学习笔记
weixin_44033604的博客
08-13 71
学习内容：P18~P 重点： 1./*和/*之间的为注释文本。 2.#include<stido.h>为编译预处理命令，后面调用printf函数；编译预处理命令的末尾不加分号。 3.main()是主函数，有且只有一个，程序运行首先从main()开始执行。 4. printf("Hello Word!\n")； 其作用是输出" "内的内容，\n是换行符，;表示语句的结束 C语言中所有语句必须以分号结束。（除了编译预处理命令和定义main()函数） 5. return 0;
jqurey笔记8.12
weixin_70902895的博客
08-13 198
addclass（）给元素添加class，如果元素上已经有其他的classname，那么会将追加到现有的classname后面。removeclass可以将元素的某个class移除，如果未传参数，则可以将元素上的所有class移除掉。第二种：css（”属性名“，”属性值“）。css（”属性名“，”属性值“）第一种：‘{”属性名“：”属性值“，”属性名“：”属性值“。before（）/after（）指的是给某元素前面/后面添加兄弟元素。empty（）移除的是元素中的内容以及子元素，不包括他本身。...
8.12笔记 retrofit超时设置,studio 修改 Lint Error Checking
touch_ping的专栏
08-12 2945
retrofit请求库设置超时http://stackoverflow.com/questions/29380844/how-to-set-a-timeout-in-retrofit-librarypublic RestAdapter providesRestAdapter(Gson gson) { final OkHttpClient okHttpClient = new OkHttpCl
华为数据通信学习笔记HCDA-8.12.doc
10-31
在华为的数通技术中，链路聚合（Link Aggregation）和VLAN（Virtual Local Area Network）是两个关键概念，对于构建高效、可靠且安全的网络至关重要。 链路聚合是提高网络带宽和提供高可靠性的有效手段。...
wordpress主题modown主题V8.12开源版亲测可用，无限授权
04-06
wordpress主题modown主题V8.12开源版亲测可用无线授权WordPress主题模板兔是一个独特的主题，它以可爱的兔子为主题，给人带来了一种轻松愉快的感觉。这个主题模板是由一群热爱WordPress的设计师和开发者共同开发的，...
日常安排软件EssentialPIMProv8.12.1绿色汉化专业特别版
08-04
例如日程表、任务计划、待办事项、笔记、通讯录以及电子邮件都可以以简单明了的图形化形式存储。并且可以与谷歌日历、谷歌通讯录、雅虎通讯录、SyncML和CalDAV服务器等流行的在线服务商随时同步，保持您的数据永远...
java 基础的课堂笔记整理
05-26
1.1如何安装jdk 2 1.2检查是否安装成功 2 1.3当编译java程序报错， 2 1.4注意： 3 1.5DOS命令 3 1.6注释 3 1.7 实例演示： 3 1.7.1 HelloWorld程序 3 2.1八种基本类型： 4 2.2If分支语句 里面使用...8.12 Point数组 39
启明星会议室预定管理系统 v8.12 （新增手机版）
03-17
启明星会议室预定系统是一套会议室管理的软件，他可以更好的协助企业管理好会议室。目前，企业开会通常需要会议室、笔记本和投影仪。... V8.12的主要改进有： 增加了手机客户端。 启明星会议室预定系统安
千锋教育-TypeScript学习指南-学习笔记
最新发布
06-20
**8.12 类之间的关系** 通过继承和其他机制建立类之间的关系。 #### 九、模块 **9.1 如何定义JavaScript模块** 定义JavaScript模块的基本方式。 **9.2 非模块** 不使用模块化的代码组织方式。 **9.3 ...
华硕xonar xense声卡驱动 v8.12.8.1796 xp版
07-03
华硕xonarxense声卡驱动forxp版是一款声卡驱动软件。这个驱动程序主要是用来解决华硕笔记本出现声音消失问题，同时还可以帮助用户解决众多程序语音不兼容的问题！需要的用户欢迎下载。产品介绍华硕XonarXenseOne和...
TThrottle自定义规则电脑温度计v8.12beta中文官方安装版
08-06
TThrottle是一个温度监控软件，它除了可以告诉你cpu、gpu的实时温度之外，还可以创建一系列的规则，一旦电脑中的硬件超过了TThrottle规则中设定的温度，那么这个软件就会启动限制处理器和显卡的性能，从而防止硬件...
华硕xonar xense声卡驱动 v8.12.8.1796 for win7
07-03
华硕xonarxense声卡驱动win7版是专为windows7系统推出的一款声卡驱动程序。我们在使用计算机电脑的时候可能会遇到系统声音突然失灵的问题，...驱动介绍：华硕XonarXense声卡驱动Forwin7版是专门为华硕笔记,欢迎下载体验
华硕xonar xense声卡驱动win8版 v8.12.8.1796 官方版
07-03
华硕xonarxense声卡驱动win8版是一款适用于华硕笔记本电脑的声卡驱动软件，这个驱动程序对于解决笔记本电脑出现的声卡异常等问题有很好的解决作用！快下载安装吧。华硕xonarxense声卡产品特点1....
LNMP源码安装详细笔记(Linux+Nginx+Mysql+php).pdf
11-05
本篇笔记详细记录了在Linux环境下，通过源代码方式安装LNMP各组件的过程。 首先，我们来看安装环境： - MySQL：5.1.59 版本 - PCRE：8.12 版本 - Nginx：1.1.6 版本 - PHP：5.2.17 版本，且包含了PHP-FPM（FastCGI ...
php-abstractions-example
04-06
PHP OOP抽象概括该示例是使用Laravel 8.12和Vue.js 2.5构建的。 演示： ： 使用说明克隆此存储库cd到存储库文件夹运行cp .env.example .env 。 确保在下一步之前执行此操作！ 运行composer install 运行vendor/bin/...
nodejs8.12
09-15
Node.js 8.12是一种供应服务于网易云音乐API的环境要求，它是一个开源的JavaScript运行时环境。如果你想要在Node.js 8.12下使用网易云音乐API，你需要安装Node.js 8.12版本，并且安装相关依赖。你可以通过以下步骤来安装Node.js 8.12： 1. 下载Node.js 8.12版本（你可以在官方网站或者其他可靠的资源上找到）。 2. 安装Node.js 8.12。具体的安装步骤可以参考官方文档或者安装说明。 3. 确保安装成功后，打开命令行工具（如终端或者命令提示符）。 4. 输入命令 "node -v" 来验证Node.js的安装是否成功。如果成功安装，你将会看到Node.js的版本号显示为8.12。 5. 接下来，你可以按照网易云音乐API的安装说明进行安装和配置，以便你能够成功使用该API。 希望这些信息能对你有所帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值