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

  • 淘宝新卖家如何推广(淘宝新卖家如何发货)

    淘宝新卖家如何推广(淘宝新卖家如何发货)

  • 央视频缓存的视频在手机什么位置(央视频缓存的视频怎么保存到手机)

    央视频缓存的视频在手机什么位置(央视频缓存的视频怎么保存到手机)

  • 钉钉群类型怎么改为师生群(钉钉群类型怎么更改为家校群)

    钉钉群类型怎么改为师生群(钉钉群类型怎么更改为家校群)

  • 华为畅享10没有指纹解锁(华为畅享10没有语音唤醒功能)

    华为畅享10没有指纹解锁(华为畅享10没有语音唤醒功能)

  • 全家福字怎么扫(全家福字怎么扫描)

    全家福字怎么扫(全家福字怎么扫描)

  • vivos1怎么隐藏应用图标(vivo如何隐藏应用软件视频教程)

    vivos1怎么隐藏应用图标(vivo如何隐藏应用软件视频教程)

  • 微信合十手势代表什么(微信里的合手是什么意思)

    微信合十手势代表什么(微信里的合手是什么意思)

  • miui11耗电快解决办法(miui11耗电量)

    miui11耗电快解决办法(miui11耗电量)

  • 用两年多手机很卡怎么办(用了两年半的手机)

    用两年多手机很卡怎么办(用了两年半的手机)

  • 虎牙账号注销要多久(虎牙账号注销要验证码吗)

    虎牙账号注销要多久(虎牙账号注销要验证码吗)

  • ctrl+home是什么快捷键(ctrl和home)

    ctrl+home是什么快捷键(ctrl和home)

  • 屏幕总成是内屏和外屏一起吗(屏幕总成内屏外屏分开了)

    屏幕总成是内屏和外屏一起吗(屏幕总成内屏外屏分开了)

  • word2007扩展名是什么(word扩展名叫什么)

    word2007扩展名是什么(word扩展名叫什么)

  • i73770k相当于现在什么cpu(i73770k属于什么档次)

    i73770k相当于现在什么cpu(i73770k属于什么档次)

  • 抖音怎样注册第二个号(抖音怎样注册第三个账号)

    抖音怎样注册第二个号(抖音怎样注册第三个账号)

  • 2400t内存 t是什么意思(2400t内存和2400有区别吗)

    2400t内存 t是什么意思(2400t内存和2400有区别吗)

  • 三星s8系统升级后多窗口没了(三星s8升级最新版本怎么样)

    三星s8系统升级后多窗口没了(三星s8升级最新版本怎么样)

  • 苹果笔记本可以扩容吗(苹果笔记本可以安装windows10吗)

    苹果笔记本可以扩容吗(苹果笔记本可以安装windows10吗)

  • iphone11港版和国行区别(港版iphone11和国版有什么区别)

    iphone11港版和国行区别(港版iphone11和国版有什么区别)

  • 腾讯地图如何标注位置(腾讯地图如何标注自己公司位置)

    腾讯地图如何标注位置(腾讯地图如何标注自己公司位置)

  • vivoy7s返回键怎么调出来(vivoy7s返回键怎么设置)

    vivoy7s返回键怎么调出来(vivoy7s返回键怎么设置)

  • 移动wifi密码忘了怎么办(移动WiFi密码忘了怎么改)

    移动wifi密码忘了怎么办(移动WiFi密码忘了怎么改)

  • 怎么开启vt(华硕电脑怎么开启vt)

    怎么开启vt(华硕电脑怎么开启vt)

  • vivox23怎么屏蔽广告(vivo手机屏蔽功能在哪里设置)

    vivox23怎么屏蔽广告(vivo手机屏蔽功能在哪里设置)

  • 苹果手机4g网速慢怎么办(苹果手机4G网速突然变慢)

    苹果手机4g网速慢怎么办(苹果手机4G网速突然变慢)

  • 苹果手机怎么卖趣步糖果(苹果手机怎么卖个好价格)

    苹果手机怎么卖趣步糖果(苹果手机怎么卖个好价格)

  • 迭代和递归的区别(迭代和递归哪个效率高)

    迭代和递归的区别(迭代和递归哪个效率高)

  • Vue3配置路由(vue-router)(vue路由使用方法)

    Vue3配置路由(vue-router)(vue路由使用方法)

  • 可以出口的商品
  • 临时税务登记的小规模纳税人 个人所得税如何申报
  • 增值税进项税额计算公式
  • 租办公室自己装修可以拆走吗
  • 未达起征点增值税能否开票
  • 分公司是否可以参与投标招标
  • 发票复印件盖公章
  • 可控费用包括工资吗
  • 销售免税货物如何开票
  • 话费发票入账
  • 员工宿舍需要缴纳房产税么
  • 办公室和电梯电梯哪个好
  • 税务行政强制行为遵循的原则
  • 产生个人所得税之后是不是不能公益性岗位
  • 存货损失的账务处理
  • 收到投资者投入设备一台,价值100000元
  • 自产自用设备税务处理
  • 什么叫盘活存量股票
  • 无票业务如何处理
  • 计提住房公积金
  • ipad os 16
  • 收到以前年度退税款的会计分录
  • 预计资产未来现金流量的期限
  • win10系统安装详细步骤
  • 存货包括哪些会计账户
  • 工业企业销售收入和产值,税金比例
  • 分批付款怎么确认收入
  • element栅格布局
  • wordpress用什么语言编写
  • laravel实战教程
  • 原版锯齿
  • 投标须知所包括的内容有哪些
  • 雷斯岬国家海岸公园有信号吗
  • js获取本机ip地址
  • reset=target
  • 纳税申报和账务不一致
  • mysql表设计原则
  • 销售佣金的税务比例一般是多少啊
  • 所有者权益变动表反映的是什么
  • 银行进账单是外来原始凭证吗
  • 制造费用属于哪一类会计科目
  • sql chr函数
  • 小规模普通发票怎么做分录
  • 税收制度政策
  • 成品油发票的六个问答
  • 制造企业费用会计
  • 职工困难补助账务处理
  • 上年度计提多了的奖金怎么办
  • 工资计入会计科目
  • 融资租入固定资产计提折旧吗
  • 支付劳务费需要什么原始凭证
  • 离职补偿金要交个税吗
  • 查询一个字段有哪些值
  • mysql数据源
  • freebsd 网卡驱动
  • win10电脑打开图片文件夹会跳闪
  • fdreader.exe是什么程序
  • windows7触摸
  • linux关闭sh
  • linux服务器日志文件在哪里
  • linux ssh gui
  • 电脑双系统删除一个系统的步骤
  • 使用jQuery的ajax方法向服务器发出get和post请求的方法
  • css中的单位主要有哪些
  • opengl安装教程
  • nodejs 请求
  • 队列remove
  • python调用cuda执行加法
  • 浏览器检测js代码
  • javascript简明教程
  • unityhub安装unity出错
  • js jquery区别
  • jquery的循环
  • js实现手风琴
  • javascript标签大全
  • bootstrap的组件
  • android view view
  • 新收入准则租赁业务
  • 潍坊昌邑售房信息
  • 国税申报时间2023
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设