HTMLCSS
想被带飞的鱼
前段小白一枚,正努力学习当中,一起进步吧。
展开
-
改变border-bottom的长度
【代码】改变border-bottom的长度。原创 2022-09-08 13:47:43 · 1485 阅读 · 0 评论 -
CSS 垂直水平居中方法(9 种)
居中方式flex、transform、absolute 等等。也有 CSS3 的网格布局。还有::after 和 ::before 也可以实现居中。原创 2022-01-13 10:06:36 · 323 阅读 · 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 · 169 阅读 · 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 · 557 阅读 · 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 · 372 阅读 · 0 评论 -
BFC(Block Formatting Context)
BFC(Block Formatting Context) 一、块级格式化上下文 具有 BFC 特性的元素可以看作是隔离了的独立容器,容器里面的元素不会在布局上影响到外面的元素,并且 BFC 具有普通容器所没有的一些特性。 二、触发 BFC 只要元素满足下面任一条件即可触发 BFC 特性: body 根元素 浮动元素:float 除 none 以外的值 绝对定位元素:position (absolute、fixed) display 为 inline-block、table-cells、flex over原创 2022-04-10 21:45:51 · 93 阅读 · 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 · 126 阅读 · 0 评论 -
CSS盒模型
盒模型(每一个元素都会生成矩形的盒子) 长度单位区别: 1em=16px em相当于父元素 rem相当于根元素 盒子的分类 一个元素产生怎样的盒子,取决于他的css属性display /* 隐藏 不生成盒子*/ display: none; /* 行内元素 可以并排*/ display: inline; /* 块盒 */ display: block; 盒子的组成(border和padding都会使盒子称大) margin /*原创 2022-04-09 22:49:34 · 404 阅读 · 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 · 642 阅读 · 0 评论 -
超链接和背景图片和雪碧图
一:超链接 target属性 target="_self" /*在当前标签页打开*/ target="_blank" /*在新的标签页打开*/ 路径 相对路径:是相当于当前资源的位置,只能用于访问站内资源。 /*书写格式*/ ./路径 ./表示当前资源所在的目录,必须作为相对路径的开始,可以省略 ../表示返回上一级目录 绝对路径:协议//域名/目录 列子:http://www/google.com/ 协议:http 域名:www.google.com 目录:根目录 两种路径比较:原创 2022-04-09 23:08:13 · 143 阅读 · 0 评论 -
CSS列表
列表 有序列表 <!-- 有序列表 --> <ol> <li></li> <li></li> <li></li> </ol> 无序列表 <!-- 无序列表 --> <ul> <li></li> <li></li>原创 2022-04-09 23:10:57 · 125 阅读 · 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 · 560 阅读 · 0 评论 -
HTMLCSS声明冲突和视觉格式化
声明冲突 声明冲突:规则属性相同,值不同 层叠(解决声明冲突的一种机制) 层叠的过程 比较优先级(用户样式表>作者样式表(内部,外部,行内)>浏览器样式表) 优先级低的声明会被淘汰,高的则胜出 比较特殊性(表) 特殊性低的声明会被淘汰,高的则胜出 比较源次序(代码的先后顺序) 最后的胜出 若属性值后面根!important是一个重要声明 .se_item2_1_2 .pa{ width: 261px; height: 242.5px;原创 2022-04-09 23:12:19 · 421 阅读 · 0 评论 -
弹性布局(display:flex)
弹性布局(display:flex) 容器和项目 容器:父元素 项目:子元素 主轴和交叉轴 主轴:默认情况下,水平向右 交叉轴:默认情况下,垂直向下 换行(flex-wrap) /* 创建弹性布局 所有子元素默认在一排显示 */ /* 诺项目总宽度超过容器宽度,不会换行,会等比例压缩项目宽度 */ display: flex; /* 自动换行 */ flex-wrap: nowrap; /* 换行 */ flex-wrap: wrap; /* 反转,倒原创 2022-04-09 22:51:28 · 424 阅读 · 0 评论 -
HTML基础介绍
HTML基础介绍 一:W3C W3c:万维网联盟(world wide web Consortium):是目前web技术领域最具有权威和影响力的技术标准机构。 Html:超文本标记语言(Hyper text Markup Language):决定文档内容和结构。 08年HTML5草案发布,12年形成稳定版本。 标签: 动词type,meta 新增语义化标签和属性 去掉了纯展示性的标签 添加了canvas,video,audio,本地存储,拖曳 语法 标记不区分大小写,推荐小写 空标记可以不原创 2022-04-09 22:47:24 · 166 阅读 · 0 评论