`
天梯梦
  • 浏览: 13733285 次
  • 性别: Icon_minigender_2
  • 来自: 洛杉矶
社区版块
存档分类
最新评论
文章列表
CSS样式表的主要作用是修饰Web页面上的HTML标记,但有时候,为了实现某个效果而往页面里反复添加某个HTML标记很繁琐,或者是显得多余,或者是由于某种原因而做不到。这就是CSS伪元素(Pseudo-Element)可以发挥作用的地方,所谓‘伪元素’,就是本身不存在的页面元素,HTML代码里并没有这样的元素,但在页面显示时,你却能看到这些本来不存在的元素发挥着作用。   观看演示   之前我们曾简要的介绍过一些关于伪元素(Pseudo-Element)的文章,下面我们要详细的再说一下。 事实上,伪元素在CSS里是一系列的元素,比如:first-line, :first-letter ...
CSS 有两个说不上常用的伪类 :before 和 :after,偶尔会被人用来添加些自定义格式什么的,但是它们的功用不仅于此。前几天发现了 Creative Link Effects 这个非常有意思的介绍创意链接特效的页面,里面惊人的效果大量使用到的特性除了 transform 属性进行变形之外,就是接下来要介绍的这两个伪元素了。   一 基本语法 在了解进阶的应用之前,先来了解一下语法规则。平常仅仅需要将这两个伪元素用于添加一些自定义字符时,只需使用伪类使用的单冒号写法,以保证浏览器的兼容性: p:before {}   不 过,在 CSS3 中为了区别伪元素和伪类为伪元 ...
在 CSS 中,<html> 和 <body> 的区别往往被忽略,全局样式或者定义在 <html> 上,或者定义在 <body> 上。实际上,两者是有区别的,不论是 CSS 老鸟还是新手,都应该了解。   HTML 和 Body 如何关联 <!DOCTYPE html> <html lang="en"> <head> <!-- Metadata and such --> </head> <body> ...
本文主要探讨两个问题: 为什么CSS设置浮动会引起父元素塌陷 为什么设置clear:both能清除浮动,并撑开父元素。   起因 CSS的浮动,算是我在写网页时用的最多的属性之一。但要说我对浮动的了解程度的话,只能说“知其然而不知其所以然”。虽然很多人都说浮动会用就行,但是要想成为一个优秀的前端,对这些常用属性得知根知底。 恰巧在慕课网,张鑫旭老师开了《CSS深入理解之float浮动》这门课。链接在文末,有兴趣的可以听听,老师讲课风格很风趣……   Float的历史 Float设计的初衷,是为了实现文字环绕效果。就像下图展示的一样(图片源于w3school): ...
很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程。   前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家。   写在前面的话: 由于CSS内容比较多,小菜没有精力从头到尾讲一遍,只能有针对性的讲解。 如果读者理解CSS盒子模型,但对于浮动不理解,那么这篇文章可以帮助你。 小菜水平有限,本文仅仅是入门教程,不当之处请谅解! 本文以div元素布局为例。   教程开始: 首先要知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流。如下图:   可以看出,即使div1的宽度很小,页面中一 ...
CSS清除浮动float闭合,很多同学都在使用下面的骨灰级解决办法: .clear{clear:both;}   或者 .clear{clear:both;height:0;overflow:hidden;}   上诉办法是在需要清除浮动的地方加个div.clear或者br.clear,我们知道这样能解决基本清浮动问题。 但是这种方法的最大缺陷就是改变了html结构,虽然只是加个div。   最优浮动闭合方案: .clearfix:after{content:".";display:block;height:0;clear:both;visibility ...
在页面整体布局中,页面元素的尺寸大小(长度、宽度、内外边距等)和页面字体的大小也是重要的工作之一。一个合理设置,则会让页面看起来层次分明, 重点鲜明,赏心悦目。反之,一个不友好的页面尺寸和字体大小设置,则会增加页面的复杂性,增加用户对页面理解的复杂性;甚至在当下访问终端 (iPhone、iPad、PC、Android…)层出不穷的今天,适应各式各样的访问终端,将成为手中的一块“烫手的山芋”。所以在近几年,“九宫 格”式的“流式布局”再度回归。为了提供页面布局,及其它的可维护性、可扩展性,我们尝试将页面元素的大小,以及字体大小都设置为相对值,不再是孤立的固 定像素点。使其能在父元素的尺寸变化的同 ...
这个是为了解决什么问题?   我最近在做一个项目。客户要求标题可以根据用户屏幕的尺寸而自动改变大小。我知道我通常用的相对字体单位(注* 如px, pt, em)只是相对于HTML根元素的大小而自动改变,而不是相对于用户的屏幕。   在上网查询之后我发现一种新的字体大小单位,叫做:Viewport-Percentage Lengths.   我是在一MDN的一篇文章 中发现这个Viewport-percentage lengths的,这正是我要找的东西,我只是不知道它叫什么。   它是怎么工作的?   其实非常简单。一个单位相于当前视图窗口大小的1%,宽度和高度是不同的,分别 ...
html5大行其道的时代已经到来。如果你还在等待浏览器兼容,说明你已经与web脱节几条街了。当然,这得益于移动客户端的蓬勃发展。如果还在纠 结于,是否应该掌握html5和css3技术时,请狠狠的抽自己几个嘴巴,然后,苦学吧!因为前端的春天已经到来,而且不止一个春天。如果你不信,我只能 说:爱信不信! 下面我们来看一个标准的html5标签结构:(我这里只是说标签,其它概不涉及) <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>html ...
在windows10或win8中要获得文件夹的权限也不是一件容易的事。查阅网上主要有两种方法,一种是手工,另一种是有 注册表。   一、第一种方法。 主要分为两步。首先要获得文件夹的所有权,然后再获取权限。   好 吧,下面开始进入正题。我会以图文形式来详细说明如何获取一个文件(或文件夹)的最高权限,拥有了最高权限,无论什么文件都是可以删除的。我的系统是 windows 8,用windows 7的同学也可以参考,因为win7和win8的界面差不多,xp我就不清楚了,因为除了在网吧,我没用过xp。   首先看下图,路径是C:\Windows\Web\Wallpaper,在此路径下有 ...
因为安全的原因,无法直接在浏览器中打开工程目录下的index.html文件。 你必须在你的电脑中搭建一个本地服务器。本小节会解释如何做。   在Windows下搭建本地服务器   开启Internet Information Service 在“控制面板”中,点击“程序”。 点击“启用或关闭Windows功能”。 在“Windows功能”窗口中,点击“Internet Information Services”来启用它。
外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。   外边距合并 外边距合并(叠加)是一个相当简单的概念。但是,在实践中对网页进行布局时,它会造成许多混淆。 简单地说,外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。   当一个元素出现在另一个元素上面时,第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图:   亲自试一试   当一个元素包含在另一个元素中时(假设没有内边距或边框把 ...
  2015年,软件开发界发生了很多变化。有很多流行的新语言发布了,也有很多重要的框架和工具发布了新版本。下面有一个我们觉得最重要的简短清单,同时也有我们觉得值得你在2016年花时间精力去学习的新事物的一些建议。   大趋势 在过去的几年里,有一个越来越明显的趋势是web应用的商业逻辑逐步从后端转移到了前端,然后后端变得只需要处理简单的数据API。这就让前端开发框架的选择变得尤为重要了。   另 外一个重要的改变是2015年发布的 Edge 浏览器。这是IE的替代品,拥有全新的界面和更好的性能。跟IE不一样的是它同样采用了跟 FireFox 和 Chrome 一样的快 ...
这是一个非常有趣的 非主流前端领域,这个领域要探索的是如何用工程手段解决前端开发和部署优化的综合问题,入行到现在一直在学习和实践中。   在我的印象中,facebook是这个领域的鼻祖,有兴趣、有梯子的同学可以去 ...
  今天小微开店宝在测试环境发布更新的时候,同事问:“为什么我需要手动清理浏览器缓存才能看到变更?难道系统上线后也需要客户自己清理浏览器缓存吗!”看来,这个坑需要我来填了。   什么是浏览器缓存 浏览器 ...
Global site tag (gtag.js) - Google Analytics