正文 

当前位置： 首页 > 技术 > java教程

前端基础-css高级(代码片段)

咖啡壶子 咖啡壶子     2022-12-26     288

关键词：

一.精灵图

1.为什么需要精灵图

减少服务器接收和发送请求的次数，提高页面的加载速度

2.精灵图（sprites）的使用
  1. 原理核心：background-position
  2. 小测试：拼出自己名字

二.字体图标

1.优点（了解）

轻量级;
灵活性;
兼容性

2.字体图标的下载
  1. icomoon 字库
  2. 阿里 iconfont 字库
3.适用场景
  1. 如果遇到一些结构和样式比较简单的小图标，就用字体图标。
  2. 如果遇到一些结构和样式复杂一点的小图片，就用精灵图。
4.CSS 三角

做法:宽高为0，用border的各个方向去实现

三.CSS 用户界面样式

1.鼠标样式

li cursor: pointer;

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

input outline: none;
textarea resize: none;
文本域标签写到一行

四.vertical-align 属性应用

1.图片文字垂直居中对齐

vertical-align : middle

2.图片底部空隙
  1. 给图片添加 vertical-align:middle | top| bottom 等。 （提倡使用的）
  2. 把图片转换为块级元素 display: block;

五.溢出的文字省略号显示

1.单行
white-space: nowrap; （ 默认 normal 自动换行）
  overflow: hidden;
   text-overflow: ellipsis;
2.多行
overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;

六.常见布局技巧

1.margin负值运用

不用担心同时走的问题
鼠标移动上去显示边框的效果

2.文字围绕浮动元素
3.CSS 三角巧妙应用

直角三角形和梯形

4.CSS初始化：重设浏览器的样式
/* 把我们所有标签的内外边距清零 */
* 
    margin: 0;
    padding: 0

/* em 和 i 斜体的文字不倾斜 */
em,
i 
    font-style: normal

/* 去掉li 的小圆点 */
li 
    list-style: none


img 
    /* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */
    border: 0;
    /* 取消图片底侧有空白缝隙的问题 */
    vertical-align: middle


button 
    /* 当我们鼠标经过button 按钮的时候，鼠标变成小手 */
    cursor: pointer


a 
    color: #666;
    text-decoration: none


a:hover 
    color: #c81623


button,
input 
    /* "\\5B8B\\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */
    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\\5B8B\\4F53", sans-serif


body 
    /* CSS3 抗锯齿形 让文字显示的更加清晰 */
    -webkit-font-smoothing: antialiased;
    background-color: #fff;
    font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\\5B8B\\4F53", sans-serif;
    color: #666


.hide,
.none 
    display: none

/* 清除浮动 */
.clearfix:after 
    visibility: hidden;
    clear: both;
    display: block;
    content: ".";
    height: 0


.clearfix 
    *zoom: 1

零基础学前端之css3高级特效(代码片段)

css3高级特效1、本章目标掌握2D转换对元素进行移动、旋转、缩放和倾斜掌握在3D空间中改变元素的形状、位置和大小2、2D转换方法移动：translate()旋转：rotate()缩放：scale()倾斜：skew()2D转换属性：transform作用... 查看详情

零基础学前端之css3高级特效(代码片段)

css3高级特效1、本章目标掌握2D转换对元素进行移动、旋转、缩放和倾斜掌握在3D空间中改变元素的形状、位置和大小2、2D转换方法移动：translate()旋转：rotate()缩放：scale()倾斜：skew()2D转换属性：transform作用... 查看详情

前端基础(代码片段)

目录11.1html基础1.创建html文件2.基本格式3.head标签(5)4.body标签(7)11.2CSS基础1.div标签2.lable标签2.css(层叠样式表)3.css选择器11.3CSS浮动内容回顾：1.div和span标签在网页中的作用2.css基础选择器和高级选择器有哪些？3.盒子模型的属性有... 查看详情

前端基础只是学习(代码片段)

目录第十一章前端开发11.1html基础1.创建html文件2.基本格式3.head标签(5)4.body标签(7)11.2CSS基础1.div标签2.lable标签2.css(层叠样式表)3.css选择器11.3CSS浮动内容回顾：1.div和span标签在网页中的作用2.css基础选择器和高级选择器有哪些？3.... 查看详情

前端基础二之css篇(代码片段)

文章目录题外话前言CSS1.嵌入HTML2.CSS基础语法3.CSS高级语法3.1组选择器3.2继承4.选择器4.1派生选择器4.2id选择器4.3类选择器4.4属性选择器5.css常见样式5.1背景5.2文本5.3字体5.4链接5.5列表5.6表格结语题外话📢博客主页：❤布小... 查看详情

前端基础二之css篇(代码片段)

文章目录题外话前言CSS1.嵌入HTML2.CSS基础语法3.CSS高级语法3.1组选择器3.2继承4.选择器4.1派生选择器4.2id选择器4.3类选择器4.4属性选择器5.css常见样式5.1背景5.2文本5.3字体5.4链接5.5列表5.6表格结语题外话📢博客主页：❤布小... 查看详情

前端中高级基础知识面试汇总(代码片段)

持续更新ing～前端基础github地址。README.md可以下载到typora中打开，会有整个大纲目录显示（github中markdown目录快捷生成方式不现实，之后可能会想办法生成贴过来，暂时不做相关处理）前端基础gitbook地址。... 查看详情

css高级技巧——精灵图，字体图标，三角形等(代码片段)

...客园主页-冰山一树SankeyCSDN主页：CSDN主页-冰山一树Sankey前端学习：学习地址：黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动，下面这些都是一些学习笔记。临渊羡鱼，不如退而结网！！愿我自己学有所成，也... 查看详情

面试题打卡第九天（前端webpack基础及高级配置）(代码片段)

Webpack基本配置下面例子涉及的内容：拆分配置及merge启动本地服务处理ES6处理样式处理图片例子：webpack.common.js公共配置module.exports=entry:`./src/index.js`//入口文件module: 查看详情

前端面试初中高级前端面试指南-css篇(代码片段)

...，如果我没有猜错得话，我觉得你是应该同我一样是一位前端人。如今前端在IT事业中的占比越来越重，已经成为不可缺少的部分，前端技术也是层出不穷，各种技术类、技术框架也蜂拥而出，前端面试的难度也随之增加，如果... 查看详情

前端基础复习(代码片段)

目录前端学习bootstrap4学习：css:css语法：css选择器：js:scrapt:js输出数据：选择器：页面写入：函数：无名函数函数自执行：函数参数：修改标签的自由属性：元素的属性操作：事件：事件2：前端学习bootstrap4学习：样式： https://v4... 查看详情

前端学习css基础(代码片段)

目录引言一、初识CSSCSS的作用CSS的注释CSS样式表二、CSS选择器CSS基础选择器三、CSS样式font字体样式CSS外观属性四、标签显示模式标签显示模式转换display五、CSS三大特性CSS层叠性CSS继承性CSS优先级六、⭐盒子模型盒子模型简介盒... 查看详情

web前端-css基础与应用(代码片段)

Web前端-CSS基础Web前端-CSSCSS历史CSS特点简介丰富的样式定义易于使用和修改多页面应用层叠页面压缩CSS工作原理CSS版本区别CSS的基本语法CSS为HTML网页添加样式的三种方法CSS选择器元素/标签选择器id选择器class选择器群组选择器包... 查看详情

前端基础06bootstrap框架(代码片段)

Bootstrap是Twitter开源的基于HTML、CSS、JavaScript的前端框架。Bootstrap下载官方地址：https://getbootstrap.com中文地址：http://www.bootcss.com/Bootstrap环境搭建bootstrap-3.3.7-dist/├──css//CSS文件│├──bootstrap-theme.css//Bootstrap主题样式 查看详情

前端学习-基础部分-css(代码片段)

开始今日份整理1.CSS的导入方式CSS的导入方式主要是有内联模式，行内模式，外部样式表1.1内联模式内联模式：直接在<head>中直接写css，例如pcolor:rgb(166,226,226);#设置P标签的颜色1.2行内模式行内模式：在html中对应元素直接书... 查看详情

css总结前端三剑客之一（css基础）(代码片段)

上一篇文章，我们介绍了HTML语言的基础用法后，今天我们继续学习CSS的基础语法。CSS，又称为层叠样式表(CascadingStyleSheets)。CSS能够对网页中元素位置的排版进行像素级精准控制，实现美化页面的效果，能够做... 查看详情

web前端之css基础总结(代码片段)

Web前端之CSS基础总结(2) 六、CSS三大特性1.CSS层叠性-概念：所谓层叠性是指多种CSS样式的叠加是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属... 查看详情

前端开发笔记css基础（上）(代码片段)

CSS介绍层叠样式表(英文全称：CascadingStyleSheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配... 查看详情