css三角和css 用户见面样式,vertical-align 属性应用,溢出的文字省略号显示，常见布局技巧

news/2024/5/6 1:36:25/文章来源:https://blog.csdn.net/weixin_68773927/article/details/129974456

目录

3.CSS三角

 4.CSS 用户界面样式

4.1什么是界面样式

 4.2轮廓线 outline

 4.3 防止拖拽文本域 resize

 5.vertical-align 属性

5.1图片,表单都属于行内块元素，默认的vertical-align 是基线对齐。

5.2解决图片底部默认空白缝隙问题

6.溢出的文字省略号显示

1.单行文本溢出显示省略号--必须满足三个条件

 2.多行文本溢出显示省略号

小白送书活动

3.CSS三角

网页中常见一些三角形，使用css直接就可以画出来了，不必做成图片或者字体图标。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>三角制作</title><style>.box1 {width: 0;height: 0;border-top: 10px solid pink;border-right: 10px solid red;border-bottom: 10px solid blue;border-left: 10px solid green;}.box2 {width: 0;height: 0;border: 10px solid transparent;border-top-color: pink;margin: 100px auto;}</style>
</head><body><div class="box1"></div><div class="box2"></div>
</body></html>

 为了考虑兼容性问题：可以添加 line-height: 0;    font-size: 0;

案例：京东三角的制作

 4.CSS 用户界面样式

4.1什么是界面样式

所谓的界面样式，就是更改一些用户操作样式，以便提高更好的用户体验。（即鼠标经过 改变其样式）

  • 更改用户的鼠标样式
  • 表单轮廓
  • 防止表单域拖拽

 4.1鼠标样式 cursor

li {cursor: pointer; }

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

属性值描述
default小白，默认
pointer小手
move移动
text文本
not-allowed禁止

代码实现

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>鼠标样式</title>
</head><body><ul><li style="cursor:default;">我是默认的小白鼠标样式</li><li style="cursor: pointer;">我是鼠标小手样式</li><li style="cursor:move">我是鼠标移动样式</li><li style="cursor:text">我是鼠标文本样式</li><li style="cursor:not-allowed;">我是鼠标禁止样式</li></ul>
</body></html>

 4.2轮廓线 outline

给表单添加 outline: 0; 或者 outline: none; 样式后，就可以去掉默认的蓝色边框。

input  { outline: none: }

 4.3 防止拖拽文本域 resize

在实际开发中，我们文本域右下角是不可以拖拽的。

textarea {resize: none; }

代码实现：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>用户界面样式-表单轮廓和防止拖拽文本域</title><style>input,textarea {outline: auto;}textarea {resize: none;/* outline: none; */}</style>
</head><body><!--1.取消表单轮廓--><input type="text"><!--2. 防止拖拽文本域--><textarea name="" id="" cols="30" rows="10"></textarea><!-- 一般在写文本域的时候一般写在一行上面，如果不放在一行上面在输入的时候光标不会从最前面开始A -->
</body></html>

 5.vertical-align 属性

CSS的 vertical-align 属性使用场景：经常用于设置图片或者表单（行内块）和文字垂直对齐。

官方解释： 用于设置一个元素的垂直对齐方式，但是他只针对于行内元素或者行内块元素有效。

语法：

vertical-align : baseline | top | middle | bottom

值描述
baseline默认。元素放置在父元素的基线上
top把元素的顶端与行中元素的顶端对齐
middle把此元素放置在父元素的中部
bottom把元素的顶端与行中最低的元素的顶部对齐

  一般 display: inline-block; 与 vertical-align: middle; 搭配使用。

5.1图片,表单都属于行内块元素，默认的vertical-align 是基线对齐。

此时可以给图片，表单这些行内块元素的vertical-align 属性设置为 middle 就可以让文字和图片垂直居中对齐了。 

5.2解决图片底部默认空白缝隙问题

bug： 图片底侧会有空白缝隙，原因是行内块元素会和文字的基线对齐。

主要解决方法有两种：

  1. 给图片添加 vertical-align: middle | top | bottom 等。（提倡使用）
  2. 可以把图片转换成行内块元素。display：block;

6.溢出的文字省略号显示

1.单行文本溢出显示省略号

2.多行文本溢出显示省略号

 

1.单行文本溢出显示省略号--必须满足三个条件

  1. 先强制一行内显示文本 white-space: nowrap;  (默认 normal 自动换行)
  2. 超出的部分隐藏  overflow: hidden;
  3. 文字用省略号替代超出来的部分  text-overflow: ellipsis; 

代码实现：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>单行溢出文字显示省略</title><style>div {width: 150px;height: 80px;background-color: pink;margin: 100px auto;/* 如果文字显示不开不自动换行 *//* white-space: normal; */white-space: nowrap;/* 溢出的部分隐藏 */overflow: hidden;/* ellipsis 是省略的意思 */text-overflow: ellipsis;}</style>
</head><body><div>来解决了急急急急急急急急急急急急啊啊啊艰苦艰苦就了解了</div>
</body></html>

 2.多行文本溢出显示省略号

多行文本溢出显示省略号，有较大兼容性问题，使用于webKit浏览器或移动端(移动端大部分是webKit内核)

  1. 溢出的部分隐藏  overflow: hidden；
  2. 当文字超出的时候用省略号  text-overflow: ellipsis;
  3. 弹性伸缩盒子模型显示   dispaly: -webkit-box;
  4. 限制在一个块元素显示的文本的行数  -webkit-line-clamp: 2;
  5. 设置或检索伸缩盒对象的子元素的排列方式   -webkit-box-orient: vertical;

代码实现

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>多行文字溢出省略号显示</title><style>div {width: 150px;height: 80px;background-color: pink;margin: 100px auto;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}</style>
</head><body><div>啦啦啦啦啦了了了了了了啦啦啦啦啦啦啦了了了了了了啦啦啦啦啦</div>
</body></html>

小白送书活动：

《Git从入门到精通》

 

【参考文案】

  1. 树立正确的Git观念，可以让你在工作中选用正确的Git指令。
    2.终端机指令搭配图行界面工具，使学习效率倍增。
    3.不只教你如何用，还能让你知道自己在用什么，以及为什么要这么用。

【内容简介】

　Git是一款让人一开始觉得很容易学，但却很难精通的工具。本书除了介绍Git的相关知识外，还会模拟各种常见的状况，让读者知道应该在什么时候使用什么指令。
　　《Git从入门到精通》共分11个章节，1~3章介绍安装工具及环境，对于已经安装完成的读者可直接从第4章开始阅读。第5章介绍Git基本的使用方式，虽然难度不高，但却是整个Git系统的基础。第6章介绍Git中常用的分支功能以及使用情境，第7~9章则是介绍如何修改现有的历史记录、使用标签，以及如何应对其他常见的状况。
　　前面的内容都是在自己的计算机上就可以完成的，从第10章开始介绍如何将自己计算机里的记录推一份到线上（GitHub）。*后一章（第11章）介绍团队开发时可能会使用的开发过程Git Flow。
　　市面上的参考书籍或网络教程大多是教大家如何通过终端机指令来学习Git，这让不少想学习Git的新手打了退堂鼓。本书除了教大家如何在终端机视窗中输入Git指令，还搭配了图形界面工具，缓和了读者的学习曲线，让读者更容易上手。

【作者简介】

高见龙，程序员，大型技术研讨会(如PHPConf、WebConf、RubyConf Taiwan等)及社群活动(如Rails Girls Taipei、Taipei.rb)的发起人及主办人。目前为五倍红宝石共同创办人及负责人，有20年程序开发经验和近10年的教学经验，在台湾推广Ruby及Git多年，在各大学广为开课，深受学生欢迎。

京东自营购买链接：

《Git从入门到精通》(高见龙)【摘要 书评 试读】- 京东图书

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.luyixian.cn/news_show_282420.aspx

如若内容造成侵权/违法违规/事实不符，请联系dt猫网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

linux centos7 查看端口占用命令netstat 报错提示 –bash:netstat:未找到命令解决方法

linux centos7 查看端口占用命令netstat 报错提示 –bash:netstat:未找到命令解决方法

今天在一台centos7上用netstat命令看端口占用情况&#xff0c;提示 –bash:netstat:未找到命令&#xff1a; 解决方法&#xff1a; 输入 yum search ifconfig 查看这个命令是在 net-tools.x86_64里的&#xff1a; 然后安装这个包&#xff0c;输入 yum install net-tools 安装&…
阅读更多...
ERTEC200P-2 PROFINET设备完全开发手册(2-1）

ERTEC200P-2 PROFINET设备完全开发手册(2-1）

2. 入门指导&#xff1a;第一个PN IO设备 开发之前的准备&#xff0c;需要的软件&#xff1a; TIA Portal V16、V17串口终端软件 (MobaXterm或Putty或TeraTerm)Win10 并且安装64位JAVA运行环境J-Link的驱动软件Proneta&#xff08;推荐使用&#xff09; 需要准备的硬件 性能…
阅读更多...
通信算法之130:软件无线电-接收机架构

通信算法之130:软件无线电-接收机架构

1. 超外差式接收机 2.零中频接收机 3.数字中频接收机
阅读更多...
洛谷B2033A*B问题

洛谷B2033A*B问题

洛谷B2033 题目描述 输入两个正整数A 和B&#xff0c;求 AB 的值。注意乘积的范围和数据类型的选择。 输入格式 一行&#xff0c;包含两个正整数 A 和B&#xff0c;中间用单个空格隔开。1≤A,B≤50000。 输出格式 一个整数&#xff0c;即AB 的值 代码&#xff1a; #include&…
阅读更多...
MySQL-双主高可用

MySQL-双主高可用

目录 &#x1f341;拓扑环境 &#x1f341;配置两台MySQL主主同步 &#x1f343;修改MySQL配置文件 &#x1f343;配置主从关系 &#x1f343;测试主主同步 &#x1f341;keepalived高可用 &#x1f343;keepalived的安装配置 &#x1f343;master配置 &#x1f343;slave配置 …
阅读更多...
Aurora 64B/66B 协议介绍

Aurora 64B/66B 协议介绍

简介 Aurora 是一个用于在点对点串行链路间移动数据的可扩展轻量级链路层协议。这为物理层提供透明接口&#xff0c;让专有协议或业界标准协议上层能方便地使用高速收发器。虽然使用的逻辑资源非常少&#xff0c;但 Aurora 能提供低延迟高带宽和高度可配置的特性集。 特性&…
阅读更多...
凹凸/法线/移位贴图的区别

凹凸/法线/移位贴图的区别

你是否在掌握 3D 资产纹理的道路上遇到过障碍&#xff1f; 不要难过&#xff01; 许多刚接触纹理或 3D 的艺术家在第一次遇到凹凸贴图&#xff08;Bump Map&#xff09;、法线贴图&#xff08;Normal Map&#xff09;和移位贴图&#xff08;Displacement Map&#xff09;时通常…
阅读更多...
React class组件和hooks setState异步更新数据详解

React class组件和hooks setState异步更新数据详解

一、 class组件setState详解 1.class组件setState异步更新数据详解 class Father extends React.Component{state {num:0}addHandler () > { this.setState({num: 100})console.log(state中的值,this.state.num)}render() { return (<div><button onClick{this…
阅读更多...
DBC数据库中定义信号时采用的两种字节顺序：Intel、Motorola（深度好文）

DBC数据库中定义信号时采用的两种字节顺序：Intel、Motorola（深度好文）

我之前写过好几篇文章介绍大端小端的存储、显示和读取。在介绍DBC的文章中，也有信号在CAN消息数据中如何定义的顺序，它和大端小端采用的原理相同，但是不能带入数据大端小端存储的方法。这里千万要注意！ DBC数据库中定义信号时采用的字节顺序，如果想讲明白，很简单。但是如…
阅读更多...
「解析」Jetson 安装 CUDA/cuDNN

「解析」Jetson 安装 CUDA/cuDNN

注意&#xff1a;自从JetPack 升级到 5.0版本之后&#xff0c;可以&#xff0c;JetPack 官方教程 官方教程提供了三种方法&#xff1a;SD卡、SDK Manager 以及 apt安装Jetpack。前两种主要用于Orin系列之前的 Jetson开发板&#xff0c;主要针对还没有烧录系统的空机。而从 Jets…
阅读更多...
手机也可以3D沙发建模

手机也可以3D沙发建模

3D沙发建模是当今室内设计领域中必不可少的一种技术。通过此技术&#xff0c;我们可以使用虚拟设计软件创建高质量的3D沙发模型。这些模型具有极高的精度和逼真度&#xff0c;可以帮助设计师更好地展示他们的创意&#xff0c;并有效地促进设计过程。 在进行3D沙发建模时&#…
阅读更多...
洛谷B2038奇偶ASCII值判断

洛谷B2038奇偶ASCII值判断

洛谷B2038 题目描述 任意输入一个字符&#xff0c;判断其 ASCII 是否是奇数&#xff0c;若是&#xff0c;输出 YES&#xff0c;否则&#xff0c;输出 NO 。 例如&#xff0c;字符 A 的 ASCII 值是 65&#xff0c;则输出 YES&#xff0c;若输入字符 B(ASCII 值是 66)&#xff0…
阅读更多...
shell脚本基础之详解结构化命令（一）

shell脚本基础之详解结构化命令（一）

详解结构化命令使用if-then语句注意&#xff1a;if-then-else语句嵌套if语句elif语句注意&#xff1a;test语句注意&#xff1a;数值比较字符串比较字符串相等性字符串顺序字符串大小文件比较检查目录检查对象是否存在检查文件检查是否可读检查非空文件复合条件测试if-then高级…
阅读更多...
怎么选购邮件营销工具？

怎么选购邮件营销工具？

据可靠数据统计&#xff0c;邮件营销得投资回报比达1&#xff1a;44&#xff0c;他高性价比的特性在众多营销方式中脱颖而出。他促使企业能够以较低的成本&#xff0c;和客户建立联系并维持长期联系。邮件营销对企业来讲无疑是极佳的获客渠道和营销方式。 想要做好邮件营销通常…
阅读更多...
API 优先级和公平性（APF）

API 优先级和公平性（APF）

1. 概述 目前apiserver默认的限流方式太过简单 目前k8s缺少客户端业务请求隔离&#xff0c;一个错误的客户端发送大量请求可能造成其他客户端请求异常&#xff0c;也不支持突发流量。 2. 开启APF APF测试 开启APF&#xff0c;需要在apiserver配置 --feature-gatesAPIPrior…
阅读更多...
乐观锁的作用（php代码实现）

乐观锁的作用（php代码实现）

非乐观锁场景时序图&#xff1a; 乐观锁场景示意图&#xff1a; 假设有一个账户余额表 user_balance&#xff0c;其中有两个字段&#xff1a;user_id 和 balance&#xff0c;分别表示用户 ID 和账户余额。现在有两个用户同时进行充值操作&#xff0c;充值金额分别为 100 元…
阅读更多...
Zotero安装教程

Zotero安装教程

一、下载 可以直接通过Zotero | Your personal research assistant下载安装包。 根据对应的系统选择下载包。 二、安装 安装过程简单&#xff0c;一路next直到出现下图为安装成功。 三、注册账号 安装完成后&#xff0c;打开zotero&#xff0c;选择编辑->首选项->同步…
阅读更多...
【Python_Selenium学习笔记（五）】基于Selenium模块实现鼠标操作

【Python_Selenium学习笔记（五）】基于Selenium模块实现鼠标操作

基于Selenium模块实现鼠标操作 前言 为了模拟鼠标操作&#xff0c;Selenium 模块提供了 Actionchains 类&#xff0c;可以模仿人的几乎任何鼠标行为操作&#xff1b; 在此篇文章主要介绍 Actionchains类 的常用方法&#xff0c;使用流程&#xff0c;并以具体的示例进行展示。…
阅读更多...
ERROR: No matching distribution found for subprocess

ERROR: No matching distribution found for subprocess

安装python包时出现了 ERROR: Could not find a version that satisfies the requirement subprocess (from versions: none) ERROR: No matching distribution found for subprocess 这里我们使用的指令是&#xff1a; 尝试使用特定版本的库。如果pip无法找到最新版本的库&a…
阅读更多...
IDEA的Git操作

IDEA的Git操作

1、在Idea中配置Git 安装好IDEA后&#xff0c;如果Git安装在默认路径下&#xff0c;那么IDEA会自动找到git的位置&#xff0c;如果更改了git的安装位置则需要手动配置git的路径。选择File->Settings打开窗口&#xff0c;找到Version Control下的git选项。 2、在GitHub或码云…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站 广利置业