位置: 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)(波士顿房价数据集可视化)

  • realme gt neo2语音助手怎么唤醒小布(realmegtneo语音唤醒)

    realme gt neo2语音助手怎么唤醒小布(realmegtneo语音唤醒)

  • 苹果11手机如何应用分身(苹果11手机如何滚动截屏长图)

    苹果11手机如何应用分身(苹果11手机如何滚动截屏长图)

  • 华为荣耀20青春版有耳机孔吗(华为荣耀20青春版上市时间和价格)

    华为荣耀20青春版有耳机孔吗(华为荣耀20青春版上市时间和价格)

  • 优酷怎么取消只看主角(优酷怎么取消只看一个人的片段)

    优酷怎么取消只看主角(优酷怎么取消只看一个人的片段)

  • 魅族开机一直循环meizu(魅族开机一直转圈圈)

    魅族开机一直循环meizu(魅族开机一直转圈圈)

  • 哈罗单车忘记锁怎么办(哈罗单车忘记锁车怎么处理)

    哈罗单车忘记锁怎么办(哈罗单车忘记锁车怎么处理)

  • 回收站是内存临时空间的一部分吗(回收站实际上是内存区域)

    回收站是内存临时空间的一部分吗(回收站实际上是内存区域)

  • 抖音里音乐播放器视频怎么做(抖音里音乐播放一遍多少钱)

    抖音里音乐播放器视频怎么做(抖音里音乐播放一遍多少钱)

  • 网络适配器选项不见了(网络适配器选项空白)

    网络适配器选项不见了(网络适配器选项空白)

  • 电脑的开关键在哪里(电脑开关键在中间怎么调到左边)

    电脑的开关键在哪里(电脑开关键在中间怎么调到左边)

  • 华为手机怎么让内存变大(华为手机怎么让屏幕不旋转)

    华为手机怎么让内存变大(华为手机怎么让屏幕不旋转)

  • 互联网和因特网的区别与联系(互联网和因特网的关系)

    互联网和因特网的区别与联系(互联网和因特网的关系)

  • 支付宝怎么手机号查快递(支付宝怎么手机号查询快递)

    支付宝怎么手机号查快递(支付宝怎么手机号查询快递)

  • 表格里数字怎么不全部显示出来(表格里数字怎么排序变成12345)

    表格里数字怎么不全部显示出来(表格里数字怎么排序变成12345)

  • 支付宝滴滴怎么开发票(支付宝滴滴怎么修改手机号)

    支付宝滴滴怎么开发票(支付宝滴滴怎么修改手机号)

  • oppoace有光学防抖吗(oppoace2没有光学防抖)

    oppoace有光学防抖吗(oppoace2没有光学防抖)

  • oppo怎么关耳机模式(oppo怎么关掉耳机)

    oppo怎么关耳机模式(oppo怎么关掉耳机)

  • 怎么录微信语音的声音(iPhone怎么录微信语音)

    怎么录微信语音的声音(iPhone怎么录微信语音)

  • 88会员怎么激活优酷(88会员怎么激活网易云音乐)

    88会员怎么激活优酷(88会员怎么激活网易云音乐)

  • 火山直播录屏在哪了(火山直播怎么录直播视频)

    火山直播录屏在哪了(火山直播怎么录直播视频)

  • 360安全浏览器如何查看电视直播(360安全浏览器如何退出登录)

    360安全浏览器如何查看电视直播(360安全浏览器如何退出登录)

  • 抖音草稿怎么发给微信好友(抖音草稿怎么发日常一天可见)

    抖音草稿怎么发给微信好友(抖音草稿怎么发日常一天可见)

  • 微博怎么设置夜间模式(微博怎么设置夜间模式2022)

    微博怎么设置夜间模式(微博怎么设置夜间模式2022)

  • 火狐浏览器&谷歌浏览器&Edge浏览器修改默认UA(User-Agent)(火狐浏览器下载安装)

    火狐浏览器&谷歌浏览器&Edge浏览器修改默认UA(User-Agent)(火狐浏览器下载安装)

  • python中for循环的底层实现(python中for循环的缩进规则)

    python中for循环的底层实现(python中for循环的缩进规则)

  • 运输货车折旧计算公式
  • 增值税无票收入可以抵扣
  • 小微企业印花税减免最新政策
  • 工资薪金需要缴纳什么税种
  • 去年开的专票今年可以作废吗
  • 增值税专票销售额含税吗
  • 费用已支付但发票未收可以先记费用吗
  • 公司茶水间有什么
  • 预付的房租计入什么费用
  • 出口退税金额和进项税额不一致
  • 零报税企业怎么做汇算清缴
  • 增值说税率怎么计算
  • 代理进口货物怎么做账
  • 税务代开劳务费税点如何确定
  • 中小企业代扣代缴增值税抵扣时限
  • 股权取得
  • 向境外企业转让房产
  • 劳务外包与劳务派遣公司
  • 自制销售清单可以公开吗
  • 未抵扣完的进项税额可以跨年抵扣吗
  • 存在弃置费用的固定资产,如果履行弃置义务
  • 电脑搜索功能不准确
  • 收到即征即退退的发票
  • 临时设施是租入还是租入
  • 企业开票附加税
  • u盘无内容
  • 土豆发芽了能吃吗有没有毒
  • 套期工具的会计分录
  • 年终双薪要做满一年嘛
  • 金融企业允许税前扣除的准备金
  • Pont Rouge (Red Bridge) over the Palmer River in Sainte-Agathe-de-Lotbinière, Quebec, Canada (© Jean Surprenant/Getty Images)
  • php curl cookie
  • php公众号推送完整示例
  • 今天收到的
  • 印花税的缴税对象是
  • 公允价值变动损益影响利润总额吗
  • 为什么费用报销先由主管部门审批在由财务审核
  • 库存商品和固定资产是单位会计资产核算的两项内容
  • 公司不可以销售车辆吗
  • 零申报一般怎么收费
  • mysql怎么修改
  • 发放个税返还用不用申报
  • 产品成本核算的方法
  • 教育费附加和地方教育费附加都要交吗
  • 软件退税款会计如何处理
  • 民间非营利政府是指什么
  • 车船使用税和印花税谁交
  • 法院拍卖得来的物品有发票吗
  • 营改增后建筑业开票规定
  • 旅游业差额开票的票据可以累计一季度吗
  • 一般哪些企业可以保供煤炭
  • 人力资源差额税率
  • 饭店的会计做账怎么做
  • mysql如何修改数据库名
  • mysql 5.7启动
  • window怎么操作
  • WP8版Creative Camera:相机详情介绍(图文)
  • windowsxp关闭窗口操作方法有哪些
  • centos虚拟机配置
  • xp系统如何添加启动项
  • mac连不上无线网络
  • 第一次安装ps后需要哪些设置
  • 安全账户管理器或本地安全机构服务器
  • linux 去除换行
  • Linux如何清理磁盘空间
  • cocos2dx 教程
  • 用jQuery实现可输入多选下拉组合框实例代码
  • windows e
  • javascript运用
  • Node.js中的核心模块包括哪些内容?
  • linux中mysql备份shell脚本代码
  • vue+vue-validator 表单验证功能的实现代码
  • python tkinter tabview
  • 刀具路径轨迹模拟
  • javascript的主要内容
  • python paramiko模块 判断过期
  • 叠加计算公式
  • js调用失败
  • 深圳国税服务
  • 农产品核定管理办法最新
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设