随笔分类 - HTML/CSS
摘要：在列表展示中，经常会使用卡片的内容展示形式，为了美观，常常要求各卡片间的间隙是一致的。 卡片内容不一样可能高度不等，但一般来说为了整体的一致性，会限制每个卡片的宽高都相等。 本文就基于宽高一致的多个卡片，在不同屏幕大小下，每行卡片数量可能有调整，考量如何实现等间隙的布局。 点我预览 放置一张张卡片项
阅读全文
摘要：不久前在某运动APP上看到一个卡片缓缓往下展示的效果，感觉这动画还可以 似乎项目中也有类似的卡片列表，列表的展示是直接显示出来的，加上动效之后应该更有活力，便照着样子实现了一下 点我预览 这种效果，核心点就是添加了个CSS动画，主要控制了四个属性 先看HTML结构部分 绑定事件，点击展开则添加一组卡
阅读全文
摘要：总结一下目前在用的前端代码规范，可作为开发参考 一、基础规范 开发规范 项目目录和文件的命名使用小写字母，避免使用大写或驼峰，多个单词以下划线 _ 分隔 如：my_project/cast_detail.js 目录有复数意义的时候，使用复数命名 如 scripts images 某些第三方插件可直接
阅读全文
摘要：BEM 是 Block（块） Element（元素） Modifier（修饰器）的简称 使用BEM规范来命名CSS，组织HTML中选择器的结构，利于CSS代码的维护，使得代码结构更清晰（弊端主要是名字会稍长） 如何使用BEM 在本规范中，以双下划线 __ 来作为块和元素的间隔，以单下划线 _ 来作为
阅读全文
摘要：产品姐姐想法多，点击input项才能聚焦进行操作，点击外部不能有反应 好了。。。直入正题 为了让标签更加语义化，在表单项中，我们往往会使用label进行包裹 在移动平台页面的开发中，为了让表单项的可点区域变大而更好的操作，label可提供相应的便利。 但有时，我们只是需要label标签，却不希望可点
阅读全文
摘要：用CSS实现元素的水平居中，比较简单，可以设置text-align center，或者设置 margin-left:auto; margin-right:auto 之类的即可。主要麻烦的地方还是在垂直居中的处理上，所以接下来主要考虑垂直方向上的居中实现。水平垂直居中主要包括三类：基本文本类，图像类，...
阅读全文
摘要：前言：布局的传统解决方案，基于盒状模型，依赖display属性 +position属性 +float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局，2012年得到进一步完善。2009年...
阅读全文
摘要：文件兼容性用于定义让IE如何编译你的网页。此文件解释文件兼容性，如何指定你网站的文件兼容性模式以及如何判断一个网页该使用的文件模式。前言为了帮助确保你的网页在所有未来的IE版本都有一致的外观，IE8引入了文件兼容性。在IE6中引入一个增设的兼容性模式，文件兼容性使你能够在IE呈现你的网页时选择特定编...
阅读全文
摘要：按照我的理解，其实圣杯布局跟双飞翼布局的实现，目的都是左右两栏固定宽度，中间部分自适应。但在这里实现起来还是有一些区别的【圣杯布局】在这里，实现了左(200px) 右(220px) 宽度固定，中间自适应，container部分高度保持一致。DEMO稍微说明一下：html代码中 middle部分首先要...
阅读全文
摘要：左右定宽，中间自适应有几种方法可以实现改变窗口大小看看？方案一：左右设置绝对定位，定宽，中间设置margin-left margin-right查看 demo左右定宽，中间自适应(1) left oooooooooooooo 0000000000000000...
阅读全文
摘要：左侧定宽，右侧自适应有很多种方法可以实现缩小窗口试试看？方案一：左边左浮动，右边加个margin-left查看 demo 左侧定宽，右侧自适应(1) left oooooooooooooo 0000000000000000 00000000...
阅读全文
摘要：浮动的工作原理浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框则停留。浮动元素可能引起的问题1.父元素的高度无法被撑开，影响与父级元素同级的元素2.与浮动元素同级的非浮动元素会跟随其后3.若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面的显示结构清除浮动有什...
阅读全文
摘要：浏览器的兼容性问题，通常是因为不同的浏览器对同一段代码有不同的解析，造成页面显示不统一的情况。这里谈到的浏览器，主要指IE6/IE7/IE... FireFox Chrome Opera Safari 等。 但更多的兼容还是考虑IE6/IE7/FF之间的斗争先来谈谈CSS Hack 我们为了让页面...
阅读全文
摘要：一般的文字截断（适用于内联与块）：.text-overflow { display:block;/*内联对象需加*/ width:25em; word-break:keep-all;/* 不换行 */ white-space:nowrap;/* 不换行 */ overflow:hidden;/*...
阅读全文
摘要：先了解：【1】 “Table”和“DIV”这两个网页元素诞生的目的不同，首先Table诞生的目的是为了存储数据，而DIV诞生的目的就是为了架设页面结构 W3C，是World Wide Web Consortium的缩写，中文是W3C组织或者万维网联盟。W3C标准不是一个标准，而是一系列标准的集合...
阅读全文
摘要：做网页时经常挑选不好颜色吧...多看看颜色值，或者自己配吧....颜色值 CSS 颜色使用组合了红绿蓝颜色值 (RGB) 的十六进制 (hex) 表示法进行定义。对光源进行设置的最低值可以是 0（十六进制 00）。最高值是 255（十六进制 FF）。 十六进制值使用三个双位数来编写，并以 # 符号开...
阅读全文
