2024 年 5月随笔档案 - 昨夜小楼听风雨

网页布局------form表单

摘要：1、基础语法 <form></form> （1）表单类型： email ：能够验证当前输⼊的邮箱地址是否合法 url ：验证URL number ：只能输⼊数字，其他输⼊不了，⽽且⾃带上下增⼤减⼩箭头，max属性可以设置为最⼤值，min可以设置为最⼩值，value为默认值。 search ：阅读全文

posted @ 2024-05-31 13:58 昨夜小楼听风雨阅读(78) 评论(0) 推荐(0) 编辑

web------web存储

摘要：HTML5 提供了两种在客户端存储数据的新⽅法： localStorage - 没有时间限制的数据存储 sessionStorage - 针对⼀个 session 的数据存储阅读全文

posted @ 2024-05-30 13:27 昨夜小楼听风雨阅读(5) 评论(0) 推荐(0) 编辑

JavaScript------querySelector/querySelectorAll的使用

摘要：1、基础语法 querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。 querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。属性：指定一个或多个匹配元素的 CSS 选择器阅读全文

posted @ 2024-05-29 09:28 昨夜小楼听风雨阅读(1053) 评论(0) 推荐(0) 编辑

微信小程序------轮播图------纵向轮播图

摘要：页面结构 <swiper indicator-color="white" indicator-active-color="#ff4c91" indicator-dots autoplay interval="3500" duration="1000" vertical circular> <swip 阅读全文

posted @ 2024-05-28 18:34 昨夜小楼听风雨阅读(61) 评论(0) 推荐(0) 编辑

seo------常用工具网址

摘要：1.seo常用检测工具 http://tool.chinaz.com/ 2.百度指数 http://index.baidu.com/ 3.google相关关键字查询 https://adwords.google.com/select/KeywordToolExternal 4.google趋势 ht 阅读全文

posted @ 2024-05-27 09:00 昨夜小楼听风雨阅读(28) 评论(0) 推荐(0) 编辑

微信小程序------全局配置设置

摘要：1、常用配置项目跟目录下app.json就是应用级配置文件属性说明 pages 页面路径列表 window 全局默认窗口表现 tabBar 底部tab栏的实现 networkTimeout 网络超时时间 debug 是否开启调试模式。默认为false requiredBackgroundMod 阅读全文

posted @ 2024-05-26 22:06 昨夜小楼听风雨阅读(186) 评论(0) 推荐(0) 编辑

seo优化-----参考网址

摘要：1、什么是se优化？ SEO是一种让网站在百度，谷歌，雅虎等搜索引擎获得较好的排名从而赢得更多潜在客户一种的网络营销方式 2、title、keywords、description优化（1）title title是位于header标签中的元素用来设置网页的标题信息 title的内容可以方便搜索引擎索阅读全文

posted @ 2024-05-25 13:28 昨夜小楼听风雨阅读(44) 评论(0) 推荐(0) 编辑

html------拖拽属性draggable

摘要：draggable用于定义元素是否可以拖拽，在拖拽过程中鼠标会变成禁止标志 <img draggable="true" /> 下面是一个简单的图片拖拽属性添加 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>draggable属阅读全文

posted @ 2024-05-24 13:41 昨夜小楼听风雨阅读(204) 评论(0) 推荐(0) 编辑

HTML------⾏内元素有哪些？块级元素有哪些？空(void)元素有那些？

摘要：⾏内元素有： a 、b、 span、 img 、input、 select、 strong ；块级元素有： div 、ul、 ol 、li 、dl、 dt、 dd 、h1、 h2、 h3 、h4、 h5、 h6、 p ；空元素，即没有内容的HTML元素。空元素是在开始标签中关闭的，也就是空元素没阅读全文

posted @ 2024-05-23 10:00 昨夜小楼听风雨阅读(35) 评论(0) 推荐(0) 编辑

网页布局------鼠标悬停标签切换内容

摘要：页面结构 <div class="body-brick"> <div class="body-brick-title"> <h2 class="body-brick-title-h2"> 生活电器</h2> <div class="body-brick-title-right"> <ul> <li> 阅读全文

posted @ 2024-05-22 10:39 昨夜小楼听风雨阅读(107) 评论(0) 推荐(0) 编辑

CSS------优先级设置

摘要：选择器格式优先级权重 id选择器 #id 100 类选择器 .classname 10 属性选择器 a[ref=“eee”] 10 伪类选择器 li:last-child 10 标签选择器 div 1 伪元素选择器 li:after 1 相邻兄弟选择器 h1+p 0 子选择器 ul>li 0 后阅读全文

posted @ 2024-05-21 21:59 昨夜小楼听风雨阅读(115) 评论(0) 推荐(0) 编辑

网页布局------video视频设置

摘要：1、基础语法（1）video标签 <video src='' poster='imgs/aa.jpg' controls></video> 属性： poster：指定视频还没有完全下载完毕，或者⽤户还没有点击播放前显示的封⾯。默认显示当前视频⽂件的第⼀针画⾯，当然通过poster也可以⾃⼰指定。阅读全文

posted @ 2024-05-20 13:12 昨夜小楼听风雨阅读(23) 评论(0) 推荐(0) 编辑

微信小程序------功能组件------横向轮播图

摘要：页面结构 <swiper class="content-info-slide" indicator-color="rgba(255,255,255,.5)" indicator-active-color="#fff" indicator-dots circular autoplay> <swiper 阅读全文

posted @ 2024-05-19 09:19 昨夜小楼听风雨阅读(53) 评论(0) 推荐(0) 编辑

网页布局------小米商城官网

摘要：小米商城官网地址小米商城 - Xiaomi 14 Ultra、Redmi K70、MIX FOLD 3，小米电视官方网站一、头部 1、效果图 2、网页结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta na 阅读全文

posted @ 2024-05-18 12:36 昨夜小楼听风雨阅读(466) 评论(0) 推荐(0) 编辑

网页布局------导航栏下标缩放显示

摘要：实现迅雷导航栏下班缩放显示效果https://www.xunlei.com/ .nav-bar li::after{ position:abaolute; bottom:0; left:0; content:""; width:100%; height:2px; background-color:b 阅读全文

posted @ 2024-05-18 08:40 昨夜小楼听风雨阅读(17) 评论(0) 推荐(0) 编辑

网页布局------鼠标点击标签切换内容

摘要：网页结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docu 阅读全文

posted @ 2024-05-17 09:48 昨夜小楼听风雨阅读(12) 评论(0) 推荐(0) 编辑

将博客搬至CSDN

摘要：搬家测试阅读全文

posted @ 2024-05-16 21:44 昨夜小楼听风雨阅读(4) 评论(0) 推荐(0) 编辑

网页布局------小米商城页面布局

摘要：小米商城网址：小米商城 - Xiaomi 14 Ultra、Redmi K70、MIX FOLD 3，小米电视官方网站 ps：自己写的代码，会和网址有所差异网页结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <me 阅读全文

posted @ 2024-05-16 12:54 昨夜小楼听风雨阅读(22) 评论(0) 推荐(0) 编辑

网页布局-----引入文件

摘要：1、js文件引入引用js文件需要使用script标签，其中必须要要引入jquery.min.js文件 <script src="./jquery.min.js"></script> <script src="./header.js"></script> 在编写js文件时需要保证DOM加载完成，可以阅读全文

posted @ 2024-05-16 08:41 昨夜小楼听风雨阅读(17) 评论(0) 推荐(0) 编辑

网页布局-------页面滚动到一定位置显示返回顶部按钮

摘要：页面结构 <div class="slide-shop"> <ul> <li> <a> <div class="slide-shop-div">  <i class 阅读全文

posted @ 2024-05-15 22:29 昨夜小楼听风雨阅读(20) 评论(0) 推荐(0) 编辑

网页布局------鼠标悬浮在图片上，图片进行平移

摘要：实现效果：鼠标悬浮在图片上，图片向上移动一段距离通过平移的方式使图片进行移动 transform:translate(x-value,y-value); 内容向左和向右分别移动将参数设置为正值，向右向上移动将参数设为负值也可以通过设置下面内容单独设置平移方向 transform: transla 阅读全文

posted @ 2024-05-14 16:15 昨夜小楼听风雨阅读(142) 评论(0) 推荐(0) 编辑

网页布局------阴影效果显示

摘要：在制作网页的过程中，经常需要对图片添加阴影效果基本语法如下 box-shadow:h-shadow v- shadow blur spread color outset; 具体参数属性如下参数值描述 h-shadow 表示水平阴影的位置们，可以为负值(必选属性) v-shadow 表示垂直阴影阅读全文

posted @ 2024-05-14 16:04 昨夜小楼听风雨阅读(78) 评论(0) 推荐(0) 编辑

网页布局------样式去除

摘要：1、列表前面标点将列表前面的标点去掉 list-style:none; 去除之后 2、超链接下划线去除将超链接的下划线去掉 text-decoration: none; 阅读全文

posted @ 2024-05-14 12:22 昨夜小楼听风雨阅读(13) 评论(0) 推荐(0) 编辑

web前端面试题(一直更新)

摘要：一、Vue 1、v-show和v-if不同（1）实现方式 v-if是一种条件渲染指令，它会根据表达式的值来插入或删除元素。当表达式的值为真时，元素会被插入到DOM中，否则会从DOM中删除。 v-show是一种简单的显示/隐藏指令，它会根据表达式的值来显示或隐藏元素。当表达式的值为真时，元素会被显示阅读全文

posted @ 2024-05-14 12:22 昨夜小楼听风雨阅读(43) 评论(0) 推荐(0) 编辑

网页布局------同一个div下设置两个绝对定义，其中1个不显示

摘要：问题：下面这张图分别给左侧列表和右侧图片设置绝对定位，其中1个不显示在页面中 web文档流是垂直往下的，后面设置的绝对定位层级比前面高所以覆盖了左侧的列表，需要在左侧列表中设置z-index大于右侧轮播图阅读全文

posted @ 2024-05-14 10:54 昨夜小楼听风雨阅读(13) 评论(0) 推荐(0) 编辑

网页布局-----input点击时出现黑色边框

摘要：点击input时出现下面情况在css中设置下面方法去除黑色边框 outline:none 阅读全文

posted @ 2024-05-13 10:16 昨夜小楼听风雨阅读(231) 评论(0) 推荐(0) 编辑

网页布局------点击获取焦点focus使相邻元素和不相邻元素发生变化

摘要：1、相邻元素使用"+" 实现效果：input边框和按钮放在同一个div下，使用hover可以设置悬浮在input边框时的颜色变化，而需要设置按钮边框的颜色变化则需要使用"+"来添加页面结构 <div class="nav-search"> <input type="search" placehol 阅读全文

posted @ 2024-05-09 10:34 昨夜小楼听风雨阅读(28) 评论(0) 推荐(0) 编辑

网页布局-------三角制作

摘要：使用border设置三角形，通过transparent隐藏多余的内容 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, i 阅读全文

posted @ 2024-05-08 10:29 昨夜小楼听风雨阅读(33) 评论(0) 推荐(0) 编辑

网页布局-----头部设置和头部悬浮显示内容

摘要：小米商城官网地址小米商城 - Xiaomi 14 Ultra、Redmi K70、MIX FOLD 3，小米电视官方网站一、头部 1、效果图 2、网页结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta na 阅读全文

posted @ 2024-05-07 11:39 昨夜小楼听风雨阅读(170) 评论(0) 推荐(0) 编辑

网页布局-----导航栏

摘要：1、导航栏（1）垂直导航栏  <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initia 阅读全文

posted @ 2024-05-06 15:28 昨夜小楼听风雨阅读(721) 评论(0) 推荐(0) 编辑

网页布局------轮播图效果实现

摘要：纯css实现轮播图可以看这里：纯css实现轮播图（自动轮播和手动轮播）效果_☆*往事随風*☆的博客_css轮播图-CSDN博客代码来源： html+css+jquery实现轮播图自动切换、左右切换、点击切换_jquery图片轮播幻灯片效果实现左右滚动图片切换代码-CSDN博客 JS实现轮播图的三种阅读全文

posted @ 2024-05-05 14:22 昨夜小楼听风雨阅读(220) 评论(0) 推荐(0) 编辑

搜索

常用链接

随笔分类

随笔档案

阅读排行榜

评论排行榜

推荐排行榜

最新评论