css - 随笔分类 - 礼拜16

以背景 background-image 为例，不使用 media 制作自适应布局

摘要：最近跟老大学了一招，因为要做一个以疫情为主题的新品宣传活动，banenr 是一个轮播图，使用 swiper 制作，三个背景分别以 backgroud 添加在三个 slider 上面。在做兼容的时候，这个banner 的高度要与屏幕的宽度成比例缩放。之前一直认为，这个比例缩放是通过 css3 的 @m 阅读全文

posted @ 2020-04-09 09:22 礼拜16 阅读(617) 评论(0) 推荐(0) 编辑

SCSS 在项目中的运用

摘要：最后一段时间一直在做一些网站或是CMS的项目，想用bootstrap，但是，设计那哥们说了，用什么都行，就不能用bootstrap，我去了个..... 无语中，逼着自己写。说实话，就是用bootstrap也只能用些基本的，大部分的式样还得改，因为UI有很大的出入。下面是我的一些经验，css同js一样阅读全文

posted @ 2018-07-31 09:14 礼拜16 阅读(1728) 评论(0) 推荐(0) 编辑

css 布局之定位相对/绝对/成比例缩放

摘要：给body添加 overflow: hidden; 可以将页面所有的滚动条隐藏，但必须要给body 设置一个高度父元素必须要设置 position:relative 必须设置 width 与 height 且不能用百分比父层如果是图片，要使用 background: url(bg.jpg) n 阅读全文

posted @ 2017-08-23 22:06 礼拜16 阅读(6276) 评论(0) 推荐(0) 编辑

mui 常见的效果

摘要：上传图片，预览图片： ajax 上拉加载，实现方法页面不滚动获取日期的方法简单的验证方法阅读全文

posted @ 2017-08-23 21:56 礼拜16 阅读(2216) 评论(0) 推荐(0) 编辑

tab 切换实现方法

摘要：ul li 实现方法（只适用于，一个页面只有一组ul>li） input radio（只适用于，一个页面只有一组div>(input+radio)*n） demo: http://output.jsbin.com/cicadu/4 一个单选按钮后面跟一个lable[tab头]，再后面跟上一个div[ 阅读全文

posted @ 2017-06-10 21:15 礼拜16 阅读(584) 评论(0) 推荐(0) 编辑

上传文件按钮美化，上传文件前后状态控制

摘要：我们在做input文本上传的时候，html自带的上传按钮比较丑，如何对其进行美化呢？同理：input checkbox美化，input radio美化是一个道理的. input file上传按钮的美化思路是，先把之前的按钮透明度opacity设置为0,然后，外层用div包裹，就实现了美化功能。注：阅读全文

posted @ 2017-05-17 23:43 礼拜16 阅读(7389) 评论(0) 推荐(0) 编辑

网页水平固定居中某一个块，兼容移动端

摘要：医首信息 .company-logo{ margin: 80px auto; position: relative; /*父级元素相对定位*/ } .logo-box{ position: absolute; /*logo 绝对定位*/ ... 阅读全文

posted @ 2017-02-08 10:21 礼拜16 阅读(327) 评论(0) 推荐(0) 编辑

手机端页面下拉加载数据的笨办法--点击按钮添加数据

摘要：因为页面是根据数据库查出来的数据，有通过分页来显示数据，默认使用 page:1,size:10 (1页显示10条数据)来显示，如果所有数据为99条，那么想通过点击10条数据后的一个“加载数据...”的按钮，每点击一次，增加一次page的值，同时再调用一次查询数据的方法，以此类推，显示所有数据。如果最阅读全文

posted @ 2017-01-14 09:27 礼拜16 阅读(1848) 评论(0) 推荐(0) 编辑

weui 多网页切换效果分析

摘要：weui的文档写的不怎么详尽，简单的来讲WeUI 为微信 Web 服务量身设计的h5框架。 WeUI是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信 Web 开发量身设计，可以令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、ar 阅读全文

posted @ 2016-12-24 14:18 礼拜16 阅读(21619) 评论(0) 推荐(1) 编辑

weui 网页制作实例图

该文被密码保护。

posted @ 2016-12-24 11:12 礼拜16 阅读(6) 评论(0) 推荐(0) 编辑

用CSS绘制最常见的形状和图形

摘要：#rectangle { width: 200px; height: 100px; background: red; } #circle { width: 100px; height: 100px; background: red; -moz-border-radius: 50px; -webkit-border-radiu... 阅读全文

posted @ 2016-10-21 09:59 礼拜16 阅读(287) 评论(0) 推荐(0) 编辑

用 CSS 隐藏页面元素

摘要：用 CSS 隐藏页面元素有许多种方法。你可以将 Opacity，占据网页布局，可以交互，读屏软件可以读到它 opacity 属性的意思是设置一个元素的透明度。它不是为改变元素的边界框（bounding box）而设计的。这意味着将 opacity 设为 0 只能从视觉上隐藏元素。而元素本身依然占据它阅读全文

posted @ 2016-10-15 10:02 礼拜16 阅读(674) 评论(0) 推荐(0) 编辑

浏览器兼容与响应式布局

摘要：主流浏览器有5种：IE、chrome、firefox、safari、opera. 浏览器兼容浏览器私有前缀跨浏览器的默认样式 React.js 在浏览器中的兼容情况 Css3 在浏览器中的兼容问题常用css内 hack 浏览器兼容写法，这次portal的兼容我使用的是选择器阅读全文

posted @ 2016-09-24 18:01 礼拜16 阅读(4848) 评论(0) 推荐(0) 编辑

DIV+CSS系统学习：转载

摘要：第一部分 HTML 第一章职业规划和前景职业方向规划定位： web前端开发工程师 web网站架构师自己创业转岗管理或其他 web前端开发的前景展望：未来IT行业企业需求最多的人才结合最新的html5抢占移动端的市场自己创业做老板随着互联网的普及web开发成为企业的宠儿和核心 web职阅读全文

posted @ 2016-09-19 19:34 礼拜16 阅读(1340) 评论(0) 推荐(1) 编辑

css 导航，菜单对应页面切换效果实现方法

摘要：每个菜单有多个li标签，每个li标签含一个id,li标签的id用来标记：点击效果每个页面有一个id，这个id的作用是对应每个li标签的点击链接对应的页面，它的作用是用来标记：li标签的href指向页面位置阅读全文

posted @ 2016-09-14 19:30 礼拜16 阅读(12356) 评论(0) 推荐(0) 编辑

网页元素--字体相对单位

摘要：rem 相对html的font-size单位，在使用rem前要先设置根元素的单位：阅读全文