css/css3
关注
分享
扫一扫
文章平均质量分 79
Jarvan大熊
记录我web(H5)的艰路历程
展开
-
如何进行移动端的页面开发
应该说，移动端的开发是伴随着HTML5的兴起而出现的，2007年第一款iPhone诞生，2009年HTML5这个名词第一次登上“舞台”。当时的移动互联网开始逐渐兴起，发展到今，移动互联网已经和人们的日常生活密切相关。作为开发者，对于一个崭新的事物，一直在尝试的“路上”，到底最好的开发方式是什么？本文介绍了从移动端诞生到现在，自己探索到的开发方法，并配以相应知识点，欢迎跟大家沟通、分享。初次原创 2017-01-09 11:48:24 · 459 阅读 · 0 评论 -
简单说 通过CSS实现 文字渐变色 的两种方式
说明这次的重点就在于两个属性， background 属性 mask 属性 这两个属性分别是两种实现方式的关键。解释方式一效果图代码<!DOCTYPE html><html><head> <meta charset="utf-8"> <style> span { ...原创 2018-07-17 15:01:20 · 2283 阅读 · 0 评论 -
H5页面适配 iPhoneX，就是这么简单
iPhoneX 取消了物理按键，改成底部小黑条，这一改动导致网页出现了比较尴尬的屏幕适配问题。对于网页而言，顶部（刘海部位）的适配问题浏览器已经做了处理，所以我们只需要关注底部与小黑条的适配问题即可（即常见的吸底导航、返回顶部等各种相对底部 fixed 定位的元素）。笔者通过查阅了一些官方文档，以及结合实际项目中的一些处理经验，整理了一套简单的适配方案分享给大家，希望对大家有所帮助，以下是处理前后...原创 2018-04-19 20:28:38 · 46229 阅读 · 2 评论 -
vue开发中，父组件添加scoped之后。解决在父组件中无法修改子组件样式问题。
在vue的开发中，我们需要引用子组件，包括ui组件（element、iview）。但是在父组件中添加scoped之后，在父组件中书写子组件的样式是无效果的。去掉scoped之后，样式可以覆盖。但这样会污染全局样式，为了解决这个问题，vue-loader新增书写方式。#demo父组件：<style lang="css" scoped> header /deep/ .header{...原创 2018-04-04 14:48:21 · 5246 阅读 · 0 评论 -
flex 布局
寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不由得感觉眼前一亮，顺理成章的联想到 Word 文档排版中用到的的左对齐、右对齐和居中对齐，然而很快就失望的发现 CSS 中并不存在 float: center 的写法，那么 text-align: center、verticle-ali原创 2017-11-21 18:46:12 · 257 阅读 · 0 评论 -
Text Autosizer&&解决移动端网页文本字体怪异增大问题
在做移动端页面时，有时你设置了字体大小，有的部分即使设置了行内样式也不生效，而有些显示正常，这个特性就是Text Autosizer在搞鬼。以下是解决方案：①给元素设置 -webkit-text-size-adjust: none;可禁用Text Autosizer，这个属性还能使得我们在移动端使用小于12px的字体。此属性在桌面版中无效。②设置最大高度 max-heigh原创 2017-11-04 11:03:10 · 498 阅读 · 0 评论 -
Flex布局 Flexbox属性详解
原文：A Visual Guide to CSS3 Flexbox PropertiesFlex布局官方称为CSS Flexble Box布局模型是CSS3为了提高元素在容器中的对齐、方向、顺序，甚至它们是动态的或者不确定大小的新布局模型。Flex容器的主要特征是能够调整其子元素在不同的屏幕大小中能够用最适合的方法填充合适的空间 。很多的设计师和开发者发现Flex布局很容易原创 2017-11-09 17:19:54 · 2859 阅读 · 0 评论 -
webapp上的蒙版，包含使用touchstart,touchmove
最近很想做一个像美团上点击分类或地址，后面的背景变黑，下拉菜单提亮的效果。如下图其实做个蒙版很容易拉，这是css的写法。 .mban{position:fixed;z-index:16;top:0;left:0;width:100%;height:100%;background:#000;filter:alpha(opacity=50);-moz-opacity:0.5;opacity原创 2017-02-24 11:31:55 · 1193 阅读 · 0 评论 -
HTML5实现动画三种方式
编者注：作者以一个运动的小车为例子，讲述了三种实现HTML5动画的方式，思路清晰，动画不仅仅是canvas，还有CSS3和javascript.通过合理的选择，来实现最优的实现。PS：由于显卡、录制的帧间隔，以及可能你电脑处理器的原因，播放过程可能有些不太流畅或者失真！分三种方式实现：(1) canvas元素结合JS(2) 纯粹的CSS3动画（暂不被转载 2017-01-12 10:40:02 · 6434 阅读 · 0 评论 -
响应式布局：CSS3媒体查询Media Queries
利用我们的CSS3实现响应式布局 仅仅有弹性盒还不够 CSS3还扩展了media属性，增加了一个模块功能 Media Queries媒体查询功能媒体查询引入随着移动端的快速普及 越来越多的用户使用智能机、平板电脑等浏览页面 所有考虑到用户的需求 我们要保证用户在各种设备上浏览页面都有不错的体验 这样我们就需要媒体查询 它允许我们为不同的设备或者不同条原创 2017-01-10 17:44:27 · 1991 阅读 · 0 评论 -
响应式布局：CSS3弹性盒flex布局模型
页面布局一直都是web应用样式设计的重点 我们传统的布局方式都是基于盒模型的 利用display、position、float来布局有一定局限性 比如说实现自适应垂直居中 随着响应式布局的流行，CSS3引入了更加灵活的弹性布局模型flex弹性布局使用弹性布局可以有效的分配一个容器的空间 即使我们的容器元素尺寸改变 它内部的元素也可以调整它的尺寸来适应空间 若想让一个元素变成...原创 2017-01-10 17:40:44 · 15120 阅读 · 0 评论 -
css3基本样式汇总
background-attachment /*背景图像是否固定或随着页面的奇遇部分滚动 fixed*/background-colorbackground-image /*url("xxx.jpg")*/background-repeat /*设置背景图片是否及如何重复 repeat no-repeat repeat-x repat-y*/background-posi原创 2017-01-10 16:30:56 · 1256 阅读 · 0 评论 -
CSS自动换行、强制不换行、强制断行、超出显示省略号
P标签是默认是自动换行的，因此设置好宽度之后，能够较好的实现效果，但是最近的项目中发现，使用ajax加载数据之后，p标签内的内容没有换行，导致布局错乱，于是尝试着使用换行样式，虽然解决了问题，但是并没有发现本质原因，本质在于，我当时获取的数据是一长串的数字，浏览器应该是对数字和英文单词处理方式相近，不会截断。先给出各种方式，再具体介绍每一个属性。强制不换行p { white-space...原创 2019-03-04 19:27:07 · 210 阅读 · 0 评论