web前端基础笔记
关注
分享
扫一扫
主要是记录每天学习的知识点，针对前期较为基础的笔记
清风白龙
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
关于字体颜色渐变
关于文字颜色渐变处理，这样会使字体给人的可观性更强，下面介绍怎么让它变成好看有颜色的字体。代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</ti原创 2020-07-13 18:58:08 · 1017 阅读 · 2 评论 -
关于文字阴影和盒子阴影
在做一些项目时，会利用阴影来让页面变得更加优美，但这个东西，用得好就是锦上添花，用得不好那就是雪上加霜；今天主要写写关于它的用法。首先是文字阴影：text-shadow: h-shadow v-shadow blur color;其中：h-shadow: 必需，指水平阴影的位置，可以是负值，为负值时阴影是向左移动；v-shadow: 必需，指垂直阴影的位置，可以是负值，为负值时阴影是向上移动；blur: 可选，模糊的距离；color: 可选，阴影的颜色。一个元素的样式属性text-shado原创 2020-07-13 16:54:46 · 624 阅读 · 0 评论 -
聊天气泡制作
制造聊天气泡，准备一个div类名fa，如下代码： .fa { margin: 100px auto; width: 80px; height: 40px; border: 1px solid #000; position: relative; /* overflow: hidden; */ } .fa::before {原创 2020-07-13 10:43:32 · 613 阅读 · 0 评论 -
三角形制作
关于小型三角形制作，在项目中，我们会用到三角形定位到矩形盒子上就会让盒子产生倾斜效果以达到想要的目的。首先三角形代码如下：div { width: 0; height: 0; border: 50px solid transparent; border-bottom-color: #f00; }效果如图：制作左三角形，注意，这里不是直接让三角形旋转，而是让它的大小变得与定位的父盒子一样高度，**相当于上面三角形的一半，**代码如下：.原创 2020-07-13 10:00:34 · 359 阅读 · 0 评论 -
弹性布局flex
关于弹性布局flex的注意事项设置了弹性布局后display:flex;其子元素的浮动float、clear、和vertical-align会失效。在没有设宽高的盒子加弹性布局后，会影响默认盒子的宽高度。原创 2020-07-13 08:40:20 · 290 阅读 · 0 评论 -
关于精灵图比例缩小
我们需要在原精灵图的基础下做出比例缩小或放大，取决于一个属性：background-size**例如：有一张精灵图的像素是400*400，我们需要将它缩小1倍，那么可以用以下语句：background: url(../images/splite.png) no-repeat -80px;width: 15px;height: 15pxbackground-size: 200px;注意：-80px指缩小后精灵图中图标位置，原精灵图位置应为**-160px**，宽度高度亦是如此，这里是等比例缩小原创 2020-07-12 09:41:39 · 2537 阅读 · 1 评论 -
移动端的文字渐变颜色
关于移动端文字标题渐变主要有以下代码构成： -webkit-background-clip: text; color: transparent; background: linear-gradient(90deg, #45CAFF,#1471FB);效果如图：原创 2020-07-11 15:32:42 · 479 阅读 · 0 评论 -
关于z-index层级关系
重要：层级：z-index；使用条件--------除了定位的static以外，其它定位都可以触发这个属性；浮动、标准盒子无属性；使用场景及注意事项：1.默认不设值后来的盒子居上(上层)；2.父亲设置了z-index*子级无法放在父级下方(无论子级的z-index为何值)；**拼爹效应：其中一个父级小于另一个父级，那么前者子级的z-index无论为何值都不会超过另一个父级的子级的层级；关于z-index层级不起效果的问题：元素本身有浮动；没加定位。有层级效果时注意hover使用在原创 2020-07-08 12:18:01 · 1076 阅读 · 0 评论 -
css定位
定位的方式有：1.position: static;默认值，意为不定位，不影响周边及原盒子；2.position: relative;相对定位，相对自身做位置偏移，会保留原本盒子位置，不会脱离文档流；3.position: absolute;绝对定位，相对body或带有相对定位的盒子作位置偏移，会脱离文档流，不会保留原有盒子位置；4.position: fixed;固定定位...原创 2020-07-08 08:53:37 · 499 阅读 · 0 评论 -
标签显示模式
标签显示模式有三种：1.块级标签：div、p、h1、ul、li、form等标签，水平垂直方向都具有内外边距；2.行内(内联)标签：span、a等标签，只有水平方向具有内外边距；3.行内块标签：img、input等标签，水平垂直方向都具有内外边距；行内标签只能放文本或其它行内标签，不能放块级标签(a标签除外)。★p标签不能放div等块级标签；★a标签可以放div等块级标签；...原创 2020-07-04 18:40:59 · 504 阅读 · 0 评论 -
浮动使用及清除浮动
浮动：让元素脱离文档流，不受父盒子限制；浮动元素的宽高不会撑大父盒子(在父盒子无高度情况下)。浮动元素不会遮盖文字部分，文字会围绕浮动元素；浮动目前功能：1.清除图片之间空白间隙；2.行级元素设宽高。使用场景多是宽高一致的元素整齐排列。清除浮动的方法：1.给浮动元素的父盒子加overflow: hidden;2.在浮动元素最后加样式或类clear: both;3.利用伪元素清除浮动：clearFloat::after { content: ""; clear: both; d原创 2020-07-04 12:04:58 · 183 阅读 · 0 评论 -
关于盒子外边距合并
边距合并，即为当父盒子里的子盒子给它一个margin值时，子盒子的移动会影响父盒子一起移动：这里当子盒子给了margin-top: 20px时，没有达到预想效果，使得与父盒子分离并距离20px。解决方法：一、给父盒子加上overflow: hidden;二、给父盒子加padding: 1px;目的是让子盒子能顺利掉下来，当然这是需要内边距时再使用；三、给父盒子加border: 1px solid #ccc;目的跟二一样是为了撑大盒子，使子盒子顺利与父盒子分隔，当然这是需要边框时再使用。综上建议原创 2020-07-02 17:17:21 · 496 阅读 · 0 评论 -
关于css搜索框制作
搜索框制作有二种方案：思路：都是通过一个div包含input标签，使得宽高一致。这里div、input都要使用怪异盒子box-sizing: border-box;从而让内边距不影响整个盒子大小。第一种：通过给div设置背景颜色，利用padding内边距使input盒子向下压缩从而显示边框为padding值的大小。代码如下：第二种：通过给div设置边框代码如下：建议使用第二种写法更简便。...原创 2020-07-02 16:39:17 · 2084 阅读 · 0 评论