随笔分类 -  HTML/CSS

移动平台对 META 标签的定义
摘要：下面介绍一些有关标记的例子及解释。 一、meta 标签分两大部分：HTTP 标题信息（http-equiv）和页面描述信息（name）。 1、http-equiv 属性的 Content-Type 值（显示字符集的设定） 说明：设定页面使用的字符集，用以说明主页制作所使用的文字语言，浏览器会根据此来 阅读全文
posted @ 2017-08-31 16:44 栗子_维C 阅读(123) 评论(0) 推荐(0) 编辑
使用SVG中的Symbol元素制作Icon
摘要：前言 随着大屏幕分辨率的普及以及各种移动设备层出不穷的移动互联网时代的到来，我们在网站设计时更应该关心内容在各种设备上的阅读性和显示效果。我们都希望能在任何时间，任何设备上都能清楚的，高效的传递信息给用户。 而随着各种高清视网膜屏幕的出现，现在web设计也需要考虑各种高清屏幕的显示效果，同样前端在代 阅读全文
posted @ 2017-08-31 16:26 栗子_维C 阅读(3990) 评论(0) 推荐(1) 编辑
理解CSS3 transform中的Matrix(矩阵)
摘要：一、哥，我被你吓住了 打架的时候会被块头大的吓住，学习的时候会被奇怪名字吓住（如“拉普拉斯不等式”）。这与情感化设计本质一致：界面设计好会让人觉得这个软件好用！ 所以，当看到上面“Matrix(矩阵)”的时候，难免会心生畏惧（即使你已经学过），正常心理。实际上，这玩意确实有点复杂。 然而，这却是屌丝 阅读全文
posted @ 2017-08-31 16:14 栗子_维C 阅读(358) 评论(0) 推荐(0) 编辑
html特殊字符 编码css3 content:"我是特殊符号"
摘要：项目中用到的一些特殊字符和图标 html代码 css代码 效果图 就是一个圆圈里面带个叉叉 特殊字符和形状可以省去很多事情，整理了一下网上的，留着以后用 基本形状 ▲ 9650 25B2 ► 9658 25BA ► 9658 25BA ▼ 9660 25BC◄ 9668 25C4 ❤ 10084 2 阅读全文
posted @ 2017-08-31 16:05 栗子_维C 阅读(791) 评论(0) 推荐(0) 编辑
HTML 5的革新——语义化标签(一)
摘要：HTML 5的革新之一：语义化标签一节元素标签。 在HTML 5出来之前，我们用div来表示页面章节，但是这些div都没有实际意义。（即使我们用css样式的id和class形容这块内容的意义）。这些标签只是我们提供给浏览器的指令，只是定义一个网页的某些部分。但现在，那些之前没“意义”的标签因为因为h 阅读全文
posted @ 2017-08-31 16:02 栗子_维C 阅读(159) 评论(0) 推荐(0) 编辑
HTML的电子邮件链接标签mailto用法详解
摘要：mailto是网页设计制作中的一个非常实用的html标签，许多拥有个人网页的朋友都喜欢在网站的醒目位置处写上自己的电子邮件地址，这样网页浏览者一旦用鼠标单击一下由mailto组成的超级连接后，就能自动打开当前计算机系统中默认的电子邮件客户端软件，例如OutLook Express以及Foxmail等 阅读全文
posted @ 2017-08-31 15:57 栗子_维C 阅读(3429) 评论(0) 推荐(0) 编辑
使用CSS3制作响应式网格布局
摘要：这个网格布局效果中每行的图片数量会根据屏幕的宽度自动调整，并在鼠标滑过时带有一些文本动画效果。 HTML结构: CSS样式： 有了上面的html结构，剩下的工作就是添加css样式了。 css样式代码不多，也不难看懂，这样一个简单的网格布局就做好了。 本教程就到这里，希望对你有所帮助。 阅读全文
posted @ 2017-08-31 15:54 栗子_维C 阅读(432) 评论(0) 推荐(0) 编辑
完美解决header,footer等HTML5标签在IE(IE6/IE7/IE8)无效的方法
摘要：HTML5的语义化标签以及属性，可以让开发者非常方便地实现清晰的web页面布局，加上CSS3的效果渲染，快速建立丰富灵活的web页面显得非常简单。 HTML5的新标签元素有： <header>定义页面或区段的头部； <footer>定义页面或区段的尾部； <nav>定义页面或区段的导航区域； <se 阅读全文
posted @ 2017-08-31 15:47 栗子_维C 阅读(2108) 评论(0) 推荐(1) 编辑
div图片垂直居中 如何使div中图片垂直居中
摘要：div相对与table对于图片的垂直居中支持的并不好,特别对于不同浏览器的兼容性来说,这里我们看下一个简洁的css解决方法: 在曾经的 淘宝UED 招聘 中有这样一道题目： “使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。” 当然出题并不是随意，而 阅读全文
posted @ 2017-08-31 15:39 栗子_维C 阅读(442) 评论(0) 推荐(0) 编辑
为了美观当网页图片不存在时不显示叉叉图片
摘要：当在页面显示的时候，万一图片被移动了位置或者丢失的话，将会在页面显示一个带X的图片，很是影响用户的体验。即使使用alt属性给出了”图片XX”的提示信息，也起不了多大作用。 其实，可以这样处理：当图片不存在的时候，会触发onerror事件，我们可以在该事件中做一下补救的工作，比如： 1、让这个图片元素 阅读全文
posted @ 2017-08-31 15:36 栗子_维C 阅读(292) 评论(0) 推荐(0) 编辑
谷歌HTML/CSS规范
摘要：背景 这篇文章定义了 HTML 和 CSS 的格式和代码规范，旨在提高代码质量和协作效率。 通用样式规范 协议 省略图片、样式、脚本以及其他媒体文件 URL 的协议部分（http:,https:），除非文件在两种协议下都不可用。这种方案称为 protocol-relative URL，好处是无论你是 阅读全文
posted @ 2017-08-31 15:33 栗子_维C 阅读(190) 评论(0) 推荐(0) 编辑
解读浮动闭合最佳方案：clearfix
摘要：之前给大家介绍两种浮动闭合的办法CSS清除浮动 万能float闭合，得知很多同学都在使用下面的骨灰级解决办法： 上诉办法是在需要清除浮动的地方加个div.clear或者br.clear，我们知道这样能解决基本清浮动问题。 但是这种方法的最大缺陷就是改变了html结构，虽然只是加个div。 最优浮动闭 阅读全文
posted @ 2017-08-31 15:09 栗子_维C 阅读(141) 评论(0) 推荐(0) 编辑
IE10 CSS Hack（顺便聊聊IE11的CSS Hack）
摘要：有IE就有hack，看看IE9的css hack，IE8的css hack；上次同事说一个页面IE10下有问题，IE9下测试了一下，也有同样的问题。悲剧了赶紧找IE10的hack。 google上翻到的IE10 CSS Hacks 还算比较实用的。记录一下以备后用。 一、特性检测：@cc_on 我们 阅读全文
posted @ 2017-08-31 15:06 栗子_维C 阅读(403) 评论(0) 推荐(0) 编辑
47种常见的浏览器兼容性问题大汇总
摘要：浏览器兼容性问题大汇总Ø JavaScript 31. HTML对象获取问题 32. const问题 33. event.x与event.y问题 34. window.location.href问题 35. frame问题 36. 模态和非模态窗口问题 37. firefox与IE的父元素(pare 阅读全文
posted @ 2017-08-31 14:53 栗子_维C 阅读(261) 评论(0) 推荐(0) 编辑