2. CSS三角、CSS用户界面样式

这篇具有很好参考价值的文章主要介绍了2. CSS三角、CSS用户界面样式。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

2.1 CSS三角

网页中常见的一些三角形, 使用CSS直接画出来就可以, 不必做成图片或者字体图标。
CSS三角做法代码:

div {
     width: 0;
     height: 0;
     /* 兼顾兼容性
line-height: 0;
     font-size: 0; */
     border: 50px solid transparent;
     border-left-color: pink;
}

2. CSS三角、CSS用户界面样式,前端——CSS,css,前端,css3

2.2 CSS三角强化

2. CSS三角、CSS用户界面样式,前端——CSS,css,前端,css3

语法

width: 0;
height: 0;
/* 1.只保留右边的边框有颜色 */
border-color: transparent skyblue transparent transparent;
/* 2.样式都是solid */
border-style: solid;
/* 3.上边框宽度要大,右边框宽度稍小,其余边框为0 */
border-width: 100px 50px 0 0;

【示例代码】

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .prc {
            width: 160px;
            height: 24px;
            border: 1px solid red;
            margin: 0 auto;
            line-height: 24px;
        }
        .miaosha {
            position: relative;
            float: left;
            width: 90px;
            height: 100%;
            background-color: red;
            text-align: center;
            color: #fff;
            font-weight: 700;
            margin-right: 8px;
        }
        .miaosha i {
            position: absolute;
            right: 0;
            top: 0;
            width: 0;
            height: 0;
            border-color: transparent #fff transparent transparent;
            border-style: solid;
            border-width: 24px 10px 0 0;
        }
        .de {
            font-size: 12px;
            color: gray;
            text-decoration: line-through;
        }
    </style>
</head>

<body>
    <div class="prc">
        <span class="miaosha">
            ¥1650
            <i></i>
        </span>
        <span class="de">¥5650</span>
    </div>
</body>

</html>

2. CSS三角、CSS用户界面样式,前端——CSS,css,前端,css3

2.3 什么是界面样式

所谓的界面样式,就是更改一些用户操作样式,以便提高更好的用户体验。
●更改用户的鼠标样式
●表单轮廓
●防止表单域拖拽

2.4 鼠标样式cursor

li {cursor: pointer; }

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。
2. CSS三角、CSS用户界面样式,前端——CSS,css,前端,css3

2.5 轮廓线outline

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

input { outline: none; }

2.6 防止拖拽文本域resize

实际开发中,我们文本域右下角是不可以拖拽的。文章来源地址https://www.toymoban.com/news/detail-684887.html

textarea{ resize: none; }

到了这里,关于2. CSS三角、CSS用户界面样式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 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.单行文本溢出显示省略号--必须

    2023年04月09日
    浏览(48)
  • 前端开发必备技能!用简单CSS代码绘制三角形,提升用户体验

        🎬 江城开朗的豌豆 :个人主页  🔥 个人专栏  :《 VUE 》 《 javaScript 》  📝  个人网站  :《 江城开朗的豌豆🫛 》  ⛺️ 生活的理想,就是为了理想的生活 ! 目录  ⭐  专栏简介  📘  文章引言 一、前言 二、实现过程 三、原理分析 ⭐  写在最后         欢

    2024年02月07日
    浏览(48)
  • [HTML]Web前端开发技术8(HTML5、CSS3、JavaScript )CSS样式属性,withborder,italic | oblique,indent,padding,——喵喵画网页

    希望你开心,希望你健康,希望你幸福,希望你点赞! 最后的最后,关注喵,关注喵,关注喵,佬佬会看到更多有趣的博客哦!!! 喵喵喵,你对我真的很重要! 目录 前言 CSS属性值中的单位 CSS字体样式 font-size设置字号 字体样式font-style属性 字体系列font-family属性 字体变体

    2024年02月04日
    浏览(69)
  • [QT编程系列-39]:用户界面UI - 样式表QSS与样式文件快速入门

    目录 1. 概述 2. CSS 3. QSS示例 4. QT样式表文件使用方法与步骤 5. QT内置样式 6. QT常见基本样式 Qt提供了一种称为Qt样式表(Qt Style Sheets)的机制,可以用于 自定义和美化Qt应用程序的用户界面(UI) 。 使用Qt样式表,你可以通过类似 CSS 的语法来定义UI元素的外观和布局,包括颜

    2024年02月04日
    浏览(45)
  • CSS3样式分类:

    虽然样式都是比较简单的  但是到用的时候就会想不起来 我这边列举一下常用的 加深下记忆 边框样式: border-radius:设置元素的圆角边框。 box-shadow:为元素添加阴影效果。 border-image:使用图像来定义边框的样式。 渐变背景: linear-gradient:创建线性渐变背景。 radial-gradie

    2024年02月13日
    浏览(49)
  • CSS3背景样式

    在CSS 2.1中,background属性的功能还无法满足设计的需求,为了方便设计师更灵活地设计需要的网页效果,CSS3在原有background基础上新增了一些功能属性,可以在同一个对象内叠加多个背景图像,可以改变背景图像的大小尺寸,还可以指定背景图像的显示范围,以及指定背景图像

    2024年02月07日
    浏览(48)
  • 前端用户体验设计:创造卓越的用户界面和交互

    💂 个人网站:【工具大全】【游戏大全】【神级源码资源网】 🤟 前端学习课程:👉【28个案例趣学前端】【400个JS面试题】 💅 寻找学习交流、摸鱼划水的小伙伴,请点击【摸鱼学习交流群】 用户体验(User Experience,UX)是前端开发中至关重要的一环。一个优秀的用户体验

    2024年02月04日
    浏览(42)
  • CSS3设计动画样式

    CSS3动画包括过渡动画和关键帧动画,它们主要通过改变CSS属性值来模拟实现。我将详细介绍Transform、Transitions和Animations 3大功能模块,其中Transform实现对网页对象的变形操作,Transitions实现CSS属性过渡变化,Animations实现CSS样式分步式演示效果。 2012年9月,W3C发布CSS3变形工作草

    2024年02月06日
    浏览(46)
  • CSS3表格和表单样式

    在传统网页中,表格主要用于网页布局,因此也成为网页编辑的主要工具;在标准化网页设计中,表格的主要功能是显示数据,也可适当辅助结构设计。本章主要介绍如何使用CSS控制表格和表单的显示效果,如表格和表单的边框、背景等样式。 CSS为表格定义了5个专用属性,

    2024年02月06日
    浏览(36)
  • 电商交易系统的前端开发与用户界面

    电商交易系统是现代电子商务的核心,它为买家提供了方便、快捷、安全的购物体验。在电商交易系统中,前端开发和用户界面是非常重要的部分,因为它们直接影响到用户的购物体验和满意度。 在过去的几年里,电商市场已经迅速发展,各种电商平台和应用程序都在不断涌

    2024年01月23日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包