css3
文章平均质量分 59
唐小狼
“人们称赞我是最勤奋的人,如果思考也算劳动的话,或许的确如此,因为一天之中从睁开眼,我几乎一直在思考。但是,如果工作被认为是在特定时间,根据狭隘标准从事某些特定活动的话,那么或许我是最懒惰的家伙。”
展开
-
CSS框模型(Box Model)与图片透明属性
所以HTML元素可以看作盒子,在CSS中,“box model”这一术语是用来设计和布局时使用的。Box Model本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充和实际内容。原创 2015-11-05 16:56:35 · 577 阅读 · 0 评论 -
RGBA颜色与兼容性的半透明背景色
一、周末的唠唠叨叨这周真是辛苦的一周,很多事情不得已都拖着,比如现在这篇文章早前几天前就应该完工了;关于vertical-align属性的下集还没有开始写,jQuery在线参考内容添加还没有做,CSS3额外知识点部分添加插入图片盒链接的功能还没完工,搞笑鑫情也是搁置了好几天,究竟什么原因呢?女人,每晚要花个把小时交一位女同事photoshop,于是这宝贵的晚上的时间就被掐断了,做什么都不利转载 2017-09-01 11:42:00 · 1465 阅读 · 0 评论 -
float左右,中间自适应,和一些tips
class="reply-wrapper"> class="reply-logo"> class="reply-btn" id="subjectQuickReplyBtn">回复 class="out-input"> type="text" class="reply-input" id="subjectQuickReply" placeholder="请输入原创 2016-11-23 14:20:04 · 1653 阅读 · 0 评论 -
深入理解BFC和Margin Collapse
BFC的理解与应用首先我们来看看w3c规范对BFC的解释,其实对于这种概念的学习上,我们总是建议首先寻找官方的定义,因为原则上来说官方的才是最权威和正确的,而且还比较详细,千万不要因为看到英文就畏惧不前。什么是BFC(Block formatting contexts)w3c规范中的BFC定义:浮动元素和绝对定位元素,非块级盒子的块级容器(例如 inline-blo转载 2016-10-14 15:46:00 · 372 阅读 · 0 评论 -
什么是BFC(初级入门介绍)
原文地址链接:http://div.io/topic/834?page=1#3261说到BFC,就会涉及到CSS布局的一些基本概念,然后,首先来讲一下关于块级盒的一些概念:下面是来自w3.org中的一句话(参考链接:http://www.w3.org/TR/CSS2/visuren.html#block-formatting):Block-level ele转载 2016-09-23 17:47:37 · 3995 阅读 · 1 评论 -
CSS布局——水平垂直居中布局总结学习
简介CSS布局可以分为几大块,盒子内部布局·文本布局·盒模型本身的布局盒子之间的布局·脱离正常流的布局·absolute布局上下文下的布局·float布局上下文下的布局·正常流下的盒子布局BFC布局上下文下的布局IFC布局上下文的布局table布局上下文下的布局css grid布局上下文下的布局具体内容一、文本的水平垂直居中原创 2016-06-13 23:09:12 · 2537 阅读 · 0 评论 -
CSS3布局属性
1、弹性盒模型(Flexible Box 或Flexbox)弹性盒模型最大的特征在于,能够动态修改子元素的宽度和高度,以满足在不同尺寸屏幕下的恰当布局。(1)弹性容器属性flex-direction:设置主轴方向,确定弹性子元素排列方式flex-wrap:当弹性子元素超出弹性容器范围时是否换行flex-flow:flex-direction和flex-wrap属性的原创 2016-05-23 08:52:09 · 447 阅读 · 0 评论 -
CSS选择器优先级
CSS样式选择器分为4个等级,a、b、c、d,可以根据这四种等级为依据确定CSS选择器的优先级。1、如果样式是行内样式,那么a=1;2、b为ID选择器的总数;3、c为Class类选择器的总数;4、d为标签选择器的数量;5、属性选择器、伪类选择器和Class类选择器的优先级一样6、!important权重最高,比inline style的还要高举例:原创 2016-06-25 22:00:52 · 587 阅读 · 0 评论 -
媒体查询联系——联系人列表
CSS3多媒体查询CSS3的多媒体查询继承了CSS2多媒体类型的所有思想,取代了查找设备的类型,CSS3根据设置自适应显示。媒体查询可用于检测很多事情,例如:1、viewport(视窗)的宽度与高度2、设备的宽度与高度3、朝向(智能手机横屏,竖屏)4、分辨率多媒体查询由多种媒体组成,可以包含一个或多个表达式,表达式根据条件是否成立返回true或false。原创 2016-06-25 19:23:42 · 629 阅读 · 0 评论 -
CSS3中的动画效果
1、transition示例代码: lang="en"> charset="UTF-8"> transition div{ background-color: #ffff00; color: black; transition:background-color 3s linear,co原创 2016-05-19 08:27:19 · 521 阅读 · 0 评论 -
CSS实践总结——选择器详解与字体样式
1、概要(1)元素选择器(2)选择器分组(3)类选择器详解(4)ID选择器详解(5)属性选择器详解(6)后代选择器(7)子元素选择器(8)相邻兄弟选择器(1)通配符:*{}结合元素选择器:例如:a.class{}多类选择器:例如: class= "p1 p2"> Hello World.p1{ color: blue;原创 2016-05-18 08:11:37 · 694 阅读 · 0 评论 -
CSS简单图片墙布局(使用margin、float布局)
1、学习点这个实例主要学习点就是使用margin、float属性对元素进行布局,实现简单的图片墙,当然还加入了一个鼠标划入,图片放大的效果。这个效果使用了css3的变化特性,还有就是注意加这个变化的css选择器的写法。2、代码如下: lang="en"> charset="UTF-8"> image rel="stylesheet" href="style原创 2016-05-16 10:29:33 · 5653 阅读 · 0 评论 -
一个简单大气的登陆(login)界面源码介绍学习
首先上页面截图:然后贴段代码: Welcome 敲门 主要是标签中,placeholder属性的应用。以及css文件中对样式的设计,大家可以学习一下!!源码下载链接:源码下载链接源码下载链接:http://download.csdn.net/detail/tangxiaolang101/9369998原创 2015-12-21 10:46:00 · 9210 阅读 · 1 评论 -
CSS3 响应式设计 网络视图与媒体查询综合笔记
先贴上w3cschool相关的源代码,再一步步学习分析!!!!* { box-sizing: border-box;}.row:after { content: ""; clear: both; display: block;}[class*="col-"] { float: left; padding: 15px;}html原创 2015-11-23 11:12:55 · 708 阅读 · 0 评论 -
学习css3过渡效果,可以实现很好玩的东西,无需js
翻滚吧,牛头怪!!!使用css3的过渡效果,可以让一种样式过渡到另一种样式,无需js就能实现某些动画效果。还是挺有意思的,在一些生动表现力的网站上应该是可以用到的。原创 2015-11-18 15:29:07 · 994 阅读 · 0 评论 -
CSS3 线性渐变循环动画
CSS3 线性渐变循环动画最近开发,遇到一个首屏加载优化的情况,需要如下图的线性渐变动画:网页动态效果(http://htmlpreview.github.io/?https://github.com/tangxiaolang101/imageView/blob/master/gradientAnimation.html)代码如下:1.// css file2..loading-list-wra...原创 2018-05-09 17:30:47 · 5776 阅读 · 0 评论