位置: IT常识 - 正文

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

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

目录

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三角和css 用户见面样式,vertical-align 属性应用,溢出的文字省略号显示,常见布局技巧(css做三角),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:简述css三角的核心制作原理,css小三角怎么写,css小三角怎么写,如何使用css绘制三角形,css写三角形多种方法,css写三角形多种方法,css三角形实现原理,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 属性使用场景:经常用于设置图片或者表单(行内块)和文字垂直对齐。

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

语法:

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

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: 图片底侧会有空白缝隙,原因是行内块元素会和文字的基线对齐。

主要解决方法有两种:

给图片添加 vertical-align: middle | top | bottom 等。(提倡使用)可以把图片转换成行内块元素。display:block;6.溢出的文字省略号显示

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

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

 

1.单行文本溢出显示省略号--必须满足三个条件先强制一行内显示文本 white-space: nowrap;  (默认 normal 自动换行)超出的部分隐藏  overflow: hidden;文字用省略号替代超出来的部分  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内核)

溢出的部分隐藏  overflow: hidden;当文字超出的时候用省略号  text-overflow: ellipsis;弹性伸缩盒子模型显示   dispaly: -webkit-box;限制在一个块元素显示的文本的行数  -webkit-line-clamp: 2;设置或检索伸缩盒对象的子元素的排列方式   -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从入门到精通》

【参考文案】

树立正确的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从入门到精通》(高见龙)【摘要 书评 试读】- 京东图书

本文链接地址:https://www.jiuchutong.com/zhishi/300004.html 转载请保留说明!

上一篇:Vue--》计算属性与监视(侦听)属性的使用(vue计算属性和监听属性的区别)

下一篇:波士顿房价数据集进行数据预处理和模型训练(Python)(波士顿房价数据集可视化)

  • mac录屏功能在哪(mac录屏在哪里)

    mac录屏功能在哪(mac录屏在哪里)

  • 小米pay怎么支付(小米pay支付不用指纹)

    小米pay怎么支付(小米pay支付不用指纹)

  • 微信手机号如何显示给别人看(微信手机号如何换绑)

    微信手机号如何显示给别人看(微信手机号如何换绑)

  • word标题字符间距怎么设置(word标题字符间距在哪里设置)

    word标题字符间距怎么设置(word标题字符间距在哪里设置)

  • 光缆是网线还是电线(光缆是不是就是光纤)

    光缆是网线还是电线(光缆是不是就是光纤)

  • evr-al00是华为什么型号手机(evr-al00是华为什么型号手机4g)

    evr-al00是华为什么型号手机(evr-al00是华为什么型号手机4g)

  • 电脑上破折号是哪个键(破折号在电脑键盘哪个位置)

    电脑上破折号是哪个键(破折号在电脑键盘哪个位置)

  • 在windows中,全角方式下输入的数字应占的字节数是(在Windows中,全部选择的快捷键指)

    在windows中,全角方式下输入的数字应占的字节数是(在Windows中,全部选择的快捷键指)

  • 苹果11怎么不能设置面容ID了(苹果11怎么不能录屏了)

    苹果11怎么不能设置面容ID了(苹果11怎么不能录屏了)

  • 微信语音麦克风没波动(微信语音麦克风声音小)

    微信语音麦克风没波动(微信语音麦克风声音小)

  • 华为手机微信视频没有声音是怎么回事(华为手机微信视频可以美颜吗)

    华为手机微信视频没有声音是怎么回事(华为手机微信视频可以美颜吗)

  • 为什么苹果手机系统占那么多内存(为什么苹果手机下不了软件)

    为什么苹果手机系统占那么多内存(为什么苹果手机下不了软件)

  • 手机充电器三种分类(手机充电器三种接口图片)

    手机充电器三种分类(手机充电器三种接口图片)

  • gps信号差怎么处理(gps信号差怎么处理方法)

    gps信号差怎么处理(gps信号差怎么处理方法)

  • 键盘上的锁屏键是哪个(键盘上的锁屏键怎么不管用)

    键盘上的锁屏键是哪个(键盘上的锁屏键怎么不管用)

  • 荣耀9x怎么呼叫语音助手(荣耀9x呼叫限制怎么解除)

    荣耀9x怎么呼叫语音助手(荣耀9x呼叫限制怎么解除)

  • 华为手机的usb连接设置在哪里(华为手机的usb连接在哪里)

    华为手机的usb连接设置在哪里(华为手机的usb连接在哪里)

  • 华为手机hd需要关闭吗(华为手机hd需要开吗)

    华为手机hd需要关闭吗(华为手机hd需要开吗)

  • 手机连接不了电脑怎么办(手机连接不了电脑热点怎么办)

    手机连接不了电脑怎么办(手机连接不了电脑热点怎么办)

  • 手机qq怎样查看好友多少天(手机qq怎样查看以前删除过的人)

    手机qq怎样查看好友多少天(手机qq怎样查看以前删除过的人)

  • 魅族16sPro怎么开启盲人模式(魅族16spro怎么开高刷)

    魅族16sPro怎么开启盲人模式(魅族16spro怎么开高刷)

  • 华为手机亲情关怀怎么关闭(华为手机亲情关怀功能)

    华为手机亲情关怀怎么关闭(华为手机亲情关怀功能)

  • 苹果mt762ch是什么型号(苹果手机型号mt762ch/a多少钱)

    苹果mt762ch是什么型号(苹果手机型号mt762ch/a多少钱)

  • 苹果的备忘录怎么改名字(苹果的备忘录怎么备份)

    苹果的备忘录怎么改名字(苹果的备忘录怎么备份)

  • 苹果平板电脑忘记密码(苹果平板电脑忘了开机密码怎么解开)

    苹果平板电脑忘记密码(苹果平板电脑忘了开机密码怎么解开)

  • 新版全民k歌怎么退出(新版全民K歌怎么改电音)

    新版全民k歌怎么退出(新版全民K歌怎么改电音)

  • shotonmi6x是什么手机

    shotonmi6x是什么手机

  • 华为荣耀20像素多少(华为荣耀20像素怎样调)

    华为荣耀20像素多少(华为荣耀20像素怎样调)

  • ps入门之羽化是什么(ps里的羽化是什么意思)

    ps入门之羽化是什么(ps里的羽化是什么意思)

  • 劳务外包人员在本公司可报销吗
  • 代第三方收取的款项作为什么处理
  • 印花税是用来干吗的
  • 待处理财产损益借贷方向
  • 捐赠支出需要什么手续
  • 对公户取备用金怎么取
  • 所得税忘了计提如何做会计分录还有结转
  • 福利费属于管理费用的哪个明细
  • 一般纳税人销项税和进项税如何抵扣
  • 进口产品不付汇会造成什么
  • 个体生产经营所得税税率表
  • 小规模纳税人开具增值税专用发票
  • 消防设施安装费包括哪些
  • 简易分包抵减的增值税应纳税额怎么做会计分录?
  • 公益性捐赠全额扣除2020年第9号文件
  • 搬运费计入
  • 固定资产的摊销额计入什么科目
  • 对公账户收到个人汇款 退还
  • 退货入库流程图
  • 增值税发票系统报税盘怎么用
  • 电子承兑没接收多久失效
  • 当月未出账费用
  • 开票的增值税与附加税
  • 未成立工会组织情况说明
  • 个税汇算清缴申报错误怎么办
  • win10ie浏览器没有internet选项
  • mac废纸篓立即删除和清倒
  • 鸿蒙3.0内测申请成功显示名额已满
  • 苹果电脑快速启动键是哪个
  • Win11 Build 22449.1000更新里哪些内容?Win11 Build 22449更新介绍与安装方法
  • 外购货物用于职工奖励
  • git可以管理二进制文件吗
  • PHP:pg_escape_bytea()的用法_PostgreSQL函数
  • 代缴个税的分录
  • php递归函数的例子
  • 农产品核定扣除和计算抵扣的区别
  • 解除劳动合同后需要把合同拿回来吗
  • 海浪冲击着海岸
  • 企业所得税核定征收方法
  • 支付航天信息服务费怎么入账
  • php执行linux命令无效
  • 发票确认平台勾选步骤
  • 联营单位投入的资金属于资产吗
  • 企业注销时实收资本没有到位要紧吗
  • php调用第三方接口代码
  • 个税扣错了申请退税
  • 织梦怎么调用当前栏目下的文章
  • 建立access数据库一般需要五个步骤
  • 单位举办活动
  • 新销售收入的确认条件
  • 合作社收到政府补贴会计分录
  • 电费发票没有谷段电费
  • 红冲凭证怎么做分录
  • 劳务派遣的公司值得去吗
  • 资本溢价举例说明
  • 公司成立前购买的固定资产
  • 用人单位劳务派遣人员工资怎么做账
  • 以前年度损益调整
  • 预付卡销售和充值怎么做账
  • 购车融资是什么意思
  • 购买服务付款方式有几种
  • 企业失信是什么意思
  • 支付信息表
  • xp安全模式怎么用
  • win10升级电脑
  • openwrt 路由配置梯子
  • windows越狱软件
  • 电脑死机是啥原因
  • win8系统怎么设置共享局域网
  • 用360可以装win7系统吗
  • android线程间通信的几种方法
  • javascript怎么弄
  • jquery设置宽高
  • excel执行python脚本
  • 如何查询个体工商户是查账征收还是核定征收
  • 开票软件如何升级系统
  • 残疾人买车可以减免购置税吗
  • 电子专票操作视频
  • 商贸有限公司怎么运营
  • 微信 税务
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设