前端css部分❤️
自己在工作学习中遇到的问题,以及掌握的知识
Sestid
不忘初心!不负野心!奋于曾经,立于当下,拼于未来。
展开
-
告诉你什么是图片懒加载!
什么是图片懒加载?当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径(这样就只需请求一次),当图片出现在浏览器的可视区域内时,才设置图片真正的路径,让图片显示出来。这就是图片懒加载。通俗一点:1、就是创建一个自定义属性data-src存放真正需要显示的图片路径,而img自带的src放一张大小为1 * 1px的图片路径。2、当页面滚动直至此图片出现在可视区域时,用js取到该图片的data-src的值赋给src。ps:自定义属性可以取任何名字原创 2021-02-26 17:37:54 · 307 阅读 · 0 评论 -
这里有美女!!!!抖音上很火的3D立体动态相册的实现(纯CSS)
展示图:代码:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>纯CSS实现鼠标经过3D立体动态展示图片特效代码</title><link type="text/css" href="css/style.css" r...转载 2019-11-30 14:18:15 · 3976 阅读 · 2 评论 -
CSS实现自动播放相册------Sestid
效果展示:以下是两种实现方式(CSS或者js)CSS代码:<!DOCTYPE html><html><head> <style> html { background-color: black; width: 100%; height: 100%; display: ...原创 2019-11-04 10:41:19 · 893 阅读 · 0 评论 -
纯CSS实现轮播图------Sestid
效果展示 :代码:<!DOCTYPE html><html><head> <style> html { background-color: white; width: 100%; height: 100%; display: flex; flex-direc...原创 2019-11-04 10:30:40 · 164 阅读 · 0 评论 -
纯css实现好看的背景------Sestid
效果图:代码:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l...原创 2019-10-12 16:46:13 · 891 阅读 · 1 评论 -
canvas画布实现的集中效果
1、canvas-画布图片旋转样式图:代码:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <script src="./jquery.js"></script> <title></title> <st...原创 2019-10-12 15:32:15 · 347 阅读 · 1 评论 -
HTML图像,链接,列表,表格等详细介绍------Sestid
1.html图像img标签的使用 <img>标签可以在网页上插入一张图片,它是独立使用的标签,通过“src”属性定义图片的地址,通过“alt”属性定义图片加载失败时显示的文字,以及对搜索引擎和盲人读屏软件的支持。<img src="images/pic.jpg" alt="产品图片" />绝对路径和相对路径像网页上插入图片这种外部文件,需要定义...转载 2019-09-12 13:36:16 · 277 阅读 · 1 评论 -
CSS块元素、内联元素、内联块元素详解------Sestid
元素就是标签,布局中常用的有三种标签,块元素、内联元素、内联块元素,了解这三种元素的特性,才能熟练的进行页面布局。1.块元素块元素,也可以称为行元素,布局中常用的标签如:div、p、ul、li、h1~h6、dl、dt、dd等等都是块元素,它在布局中的行为:支持全部的样式如果没有设置宽度,默认的宽度为父级宽度100%盒子占据一行、即使设置了宽度<!DOCTYPE ht...转载 2019-09-12 11:52:20 · 292 阅读 · 0 评论 -
Js 实现回车键触发登录,并弹出需要输入信息------Sestid
效果图:最简单的捕捉回车键:判断按下的是不是回车键,提示:回车键的键值为 13<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script lang...转载 2019-09-06 16:10:10 · 383 阅读 · 0 评论 -
jQuery 实现input搜索框自动匹配------Sestid
效果动态图:源代码:<!doctype html><html><head><meta charset="utf-8"><title>HTML5 JS实现搜索匹配功能-jq22.com</title><script src="https://libs.baidu.com/jquery/1.11...转载 2019-09-06 16:02:50 · 2061 阅读 · 4 评论 -
鼠标悬停显示下划线(带小特效)------Sestid
<!DOCTYPE html><html lang="en" ><head><meta charset="UTF-8"><title>鼠标悬停下划线</title> <style> body { display: flex; justify-content: center; ...原创 2019-09-06 14:52:52 · 1723 阅读 · 1 评论 -
jQuery实现html网页顶部自适应导航栏(media)------Sestid
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><title>jQuery自适应网页顶部...原创 2019-09-06 14:21:45 · 1273 阅读 · 1 评论 -
在HTML中嵌入百度地图------Sestid
在HTML中嵌入百度地图1.打开网址百度地图APIhttp://api.map.baidu.com/lbsapi/createmap/index.html;2.打开后如图所示,在红框处填写自己想要定位的地址3.点击左侧彩电设置地图,设置参数,宽高好像不太好用,后续可以自己去代码中修改4.点击左侧添加标注即可添加标注,标注自己想要描述的地带你定位,画路线图到达自己标注的位置,...原创 2019-08-27 11:48:01 · 525 阅读 · 0 评论 -
精心整理很实用的前端笔记,看完你就在css上有很深的造诣了!!!
做详细的技术讨论可以加我微信: ↓ ↓↓ ↓ ↓ ↓ ↓目录一、媒体查询media1、定义和使用2、CSS 语法3、媒体类型4、媒体功能5、更多实例6、自己在开发中的总结:二、弹性布局(Flex)1、Flex布局是什么?2、基本概念3、容器的属性3.1 flex-direction属性3.2 flex-wra...原创 2019-08-23 14:51:15 · 649 阅读 · 4 评论