css伪类中的:target的使用

 之前:target伪类,我们已经接触过了. :target是css中伪类,主要是应用在url中的#链接,以及匹配对应的id名称.例如下面的例子:代码名称http://www.wutongwei.com/#home对应的home 的结构为代码名称<section id="home">   this is target</section>   这种状态,我们可以通过CSS来体现他的效果.代码名称:target{  color:#ff6600;} 这时候,当浏览这个链接的时候,就会将对
吴统威 on 编程语言 前端编程 HTML/CSS/JAVASCRIPT | 2016-01-19 16:54:12.0

就目前环境,如何成为能工作的前端开发者!

今天这篇文章主要对现在我接触到的工作环境,做了一个前端工程师基本的总结.如何能够在工作中很好的进行开发. 最后也加入了一些新手需要练习的作业.a) 基础学习:1) WWW服务的基本概念工作原理2)了解路径问题,绝对路径和相对路径 (http://blog.csdn.net/hgd613/article/details/8041662)3) html,css,javascript的详细学习.熟悉或者精通.(当然这只是一个概念,没有任何一个人说自己精通某个编程语言,就算他是某个语言的缔造者.技术都是在快速更新的.)3) javascript谷歌编码规范http://docs.kissyui.com
吴统威 on 编程语言 前端编程 HTML/CSS/JAVASCRIPT | 2016-01-18 17:55:41.0

Javascript实现苹果设备里的计算器

今天我们使用JAVASCRIPT来实现一个计算器.整个计算器,是为了教一些同学和实现的.我们直接看下效果.(代码长的,请横屏查看!)首先我们先把界面做好,界面选哪个号呢? 我就直接模仿苹果里的计算器样子.代码名称<div id="calc">     <div id="result">0</div>     <div id="key">   &n
吴统威 on 编程语言 前端编程 HTML/CSS/JAVASCRIPT | 2016-01-18 17:50:42.0

CSS3实现苹果电脑的DOCK菜单栏

使用苹果电脑的朋友,都知道,在桌面的下方有个DOCK,就是一个存放应用程序的一栏.使用起来非常方便.这一栏的一些效果也是挺好看的.那我们今天就用CSS3来实现这个原理.首先我们需要设计好DOCK栏结构,代码如下代码名称<ul>     <li id="menu1">         <a href="#menu1">      
吴统威 on 编程语言 前端编程 HTML/CSS/JAVASCRIPT | 2016-01-15 09:38:28.0

CSS3实例: 实现 swap 动画

CSS3动画的出现,让我的真的非常喜欢,因为他够简单.今天我们来实现一个交换动画,一个笑脸慢慢从远处,回到自己的原来位置的一种效果.这种动画在JS里面也是很多见的.首先得将HTML结构设计好,一个固定的窗口,然后一个带有黑色背景的笑脸代码名称<div><span>?</span></div>笑脸居中我们用最新的布局flex来实现,这个也是很好用的属性.之前文章中已经有flex的相关教程,大家不懂的可以看看.代码名称div{ width: 200px; height: 200px; color: #fff; 
吴统威 on 编程语言 前端编程 HTML/CSS/JAVASCRIPT | 2016-01-15 09:24:32.0

谷歌浏览器开发者工具 Timeline,谈性能优化

DevTools工具Timeline panel一直是最好的性能优化的第一站.集中说明你的应用程序活动,在加载,脚本,渲染,和重绘花费的时间.最近,我们升级了Timeline,可以更深入的了解APP的性能.我们添加了以下特点:1) 整合了 Javascript profiler. (包含Flame chart)2)frame viewer 帮助你可视化复合层.3)paint profiler 详细的查看浏览器的绘画活动.注意本文中描述使用Paint捕获选项确实导致一些性能开销,所以选择自己想要的选项.如果你以前使用过 Profiles面板,你可能知道Javascript CPU profile
吴统威 on 编程语言 前端编程 HTML/CSS/JAVASCRIPT | 2016-01-15 09:20:30.0

HTML5标签元素下的下划线动画

最近我看到一些博客网站又这么一个效果: 当鼠标放到博客头部的标题时,这个链接的下划线就会以动画的方式从无到有,我觉得挺有意思的,好像京东的首页就有这个效果,大家可以看看.创建这个效果非常的简单,不需要加入额外的DOM元素到页面中,但是低版本的浏览器可能不支持CSS动画(常规下可能只显示一条下划线)首先第一件事就是需要将a标签的text-decoration去掉,设置position为相对定位.然后确保这a标签在hover状态下颜色一致性.我们这里设置这个效果只在h2标签里:代码名称h2 > a {   position: re
吴统威 on 编程语言 前端编程 HTML/CSS/JAVASCRIPT | 2016-01-12 09:41:34.0

CSS中content中的counter值分析

有些CSS的特性,不经常使用.我认为CSS counters 也是其中之一,主要有两个原因:1. 他们没有很多的例子2. 代码可能稍微复杂一些.CSS counters 允许动态的设置列表数字,类似一个排序列表.但是CSS counters是不一样的. 特色就是使用一个伪元素结合一些具体的counterCSS ,追加/前置一个动态的"count"到一个指定的元素集合.这里一个代码例子代码名称.container {   counter-reset: issues 0; } .issue:before { &
吴统威 on 编程语言 前端编程 HTML/CSS/JAVASCRIPT | 2016-01-11 11:02:50.0

CSS中的另外一种需要知道的选择器.

CSS还有着一些非常好的选择器,可能有些人还不知道,学习这些,可以帮助你在实际项目中很简单的控制你的网页.例如,你可以选择偶数和奇数元素,第一个和最后一个,下一个等等. 在本文中,我们将通过不同的场景使用不同的选择器. 我们不适用已知的一些CSS选择器,比如ID和class.我们准备学习这些选择器. 我们会解释他们的运作.甚至更多的高级的东西.1. First Line 和 First Letterp:first-letter给段落中的第一个字母样式p:first-line选择段落中的第一行2. Before 和 After:beforeCSS中使用content属性添加一个元素到当前元素之前
吴统威 on 编程语言 前端编程 HTML/CSS/JAVASCRIPT | 2016-01-09 16:37:56.0

CSS中需要明白的 content 属性

如果你是一个前端开发者,可能知道有一些很好的伪类的改变,比如CSS content属性.如果不熟悉这些概念的,可能需要去复习一篇了.在这篇文章中.我们主要是看 content属性. CSS的 content 属性需要在 ::before和::after 伪类元素中使用. 属性会在页面上生成content中的内容,当然需要您的浏览器支持这个属性.content 属性的基本语法.content 属性的表现形式就如下所写,这里列出了每一个属性的值.p::before {   content: normal|counter|attr|string|open-q
吴统威 on 编程语言 前端编程 HTML/CSS/JAVASCRIPT | 2016-01-09 11:59:13.0