猫粮骑士

猫粮骑士 查看完整档案

填写现居城市  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 该用户太懒什么也没留下

个人动态

猫粮骑士 赞了回答 · 2015-12-09

解决UIAlertController并不兼容iOS7的话,还有使用它的必要吗

写一个自定义Alertview 在内部封装UIAlertview和新的alertcontroller 在里面写判断系统的逻辑 外部调用不用关心 这样只需一次判断系统中是否存在这个新的控件

关注 6 回答 5

猫粮骑士 赞了回答 · 2015-11-02

互联网10k的offer与985的研究生你怎么选

天才请绕道。

----------我是分割线----------

如果985属于国内计算机Top10,而你本身又自认不是天才,建议读研。结合自身经历说一下。

首先,读研和学技术并不矛盾,读研反而可能了解到更前沿的技术。在实验室,帮老师做项目也好,自己读论文写论文也好,对个人能力提升都很有益。与其说是读论文,不如说是追论文:最新的顶会论文让你学到的东西恐怕要比闷头写代码好得多,你的视野也会比较远。当然,前提是你的导师比较好。如果遇到渣导师,真不如直接工作。

其次,读研会遇到很多比你优秀几个数量级的同学,向他们看齐,和他们一起学习讨论,其乐无穷。毕业之后,这些同学会分布在各大公司、政府部门、事业单位,这都是你的人脉资源。同学情谊和同事情谊不同,没有利益纠葛,前者可能更真诚一些。然后你会发现有很多同学可以内推你,无论是去google还是去fb,都不再遥不可及。

最后,俗一点,谈谈钱吧。博士是一档,硕士又一档,本科再一档,整体上看是递减的。还是那句话,天才除外。10k的工资不算多,多读几年,起薪高个几k。

总之,读研是一段难忘的人生经历,一般来说,努力了就会有收获,而且可能比你现在去工作强很多。亲身体会,供你参考。

----------我是分割线----------

千万不要以为程序员就是去搬砖的。搬砖只是一个方面,熟能生巧,但是,如果你想了解和学习当前最火的技术,机器学习,自然语言处理,推荐算法,数据挖掘等等等等的大AI范畴,或者是大数据库、大基础架构范畴,读研是个很好的选择。你大学里面写的那些代码,说实话,可能不上大学的人多工作几年也写得来,但是说到算法的话,还是读研的更有优势了。

关注 27 回答 23

猫粮骑士 赞了回答 · 2015-10-16

解决一道 跟谁学 的笔试题,求解决。。。。

JS 数组就可以作为一个 Stack,封装一下就可以。

function Stack(){
    this._data = [];
}
Stack.prototype={
    constructor:Stack,
    push:function (a){
        Array.prototype.push.apply(this._data,arguments);
    },
    pop:function (){
        Array.prototype.pop.apply(this._data,arguments);
    },
    size:function(){ return this._data.length;},
    clear:function(){ this._data.length=0;}
}

关注 7 回答 5

猫粮骑士 赞了回答 · 2015-10-09

解决bootstrap怎么让button和input在一行

给form添加form-inline 在页面width>=768px时 .form-control.form-group都是inline-block,两者是同一行的
若要去处width的限制,可以给form添加.form-horizontal, 之后便可以利用栅格系统布局:

<form class="form-horizontal" action="/index.php/domain_admin/updateIframeUrl" method="POST">
    <div class="form-group">
        <input type="text" class="form-control col-xs-8" value="">
        <div class="col-xs-4">
            <button class="btn btn-sm btn-danger">-</button>
        </div>
    </div>
</form>

关注 3 回答 2

猫粮骑士 回答了问题 · 2015-09-17

像:after,:before这样的伪元素可以绑定点击事件吗?

不可以,伪元素不是真正的dom元素

关注 7 回答 6

猫粮骑士 赞了文章 · 2015-09-01

CSS 模块

原文:http://glenmaddern.com/articl...
译者:@公子


如果你想知道 CSS 最近发展的转折点,你应该选择去观看 Christopher Chedeau 在2014年11月的 NationJS 大会上做的名称为 CSS in JS 的分享。不得不说这是一个技术分水岭的时刻,一群不同的思维在自己的方向上就像粒子进入了高能漩涡中一样飞速发展。其中,在 React 或者是 React 相关的项目中编写 CSS 样式,React Style, jxstyleRadium 这三个算是最新的,最好的以及最具有可行性的方法。如果说“发明”是探索 最接近的可能 的一个实例(译者注:最接近的可能是 Steven Johnson 于 2010 年提出来的一个概念),那么 Christopher 则是让许许多多的可能变得更加接近(译者注:上面三个工具中的两个灵感都是来自他的分享)。

This slide really hit home for a lot of folks

上图列出的这些都是在许多大型 CSS 代码库中存在的问题。Christopher 指出,只要将你的样式通过用 JS 去管理,这些问题都能很好的解决。不得不说这的确是有道理的,但是这种方法有它的复杂性并会带来其他的相关问题。其实只要看看浏览器是如何处理 :hover 伪类状态的,我们就会发现有些东西在 CSS 中其实很早就解决了。

CSS 模块小组 觉得我们可以更加合理的解决问题:我们可以继续保持 CSS 现在的样子,并在 styles-in-JS 社区的基础上建立更合理的改进。虽然我们已经找到了解决办法同时又捍卫了 CSS 原始的美,但我们仍然欠那些把我们推向这个结果的那些人一声感谢。谢谢你们,朋友们!

下面让我来向大家解说一下什么是 CSS 模块并且为什么它才是未来吧。

我们是如此的强烈的思考着 CSS 的未来

第一步:像局部一样无需考虑全局冲突

在 CSS 模块中,每一个文件被编译成独立的文件。这样我们就只需要使用通用简单的类选择器名字就好了。我们不需要担心它会污染全局的变量。下面我就我们编写一个拥有四个状态的按钮来说明这个功能。

https://jsfiddle.net/pqnot81c...

CSS 模块之前我们是怎么做的

我们也许会使用 Suit/BEM 命名规范去进行样式命名,这样我们的 HTML 和 CSS 代码看起来就像如下所示:

/* components/submit-button.css */
.Button { /* all styles for Normal */ }
.Button--disabled { /* overrides for Disabled */ }
.Button--error { /* overrides for Error */ }
.Button--in-progress { /* overrides for In Progress */
<button class="Button Button--in-progress">Processing...</button>

这样写看起来还挺棒的。使用 BEM 命令方式使我们有了 4 个样式变量这样我们不必使用嵌套选择器。使用Button这种首字母大写的方法可以很好的避免与之前的代码或者是其他的依赖代码进行冲突。另外我们使用了--语法这样能很清楚的显示出我们的依赖 Class。

总的来说,这样做可以让我们的代码更易于维护,但是它需要我们在命名规范的学习上付出很多努力。不过这已经是目前 CSS 能给出的最好的解决办法了。

CSS 模块出来之后我们是怎么做的

CSS 模块意味着你从此再也不必为你的名字太大众而担心,只要使用你觉得有最有意义的名字就好了:

/* components/submit-button.css */
.normal { /* all styles for Normal */ }
.disabled { /* all styles for Disabled */ }
.error { /* all styles for Error */ }
.inProgress { /* all styles for In Progress */

请注意我们这里并没有在任何地方使用 button 这个词。不过反过来想,为什么我们一定要使用它呢?这个文件已经被命名成了 submit-button.css 了呀!既然在其它的语言中你不需要为你的局部变量增加前缀,没道理 CSS 需要加上这个蹩脚的功能。

通过使用 require 或者 import 从 JS 中导入文件使得 CSS 模块被编译成为可能。

/* components/submit-button.js */
import styles from './submit-button.css';

buttonElem.outerHTML = `<button class=${styles.normal}>Submit</button>`

你不必担心大众名字会倒置命名冲突,编译后实际上类名是会自动生成并保证是唯一的。CSS 模块为你做好一切,最终编译成一个 CSS 与 JS 交互的 ICSS 后缀文件(阅读这里了解更多)。因此,你的程序最终看起来可能会是这个样子的:

<button class="components_submit_button__normal__abc5436">
  Processing...
</button>

如果你的类名变的和上面的例子差不多的话,那么恭喜你你成功了!

Success

命名约定

现在回过头来仔细看看我们的示例代码:

/* components/submit-button.css */
.normal { /* all styles for Normal */ }
.disabled { /* all styles for Disabled */ }
.error { /* all styles for Error */ }
.inProgress { /* all styles for In Progress */

请注意所有的类都是相互独立的,这里并不存在一个“ 基类 ”然后其它的类集成并“ 覆盖 ”它的属性这种情况。在 CSS 模块中 每一个类都必须包含这个元素需要的所有样式 (稍后会有详细说明)。这使得你在 JS 中使用样式的时候有很大的不同:

/* Don't do this */
`class=${[styles.normal, styles['in-progress']].join(" ")}`

/* Using a single name makes a big difference */
`class=${styles['in-progress']}`

/* camelCase makes it even better */
`class=${styles.inProgress}`

当然,如果你的工资是按照字符串长度来计算的话,你爱怎么做就怎么做吧!

React 示例

CSS 模块并不是 React 特有的功能,但是不得不说在 React 中使用 CSS 模块会更爽。基于这个理由,我觉得我有必要展示下面这个如飘柔般丝滑的示例:

/* components/submit-button.jsx */
import { Component } from 'react';
import styles from './submit-button.css';

export default class SubmitButton extends Component {
  render() {
    let className, text = "Submit"
    if (this.props.store.submissionInProgress) {
      className = styles.inProgress
      text = "Processing..."
    } else if (this.props.store.errorOccurred) {
      className = styles.error
    } else if (!this.props.form.valid) {
      className = styles.disabled
    } else {
      className = styles.normal
    }
    return <button className={className}>{text}</button>
  }
}

你完全不需要担心你的类命名会和全局的样式表命名冲突,这样能让你的注意力更集中在组件上,而不是样式。我敢保证,使用过一次之后,你会再也不想回到原来的模式中去。

然而这仅仅是一切的开始。CSS 模块化是你的基本,但也是时候来思考一下如何把你的样式们都集中到一块了。

第二步:组件就是一切

上文中我提到了每一个类必须包含按钮不同状态下的所有的样式,与 BEM 命名方式上相比,代码上可能区别如下:

/* BEM Style */
innerHTML = `<button class="Button Button--in-progress">`

/* CSS Modules */
innerHTML = `<button class="${styles.inProgress}">`

那么问题来了,你怎么在所有的状态样式中共享你的样式呢?这个答案就是 CSS 模块的强力武器 - 组件

.common {
  /* all the common styles you want */
}
.normal {
  composes: common;
  /* anything that only applies to Normal */
}
.disabled {
  composes: common;
  /* anything that only applies to Disabled */
}
.error {
  composes: common;
  /* anything that only applies to Error */
}
.inProgress {
  composes: common;
  /* anything that only applies to In Progress */
}

composes这个关键词将会使.normal类将.common内的所有样式包含进来,这个有点像 Sass 的 @extends 语法。但是 Sass 依赖重写你的 CSS 文件达到效果,而 CSS 模块最后会通过 JS 编译导出,不需要修改文件(译者注:下面会有例子详细说明)。

Sass

按照 BEM 的命名规范,我用 Sass 的 @extends 写的话可能会像如下的代码:

.Button--common { /* font-sizes, padding, border-radius */ }
.Button--normal {
  @extends .Button--common;
  /* blue color, light blue background */
}
.Button--error {
  @extends .Button--common;
  /* red color, light red background */
}

编译后的 CSS 文件如下:

.Button--common, .Button--normal, .Button--error {
  /* font-sizes, padding, border-radius */
}
.Button--normal {
  /* blue color, light blue background */
}
.Button--error {
  /* red color, light red background */
}

你可以只需要个类来标记你的元素<button class="Button--error">,但是你能得到包括共有的和特例的所有样式。这看起来真的非常厉害,但是你需要注意这种语法在一些特别的情况下存在问题和陷阱。Hugo Giraudel 在他的文章中做了很好的总结,感谢他!

CSS 模块

composes 语法看起来很像 @extends 但是他们的工作方式是不同的。为了演示一下,让我们来看一个例子:

.common { /* font-sizes, padding, border-radius */ }
.normal { composes: common; /* blue color, light blue background */ }
.error { composes: common; /* red color, light red background */ }

编译后的文件可能是像如下一样:

.components_submit_button__common__abc5436 { /* font-sizes, padding, border-radius */ }
.components_submit_button__normal__def6547 { /* blue color, light blue background */ }
.components_submit_button__error__1638bcd { /* red color, light red background */ }

JS 代码中通过 import styles from "./submit-button.css" 最终会返回:

styles: {
  common: "components_submit_button__common__abc5436",
  normal: "components_submit_button__common__abc5436 components_submit_button__normal__def6547",
  error: "components_submit_button__common__abc5436 components_submit_button__error__1638bcd"
}

所以我们依然可以使用 style.normal 或者 style.error 在我们的代码中,仍旧会有多个类样式渲染在我们的 DOM 上

<button class="components_submit_button__common__abc5436 
               components_submit_button__normal__def6547">
  Submit
</button>

这就是 composes 语法的厉害之处,你可以在不重写你的 CSS 的情况下对你的元素混合使用不同类的样式。

第三步:文件间共享

Sass 或者 LESS 中,你可以在每个文件中使用 @import 在全局工作区间内共享样式。这样你就可以在一个文件中定义变量或者函数(mixins)并在你的其它组件文件中共享使用。这样做是有好处的,但是很快你的变量命名就会与其它的变量名称相冲突(虽然它在另外一个全部空间下),你不可避免的会重构你的 variables.scss 或者 settings.scss,最后你就会发现你已经看不懂到底哪个组件依赖哪个变量了。最后的最后你会发现你的配置文件变量名称冗余到变得非常不实用

针对上述问题仍然是有更好的解决办法的(事实上 Ben Smithett 的文章 Sass 和 Wepack 的混合使用 给了 CSS 模块话很大的启发,我推荐大家去读一读这篇文章),但是不管怎么做你还是局限在了 Sass 的全局环境下。

CSS 模块一次只运行一个文件,这样可以避免全局上下文的污染。而且像 JS 使用 import 或者 require 来加载依赖一样,CSS 模块使用 compose 来从另一个文件中加载:

/* colors.css */
.primary {
  color: #720;
}
.secondary {
  color: #777;
}
/* other helper classes... */
/* submit-button.css */
.common { /* font-sizes, padding, border-radius */ }
.normal {
  composes: common;
  composes: primary from "../shared/colors.css";
}

使用组件,我们能够深入到每一个像colors.css一样的基础样式表中,并随意重命名它。又因为组件只是改变了最后导出的类名称,而不是 CSS 文件本身,composes 语句在浏览器解析之前就会被删除。

/* colors.css */
.shared_colors__primary__fca929 {
  color: #720;
}
.shared_colors__secondary__acf292 {
  color: #777;
}
/* submit-button.css */
.components_submit_button__common__abc5436 { /* font-sizes, padding, border-radius */ }
.components_submit_button__normal__def6547 {}
<button class="shared_colors__primary__fca929
               components_submit_button__common__abc5436 
               components_submit_button__normal__def6547">
  Submit
</button>

事实上,当它被浏览器解析之后,我们的局部是不存在一个"normal"样式的。这是一件好事!这意味着我们可以增加一个局部名字有意义的对象(可能就叫"normal")而不用在 CSS 文件中新增代码。我们使用的越多,对我们的网站会造成更少的视觉误差以及在用户浏览器上更少的不一致。

题外话:空的类样式可以使用 csso 这样的工具来检查去除掉。

第四步:功能单一模块

组件是非常强大的,因为它确实的让你描述了一个元素是什么,而不是它由那些样式组成。这是一种不同的方式去描述概念示例(元素)到样式实体(样式规则)之间的映射关系。让我们看一个简单的 CSS 例子:

.some_element {
  font-size: 1.5rem;
  color: rgba(0,0,0,0);
  padding: 0.5rem;
  box-shadow: 0 0 4px -2px;
}

这些元素,样式都是特别简单的。然而也存在着问题:颜色,字体大小,盒子阴影,内边距-这里的一切都是量身定制的,这让我们想要在其它地方复用这些样式的时候变得有些困难。下面让我们用 Sass 重构这些这些代码:

$large-font-size: 1.5rem;
$dark-text: rgba(0,0,0,0);
$padding-normal: 0.5rem;
@mixin subtle-shadow {
  box-shadow: 0 0 4px -2px;
}

.some_element {
  @include subtle-shadow;
  font-size: $large-font-size;
  color: $dark-text;
  padding: $padding-normal;
}

这是一个进化版,但是我们仅仅只达到了一部分目标。事实上 $large-font-size$padding-normal 只是在名字上表示了它的用途,并不能在任何地方都执行。像 box-shadow 这种定义没办法赋值给变量,我们不得不使用 mixin 或者 @extends 语法来配合。

CSS 模块

通过使用组件,我们可以使用我们可复用的部分定义我们的组件:

.element {
  composes: large from "./typography.css";
  composes: dark-text from "./colors.css";
  composes: padding-all-medium from "./layout.css";
  composes: subtle-shadow from "./effect.css";
}

这种写法势必会有很多单一功能文件产生,然而通过使用文件系统来管理不同用途的样式比起用命名空间来说要好的多。如果你想要从一个文件中导入多个类样式的话,有一种简单的写法:

/* this short hand: */
.element {
  composes: padding-large margin-small from "./layout.css";
}

/* is equivalent to: */
.element {
  composes: padding-large from "./layout.css";
  composes: margin-small from "./layout.css";
}

这开辟了一种可能,使用极细粒的类样式定义一些样式别名去给每一个网站使用:

.article {
  composes: flex vertical centered from "./layout.css";
}

.masthead {
  composes: serif bold 48pt centered from "./typography.css";
  composes: paragraph-margin-below from "./layout.css";
}

.body {
  composes: max720 paragraph-margin-below from "layout.css";
  composes: sans light paragraph-line-height from "./typography.css";
}

我对这种技术非常感兴趣,我觉得,它混合了像 Tachyons 类似的 CSS 原子技术,像 Semantic UI 那样变量分离可读的好处(译者注:就是说 CSS 模块的命名简单易懂,组件复用方便)。

但是 CSS 模块化之路仅仅是刚刚开始,未来我们希望大家能尝试更多为它写出谱写出新的篇章。

翻滚吧!CSS 模块!

我们希望 CSS 模块化能有助于你和你的团队在你们现有的 CSS 和产品的基础上维护代码,让它变得更舒适更高效。我们已经接近可能的把额外的语法减少到最少,并尽量确保语法和现有的变化不大。我们有 WebpackJSPMBrowserify 的示例代码,如果你们使用它们中的其中之一,你们可以参考一二。当然我们也在为 CSS 模块话的使用寻找新的环境:服务端 NodeJS 的支持正在进行,Rails 的支持已经提上议程准备进行了。

但是为了让它变得更简单,我在 Plunker 上制作了一个预览示例,你不用安装任何东西就可以运行它:

css_modules_plunkr.png

这里是 CSS 模块的 Github 仓库地址,如果你有任何问题,请开 issue 提出。CSS 模块团队还很小,我们还没有看到一些有用的例子,欢迎你们给我们投稿。

最后的最后,祝大家开心写样式,幸福每一天!

查看原文

赞 15 收藏 71 评论 11

猫粮骑士 关注了问题 · 2015-09-01

解决关于一个CSS布局该怎么写的问题

今天写了一个简单的布局,然而写完之后觉得CSS文件真心丑哭我,写的太烂了,先说说效果页面:……算了,直接上图吧。
图片描述

呐,就是这样子啦。
再看看代码:


<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
*{
  margin:0px;
  padding:0px;
}
#box{
  width:900px;
  height:800px;
  margin:auto;
  background-color:#ccc;
}
#left{
  width:450px;
  height:800px;
  margin:0px;
  background-color:red;
}
#right{
  width:450px;
  height:800px;
  margin-left:450px;
  margin-top:-800px;
  background-color:blue;
}
#middle{
  margin:-625px auto auto auto;
  width:450px;
  height:450px;
  background-color:#ccc;
}
</style>
</head>

<body>
<div id="box">
<div id="left"></div>
<div id="right"></div>
</div>
 <div id="middle"></div>
</body>
</html>

表示自己感觉这CSS写的很不好,虽然效果是实现了。各位大神,如果是你们写这个,会是什么样子的?或者你们觉得这个有哪里是需要改的(好啦好啦,写的跟翔一样是吧,我知道啦(¬_¬))。自己感觉选择器right里的CSS写的很没水准。还有middle里面的margin也不是很好(都不知道为什么是-800px,我只是一点点看着界面改出来的)……求大师指点啊

关注 22 回答 15

猫粮骑士 赞了文章 · 2015-08-08

用纯CSS实现优雅的tab页

说明

又是一个练手的小玩意儿,本身没什么技术含量,就是几个不常用的CSS3特性的结合而已。

要点

  • Label标签的for属性

  • 单选框的:checked伪类

  • CSS的加号[+]选择器

效果图

图片描述

原理

通常tab页的交互都是点击tab头然后展示对应的一块内容,这种排他性跟HTML里面的某个原住民很类似,是啥呢?没错!就是单选框组。

单选框组有一个:checked伪类,可以设定单选框被选中后的样式,所以我们要把一组单选框当做tab页的头部么?当然不是,单选框是很固执的,用CSS去感化他是很吃力的,那怎么办呢?

这里就要用到CSS里面的+选择器了[实际上这个选择器我之前从来没用过-_-||],简单来说+选择器就是选择紧跟在某个指定元素后面的另一个指定的元素,具体介绍请看 http://www.w3school.com.cn/cs...

Label的for属性是一个很有意思的东西,可以理解为一个遥控器:位于页面底部的一个label标签可以通过for属性来控制页面顶部的一个单选框或者复选框~,是不是很神奇?(噗→_→)

结合以上特点,可以得到一个实现tab页的基本思路:

一个单选按钮后面跟一个lable[tab头],再后面跟上一个div[tab内容块]
用.radio:checked + .tab-header 指定当前tab头的样式
用.radio:checked + .tab-header + .tab-content 指定当前tab内容块的样式

代码

<div class="container">
  <div class="tab-wrapper">
    <!--tab section 1-->
    <input type="radio" name="tab-radio" class="tab-radio" id="tab-radio-1" checked>
    <label for="tab-radio-1" class="tab-handler tab-handler-1">水浒传</label>
    <div class="tab-content tab-content-1">《水浒传》是中国历史上第一部用古白话文写成的歌颂农民起义的长篇章回体版块结构小说,以宋江领导的起义军为主要题材,通过一系列梁山英雄反抗压迫、英勇斗争的生动故事,暴露了北宋末年统治阶级的腐朽和残暴,揭露了当时尖锐对立的社会矛盾和“官逼民反”的残酷现实。按120回本计,前70回讲述各个好汉上梁山,后50回主要为宋江全伙受招安为朝廷效力,以及被奸臣所害。</div>
    <!--tab section 2-->
    <input type="radio" name="tab-radio" class="tab-radio" id="tab-radio-2">
    <label for="tab-radio-2" class="tab-handler tab-handler-2">三国演义</label>
    <div class="tab-content tab-content-2">《三国演义》是中国古典四大名著之一,全名为《三国志通俗演义》。作者是元末明初小说家罗贯中,是中国第一部长篇章回体历史演义小说。描写了从东汉末年到西晋初年之间近105年的历史风云。全书反映了三国时代的政治军事斗争,反映了三国时代各类社会矛盾的转化,并概括了这一时代的历史巨变,塑造了一批叱咤风云的三国英雄人物。</div>
    <!--tab section 3-->
    <input type="radio" name="tab-radio" class="tab-radio" id="tab-radio-3">
    <label for="tab-radio-3" class="tab-handler tab-handler-3">西游记</label>
    <div class="tab-content tab-content-3">《西游记》是中国古典四大名著之一,是由明代小说家吴承恩所创作的中国古代第一部浪漫主义的长篇神魔小说。主要描写了唐朝太宗贞观年间孙悟空、猪八戒、沙僧、白龙马四弟子保护唐僧西行取经,沿途历经九九八十一难,一路降妖伏魔,化险为夷,最后到达西天,取得真经的故事。取材于《大唐三藏取经诗话》和汉族民间传说。 [1] </div>
    <!--tab section 4-->
    <input type="radio" name="tab-radio" class="tab-radio" id="tab-radio-4">
    <label for="tab-radio-4" class="tab-handler tab-handler-4">红楼梦</label>
    <div class="tab-content tab-content-4">《红楼梦》,中国古典四大名著之首,清代作家曹雪芹创作的章回体长篇小说[1] 。早期仅有前八十回抄本流传,八十回后部分未完成且原稿佚失。原名《脂砚斋重评石头记》。程伟元邀请高鹗协同整理出版百二十回全本[2] ,定名《红楼梦》。亦有版本作《金玉缘》。</div>
  </div>
</div>

HTML部分如上,四个区块,四大名著,嘎嘎

html,body{
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #58596b;
}
.container{
  width: 800px;
  height: 400px;
  margin: 100px auto;
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
}
.tab-wrapper{
  position: relative;
  width: 800px;
  height: 60px;
  background-color: #33344a;
}
.tab-wrapper .tab-radio{
  display: none;
}
.tab-handler{
  position: relative;
  z-index: 2;
  display: block;
  float: left;
  height: 60px;
  padding: 0 40px;
  color: #717181;
  font-size: 16px;
  line-height: 60px;
  transition: .3s;
  transform: scale(.9);
}
.tab-radio:checked + .tab-handler{
  color: #fff;
  background-color: #e74c3c;
  transform: scale(1);
}
.tab-radio:checked + .tab-handler + .tab-content{
  visibility: visible;
  opacity: 1;
  transform: scale(1);
}
.tab-wrapper .tab-content{
  visibility: hidden;
  position: absolute;
  top: 60px;
  left: 0;
  width: 740px;
  padding: 30px;
  color: #999;
  font-size: 14px;
  line-height: 1.618em;
  background-color: #fff;
  opacity: 0;
  transition: transform .5s, opacity .7s;
  transform: translateY(20px);
}

CSS代码如上,写的很烂,轻喷~
用visibility+opacity来控制元素的显示和隐藏,实际上是为了实现动画效果(此处有装逼的嫌疑),因为display会阻碍transition,而visibility不会,另外也可以用pointer-events+opacity来代替。


代码就上面那些了,另附jsbin地址:http://output.jsbin.com/cicadu/4
在新版opera/chrome/firefox测试完美,safari上面有严重问题,貌似切换了tab之后,tab内容块的样式已经应用了然而却没有生效,目测页面没有重绘?在开发者工具里面将其focus一下才生效,具体原因未知,有哪位大神知道的请不吝赐教。

查看原文

赞 23 收藏 92 评论 25

认证与成就

  • 获得 0 次点赞
  • 获得 3 枚徽章 获得 0 枚金徽章, 获得 1 枚银徽章, 获得 2 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2014-09-18
个人主页被 169 人浏览