前端笔记共65篇 第2页
前端基础
使用百度地图API在浏览器端H5页面获取当前城市位置
<script type='text/javascript' src='http://api.map.baidu.com/api?v=2.0&ak=你的API密匙'> </script> <div id='bdMapBox' style='display:none;'> </div> <s...
3年前
悬浮彩色渐变 Button 按钮
HTML：<button> Button </button>CSS：button { background-color: #444141; border-radius: 4px; color: #fff; cursor: pointer; padding: 15px 30px; font-size: 18px; font-weig...
7个月前
WordPress网站备案关站屏蔽首页html单页源码
更改备案主体的手机号也需要重新提交备案，个人备案类别不能涉及博客、评论、链接跳转。 博客类型肯定是过不了的。没办法，那总不能关站从建吧， 通过设置一个首页屏蔽页。把网站伪装成个人主页...
5年前WordPress宇宙超级无敌美化框
我是迷幻紫 WordPress美化文章彩色渐变框钻芒美化版是怎么回事呢?WordPress相信大家都很熟悉，但是WordPress美化文章彩色渐变框钻芒美化版是怎么回事呢?下面就让小编带大家一起了解吧。 WordP...
4年前
html+CSS 多彩滚动展示AD框前端显示代码
因为放首页蛮占地方的，这个小模块没有经受住小改版的考验，被去掉了。贴出来，已给以后用 样式如下图所示： html代码 <section id='custom_html-2' class='widget_text widget widget_custo...
5年前JS实现H5页面点击返回上一页，如无自动跳转首页防止跳出站
<input class='back' type='button' name='Submit' value='返回上一页' onclick='post.referrer === '' ? window.location.href = 'https://www.zuanmang.net' /}' : window.history.go(-1);...
3年前
不一样的 Button 按钮
先看效果：HTML：<button> <svg height='36px' width='36px' viewBox='0 0 36 36' xmlns='http://www.w3.org/2000/svg'> <rect fill='#fdd835' y='0' x='0' height='36' width='...
7个月前
CSS背景图像，镜像翻转、缩放、背景偏移与定位、文字溢出处理
CSS下镜像翻转（水平/垂直翻转） 两种写法 【方法一】利用css动画属性rotate旋转来实现： /* 方法一 */ .mirrorRotateLevel { transform: rotateY(180deg); /* 水平镜像翻转 */ } .mirrorRotate...
4年前
CSS文字块-display行内元素块 inline-block 只给文字加背景
如何只给一段文字加背景颜色，但又不让其整行都填充上背景颜色.如下图 上图的代码: <!DOCTYPE html> <html lang='zh'> <head> <meta charset='UTF-8'> <meta name='...
5年前
CSS避免padding属性影响元素宽度，造成溢出换行
最近在写Time for插件缩略图排列的时候，由于padding属性总是影响盒子大小，导致默认写好的参数在不同宽度场景下存在溢出换行的情况，或者是填不满盒子。 如图 解决办法 在要控制元素排...
3年前html引用字体
@font-face { font-family:fzz; src: url('https://img.zmki.cn/ttf/fzz.ttf'); } 预览效果 <head> <style> @font-face { font-family:fzz; src: url('https://img.zmki.cn/ttf/fzz.ttf')...
5年前html自定义弹窗实现图片高度自适应
实际效果： 点击 实现 再次点击则弹窗消失。 弹窗布局为： <div class='box'> <img class='img' id='img' src=''/> </div> css样式为： .box { position: fixed; left: 0; to...
5年前
div标签img图片垂直居中CSS
display: table-cell; /*主要是这个属性*/ 没错，给img带上这个标签即可。如果不行就给上级div 赋值 margin: 0 auto; 如下图:
4年前
Node.JS npm基础安装配置&创建第一个VUE项目
使用之前，我们先来明白这几个东西是用来干什么的。 node.js: 一种javascript的运行环境，能够使得javascript脱离浏览器运行。 Node.js的出现，使得前后端使用同一种语言，统一模型的梦想得以实...
5年前CSS设置em不倾斜
一、认识em标签 标签告诉浏览器把其中的文本表示为强调的内容。对于所有浏览器来说，这意味着要把这段文字用斜体来显示。 二、DIV+CSS去em斜体样式 font-style:normal
3年前CSS图片填充的几种方式
当图片比例不固定时，想要让图片自适应，一般都会用background-size:cover/contain，但是这个只适用于背景图。 img有个属性object-fit 属性值：object-fit: fill / contain / cover / none / sc...
4年前