![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
HTMLCSS
想被带飞的鱼
前段小白一枚,正努力学习当中,一起进步吧。
展开
-
改变border-bottom的长度
【代码】改变border-bottom的长度。原创 2022-09-08 13:47:43 · 1360 阅读 · 0 评论 -
CSS 垂直水平居中方法(9 种)
居中方式flex、transform、absolute 等等。也有 CSS3 的网格布局。还有::after 和 ::before 也可以实现居中。原创 2022-01-13 10:06:36 · 308 阅读 · 0 评论 -
css渐变
css渐变一:线性渐变通过方位词定义方向 /* 定义渐变方向,渐变至少两个颜色 */ /* 通过方位词你定义方向 */ background-image: linear-gradient(to top,pink,skyblue);通过角度定义方向 deg (正方向为顺时针,负方向为逆时针) /* 通过角度定义方向 deg (正方向为顺时针,负方向为逆时针)*/ background-image: linear-gradient(135deg,green,blue)原创 2022-04-10 21:46:55 · 152 阅读 · 0 评论 -
css中常用的图标网站和用法还有动画@keyframes和响应式布局
图标法一:图标网站unicode网站:https://unicode-table.com/cn/blocks/使用方式(下载或者引用)<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><!-- <link rel="stylesheet" href="./font-awesome-4.7.0/cs原创 2022-04-10 21:46:38 · 540 阅读 · 0 评论 -
CSS预处理语言less的使用
less一:声明变量(变量作用域问题)关键字:@先建一个less文件在里面写东西,回车会出现css文件(在vscode里面下载一个插件easy less)在less里面的单行注释//不会出现在css中// 单行注释 不会被编译到css中在less里面的多行注释/**/会出现在css中/* ------多行变量 会被编译到css中------ */全局变量(外部声明):当前文件下都可以使用@mycolor:#dcdcdc;.box{ width: 200px原创 2022-04-10 21:46:17 · 361 阅读 · 0 评论 -
BFC(Block Formatting Context)
BFC(Block Formatting Context)一、块级格式化上下文具有 BFC 特性的元素可以看作是隔离了的独立容器,容器里面的元素不会在布局上影响到外面的元素,并且 BFC 具有普通容器所没有的一些特性。二、触发 BFC只要元素满足下面任一条件即可触发 BFC 特性:body 根元素浮动元素:float 除 none 以外的值绝对定位元素:position (absolute、fixed)display 为 inline-block、table-cells、flexover原创 2022-04-10 21:45:51 · 88 阅读 · 0 评论 -
伪元素(用双冒号好区分,其实也能用单冒号)
伪元素(用双冒号好区分,其实也能用单冒号)::before:在之前/* 作为子元素添加 */h1::before{ content: '在之前'; color: aqua;}::after:在之后h1::after{ content: '在之后'; color: aqua;}::first-line:选中第一行/* 选中第一行 */p::first-line{ color: blueviolet;}::first-lett原创 2022-04-09 23:10:02 · 113 阅读 · 0 评论 -
CSS盒模型
盒模型(每一个元素都会生成矩形的盒子)长度单位区别:1em=16pxem相当于父元素rem相当于根元素盒子的分类一个元素产生怎样的盒子,取决于他的css属性display /* 隐藏 不生成盒子*/ display: none; /* 行内元素 可以并排*/ display: inline; /* 块盒 */ display: block;盒子的组成(border和padding都会使盒子称大)margin /*原创 2022-04-09 22:49:34 · 376 阅读 · 0 评论 -
HTMLCSS选择器
选择器1.元素选择器 元素名{声明块} 选中页面上所有的元素h2{ color:pink; /*字体颜色*/ font-size:40px;/*字体大小*/}2.类选择器 .类名{声明块}取名要求:1.不能是纯数字开头2.望名知意,驼峰命名法(rightTop),蛇形命名法(right_top),连字符(right-top)一个元素可以有多个类名<h1 title="sss" class="as">你好</h1><h1 title="sss" class原创 2022-04-09 23:06:26 · 627 阅读 · 0 评论 -
超链接和背景图片和雪碧图
一:超链接target属性target="_self" /*在当前标签页打开*/target="_blank" /*在新的标签页打开*/路径相对路径:是相当于当前资源的位置,只能用于访问站内资源。/*书写格式*/./路径./表示当前资源所在的目录,必须作为相对路径的开始,可以省略../表示返回上一级目录绝对路径:协议//域名/目录列子:http://www/google.com/协议:http域名:www.google.com目录:根目录两种路径比较:原创 2022-04-09 23:08:13 · 134 阅读 · 0 评论 -
CSS列表
列表有序列表 <!-- 有序列表 --> <ol> <li></li> <li></li> <li></li> </ol>无序列表 <!-- 无序列表 --> <ul> <li></li> <li></li>原创 2022-04-09 23:10:57 · 118 阅读 · 0 评论 -
HTMLCSS动画transiton,表格table,表单from
一:动画transition transition: all 1s linear;兄弟元素用+连接.box:hover+.box1多个元素用,h1,p二:蒙版,模态框举例:<style> .box{ width: 300px; height: 300px; position: relative; background-image: url('../img/12.jpg'); background-size: 100原创 2022-04-09 23:13:55 · 541 阅读 · 0 评论 -
HTMLCSS声明冲突和视觉格式化
声明冲突声明冲突:规则属性相同,值不同层叠(解决声明冲突的一种机制)层叠的过程比较优先级(用户样式表>作者样式表(内部,外部,行内)>浏览器样式表)优先级低的声明会被淘汰,高的则胜出比较特殊性(表)特殊性低的声明会被淘汰,高的则胜出比较源次序(代码的先后顺序)最后的胜出若属性值后面根!important是一个重要声明.se_item2_1_2 .pa{ width: 261px; height: 242.5px;原创 2022-04-09 23:12:19 · 402 阅读 · 0 评论 -
弹性布局(display:flex)
弹性布局(display:flex)容器和项目容器:父元素项目:子元素主轴和交叉轴主轴:默认情况下,水平向右交叉轴:默认情况下,垂直向下换行(flex-wrap) /* 创建弹性布局 所有子元素默认在一排显示 */ /* 诺项目总宽度超过容器宽度,不会换行,会等比例压缩项目宽度 */ display: flex; /* 自动换行 */ flex-wrap: nowrap; /* 换行 */ flex-wrap: wrap; /* 反转,倒原创 2022-04-09 22:51:28 · 409 阅读 · 0 评论 -
HTML基础介绍
HTML基础介绍一:W3CW3c:万维网联盟(world wide web Consortium):是目前web技术领域最具有权威和影响力的技术标准机构。Html:超文本标记语言(Hyper text Markup Language):决定文档内容和结构。08年HTML5草案发布,12年形成稳定版本。标签:动词type,meta新增语义化标签和属性去掉了纯展示性的标签添加了canvas,video,audio,本地存储,拖曳语法标记不区分大小写,推荐小写空标记可以不原创 2022-04-09 22:47:24 · 157 阅读 · 0 评论