【我的CSS布局之旅--持续更新】的更多相关文章

我的CSS布局之旅--持续更新

虽然我也接触前端一年之久了,但是无奈从切图布局下来的经验还真是很不足,因为之前比赛或者是做小项目时全部都是自己负责设计,所以都是编写边设计,哎呀,也是醉了:或者是有模板,然后从人家上面扒拉下来的,真的拿一张UI设计稿给我,还真是有点心虚的,所以借最近深入了解jquery的机会,我决定把布局顺带练一练,OK,废话不多说,开工了,一周练习一次,并上图示众,同时欢迎大家一起探讨css布局细节. 第一季 简单的轮播布局 2015.12.1 所有小图片在一张雪碧图上 来贴段代码 <!DOCTYPE htm…

CSS 3篇（持续更新）

1.关于盒子模型 css盒子模型 又称框模型 (Box Model) ,包含了元素内容(content).内边距(padding).边框(border).外边距(margin)几个要素.如图: 理解css外边距的叠加: 两个上下方向相邻的元素框垂直相遇时,外边距会合并,合并后的外边距的高度等于两个发生合并的外边距中较高的那个边距值,如图: 需要注意的是:只有普通文档流中块框的垂直外边距才会发生外边距合并.行内框.浮动框或绝对定位之间的外边距不会合并.  2.CSS中的文档流 普通流就是正常的文档…

CSS效果集锦（持续更新中）

高亮光弧效果 使用CSS3实现的一个高亮光弧效果,当鼠标hover到某一个元素上时,一道光弧从左向右闪过,效果如下: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>light</title> <style> body{ margin: 0; } a.floor{ display:…

css随笔记（持续更新）

/*DIV鼠标穿透*/ div{pointer-events:none;} /*清除IE11默认×*/ input::-ms-clear{display:none;} 使用伪类写边框部分三角 右上角三角形 border-top:6px solid #c1ddf7 border-left:6px solid transparent 右下角三角形 border-bottom:6px solid #c1ddf7 border-left:6px solid transparent 左上角三角形 bord…

CSS相关知识（持续更新中）

1. 弹性布局 一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式.引入弹性布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列.对齐和分配空白空间. 2. 选择器…

CSS冗余简化（持续更新）

1.float属性会把元素默认成inline-block状态,不需要再专门定义display了 2.对于inline而言,您设置line-height多大,很多时候并不需要定义height,其实际占据的垂直高度就是多高,仅限于本身非零高度的元素,可能是本身的高度也可能有内容撑高.block元素并不会被撑高,之后的元素会紧跟着原来高度的位置.inline-block调试显示不会被撑高,但实际上是撑高了 3.了解下vertical-align它是一个需要基于父元素.兄弟元素等进行各种对齐,但abso…

css样式小结（持续更新...）

1.手写table的border,显示空白间隔,而不是想要的样式,需要添加下面的样式处理 table{ border-collapse:collapse; } 2.移动端输入框效果,去掉高亮边框, input:focus, input:hover, input:active,textarea:focus, textarea:hover, textarea:active { -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-user-modify…

css面试题汇总 （持续更新）

前言:这篇随笔是为了准备后面的面试而整理的,网上各种面试题太多了,但是我感觉很多太偏了,而且实际开发过程中并不会遇到,因此这里我整理一些比较常用的,或者是相对比较重要的知识点,每个知识点都会由浅入深,把相关的都放在一起,便于自己复习,感兴趣的朋友也可以一起学习收藏. (题目的顺序不重要,比较随意,但是会分类整理,集中复习) 一,CSS Box相关 (基本都会问这题,必考) 1,怎么理解CSS里盒子(Box)的概念? 盒子(Box) 是 CSS 布局的对象和基本单位,一个页面就是由N个盒子组合而成…

CSS小记(持续更新......)

1 内联元素和块级元素的区别以及display的三种属性区别 在说起display属性之前,就必须先说说什么是文档流,以及文档流中的内敛元素和块级元素又是指什么? 一直觉得理解了文档流的概念,一堆CSS布局也就理解起来相对容易点,因为很多布局也都是基于这个理论的,那么什么是文档流呢? 文档流: 将html代码自上而下,从左到右的顺序排列,即为文档流..在文档流中 块级元素(block)特性表现在,如果不加其他属性,它是一个矩形空间,默认是占一行,可以通过调整高度,宽度,边距来调整矩形的布局 --…

LookAround开元之旅（持续更新中...）

应用介绍随便瞧瞧是一款为android用户量身定做的免费图文资讯软件集美食,文学,语录等频道于一体界面简洁,操作流畅,图文分享,个性收藏是广大卓粉的必备神器APK下载 -->https://raw.githubusercontent.com/geniusgithub/Look-Around/master/storage/LookAround.apk 工程简介以下是代码结构图: 该工程用到以下开源库 [satellite-menu]https://github.com/geniusgithub/a…