前端基础
文章平均质量分 75
喵帕斯_喵太
前端新人,会从零记录自己的学习知识,遇到问题和解决办法。欢迎大家一起讨论更优质的代码结构。
展开
-
渐变/过渡/2D变换/3D变换/动画
线性渐变效果图如下①:代码如下: <style> .box{ width: 330px; height: 300px; border: 1px solid #000; /* 颜色可以填两种以上,但是注意百分比 */ background-image: linear-gradient(to top,pink 50%,red); ..原创 2021-03-30 14:31:37 · 234 阅读 · 0 评论 -
媒体查询/最大宽度和最小宽度/
了解媒体查询 @media 媒体查询screen 屏幕and 并且width: 600px 宽度600px 当媒体查询检测到屏幕宽度为 600px 的时候,执行花括号内写 css 代码。 注意:媒体查询是满足条件后,才会执行花括号内的代码,不满足则不执行。 <style> /* @media 媒体查询 s原创 2021-04-09 11:34:10 · 3873 阅读 · 0 评论 -
:after和:before的作用及使用方法(转载)
:after和:before的作用及使用方法一起写建议div::before 和 div:after 方便区分:before 和 :after 的主要作用是在元素内容前后加上指定内容,示例:HTML代码:<p>你好</p>CSS代码:复制代码p:before{ content: 'Hello'; color: red;}p:after{ content: 'Tom'; color: red;}效果如图:以上代码是:bef转载 2021-04-01 21:47:50 · 410 阅读 · 0 评论 -
浮动框重叠问题/京东三角案例/浮动跟行内块元素的区别/margin负值的用处/
浮动后加外边框元素边框重叠问题如图所示,当相同的拥有外边框的元素浮动后会产生外边框重叠的问题。解决方法如下:margin-left: -1px;在浮动的外边框元素加入margin负值。浮动元素加入hover后边框显示不全问题如图上所示。解决方法如下:<style> ul li { position: relative; float: left; list-..原创 2021-03-24 20:05:21 · 213 阅读 · 0 评论 -
字体图标,导入/强制省略号显示/利用定位 hover 案例,鼠标移入显示,离开消失/
制作字体图标自己制作图标或者是美工提供给我们 (我们练习自己制作图标)阿里巴巴字体图标库icomoon登录帐号按照需求,选择的对应风格字体图标库选择图标库中的对应的小图标将其添加到 项目中选择 使用方式 font class点击下载至本地在css中来使用字体图标在自己的项目目录中 新建文件夹 fonts 用来存放字体图标文件将字体图标文件引入到 fonts 中把 附带的字体图标样式文件 移动到 css文件夹内 css/iconfont.css修..原创 2021-03-22 10:38:21 · 236 阅读 · 0 评论 -
为什么要清除浮动与清除浮动的办法/基础公共样式/绝对定位,相对定位,黏性定位/
为什么需要清除浮动?目地是让父盒子重新拥有高度清除浮动的方式 4种额外标签法父元素 添加overflow overflow: hidden; 图方便的时候可以用下(不推荐 企业中做 项目 不用使用它来清除浮动 )父元素 单伪元素法** :after复制 清除浮动的代码到你的css文件上 .clearfix { zoom: 1; } .clearfix:after { display: block; cl..原创 2021-03-21 20:54:28 · 164 阅读 · 0 评论 -
盒子模型,模块,内减模式/边框属性/内外边距/精灵图使用/外边距合并问题/阴影/盒子阴影/嵌套元素外边距塌陷
盒子模块四大部分实际内容内边距边框外边距边框 borderborder-width 边框宽度5pxborder-style 边框样式solid 实现 常用dashed 虚线 少用none 没有边框border-color 边框颜色black 黑色内边距 padding控制 内容和边框之间的距离div{ padding:10px; /* 上 右 下 左 */ padding:10..原创 2021-03-21 19:32:56 · 319 阅读 · 0 评论 -
字体属性/文本属性/元素的显示模式/背景图片 颜色 位置 平铺/图片空隙解决办法
字体属性可以分为以下几个大类1 .字体类型2.大小3. 粗细4. 斜体字体类型 font-familydiv { font-family:华文彩云 , 宋体, 微软雅黑 ;}注意:一般是不推荐用中文写法,多字体是防止浏览器不识别,如果不识别第一个就会自动识别下一个以此类推。字体大小 font-size值越大 字越大div { font-size: 80px;}字体粗细 font-weightdiv { font-weight:70原创 2021-03-21 14:14:39 · 365 阅读 · 0 评论 -
表单域/文本域/按钮/CSS选择器,类名,伪类/CSS样式命名 三大特性/去除轮廓/鼠标小手/占位符
表单表单的作用是手机用户信息的。组成部分表单域表单控件提示信息<form> ...</form>表单元素三大类input 输入select 选择textarea 文本域input文本<input type="text" />密码<input type="password" />单选框<input type="radio" />都是通过name来分组..原创 2021-03-20 20:52:50 · 661 阅读 · 0 评论 -
a标签超链接跳转/表格/合并单元格
a标签超链接跳转<a href="跳转目标" target="窗口打开方式">文本或图像</a>`- href`:目标位置- `target`:窗口打开方式 - `_self`(默认)在当前窗口打开 - `_blank` 在新窗口中打开- 链接标签的 `href` 属性最重要,指定链接跳转的目标位置。对外部跳转: https://www.对内部某个文件跳转直接写文件名字跟img标签同样。跳转示例- <a href="#nav">跳</a&g原创 2021-03-20 15:02:20 · 548 阅读 · 0 评论