HTML/CSS/H5/JavaScript
学习笔记
Lhy@@
不写博客的程序媛不是记性好的程序媛。
展开
-
CSS 实现父组件半透明,子组件不透明
父组件半透明,子组件不透明,达到部分组件高亮的效果;应用场景: 当 input 输入框获取焦点的时候,给 body 添加半透明效果,input 组件不透明;举例子:( 应用到CSS3的rgba属性)background: #rgba(88, 88, 88, 0.3);...原创 2021-06-11 12:22:44 · 476 阅读 · 2 评论 -
CSS 元素hover状态下控制另一元素的显示与隐藏
CSS 元素hover状态下控制自身样式,子元素样式,以及兄弟元素样式原创 2021-04-01 09:46:01 · 6163 阅读 · 0 评论 -
CSS3 之box-shadow盒子阴影
语法:box-shadow:h-shadow v-shadow blur spread color inset;值 描述 h-shadow 必需。水平阴影的位置,允许负值 v-shadow 必需。垂直阴影的位置,允许负值 blur 可选,模糊的距离 spread 可选,阴影的尺寸 color 可选,阴影颜色 inset 可选,将外部阴影改为内部阴影 ...原创 2021-03-09 15:41:41 · 222 阅读 · 0 评论 -
CSS-3D转换+ perspective+transform-style
perspective:如果想要网页产生3D效果需要透视,perspective(理解成3D物体投影在2D平面内) 模拟人类的视觉位置 也称为视距:眼睛到屏幕的距离 距离越近,平面成像越大;越远成像越小 单位是像素透视 写在被观察元素的父盒子上!!!...原创 2021-03-04 11:35:54 · 208 阅读 · 1 评论 -
CSS animation介绍+大数据热点图案例+打字机显示案例+奔跑的小熊案例
详细代码:用到的素材背景:bear小熊图片,所应用到的知识:原创 2021-03-03 17:01:24 · 287 阅读 · 1 评论 -
CSS3 transform转换
2D转换:是改变二维坐标上的位置。1、translate:移动效果,且不会影响其他盒子。 对行内元素没有效果像同样有移动效果的方法:1、margin位移;2,position定位。都会影响其他盒子语法:transform:translate(x,y); //水平移动 x,垂直移动 y,1、x=50px;2、x=50%,自身宽度的50%,应用场景:让一个盒子水平垂直居中 .box3{ position: rel...原创 2021-03-02 17:14:34 · 616 阅读 · 0 评论 -
网站TDK三大标签SEO优化介绍(前端)
SEO : 搜索引擎优化。TDK:T(title标签)、D(description)、K(keyword)参照京东的网页部分代码:<head> <meta charset="utf8" version='1'/> <title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物!</title> <meta name="viewport" content="width=device-width, initi原创 2021-03-01 11:59:16 · 676 阅读 · 0 评论 -
CSS3新特性calc()函数、过渡transition
一、calc()此Css函数让你在声明css属性值时执行一些计算。例:width:calc(100% - 80px);运算包括:" + ","- "," * ","/ ",其中运算符前后需要用空格隔开;二、过渡transition(重要)语法:transition:要过渡的属性,花费的时间,运动曲线,何时开始;属性:想要改变的属性,比如宽度高度,内外边距都可以。如果想要所有属性变化过渡,写一个all, 花费时间:单位是秒,(必须写单位),比如 5s; 运动曲线:默...原创 2021-02-27 15:53:17 · 431 阅读 · 0 评论 -
常见布局小技巧----文字围绕浮动元素、分页按钮、三角形绘制
惊喜知识点:清除浮动元素。(详情参考:https://blog.csdn.net/Lhy_JL/article/details/113877618) 文字围绕浮动元素案例 运用行内块元素特性绘制分页图标 三角形强化版的绘制案列代码下载:案列效果图:...原创 2021-02-25 12:04:03 · 97 阅读 · 0 评论 -
CSS字体图标添加、三角形的做法
精灵图放大缩小会失真,字体图标不会。字体图标:展示的是图标,本质是字体。轻量级:一个图标字体要比一系列图像要小,一旦字体加载了图标就会渲染出来,减少服务器请求; 灵活性:本质其实是文字,可以随意调整大小,颜色,阴影等; 兼容性:几乎所有浏览器都支持。总结:如果遇到一些结构和样式比较简单的小图标,可用字体图标。 如果遇到一些结构和样式比较复杂的小图标,就用精灵图。一、字体图标的下载:1.阿里妈妈字体库:https://www.iconfont.cn/(免费)2.https://i原创 2021-02-24 17:05:31 · 488 阅读 · 0 评论 -
CSS精灵图(CSS sprite)介绍以及使用
1、为什么需要精灵图?一个网页中往往会应用很多小的背景图像,当王爷中图像过多时,服务器就会频繁的接收和发送请求图片,造成服务器请求压力过大,这将大大降低页面的加载速度。因此,为了有效的减少服务器接收和发送请求的次数,提高页面的加载速度,出现了CSS精灵技术(也称CSS Sprites/CSS雪碧)。核心原理:将一些小图片整合到一张大的图片中,请求一次就好了。2、精灵图的使用前提:精灵技术主要针对背景图使用,精灵图在线测量工具:http://www.spritecow.com/原创 2021-02-24 15:54:53 · 712 阅读 · 0 评论 -
CSS元素的显示与隐藏方法(display、visibility、overflow)
主要方法有:display显示隐藏 visibility显示隐藏 overflow (溢出显示隐藏)一、display:none ;隐藏元素不占原有位置display:block ; 也有显示元素的意思。二、visibility:visible;可见visibility:hidden;隐藏,且占有原有位置三、对溢出的部分进行隐藏,overflowoverflow:scroll;隐藏溢出内容,始终显示滚动条,overflow ...原创 2021-02-24 15:05:54 · 432 阅读 · 0 评论 -
浮动元素与标准流的文字层叠,绝对定位和固定定位与标准流的文字层叠
浮动、绝对定位和固定定位的区别:绝对、固定定位,浮动都是脱标的。 设置了绝对、固定定位属性的元素类似有 float 元素属性(行内块元素);例如 p 元素设置position:absolute,可直接设置p的width,height 浮动元素会压住下面的标准流盒子,但是不会压住下面标准流的文字(图片)。 绝对、固定定位会完全压住下面的标准流盒子。浮动之所以不会压住文字,因为浮动产生的最初目的是为了做文字环绕效果,文字会围绕浮动(float)元素!1、首先两个标准的盒子,排列顺序是...原创 2021-02-24 10:48:40 · 602 阅读 · 0 评论 -
z-index:0与z-index:auto的区别
区别:z-index: 0 会创建一个新的层叠上下文 z-index: auto 不会去创建 z-index: 0 会在 z-index: auto 遵守后来者居上层叠<head> <style> .parent{ position: relative; width: 300px; height: 300px; border: 1px solid #4c4c4c; } .box1,.box2,.b原创 2021-02-22 11:54:50 · 418 阅读 · 0 评论 -
CSS定位的叠放次序z-index,简单介绍
在使用定位布局的时候,可能出现盒子重叠现象,此时可以使用 z-index 来控制盒子的前后次序。语法:选择器 {z-index:1}数值可以为负数,数值越大,越靠上,越靠近用户。 如果值相同,则按照书写顺序,后来者居上。 只有定位的盒子才有 z-index 属性。<head> <style> .parent{ position: relative; width: 300px; height: 300px; .原创 2021-02-22 11:45:24 · 350 阅读 · 0 评论 -
css中设置了border-radius却不起效果问题
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>定位</title> <style> .test1 { di.原创 2021-02-21 23:38:56 · 13266 阅读 · 5 评论 -
CSS之定位模式介绍(重要)、子绝父相、
一、为什么需要定位?1、标准流或者浮动能实现,某个元素可以自由的在一个盒子内移动位置,并且压住其他盒子?2、当我们滚动窗口的时候,某些盒子是固定在某个位置的。以上效果,标准流和浮动很难快速实现,此时需要定位来实现。所以:1、浮动(float)可以让多个块级盒子一行没有缝隙排列显示,经常用于横向排列盒子。2、定位(position)则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置,并且可以压住其他盒子。二、定位组成定位:将盒子定在某一位置,所以定位也是在摆盒子,.原创 2021-02-21 17:55:46 · 661 阅读 · 0 评论 -
CSS之浮动与标准流、清除浮动的方法
1. 传统网页布局的三种方式网页布局的本质----用CSS来摆放盒子,把盒子摆放到相应位置。CSS(PC端)提供了三种传统的布局方式(即盒子如何进行排列):普通流(标准流)浮动定位1.1 标准流所谓的标准流:就是便签规定好默认的方式排列块级元素会独占一行,从上向下排列。行内元素会按照顺序,从左到右顺序排列,碰到父元素边缘则自动换行。1.2 浮动情景一:标准流,如何让多个块级盒子(div)水平排列一行?盒子设置 display: inline-block;;缺点:盒子之间默原创 2021-02-20 14:42:50 · 203 阅读 · 0 评论 -
CSS之盒子模型,padding改变实际盒子大小,margintop塌陷问题
此处插播哔哩哔哩Pink老师的RAPborder是边框,content内容哒;padding内边距,边框与内容的距离主要就靠它;margin外边距,盒子与盒子的距离它说了算。原创 2021-02-19 11:17:17 · 1195 阅读 · 0 评论 -
CSS常见的复合属性
fontfont:font-style font-weight font-size/line-height font-familymarginpaddingbackground推荐顺序: color url no-reapt fixed position.原创 2021-02-18 22:20:47 · 811 阅读 · 0 评论 -
Emment语法快速生成HTML标签
生成标签:直接输入标签名+按tab键/* div,然后tab键*/<div></div>生成多个相同的标签/*输入:div*5 (*之间不要空格),然后tab键*/ <div></div> <div></div> <div></div> <div></div> <div></div>生成父子级关系的标签/*输入:div.原创 2021-02-18 17:31:09 · 285 阅读 · 0 评论 -
DOCTYPE、lang与charset
<!DOCTYPE html> 文档类型声明,作用是告诉浏览器使用的那种HTML版本来显示网页注意:<!DOCTYPE>位于文档的最前面,在 html标签前面。它不是html标签,它是文档类型声明标签。<html lang='en'> lang属性用来定义文档的语言种类。<meta charset='UTF-8'>字符集(character set)是多个字符的集合,一遍计算机能够识别和存储各种文字。...原创 2021-02-18 16:46:56 · 113 阅读 · 0 评论 -
坑:CSS nth-child() 结构伪类;选择前几个
例如:子元素的前三个,n为(0,1,2,3,4,5……)首先:正确:nth-child(-n+3)错误:nth-child(3-n);原创 2020-09-28 10:54:40 · 823 阅读 · 0 评论