css3 | 易学教程

HTML5 & CSS3初学者指南(1) – 编写第一行代码

阅读更多关于 HTML5 & CSS3初学者指南(1) – 编写第一行代码

介绍网络时代已经到来。现在对人们来说，每天上网冲浪已经成为一种最为常见的行为。在网页浏览器中输入一段文本地址，就像http://www.codeproject.com，等待一下，网页就加载到浏览器窗口中。一个典型的网页是由文本、图像和链接组成的。除去内容上的差异，不同网站的网页也具有不同的外观和感受，以实现在网络上建立自己的身份品牌的目的。如果你也曾想要了解你屏幕上的这些网页是如何被创建出并以各式各样的方式渲染的，那么这里正是你可以了解到这些知识的地方。让我们一起走进在浏览器中创建了这么多网页的两项核心技术HTML、CSS。简单的说，HTML提供了页面基本的框架，而CSS丰富了页面的表现。俗话说：“一图胜千言”。下图1中也很好的诠释了应用CSS前后之间的差别。应用CSS之前应用CSS之后很早之前 HTML的诞生时间回到1989年，一个CERN的年轻天才软件工程师Tim Berners-Lee ，发明了万维网。次年，他创作了奠定今天网络基础的三项技术： HTML：超文本标记语言。用于构建、发布和链接网络文件的标准。 URL：统一资源标识符。分配给网络上每个资源一个独特的“地址”，以便更容易的访问。 HTTP：超文本传输协议。一个用于网络上定义网页与消息的格式与传输的通信协议。顾名思义，HTML通过将内容嵌入在某些预定义的标签中，如<title>、<head>和<p

:before和::before的区别

阅读更多关于 :before和::before的区别

在一次项目中，有一次要用到::selection伪元素，然后开发同学问我，CSS中一个冒号和两个冒号有神马区别？这好像真的是个问题，或许很多前端同学对此都有疑惑，查了些资料，证实了下两个符号的区别，简而言之：单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。 W3C关于CSS3选择器的规范中有一段描述： A pseudo-element is made of two colons (::) followed by the name of the pseudo-element. This :: notation is introduced by the current document in order to establish a discrimination between pseudo-classes and pseudo-elements. For compatibility with existing style sheets, user agents must also accept the previous one-colon notation for pseudo-elements introduced in CSS levels 1 and 2 (namely, :first-line, :first-letter, :before and

css3最全flex布局结构整理

阅读更多关于 css3最全flex布局结构整理

一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不由得感觉眼前一亮，顺理成章的联想到 Word 文档排版中用到的的左对齐、右对齐和居中对齐，然而很快就失望的发现 CSS 中并不存在 float: center 的写法，那么 text-align: center、verticle-align: center 是否可行呢？答案也是否定的。这两个属性只能用于行内元素，对于块级元素的布局是无效的。在网页布局没有进入 CSS 的时代，排版几乎是通过 table 元素实现的，在 table 的单元格里可以方便的使用 align、valign 来实现水平和垂直方向的对齐，随着 Web 语义化的流行，这些写法逐渐淡出了视野，CSS 标准为我们提供了 3 种布局方式：标准文档流、浮动布局和定位布局。这几种方式的搭配使用可以轻松搞定 PC 端页面的常见需求，比如实现水平居中可以使用 margin: 0 auto，实现水平垂直同时居中可以如下设置： .dad { position : relative ; } .son { position : absolute ; margin : auto ; top : 0 ; right : 0 ; bottom : 0 ; left : 0 ; } .dad {

What are `scrolling boxes`?

阅读更多关于 What are `scrolling boxes`?

问题 In the CSS Positioned Layout Module Level 3 (Working draft) in chapter 6.2. Sticky positioning we have this definition: (Emphasis mine) A stickily positioned box is positioned similarly to a relatively positioned box, but the offset is computed with reference to the nearest ancestor with a scrolling box , or the viewport if no ancestor has a scrolling box . What are these scrolling boxes? Further down the document there is an issue about the term scrolling boxes Issue 6 Sticky positioning

How do i rotate text in css

阅读更多关于 How do i rotate text in css

问题 How do i rotate text in css to get following output... hi, Edit: Thanks for quick suggestion. I have added my sample code in jsfidle: http://jsfiddle.net/koolkabin/yawYM/ The problem i am facing is that when we rotate the text then it breaks the alignment and positions... so what is causing that and how can i manage them? 回答1: You need to use the CSS3 transform property rotate - see here for which browsers support it and the prefix you need to use. One example for webkit browsers is -webkit

Stacking order of elements affected by opacity

阅读更多关于 Stacking order of elements affected by opacity

问题 How are z-index and opacity related when deciding stacking order of an element in HTML? when i keep opacity less than 1 on an element which is having some z-index say 999 . The element is going behind the element which is having no z-index . $(function() { $("#checkbox1").on("change", function() { $("#green-parent").toggleClass("add-opacity", this.checked); }); }); .green, .blue { position: absolute; width: 100px; line-height: 100px; text-align: center; color: white; } .green { z-index:

Count down timer with circular progress bar

阅读更多关于 Count down timer with circular progress bar

问题 I created an countdown timer. I got a border which is made circular. As the timer is tending towards zero, the circular border should change color with decrement in the seconds. I created the JSFIDDLE HTML <div class="outer"> <button class="btn btn-default btn-timer">0.00</button> </div> JS CODE var displayminutes; var displayseconds; var initializeTimer = 1.5 // enter in minutes var minutesToSeconds = initializeTimer*60; $("#document").ready(function(){ setTime = getTime(); $(".btn-timer")

Is there any cross-browser javascript for making vh and vw units work

阅读更多关于 Is there any cross-browser javascript for making vh and vw units work

问题 Note: Ok while I was typing this question I came across this question which suggests to use @media query but was asked back in 2011... As you know CSS3 introduces new Viewport-percentage length units, vh and vw , which I feel are really useful for a solid responsive layout, so my question is, is there any JavaScript/jQuery alternative for this? More over apart from using it for font sizes, is it safe to use for sizing elements? Like example div { height: 6vh; width: 20vh; /* Note am using vh

Is there any cross-browser javascript for making vh and vw units work

阅读更多关于 Is there any cross-browser javascript for making vh and vw units work

Keep the middle item centered when side items have different widths

阅读更多关于 Keep the middle item centered when side items have different widths

问题 Imagine the following layout, where the dots represent the space between the boxes: [Left box]......[Center box]......[Right box] When I remove the right box, I like the center box to still be in the center, like so: [Left box]......[Center box]................. The same goes for if I would remove the left box. ................[Center box]................. Now when the content within the center box gets longer, it will take up as much available space as needed while remaining centered. The

订阅 css3