css3
关注
分享
扫一扫
水痕01
暂停更新博客
展开
-
记录小程序中使用阿里字体图标的步骤
一、使用步骤 1、登录阿里巴巴字体图标库 2、搜索自己想要的字体图标 3、加入到购物车中 4、购物车中的图标加入一个项目中 5、在资源管理中找到我的项目，下载到本地 6、将解压出来的文件目录中拷贝iconfont.css到小程序项目的fonts/iconfont.wxss(注意小程序要改文件后缀名) 7、删除@font-face下面部分内容浏览器的引入 /*只留下这个就可以*/ @font-face { font-family: "iconfont"; src: url(原创 2021-02-03 16:47:35 · 274 阅读 · 0 评论 -
css3中网格布局与弹性盒子布局对比
一、CSS3中网格布局,可以参考弹性盒子布局一样的传送门,分为容器属性和项目属性二、常见的容器属性 1、display:grid定义一个容器属性为网格布局 2、grid-template-columns: 100px 100px 100px表示创建三列,每列的宽度是100px 3、grid-template-columns: repeat(3, 1fr)表示创建三列,每列平均分配 4、grid-te原创 2017-12-04 22:52:19 · 3194 阅读 · 0 评论 -
css3中网格布局(grid)的基本介绍
一、css3中网格布局 类似传统的web开发中的表格,只是没表格那么复杂1、定义一个容器使用网格布局.grid{ display:grid; } 2、定义占用几行与几列(需要定义在父元素容器中)1、平均分几列.grid{ grid-template-columns: repeat(3, 1fr);/*表示平均分3列*/ } 2、根据指定的宽度分列.grid{ /*表示分4原创 2017-10-23 15:15:52 · 2024 阅读 · 0 评论 -
手机端滚动分页加载数据模型
说明:运行demo的时候请将浏览器模式调整到苹果5<!DOCTYPE html> <html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatib原创 2017-06-06 19:20:50 · 3877 阅读 · 0 评论 -
关于css3中文字超出隐藏
一、中文超出了会默认换行，但是对于英文或者数字来说超出不换行，要加上word-wrap: break-word; word-break: break-all;二、文字超出...表示display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;原创 2017-06-05 17:43:39 · 20925 阅读 · 0 评论 -
handlebars.js模版引擎中EACH循环遍历的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script> <script src="https://cdn.bootcss.com/handlebars.js/4.0.原创 2017-04-05 15:41:21 · 5037 阅读 · 2 评论 -
利用radio实现tab切换
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>radio选项卡切换</title> <style type="text/css"> *{margin:0;padding:0;} .test-box{width: 50%;margin: 10px aut原创 2017-04-04 22:55:55 · 2881 阅读 · 0 评论 -
css样式实现一个进度条
效果如图代码<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords"原创 2017-04-04 22:46:02 · 8471 阅读 · 0 评论 -
关于常见的左右赋权限的移动样式
效果如图:代码如下:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>拖拽演示</title> <script type="text/javascript" src="js/jquery-2.1.1.min.js" ></script> <style type原创 2017-04-04 22:40:57 · 748 阅读 · 0 评论 -
css修改单选框与复选框样式
在移动端开发中往往要修改单选框与复选框的样式 案例效果如下: 代码如下: html代码: <section class="select-f select-f1"> <dl> <dt>您要选择装饰家居的原因是？<a href="javascript:void(0);" class="select-f1-allbtn">(全选原创 2017-04-04 22:34:03 · 2775 阅读 · 0 评论 -
关于H5页面开发适配指南
说明：本人习惯性的直接上代码，不想用太多的文字去表述 一、html页面<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> var dpr, rem, scale; //人为给头原创 2017-03-23 10:41:02 · 1088 阅读 · 0 评论