首页 > 其他分享 >CSS(8)高级技巧:精灵图,css三角,用户界面,vertical-align属性应用

CSS(8)高级技巧:精灵图,css三角,用户界面,vertical-align属性应用

时间:2024-11-18 19:48:43浏览次数:3  
标签:vertical align 三角 middle css CSS 属性

一.精灵图

通过css中的background-position属性,将多张图合成为一张图

二.css三角

在网页中,我们可以添加css属性获得三角图标

solid:实心,边框的实心

transparent:透明,图中代码表示只有左边粉色,其余地方为透明

三:用户界面

1.鼠标样式

2.取消表单轮廓与防止拖拽文本

三.vertical-align属性应用(middle,top, bottom)

textarea{

        vertical-align:middle

}

四.解决图片底部默认空白缝隙问题

vertical-align:middle top bottom

 把图片转换为块级元素display:block

五.多行文字溢出显示省略号

标签:vertical,align,三角,middle,css,CSS,属性
From: https://blog.csdn.net/Naiveyouzhi/article/details/143864865

相关文章

  • 速通前端篇 —— CSS
    找往期文章包括但不限于本期文章中不懂的知识点:个人主页:我要学编程程(ಥ_ಥ)-CSDN博客所属专栏:速通前端目录CSS的介绍基本语法规范CSS选择器标签选择器class选择器 id选择器 复合选择器 通配符选择器CSS常见样式 颜色color字体大小font-size 边框bord......
  • css 表格圆角+边框不重叠
    .resource-table{border-collapse:separate;/*设置边框分离*/border-spacing:0;/*边框间距设置为0*/width:100%;/*表格宽度*/theadtr{background:#f0f3f5;th{color:#5a6066;border-top:1pxsolid#b......
  • 穿越银河的CSS魔法:重现《星球大战》经典开场
    1.引言《星球大战》(StarWars)是一部经典的科幻电影系列,其独特的开场动画和视觉效果深受观众喜爱。本文将介绍如何使用HTML和CSS来创建一个具有《星球大战》风格的动画效果,包括“Star”和“Wars”标志的淡入效果,以及标题“TheForceAwakens”中每个字母的逐个淡入效果。具......
  • 第九章DIV+CSS布局
    9.1DIV+CSS概述9.1.1认识DIVdiv标签在Web标准网页中属于块级元素9.1.2DIV的宽高设置9.1.2.1宽高属性9.1.2.2div标签内直接设置宽高9.1.2.3div使用选择器设置宽高<!DOCTYPEhtml><html> <head> <metacharset="utf-8"/> <title></title> <styletype......
  • 第七章 利用CSS和多媒体美化页面
    7.1CSS链接的美化        在HTML5中,<a></a>标签始终定义超链接,用于从一张页面链接到另一张页面。<a>元素最重要的属性是href属性,它指示链接的目标,如果未设置href属性,后续多个属性均无法使用,则只是超链接的占位符。在谷歌浏览器中,鼠标悬停链接时无明显效果。  ......
  • CSS(7):定位position:相对定位(relative)、绝对定位(absolute)、固定定位(fixed)和静态定位(st
    一.定位:将盒子定在某一个位置,其规则为:定位=定位模式+边偏移 。二:定位模式1.static静态定位:元素无设置的时候就是static        “position:static;”2.relative相对定位:相对于当前位置进行移动,通过设置偏移属性(top、right、bottom、left)来使其在水平和垂直......
  • CSS3 超实用属性:pointer-events(可穿透图层的鼠标事件)
    1、是什么pointer-events 直译为指针事件,该属性指定在什么情况下某个DOM可以成为鼠标事件的target。简而言之,就是允许/禁止DOM的鼠标事件(click事件、hover事件、mouse事件等鼠标事件)2、具体属性分析用法分析:pointer-events:auto|none|visiblePainted|visibleFill|......
  • CSS入门(主要讲解选择器,CSS的创建,背景,文本)
    一.理解id和class选择器id选择器CSS中id选择器以"#"来定义。以下的样式规则应用于元素属性id="para1":#para1{text-align:center;color:red;}注意:ID属性不要以数字开头,数字开头的ID在Mozilla/Firefox浏览器中不起作用。class选择器class选择器在......
  • 第九章 DIV+CSS布局
    9.1DIV+CSS概述9.1.1认识DIV<div>标签是HTML中的一种块级元素,用于定义文档中的一个分区或区域。它是一个容器,可以包含文本、图像、列表、表格、段落、其他块级元素,甚至是其他<div>元素。<div>标签本身不会在页面上显示任何内容,但它可以作为组织和布局HTML文档的工具9.......
  • 第八章 利用CSS制作导航菜单
    8.1水平顶部导航栏8.1.1简单水平导航栏的设计与实现简单水平导航栏是网页设计中非常常见的元素,它通常位于页面的顶部,并提供主要的网站导航选项。下面我们将详细讲解如何创建一个基本的水平导航栏,包括HTML结构、CSS样式以及鼠标事件处理。1导航栏的创建首先,我们需要使用H......