![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
web学习
文章平均质量分 61
王小玖
正在努力中的小胖子。。。。。
展开
-
css/js瀑布流效果
纯 css 写瀑布流1.multi-columns 方式:通过 Multi-columns 相关的属性column-count、column-gap配合break-inside来实现瀑布流布局。设置这样的 html 结构: <div class="masonry"> <div class="item"> <div class="item_content conte...转载 2022-02-24 17:37:55 · 2566 阅读 · 0 评论 -
Jq楼层跳跃+滚动高亮显示对应的楼层
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>楼层跳跃</title> <style> * { padding: 0; margin: 0; } ul, li { list-style: none; } div { width: 100%; heig...原创 2022-01-07 15:15:30 · 373 阅读 · 2 评论 -
iconfont字体图标的使用方法--超简单!
iconfont字体图标的使用方法--超简单!我之前因为项目用bootstrap比较多,所以使用font awesome字体图标比较多,后来接触到了iconfont,发现想要的什么图标都有,还可以自定义图标,非常强大!之前看了一波教程,觉得繁琐,自己弄明白后感觉如此简单,做了这么个简单教程,直接上图,简单粗暴,避免新手走弯路,这里讲解的默认是元素使用类名;step 1:百度iconfont,找到阿里巴巴矢量图标库官网,然后注册登录,或者用github登录也行,此步骤跳过;step 2:找到图标管转载 2021-10-15 10:47:20 · 582 阅读 · 0 评论 -
行内块元素高度撑满父元素
最近遇到了一个css问题;问题如下父元素不设置高度,子元素全为(display:inline-block),左侧内容撑开高,想要右侧子元素高度为100%(即与左侧子元素高一致),使用height:100%,并不好使,始终是内容撑开的高,而非父级高,<li v-for="list in lists”> //父元素<div>{{list.name}}</div> //左侧子元素<div><p v-for="item in list.ch..转载 2021-08-13 17:23:00 · 1485 阅读 · 0 评论 -
纯CSS文字颜色渐变
在web前端开发过程中,UI设计师经常会设计一些带渐变文字的设计图,在以前我们只能用png的图片来代替文字,今天可以实现使用纯css实现渐变文字了。下面就介绍3中实现方式供大家参考!基础样式: 1 .gradient-text{text-align: left;text-indent:30px;line-height: 50px;font-size:40px;font-weight:bolder; position: relative; } 第一种转载 2021-08-07 16:12:04 · 194 阅读 · 0 评论 -
JQ点击出现弹框,背景加蒙版(仿关注微信公众号,样式自己可改)
<p class="mua"> 点击关注 </p> <div class="marsk-container"> <div class="tkyy_con"> <div> 发送给朋友 </div> <div> 收藏 </div> <div> 保存图片 </div> <div> 搜一搜 </div> <.原创 2021-07-08 13:33:50 · 461 阅读 · 0 评论 -
Bookstrap轮播-爱了爱了
<!DOCTYPE html><html><head> <title>Bootstrap 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.o原创 2021-06-21 10:26:16 · 214 阅读 · 0 评论 -
JQ获取屏幕宽度,以及分辨率发生改变时既触发函数
获取屏幕宽度var winWide = $(window).width(); console.log(winWide);分辨率改变时既触发函数$(window).resize(function(){})小案例<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script> <script> $(function(){原创 2021-06-17 19:14:16 · 1056 阅读 · 2 评论 -
不同分辨率下执行不同的JS(JQ)代码
方法一$(function(){ //判断屏幕宽度 var winWide = window.screen.width; //获取当前屏幕分辨率 alert("winWide"); var wideScreen = false; if(winWide <= 1024){ //1024及以下分辨率 //这里写要加载的代码 } else{ //大于1024的分辨率 //这里写要加载的代码 }}) 方法二 <script type="text/javascript转载 2021-06-17 18:08:46 · 1014 阅读 · 0 评论 -
JQ购物车多个商品数量加减
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Co.转载 2021-06-17 11:13:22 · 677 阅读 · 0 评论 -
HTML下拉框二级菜单
一、form表单 <div> <form> <div> <!-- 下拉框 --> <select> //默认项为第一个 <option>广州</option> <option>深圳</opt原创 2021-02-26 10:20:47 · 7660 阅读 · 0 评论 -
JQ下拉二级菜单(手风琴式)右侧+与-像替换
点击出现对应的下拉菜单,切右侧+、-号相互变换<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>www.jb51.net jQuery手风琴效果</title> <style> .wawa{ width: 200px;height: auto;margin:50px auto;border-radius: 5px原创 2021-06-04 18:06:36 · 411 阅读 · 0 评论 -
vs code部署vue项目所踩的坑
一、部署运行vue的项目必配环境node.js之前写过https://blog.csdn.net/weixin_46019220/article/details/115482195二、将项目在VS code中打开后运行VS code下载,版本自己选VS下载后为英文状态,在左边的菜单按钮中点击最后一个按钮后在右边的搜索框输入chinese,点击install后,系统会自己下载安装。完成后即为中文版本了(切换中文版VS)小技巧:html文件右键可直接运行:以上同处搜索open后选择红色框框所选中的原创 2021-04-21 21:12:55 · 187 阅读 · 0 评论 -
01-HTML(web复习笔记)
先放一张图吧!!常用的浏览器一、网页1、网页的概念**网站**是指在因特网上根据一定的规则,使用HTML等制作的用于展示特定内容相关的网页合集。**网页**是网站中的一“页”,通常是HTML格式的文件,它是通过浏览器来阅读。网页是构成网站的基本元素,它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页是以.html或.htm后缀,因此将其俗称为HTML文件。2、什么是HTMLHTML是指超文本标记语言,它是用来描述网页的一种语言。它是标记语言,不是编程语言。所谓标记语言转载 2021-04-08 15:48:41 · 336 阅读 · 0 评论