HTML +CSS
此专栏是HTML和CSS的内容
逝者如斯夫。
这个作者很懒,什么都没留下…
展开
-
前端面试题总结
记录遇到的前端面试题原创 2022-06-09 14:45:00 · 92 阅读 · 0 评论 -
随手记录。
随手记原创 2022-06-06 16:15:25 · 71 阅读 · 0 评论 -
HTML/CSS面试题
CSS面试题总结原创 2022-06-20 11:09:43 · 123 阅读 · 1 评论 -
VSCode编辑器的位置
所有的插件存放在C:\Users\Administrator(你的名字)\.vscode原创 2021-12-10 12:16:23 · 411 阅读 · 0 评论 -
CSS鼠标样式
鼠标样式,防拖拽文本域,去表单边框原创 2021-09-13 08:23:45 · 58 阅读 · 0 评论 -
rem(js驱动和媒体查询驱动)、网格布局
rem(js驱动和媒体查询驱动)、网格布局原创 2021-08-12 14:10:49 · 66 阅读 · 0 评论 -
眼球移动动画
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <tit.原创 2021-08-12 09:31:32 · 108 阅读 · 0 评论 -
半水球动画
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <tit.原创 2021-08-12 09:29:20 · 55 阅读 · 0 评论 -
Less基础
less运用原创 2021-08-12 09:17:04 · 47 阅读 · 0 评论 -
css字体图标
需要先将字体放到项目下<style> @font-face { /* 名字随意取 */ font-family: 'heibai'; src: url("font/maobi.ttf"); } p { font-family: 'heibai'; } </style>字体图标把需要用到的字体图标加入购物车原创 2021-08-10 21:51:42 · 98 阅读 · 0 评论 -
钟表的lodding效果
/*改变中心点*/ transform-origin:centerbottom;<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content...原创 2021-08-09 11:39:15 · 82 阅读 · 0 评论 -
旋转立方体
左手螺旋定则左手四指握拳,拇指指向要旋转的轴的正方向,四指指向就是正值<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-widt原创 2021-08-09 11:23:27 · 53 阅读 · 0 评论 -
css轮播图
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <tit.原创 2021-08-09 10:35:45 · 41 阅读 · 0 评论 -
CSS动画animation
动画属性名 动画持续时间 动画延迟时间 动画速度曲线linear匀速 infinite循环 alternate 动画轮流反向播放 动画状态 paused/running 方向播放可以这么替代 @keyframes changediv { 0% { width: 100px; height: 100px; background-color: tomato; } ..原创 2021-08-09 10:33:12 · 56 阅读 · 0 评论 -
阴影、渐变、过渡、变形、滤镜
阴影横向偏移量 纵向偏移量 模糊距离 阴影颜色 注:模糊距离不能为负横轴向右为正,纵轴向下为正box-shadow:横向偏移量 纵向偏移量 模糊距离 阴影颜色 ; text-shadow:5px 5px 50pxpink;(文本阴影)...原创 2021-08-06 17:26:57 · 57 阅读 · 0 评论 -
CSS变量
1.什么是css变量自定义属性的通俗叫法2.如何定义:root { --m: pink; }root是根,任何标签都能调用,也可以写在父元素里,子元素向上检索3.如何调用var(css变量名) p { color: var(--m); }4.有什么作用提取相同的属性值 简化代码...原创 2021-08-06 17:13:16 · 49 阅读 · 0 评论 -
弹性盒模型 怪异盒模型
怪异盒模型box-sizing:border-box;怪异盒模型的border和padding是内嵌的,不增加盒模型面积 如果内部空间不够,会向外扩展弹性盒模型声明要使用弹性盒模型display:flex / display:inline-flex适用于父元素display:flex 宽占满全屏 display:inline-flex 宽高由子级内容撑开排列顺序flex-direction:;row 横向,左到右 flex-direction: re...原创 2021-08-06 11:26:52 · 93 阅读 · 0 评论 -
display、visibility 、overflow
display 隐藏div { display: none | block; } none隐藏元素 block除了可以转换成块元素还可以显示元素 注意:隐藏后的元素不占用原来的位置 visibility原创 2021-08-03 14:02:33 · 154 阅读 · 0 评论 -
CSS新增选择器
新增的属性选择器注意:类选择器、属性选择器、伪类选择器,权重都是10。选择符 简介 ①E[att] 选择具有att属性的E元素 ②E[att="val"] 选择具有att属性且属性值等于val的E元素 ③E[att^="val"] 选择具有att属性且值以val开头的E元素 ④E[att$="val"] 选择具有att属性且值以val结尾的E元素 ⑤E[att*="val"] 选择具有att属性中含有val的E元素 <style&g原创 2021-08-03 08:04:40 · 282 阅读 · 0 评论 -
表单标签和属性
input可以通过type属性值,改变元素的样式action: 后台地址 method: 请求方式get:会明文展示(拼在网址上)不够安全 但更快捷 pose:不会明文 更安全 传输内容比较大(比如上传文件)neme :给后台传值的描述(key、键) placeholder:提示文字 value:表单元素的默认值...原创 2021-08-02 11:34:48 · 213 阅读 · 0 评论 -
表格的基本结构和使用
表格的基本结构table 表格 thead 表头 tbody 表格主体 tr 表格的行 td 表主体的列table定义表格width 宽 height 高 border 边框 cellspadding (定义内容和单元格的距离,如果指定为0则单元格的线会合并成一条) bgcolor 背景色 align 对齐方式合并单元格rowspan跨行合并 colspan 跨列合并 合并后把多余的单元格删掉 <tbody> <...原创 2021-08-02 11:16:31 · 325 阅读 · 0 评论 -
字体的样式
字体font-size:13px; 【字体大小,默认是16px,最小是8px】 color:blue; 【字体颜色】 font-weight:300; 【字体粗细,默认是600,最大是900,最小200】 font-style:italic;【字体样式】 font-family:'CourierNew',Courier,monospace;【字体】样式标签<strong>加粗</strong> <b>加粗</b>...原创 2021-08-02 11:09:36 · 115 阅读 · 0 评论 -
HTML新增标签
新的结构标签<header>头部</header> <footer>底部</footer> <aside>侧边栏</aside> <main>主体</main> <article>文章</article> <nav>导航</nav> <section>区域</section>...原创 2021-08-02 10:45:41 · 296 阅读 · 0 评论 -
背景图片的设置
大小设置background-size:auto; background-size:10px; background-size:100%; background-size:cover; background-size:contain;属性说明:1、auto:默认值,不改变原始图片的大小。2、px:两个值分别问宽、高,只设一个值时将进行等比缩放。3、百分比:一般设两个值,一个值时就是正方形。4、cover:覆盖, 用背景图等比例缩放填满整个容器。5、contain:容纳,即将背景图片等原创 2021-07-31 14:16:41 · 291 阅读 · 0 评论 -
布局里居中方法总结
块级元素水平居中给自己设置margin: 0 auto;(上下边距可以给值,auto是自适应)其他属性元素水平居中给父元素设置 text-align: center;单行文本垂直居中给父元素设置 line-height:父元素高度; (行高等于父元素的高度,因为当行文本在一行内默认垂直居中)多行文本居中定位或设置margin...原创 2021-07-31 10:39:30 · 127 阅读 · 0 评论 -
CSS定位
定位模式语法:div { position: static | relative | absolute | fixed | sticky; }static 静态定位(默认值) ralative 相对定位 absolute 绝对定位 fixed 固定定位 sticky 粘性定位静态定位 (static)默认值,无定位(标准流)相对定位(ralative)根据原来的位置移动 保留原来的位置(标准流) 经常搭配绝对定位一起用absol...原创 2021-07-29 20:03:11 · 60 阅读 · 0 评论 -
三大标签和浮动
标签块级标签独占一行(上下排列) 支持宽高设置(不设置宽高的情况下,高度由内容撑开,宽度撑满父容器) 常用块级标签:段落标签<p>、标题标签<h1>~ <h6>、<div>、 <ul>、<li>、<ol> 【ul(ol)只能嵌套li标签,li能嵌套任何标签】行内标签 排成一行 不支持设置宽高,宽高由内容撑开 不支持上...原创 2021-07-29 16:18:33 · 164 阅读 · 0 评论 -
CSS盒模型(border、padding、margin、content)
边框(border)边框复合语法:border-width | border-style | border-color;(无先后顺序) border-style:solid(实线) dashed(虚线) dotted(点线); border-top:2px solid red ; border-bottom: ; border-left: ; border-right: ; border会影响盒子实际大小,实际大小=内容宽度 + border宽度 * 2内边距(padding)...原创 2021-07-28 23:11:36 · 168 阅读 · 0 评论 -
前端的岗位以及初步了解
一、产品经理 产品经理主要负责产品与客户商定需求二、UI设计师 UI设计师负责产品外观设计三、后台工程师 后台工程师主要负责后台数据处理。四、测试 测试的工作就是测试产品的Bug五、前段工程师 前端工程师负责前端内容开发,前端又分为三大类:web前端、Android前端和iOS前端。web前端主要包含三种技术,html、css和JavaScript。简单来说,html是超文本标记语言,css是层叠样式表...原创 2021-07-28 21:33:59 · 5318 阅读 · 0 评论