figure 和 figcaption 是两个经常在一起使用的语义化元素。如果你还没有在 规范 中了解过他们，没有机会在项目中使用过他们，或者说现在对他们还是一无所知，这里就给大家讲一些如何正确使用他们的小技巧。 figure 元素经常用于图片,如下所示: figure 元素表示内容的一个自包含单元。这就意味着你要么可以在文档中向下移动该元素，要么使其处于文档的底部，它都不会影响文档的含义。 因此，我们需要记住，不...
《 CSS Secrets 》是 @Lea Verou 最新著作，这本书讲解了有关于CSS中一些小秘密。是一本CSSer值得一读的一本书，经过一段时间的阅读，我、@南北和@彦子一起将在W3cplus发布一系列相关的读后感，与大家一起分享。 问题 在很多情况下，我们需要给元素的兄弟元素以不同的样式风格呈现。主要的用例是提高用户体验和在大屏幕中不断增加列表荐。下面是一些使用场景： 邮件列表或类似基于文的列表展示。如果我们只有为数不...
html+CSS源码： img {border:solid 1px green;display:block;}#id1{float:left;}div{border:solid 2px blue;}p{border:solid 1px red;}This is some text. This is some text. This is some text.This is some text. This is some text. This is some text. 效果如下如： 问题： W3CSchool中讲解CSS定位，浮动那一节中，明确说对框1进行向左浮动时会遮住框2，原因是浮动后，元素脱离了文档流，不占据空间。为...
首先来看为w3c给他们的定义： 伪类：用于向某些选择器添加特殊的效果； 伪元素：用于将特殊的效果添加到某些选择器。 。。。。。等于没说！ 为了区分伪类和伪元素： 伪元素和伪类之所以这么容易混淆，是因为他们的效果类似而且写法相仿，但实际上 css3 为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。 下面用实例来区别两者的不同（用伪类 :first-child 和伪元...
CSS选择器大致可以分成5类：基本选择器，层次选择器，属性选择器，伪类，伪元素。基本，层次，属性选择器比较容易理解，毕竟它们选择的对象都属于DOM中看得见摸得着的元素。但伪类和伪元素相对比较抽象，稍微有一点点理解上的难度。本篇就是我对伪类和伪元素的理解。 先介绍一下伪类和伪元素有什么区别？其实这是个纯概念上的问题，就算不理解也不影响实际的使用。但作为一个CSSer，概念这种东西有时候就像地基，地基越牢固，将来...
最近正在进行webdriver的web级自动化测试代码的编写，遇到一个问题：页面有三个标签，单击一个标签打开一页，要对第二个标签打开的页面进行定位操作，可是总是定位不到。查看一下代码，发现这个标签打开的是一个新页面，在iframe中嵌套着呢，于是在网上搜了一下相关的定位方法。 1.iFrame有ID 或者 name的情况//进入id="frame1"的frame中，定位id="div1"的div和id="input1"的输入框。dr.switchTo().frame("frame1");dr.findEleme...
我们知道，元素在没有设置宽高的情况下，默认的宽高值都为 auto 。而这个 auto 到底是如何让元素自动拥有宽高的呢，也就是说，元素的宽度和高度到底会受到什么因素的影响？本文将通过一个例子来对这一问题一探究竟，HTML结构和初始css如下： .container { position: relative; width: 200px; height: 200px; background-color: #ff9; } .test { border: 1px...
前端现在越来越火，可以用去年热门的词语来形容——“风口上的猪”。希望这个系列的文集能够给“毫无任何基础，但是想转到前端的人”一点帮助。 认识一个html文档的基本结构： Here is title Here is content. HTML 文档是由 HTML 元素 定义的，而HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。 首先，HTML元素从闭合属性上可分为2类： 自闭和标签自...
设计场景 如果我们不给元素指定固定的高度（height），它会根据其内容的高度自适应。我们希望宽度（width）也具有类似的行为 应用场景 我们用一幅图来展示实际的应用场景： perfect.png 分析： 宽度由 内部因素 来决定，而不是由 外部因素 来决定的 水平居中 老式解决方案 代码结构文本 标题/描述文本 为了得到正确的宽度，我们给 figure 元...
这篇文章发布于 2016年06月7日，星期二，23:51，归类于js实例。 阅读 21 次, 今日 20 次 byzhangxinxu from http://www.zhangxinxu.com 本文地址： http://www.zhangxinxu.com/wordpress/?p=5426 一、先看效果 您可以狠狠地点击这里： 基于clip-path的元素碎片飞入动效demo 二、实现原理 效果本质上是CSS3动画，就是旋转( transform:rotate )和位移( transform:translate )，只是旋...
原文： http://www.zcfy.cc/article/517 我遇到了一个小问题，我有一个 span 在 header 中，而我想要在 span 的前面产生一个换行。郑重声明，在 span 前面插入一个 标签当然没问题（而事实上，你还可以显示/隐藏这个标签，这 非常有用 ）。但是...不得不用 HTML 去做一个布局相关的事情始终感觉有点奇怪。 因此，让我们来深入探索一下，在这个探索中，我们会多次说到“然而...”。 Break right after this co...
设计场景 有时候我们不给元素指定固定的宽高，是希望它能 根据内容自动调整并适应 如果宽高相等，就显示为一个圆；如果宽高不等，就显示为一个椭圆 解决方案 结构 风格 .box { width: 200px; height: 200px; border-radius: 50%;} 说明：这个百分比值是基于 元素的尺寸进行解析 的 写到这里小编提问：如何实现半椭圆呢？ 沿横轴劈开的上半椭圆结构 风格.box {width: 256p...
CSS实现div固定于网页右下角实例代码: 将一个元素固定于网页右下角的效果使用非常频繁，比如返回顶部的按钮，或者说是信息提示框之类的，下面就介绍一下如何使用CSS实现此效果，代码实例如下:CSS position:fixed 实现html元素固定于某位置*{padding:0;margin:0; } body{height:1000px;} #footer{position:fixed;background:#eee;bottom:20px;right:10px;width:100px;height:100px; }在线运行以上代码实现了我们的要求，div块能够固...
css属性选择器语法： [attribute=value] 如：[target=-blank] /*选择所有使用target="-blank"的元素*/ 或 [attribute~=value] 如：[title~=flower] /*选择标题属性包含单词"flower"的所有元素*/ 或 [attribute|=language] 如：[lang|=en] /*选择一个lang属性的起始值="EN"的所有元素*/ css属性选择器实例一：选择所有使用target="_blank"的a元素a[target=_blank] { background-color:yellow; }The link with target="_blank" get...
【标签选择器】 一个完整的HTML页面是有很多不同的标签组成，而标签选择器，则是决定哪些标签采用相应的CSS样式，(在大环境中你可能出于不同的位置，但是不管怎么样，你总是穿着同一套衣服，这件衣服就是由标签选择器事先给你限定好的，不管走到哪里都是这身衣服)比如，在style.css文件中对p标签样式的声明如下： p{ font-size:12px; background:#900; color:090; }[/quote]则页面中所有p标签的背景都是#900(红色)，文字大小均是12...