![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
HTML5+CSS3点滴知识
弹琴弹琴
这个作者很懒,什么都没留下…
展开
-
10个好用的 HTML5 特性
在本文中,我列出了十个我过去没用过的HTML5功能,但现在发现它们很有用,废话不多说,让我们开始吧。???? detais 标签<details>标签向用户提供按需查看详细信息的效果。 如果需要按需向用户显示内容,简单的做法就是使用此<details>标签。 默认情况下,它是收起来的,打开后,它将展开并显示被隐藏的内容。事例:<details> <summary>Click Here to get the user details<转载 2020-10-19 09:59:45 · 193 阅读 · 0 评论 -
放第一级显示第二级
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="jqu原创 2016-04-05 10:38:08 · 493 阅读 · 0 评论 -
CSS3 3D Transform
早前2011年5月就在站上写了一篇《CSS3 Transform》介绍CSS3中Transform属性的简单应用。但这篇文章里的知识无法满足大家对Transform的一个全面认识,最近重新整理了一个Transform系列的文章,希望对初学者有所帮助。前几天介绍了《CSS3 Transform——transform-origin》、《Transform-style和Perspective属性》和《C...转载 2016-04-17 02:31:20 · 1776 阅读 · 0 评论 -
弹性盒模型
1.父元素:display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex;2.子元素:-webkit-box-flex: 1; -moz-box-flex: 1; width: 25%; -webkit-flex: 1; -ms-flex: 1; -webkit-box-f...原创 2016-06-02 09:39:55 · 371 阅读 · 0 评论 -
css3多列
通过 CSS3,您能够创建多个列来对文本进行布局 - 就像报纸那样!在本章中,您将学习如下多列属性:column-count column-gap column-rule原创 2016-06-02 10:11:34 · 325 阅读 · 0 评论 -
:before
:before和:after的作用就是在指定的元素内容(而不是元素本身)之前或者之后插入一个包含content属性指定内容的行内元素,需要注意的是如果没有content属性,伪类元素将没有任何作用。但是可以指定content为空,同时正如前面所说,插入的内容默认是一个行内元素,并且在HTML源代码中无法看到,这就是为什么称之为伪类元素的理由,所以也就无法通过DOM对其进行操作。 ...原创 2016-06-03 16:43:47 · 543 阅读 · 0 评论 -
Web移动端Fixed布局的解决方案
移动端业务开发,iOS 下经常会有 fixed 元素和输入框(input 元素)同时存在的情况。 但是 fixed 元素在有软键盘唤起的情况下,会出现许多莫名其妙的问题。 这篇文章里就提供一个简单的有输入框情况下的 fixed 布局方案。iOS下的 Fixed + Input BUG现象让我们先举个栗子,最直观的说明一下这个 BUG 的现象。 常规的 fixed 布局,可能使用如下布局(以...转载 2016-06-18 16:58:09 · 843 阅读 · 1 评论 -
tap切换延迟
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-1.8.3.min.js"&原创 2016-07-04 22:20:38 · 1031 阅读 · 0 评论 -
HTML5之FileReader的使用
HTML5定义了FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型。 FileReader的使用方式非常简单,可以按照如下步骤创建FileReader对象并调用其方法:1.检测浏览器对FileReader的支持 [javascript] view plain copyi...转载 2016-07-06 22:40:50 · 372 阅读 · 0 评论 -
H5项目常见问题汇总及解决方案
H5项目常见问题及注意事项Meta基础知识:H5页面窗口自动调整到设备宽度,并禁止用户缩放页面[javascript] view plain copy//一、HTML页面结构 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale...转载 2016-08-29 22:47:30 · 1344 阅读 · 0 评论 -
处理input输入框被输入法遮住
//处理input输入框被输入法遮住function inputIos(inputBox){ var inputF = $(inputBox).find('input');//找到对应的input if(inputF == document.activeElement){ //获取焦点时用喔 setTimeout(function(){ ...原创 2016-08-30 22:11:28 · 6652 阅读 · 0 评论 -
img与容器下边界的空隙(缝隙) img与div(block类型元素)下边界有距离(或者叫缝隙、空隙)的解决方法
img与div(block类型元素)下边界有距离(或者叫缝隙、空隙)。解决方案:法宝一:给图片img标签display:block法宝二:定义图片img标签vertical-align:bottom,vertical-align:middle,vertical-align:top。 img{vertical-align:bottom;} 至于HTML属性align="cen...转载 2016-03-28 19:45:54 · 1963 阅读 · 0 评论 -
column分列
美化效果的属性:(一)column-gap主要来设置列与列之间的间距:语法:column-gap: normal || <length> 1)默值为1em(如果你的字号是px,其默认值为你的font-size值)。2)length的话,使用px,em单位的任何整数值,但不能是负值。(二)column-span 跨列设置,定义一个分列元素中的子元素能跨列多少。语法:colu...转载 2016-03-25 15:11:40 · 866 阅读 · 0 评论 -
手机端全部适配简易步骤,不确保没有bug。
1、HTML 的 head 部分中加入如下代码:<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">其中 width:viewport 的宽度,可以指定为一个像素值,如:640,或...转载 2016-03-24 18:22:16 · 2218 阅读 · 0 评论 -
HTML5 移动端自适应方案与踩坑
最近刚接触前端开发,接手了一个移动端H5项目。着实体会掉了前端的坑之多,和H5移动端的坑之多多。如今项目告一段落,在这里做一总结屏幕自适应方案介绍方案之前,首先还是交代一下项目背景与需求,毕竟一切方案也不能脱离实际需求。需求与背景设备宽度 > 800px, body宽度为800px 320px < 设备宽度 < 800px, 宽度根据设备宽度自适应 设备宽...转载 2019-03-14 09:27:01 · 346 阅读 · 0 评论 -
页面星星评价
html:<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,inital-scale=1.0,minimum-scale=1.0,maximum-scale=1.0"原创 2016-01-13 19:44:22 · 804 阅读 · 0 评论 -
html5 canvas 详细使用教程
原文地址:http://www.cnblogs.com/tim-li/archive/2012/08/06/2580252.html原作很强悍导航前言 基本知识 绘制矩形 清除矩形区域 圆弧 路径 绘制线段 绘制贝塞尔曲线 线性渐变 径向渐变(发散) 图形变形(平移、旋转、缩放) 矩阵变换(图形变形的机制) 图形组合 给图形绘制阴影 绘制图像(图片平铺、裁剪...转载 2016-01-29 14:20:49 · 567 阅读 · 0 评论 -
HTML5 LocalStorage 本地存储
HTML5 LocalStorage 本地存储说到本地存储,这玩意真是历尽千辛万苦才走到HTML5这一步,之前的历史大概如下图所示: 最早的Cookies自然是大家都知道,问题主要就是太小,大概也就4KB的样子,而且IE6只支持每个域名20个cookies,太少了。优势就是大家都支持,而且支持得还蛮好。很早以前那些禁用cookies的用户也都慢慢的不存在了,就好像以前禁用javas...转载 2016-01-29 14:47:27 · 357 阅读 · 0 评论 -
h5离线存储
H5的一个重要特性就是离线存储,所谓的离线存储就是将一些资源文件保存在本地,这样后续的页面重新加载将使用本地资源文件,在离线情况下可以继续访问web应用,同时通过一定的手法(更新相关文件或者使用相关API),可以更新、删除离线存储等操作; H5的离线存储使用一个manifest文件来标明哪些文件是需要被存储的,使用如<html manifest='offline.manifest'>...转载 2016-01-29 15:18:47 · 2875 阅读 · 0 评论 -
css实现多行文本溢出显示省略号(…)全攻略
省略号在ie中可以使用text-overflow:ellipsis了,但有很多的浏览器都需要固定宽度了,同时ff这些浏览器并不支持text-overflow:ellipsis设置了,下文来给各位整理一下兼容各浏览器显示省略号教程。大家应该都知道用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(…)。当然部分浏览器还需要加宽度width属性。 代码如下 ...转载 2016-02-02 10:43:30 · 650 阅读 · 0 评论 -
仿ios弹出层提示框
html: <div class="point_pop pf"> <div class="pop_box pf"> <div class="msg"> <h3></h3> <p class="tc f140pct">点言原创 2016-03-03 11:53:23 · 2195 阅读 · 0 评论 -
SASS用法指南
作者: 阮一峰日期: 2012年6月19日学过CSS的人都知道,它不是一种编程语言。你可以用它开发网页样式,但是没法用它编程。也就是说,CSS基本上是设计师的工具,不是程序员的工具。在程序员眼里,CSS是一件很麻烦的东西。它没有变量,也没有条件语句,只是一行行单纯的描述,写起来相当费事。很自然地,有人就开始为CSS加入编程元素,这被叫做"CSS预处理器"(css prepro...转载 2016-03-15 16:05:09 · 511 阅读 · 0 评论 -
iscroll在手机上滑动不流畅,很卡,如何解决?
给scroll元素增加css样式:-webkit-transform:translate3d(0,0,0);原创 2016-03-17 16:42:04 · 8836 阅读 · 3 评论 -
css中有些属性的前面会加上“*”“_”
区别不同浏览器的CSS hack写法:区别IE6与FF:background:orange;*background:blue;区别IE6与IE7:background:green !important;background:blue;区别IE7与FF:background:orange; *background:green;区别FF,IE7,IE6:background:orange;*b...原创 2016-03-22 12:32:36 · 1101 阅读 · 0 评论 -
iOS下的 Fixed + Input 调用键盘的时候fixed无效问题解决方案
做touchweb开发的时候,做头疼的是,电脑上面时候好的,有些手机上面也是好的,个别手机和浏览器出现问题,对于这些,只能慢慢调试,找问题。今天说一下比较老的IOS的问题,那就是“iOS下的 Fixed + Input 调用键盘的时候fixed无效问题”。案例如下<body class="layout-fixed"> <!-- fixed定位的头部 --&g...转载 2016-09-04 01:09:16 · 6627 阅读 · 0 评论 -
css3弹性盒子模型display:flex
1.row{ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; }2.col{ -webkit-box-flex: 1; -moz-box-flex: 1; width: 100%; -webkit-flex: 1; -ms-flex: 1...原创 2016-09-08 10:05:10 · 1112 阅读 · 0 评论 -
css左右上下居中的几种
方法一(推荐): position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; 方法二: position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); 方法三: position...原创 2017-11-09 17:41:15 · 443 阅读 · 0 评论 -
flex.css,移动端flex布局神器,兼容微信,UC,webview等移动端主流浏览器08.10
downloadgit clone https://github.com/lzxb/flex.css.gitnpmnpm install flex.css --save为什么需要flex.css?在移动端开发中,并不是所有的浏览器,webview,微信等各种版本都支持标准的flex,但是基本上都会支持-webkit-box,所以flex.css的主要作用是保证每一个属性...转载 2017-12-11 14:16:43 · 2815 阅读 · 0 评论 -
两边横向中间文字布局
<div class="mall-divider"> 华币明细</div> .mall-divider { display: table; white-space: nowrap; height: auto; overflow: hidden; /*line-height: 1;*/ text-align: cente...原创 2018-05-15 11:33:58 · 872 阅读 · 0 评论 -
flex布局
/** * flex布局 */.flex { display: -webkit-flex; display: flex; align-items: center; -webkit-align-items: center; justify-content: space-between; -webkit-justify-content: space-between;...原创 2018-05-29 15:38:05 · 146 阅读 · 0 评论 -
教你如何用 lib-flexible 实现移动端H5页面适配
前话好久没写教程了(可能会误导新手的菜鸟教程( ̄▽ ̄)”)。这是我的github,欢迎前端大大们和我一起学习交流 https://github.com/pwcong最近入职公司做前端实习,这几个星期来学到了移动端H5页面适配。(以前根本没做过移动端网页/(ㄒoㄒ)/~~,还是微信端的)所以把我学到的一个小知识点写下来,也分享给前端新手们。正文0x00 大概说明做移动...转载 2018-06-12 16:01:55 · 1999 阅读 · 0 评论 -
CSS命名规范——BEM思想(非常赞的规范)
人们问我最多的问题之一是在CSS类名中“--”和“__”是什么意思?它们的出现是源于BEM和Nicolas Gallagher...BEM的意思就是块(block)、元素(element)、修饰符(modifier),是由Yandex团队提出的一种前端命名方法论。这种巧妙的命名方法让你的CSS类对其他开发者来说更加透明而且更有意义。BEM命名约定更加严格,而且包含更多的信息,它们用于一个团队开...转载 2018-06-12 16:17:17 · 751 阅读 · 0 评论 -
css初始化文件
/*初始化类*/@charset "UTF-8";html { font-family: sans-serif; font-size: 20px;}html,body { -webkit-touch-callout: none; -webkit-text-size-adjust: none; -webkit-tap-highlight-col...原创 2018-06-27 15:12:53 · 1561 阅读 · 0 评论 -
css整理与优化工具
http://www.css88.com/tool/csstidy/原创 2018-09-29 11:26:25 · 709 阅读 · 0 评论 -
css一些易忘点
<!-- 一些易忘点 --><!-- 1.css background 背景 -->1.background-attachment 背景图片是固定还是随滚动而滚动<!-- 2.css Text文本 -->1.direction 设置文本方向2.letter-spacing 设置字符间距3.text-decoration 文本添加修饰4.tex...原创 2018-10-10 14:55:57 · 228 阅读 · 0 评论 -
前端精选文摘:BFC 神奇背后的原理
BFC 已经是一个耳听熟闻的词语了,网上有许多关于 BFC 的文章,介绍了如何触发 BFC 以及 BFC 的一些用处(如清浮动,防止 margin 重叠等)。虽然我知道如何利用 BFC 解决这些问题,但当别人问我 BFC 是什么,我还是不能很有底气地解释清楚。于是这两天仔细阅读了CSS2.1 spec 和许多文章来全面地理解BFC。一、BFC是什么? 在解释 BFC 是什么之前,需要先介...转载 2018-10-18 11:38:46 · 119 阅读 · 0 评论 -
设置html的根rem(随窗口改变自动调整)
(function(doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function() { var clientWidt...原创 2017-11-09 17:07:44 · 4004 阅读 · 0 评论 -
移动端css样式结构引入
1.引入reset.css重置css样式2.引入base.css 设置一些全局默认的css样式和公共css3.可以根据需求加入common.css 局部或者组件的公共css4.可以根据需求引入阿里iconfont.css 图标文件 @font-face { font-family: 'iconfont'; src: url('//at.alicdn.com/t/fon...原创 2017-09-30 11:55:43 · 953 阅读 · 0 评论 -
移动端base.less
a,button,input,textarea { -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}input:focus { outline: none;}body { -webkit-overflow-scrolling: touch; line-height: 1; line-height: 1.6;}...原创 2017-09-30 11:43:37 · 1004 阅读 · 0 评论 -
用背景显示图片正方形布局
css:正方形 width: 100%;padding-top: 100%;display: block;position: relative;background-size: cover;background-position: 50% 50%;比例 width: 100%;padding-top: 57%;display: block;p...原创 2016-10-28 16:54:31 · 1560 阅读 · 0 评论