html+css
文章平均质量分 63
面壁思过程
这个作者很懒,什么都没留下…
展开
-
css幽灵按钮
代码如下<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <style> *{ margin:0; padding:0; } .wrap{ ...原创 2019-05-22 17:50:55 · 173 阅读 · 0 评论 -
圆形进度条的实现纯css
如图代码如下<template> <div class="percentloop"> <li class="percent-list" v-for="(item, index) in percentData" :key="index"> <div class="wrap"> <div...原创 2019-07-06 14:28:11 · 2496 阅读 · 0 评论 -
纯css3画3D爱心
图示代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <style> * { margin: 0; padding: 0; } body { background: #000; } .he...原创 2019-05-22 17:13:18 · 917 阅读 · 2 评论 -
flex布局下的一些样式问题记录
问题一:flex布局下的子元素没法根据自身的高度自适应下面这个布局,我希望子div能够垂直方向两端布局,但是box能够根据自身的div宽度自适应以下面的方式布局结果发现宽度自己变成了100%<div className="wrap"> <div className="box">dsss</div> <div className="box2">fffffg</div></div>.wrap {原创 2021-09-29 10:20:05 · 279 阅读 · 0 评论 -
文件路径引入
每次引入本地图片,css,js时路径经常因为引入错误报错,也是很醉,整理下以 / 为起始,表示从根目录开始解析; 以 ./ 为起始,表示从当前目录开始解析; 以 ../ 为起始,表示从上级目录开始解析; 如图:在a1.html里分别从不同文件下引入图片的路径写法...原创 2019-02-11 16:20:35 · 440 阅读 · 0 评论 -
调用qq聊天
<a href="tencent://message/?uin=输入QQ号&Site=http://vps.shuidazhe.com&Menu=yes">PC版</a><a href="mqqwpa://im/chat?chat_type=wpa&uin=输入QQ号&version=1&src_type=web&am...原创 2019-05-04 10:01:55 · 495 阅读 · 0 评论 -
h5里常用的调取外部功能
1.打电话发短信<metaname="format-detection" content="telephone=yes"/><ahref="tel:110">拨打</a><ahref="sms:123456">发短信</a>2.系统相册//capture表示,可以捕获到系统默认的设备,比如:camera照...原创 2019-05-04 10:04:11 · 365 阅读 · 0 评论 -
input框限制只能输入正整数以及其他的常用正则
有时需要限制文本框输入内容的类型,本节分享下正则表达式限制文本框只能输入数字、小数点、英文字母、汉字等代码。例如,输入大于0的正整数代码如下:<input onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.repla...原创 2019-05-23 09:33:43 · 12586 阅读 · 1 评论 -
纯css3实现三角形以及带边框的三角形
图示代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <met...原创 2019-06-12 16:09:33 · 3058 阅读 · 0 评论 -
css3实现带边框的三角形
(1)有边框的三角形我们来写下带边框的三角形。如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要用到其他办法。最容易想到的,是叠加层。思路是将两个三角形叠加在一起,外层三角形稍大一些,颜色设置成边框所需的颜色;内层三角形绝对定位在里面。整体就能形成带边框三角形的假象。这里就涉及到...转载 2019-06-12 16:22:02 · 6955 阅读 · 0 评论 -
sass的@mixin用法
定义Mixins模块/* 固定定位下居中 */@mixin pfb { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%) translateZ(0);}使用.navtap{ @include pfb; }定义带参数的Mixins模块/* 宽高 */@mi...原创 2019-07-04 11:34:41 · 1701 阅读 · 0 评论 -
关于form表单获取值和设置值得方法
html代码 <form action="" name='fm'> <div> 文本框demo:<br> <input class="firstname" type="text" name="firstname" value="hellow"> </div&g...原创 2019-07-17 17:35:36 · 4256 阅读 · 0 评论 -
纯css实现左右两栏的瀑布流布局
图下: 关键css: 代码如下:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <title>左右两栏布局</title> <style&原创 2019-01-14 09:57:51 · 7205 阅读 · 2 评论 -
瀑布流布局
1.使用jquery封装的masonry插件 代码:分别引入jquery跟masonry插件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="原创 2019-01-14 09:48:00 · 211 阅读 · 0 评论 -
css的pointer-events属性(禁止div点击)
之前写项目经常会碰到某个组件需要禁用的要求,之前一直会用一个变量来代替保存按钮的点击状态,今天才发现css3新出的一个属性,顺便试了试 最近刚好在研究vue,直接以vue为案列吧 以前的的方法://html<div class="btn" @click="click()">快来点击我</div>//jsdata:{ isclick: 0...原创 2018-12-26 15:46:37 · 2807 阅读 · 0 评论 -
H5学习弹性盒模型详解
1. 语法1.1 语法基础概念任何一个容器都可以指定为Flex布局。 .box{ display: flex; }行内元素也可以使用Flex布局。 .box{ display: inline-flex; }同时需要注意,在不用的浏览器中,我们还需要在前面加上对应的浏览器前缀。 .box{ display: -webkit-fle...转载 2018-05-07 16:56:01 · 1924 阅读 · 0 评论 -
css颜色设置大全
css设置颜色值得几种用法1. 颜色名(red)16进制(#ccc) 2.rgb(128,128,128)3.hsl(330,50%,50%) 色度 饱和度 亮度4.rgba hsla 同上面用法a(0-1)表示透明度(330,50%,50%,0.5)5.transparent 用来指定全透明色彩<!DOCTYPE html><html lang="en"><h...原创 2018-05-30 14:24:11 · 1583 阅读 · 0 评论 -
css渐变用法详解
CSS3 定义了两种类型的渐变(gradients):线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向径向渐变(Radial Gradients)- 由它们的中心定义 1. CSS3 线性渐变(以标准语法为例)从上到下的线性渐变: background: linear-gradient(red, pink); /* 标准的语法 */从左到右的线性渐变: bac...原创 2018-05-30 15:33:16 · 776 阅读 · 1 评论 -
css背景属性用法详解
css3背景新增的属性:background-origin(指定背景图像的位置区域)padding-box border-box content-box background-clip(规定背景的绘制区域)border-box padding-box content-boxbackground-attachment(设置背景图像是否固定或者随着页面的其余部分滚动)scroll fixed ...原创 2018-05-30 15:56:39 · 323 阅读 · 0 评论 -
纯css实现自适应正方形(宽度百分比)
/* 宽度设置百分比时制作一个正方形 */.div3{width: 20%;/*基于父级的宽度设置*/padding-top: 20%; /* 或者padding-bottom: 20%; */background: red;}...原创 2018-05-30 16:57:36 · 5226 阅读 · 0 评论 -
css3移动旋转缩放
CSS3 转换可以可以对元素进行移动、缩放、转动、拉长或拉伸。 》》2D转换 属性有:transformtransform-origin---transform-origin:20% 40% ; 设置旋转元素的基点位置(值可以是left right... 百分比 长度单位)属性值有:translate(50px,100px)--x轴y轴移动 rotate(30deg)--旋转角度(默认顺时...原创 2018-05-31 12:52:06 · 2558 阅读 · 0 评论 -
纯css鼠标移入图片放大
html<div class="big_ewrp"> <div class="image_box"> <img src="http://assets.jq22.com/plugin/2018-06-07-01-19-03.png" /> </div> </div>css<style原创 2018-06-07 18:01:07 · 1759 阅读 · 0 评论 -
css 阴影box-shadow详解
box-shadow语法box-shadow: h-shadow v-shadow blur spread color inset;h-shadow v-shadow:分别是水平偏移量和垂直偏移量(允许负数,默认右偏移,设为负值向左偏移)blur:模糊距离spread:阴影大小(长度单位,实体阴影)color:颜色inset:内阴影(默认为外阴影).div1{ width: 200px; ...原创 2018-06-01 14:28:06 · 452 阅读 · 0 评论 -
css3 animation(动画)属性
css3 animation(动画)属性1.animation: name duration timing-function delay iteration-count direction fill-mode play-state(所有属性集合)2.animation-name属性值:绑定动画名(@keyframes名)3.animation-duration属性值:time。(5s)4.an...原创 2018-06-01 16:30:58 · 974 阅读 · 0 评论 -
关于h5页面中p元素里的文字变多时,页面的文字大小失效的解决方法
遇到的问题:写手机端页面时,引用了flexible.js移动端适配方案,我在布局时发现当段落里的文字超过一定的字数时,页面的字体大小失效。最终解决方法:在段落包裹的大框上加上最小高度和最大高度就可以解决:min-height:4rem;max-height:9999px;...原创 2018-06-19 15:44:57 · 1437 阅读 · 0 评论 -
css3卡片翻转动画效果
把动画写在里层的div避免动画卡顿<div class="cardbox"> <div class="card" > <div class="style1" > <div class="ser_img"><img src=&qu原创 2018-11-17 17:40:22 · 2367 阅读 · 1 评论 -
锚点跳转偏移位置(当顶部导航设置固定定位时挡住锚点区内容时)
设置虚锚点<a name="index" style=" position: relative;top: -80px;display: block;height: 0;overflow: hidden;"></a> <!DOCTYPE html><html lang="en"> <head>原创 2018-11-17 17:51:21 · 3764 阅读 · 3 评论 -
css 垂直居中的几种方法
直接上代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&am原创 2018-12-03 17:48:59 · 176 阅读 · 0 评论 -
css文本各种属性集合
1.字体属性font-family:‘微软雅黑’指定字体Css属性设置样式font-size: 12px/em/rem font-weight:normal;font-style:设置字体倾斜,可能的属性有normal、italic、oblique;line-heigh...原创 2018-05-07 15:55:27 · 593 阅读 · 0 评论