![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
逻辑鬼才不太聪明
小码农
展开
-
使用 iconfont 引入字体
使用 iconfont 引入字体1.第一步网址输入关键字 “iconfont” 进入官网2.第二步3.第三步4.第四步解压后,将解压文件移动至项目中5.第五步6.第六步使用方式有三种以下是参考代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-w原创 2021-01-05 17:45:15 · 653 阅读 · 0 评论 -
flex布局的常见属性
flex布局的常见属性主轴与侧轴flex布局中,是分为主轴和侧轴两个方向,同样的叫法有:行和列、x轴y轴默认主轴的方向就是x轴方向,水平向右默认侧轴的方向就是y轴方向,水平向下单行情况使用align-items,多行情况下使用align-content常见的父项属性flex-direction:设置主轴的排列方向子元素事是跟着主轴来排列的row:默认值从左向右row-reverse:从右向左column:从上到下column-reverse:从下到上justify-原创 2020-11-15 10:37:00 · 588 阅读 · 0 评论 -
使用CSS3伪元素引入阿里巴巴的字体图标
使用CSS3伪元素引入阿里巴巴的字体图标<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 1.需要引入文件 -原创 2020-11-04 19:43:16 · 901 阅读 · 1 评论 -
CSS初始化
CSS初始化/* 把所有的标签内外边距清零 */* { margin: 0; padding: 0;}/* 让斜体的文字不倾斜 */em,i { font-style: normal;}/* 去除li的小圆点 */li { list-style: none;}img { /* 兼容低版本,图片外面包含了链接会有边框的问题 */ border: 0; /* 取消图片底侧的空白缝隙的问题 */ vertical-align原创 2020-11-04 17:25:10 · 241 阅读 · 0 评论 -
实现直角三角形
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box1 { width: 0; height: 0; .原创 2020-11-04 16:46:18 · 249 阅读 · 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> body { .原创 2020-11-03 23:32:40 · 489 阅读 · 0 评论 -
使用css实现小三角
<!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> .class { .原创 2020-11-03 23:14:21 · 320 阅读 · 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> body { .原创 2020-11-03 19:47:20 · 167 阅读 · 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> .tudo { .原创 2020-11-03 17:40:05 · 977 阅读 · 0 评论 -
元素的隐藏和显示
元素的隐藏和显示display属性display属性用于设置一个元素如何显示display:none; 用于隐藏元素,且不保留原来的位置display:block; 除了转换为块级元素外,同时还有显示元素的意思display隐藏元素后,不会占有原来的位置。visibility可见性visibility属性用于指定一个元素可见还是隐藏。visibility:visible; 元素可视visibility:hidden; 元素隐藏,并保留元素原来的位置visi原创 2020-11-03 17:07:43 · 356 阅读 · 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> * { m.原创 2020-11-03 12:05:24 · 225 阅读 · 0 评论 -
CSS学习总结
CSS学习总结文章借鉴与:https://blog.csdn.net/weixin_42875245/article/details/104800325CSS的基本内容:盒子模型、字体、文本、链接、定位、边框、对齐。常用的应用有:网页布局、导航栏、下拉菜单、搜索框、反馈表单、提示工具、开关样式。菜鸟的速查菜鸟教程的链接:https://www.runoob.com/css/css-examples.htmlCSS的基本内容盒子模型:外边距margin、轮廓outline、边框border、内原创 2020-11-03 11:43:44 · 156 阅读 · 0 评论 -
网页布局总结
网页布局总结通过盒子模型,大部分的html标签是一个盒子通过CSS浮动、定位可以让每个盒子排列成为网页。标准流可以让盒子上下排列或左右排列,”垂直的块级盒子显示就用标准流布局“。浮动可以让多个块级元素一行显示或者左右对齐盒子,”多个块级盒子水平显示就用浮动布局“。定位定位最大的特点是有层叠的盖脸,就是可以让多个盒子前后叠压来显示。”如果元素只有在某个盒子内移动就使用定位布局“...原创 2020-11-03 09:23:49 · 95 阅读 · 0 评论 -
实现固定盒子到版心的一侧
实现效果<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* .w 是版心 */ .w {原创 2020-11-02 13:29:40 · 253 阅读 · 1 评论 -
实现水平居中、垂直居中的方法
参考链接:https://www.cnblogs.com/janessasmith/p/3702733.html一、设置display: block;,然后设置 margin: 0px auto;二、设置display: inline-block;,然后设置text-align: center;转载 2020-11-02 10:56:29 · 177 阅读 · 0 评论 -
清除盒子的浮动
<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* 利用 after 伪元素清楚浮动 */ .clearfix原创 2020-11-01 16:24:09 · 126 阅读 · 0 评论 -
CSS3属性
CSS3属性https://github.com/qianguyihao/Web/blob/master/02-CSS%E5%9F%BA%E7%A1%80/11-CSS3%E5%B1%9E%E6%80%A7%E8%AF%A6%E8%A7%A3%EF%BC%88%E4%B8%80%EF%BC%89.md文本text-shadow设置文本的阴影text-shadow:20px 27px 22px pink;//解析:水平位移 垂直位移 模糊程度 阴影颜色盒子模型中的box-sizing属性css原创 2020-10-25 23:18:18 · 187 阅读 · 0 评论 -
定位属性
定位属性css的定位属性有三种,分别是绝对定位,相对定位,固定定位。position: absolute;//绝对定位position: relative;//相对定位position: fixed;//固定定位相对定位用途微调元素做绝对定位的参考,子绝父相相对定位的定位值(负数表示相反的方向)left:盒子右移right:盒子左移top:盒子下移bottom:盒子上移绝对定位绝对定位的盒子脱离了标准文档流绝对定位之后,标签就不区分所谓的行内元素,不需要di原创 2020-10-25 23:17:51 · 333 阅读 · 0 评论 -
浮动
浮动行内元素和块级元素标签分为两种等级:块级元素:<span>,<b>,<a>,<em>,<i>,<u>行内元素:<h1>~<h6>,<p>,<h>,<dt>,<dd>,<li>行内元素和块级元素的区别:行内元素:与其他行内元素并排不能设置宽高;默认的宽度就是文字的宽度。块级元素:霸占一行,不能与其他任何元素并列。能接受宽原创 2020-10-25 23:17:17 · 384 阅读 · 0 评论 -
CSS继承和层叠性
CSS继承和层叠性继承性关于文字样式的属性,都具有继承性。这些属性包括:color、text-开头、line-开头、font-开头。关于盒子、定位、布局的属性,都不能继承。层叠性计算权重:**层叠性:**就是css处理冲突的能力,所有的权重计算,没有任何兼容问题。当多个选择器,选择了同一个元素时,就会按照顺序统计权重:id选择器类选择器、属性选择器、伪类选择器标签选择器、伪元素选择器选择器的优先级: ID选择器 > 类选择器 > 标签选择器计算权重[外链图片转存原创 2020-10-25 23:16:46 · 198 阅读 · 0 评论 -
标准盒模型&怪异盒模型
标准盒模型&怪异盒模型盒子模型的组成: 盒子模型一般由:内容(content)、边框(border)、左右外边距(margin-left+margin-right)、左右内边距(padding-left+padding-right)这些部分组成。CSS中盒子模型分为两种:W3C标准盒模型和IE标准盒模型标准盒子模型标准盒模型中,内容区域是由width属性设置的,而内容周围的padding和margin是另外计算的。width/height + padding+border+mar原创 2020-10-21 23:31:09 · 1163 阅读 · 0 评论