草庐IT

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

bit.. 2023-04-12 原文

目录

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

vertical-aligncssstylexffgt前端html

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

  1. ruby - capybara field.has_css?匹配器 - 2

    我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解，字段“Email”是一个节点，因此调用must_have_css绝对有效!我做错了什么？ 最佳答案 通过JonasNicklas得到了答案:No

  2. css - 用 watir 检查标签类？ - 2

    我有一个div，它根据表单是否正确提交而改变。我想知道是否可以检查类的特定元素？开始元素看起来像这样。如果输入不正确，添加错误类。 最佳答案 试试这个:browser.div(:id=>"myerrortest").class_name更多信息:http://watir.github.com/watir-webdriver/doc/Watir/HTMLElement.html#class_name-instance_method另一种选择是只查看具有您期望的类的div是否存在browser.div((:id=>"myerrortes

  3. 动漫制作技巧如何制作动漫视频 - 2

    动漫制作技巧是很多新人想了解的问题，今天小编就来解答与大家分享一下动漫制作流程，为了帮助有兴趣的同学理解，大多数人会选择动漫培训机构，那么今天小编就带大家来看看动漫制作要掌握哪些技巧？一、动漫作品首先完成草图设计和原型制作。设计草图要有目的、有对象、有步骤、要形象、要简单、符合实际。设计图要一致性，以保证制作的顺利进行。二、原型制作是根据设计图纸和制作材料，可以是手绘也可以是3d软件创建。在此步骤中，要注意的问题是色彩和平面布局。三、动漫制作制作完成后，加工成型。完成不同的表现形式后，就要对设计稿进行加工处理，使加工的难易度降低，并得到一些基本准确的概念，以便于后续的大样、准确的尺寸制定。四、

  4. ruby - Cucumber/Savon 省略或删除日志输出 - 2

    在运行Cucumber测试时，我得到(除了测试结果)大量调试/日志相关的输出形式:D,[2013-03-06T12:21:38.911829#49031]DEBUG--:SOAPrequest:D,[2013-03-06T12:21:38.911919#49031]DEBUG--:Pragma:no-cache,SOAPAction:"",Content-Type:text/xml;charset=UTF-8,Content-Length:1592W,[2013-03-06T12:21:38.912360#49031]WARN--:HTTPIexecutesHTTPPOSTusingt

  5. ruby-on-rails - Assets 管道损坏 : Not compiling on the fly css and js files - 2

    我开始了一个新的Rails3.2.5项目，Assets管道不再工作了。CSS和Javascript文件不再编译。这是尝试生成Assets时日志的输出:StartedGET"/assets/application.css?body=1"for127.0.0.1at2012-06-1623:59:11-0700Servedasset/application.css-200OK(0ms)[2012-06-1623:59:11]ERRORNoMethodError:undefinedmethod`each'fornil:NilClass/Users/greg/.rbenv/versions/1

  6. ruby-on-rails - Rails - 理解 application.js 和 application.css - 2

    rails新手。只是想了解\assests目录中的这两个文件。例如，application.js文件有如下行://=requirejquery//=requirejquery_ujs//=require_tree.我理解require_tree。只是将所有JS文件添加到当前目录中。根据上下文，我可以看出requirejquery添加了jQuery库。但是它从哪里得到这些jQuery库呢？我没有在我的Assets文件夹中看到任何jquery.js文件——或者直接在我的整个应用程序中没有看到任何jquery.js文件？同样，我正在按照一些说明安装TwitterBootstrap(http:

  7. css - Rails 4.1 和 Bootstrap 3 字形图标不工作 - 2

    我正在尝试消除使用Bootstrap3的Rails4元素中的glyphicon错误。我没有使用任何Bootstrapgem将其添加到Assets管道中。我手动将bootstrap.css和bootstrap.js添加到各自的app/assets目录下，分别添加到application.css和application.js什么的我现在在网络浏览器的控制台中看到以下内容:GEThttp://localhost:3000/fonts/glyphicons-halflings-regular.woff404(NotFound)localhost/:1GEThttp://localhost:30

  8. css - rails 萨斯 : variables are not passed with @import - 2

    我有一个使用twitterbootstrap和sass的Rails元素。scss文件结构化到文件夹中，所以我有更好的概述。现在我想为包含我的颜色等的全局变量定义一个文件，并将这些值传递给其他文件，这样我就有更少的冗余代码。虽然所有代码都已正确导入和应用，变量不起作用。这是当前的设置:样式表/application.css.scss/**=require_self*=require_tree*//*stylesheets/||–base/||–_reset.scss#Reset/normalize||–_typography.scss#Typographyrules||–componen

  9. css - Jekyll 和自定义 CSS - 2

    有没有一种方法可以在jekyll站点中包含自定义css标签，同时将markdown用于入口文件？例如，当我想突出显示某个段落时？ 最佳答案 Markdown和YAMLFrontMatter都内置了这个。但你可以自己制作。比如说，您有foo.css想要包含在某些帖子中。在_posts/2013-02-03-higligting-foo.markdown中:---css:footitle:"DrupalImagecachesecurityvulnarabilitywithDDOSattackexplained"tags:[drupal,

  10. Unity Shader 学习笔记（5）Shader变体、Shader属性定义技巧、自定义材质面板 - 2

    写在之前Shader变体、Shader属性定义技巧、自定义材质面板，这三个知识点任何一个单拿出来都是一套知识体系，不能一概而论，本文章目的在于将学习和实际工作中遇见的问题进行总结，类似于网络笔记之用，方便后续回顾查看，如有以偏概全、不祥不尽之处，还望海涵。1、Shader变体先看一段代码......Properties{ [KeywordEnum(on,off)]USL_USE_COL("IsUseColorMixTex?",int)=0 [Toggle(IS_RED_ON)]_IsRed("IsRed?",int)=0}......//中间省略，后续会有完整代码 #pragmamulti_c

随机推荐