虽懂却不会，真是可怕，自认懂却了无。

善用CSS属性选择器

在用于区别和唯一的情况下完全可以使用属性选择器，而没有必要使用class或id

p[city="http://www.css.com/"]{
　　color:red;
}

<p city="http://www.css.com/">www.css.com</p>

first-line首行段落

利用:after和:before生成内容，可以减少你的标签。

根据你要做的事来选择合适的标签而不是表现。

超越css-64页

常用代码库

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

  <title>M tools module</title>

  <link rel="stylesheet" href="css/index.css">

</head>

<body>

  --1

  <!-- 左边固定宽度，右边自适应 -->

  <section id="test_1">

    <p>左边：<span>嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻从小嘻嘻嘻嘻嘻嘻下</span></p>

  </section>

  --2

  <!-- 左边固定宽度，右边自适应并且可以编辑内容 -->

  <section id="test_2">

    <p>左边：<span  contenteditable="true">嘻嘻嘻嘻嘻嘻下小嘻嘻嘻嘻嘻嘻下嘻嘻嘻嘻嘻嘻下小嘻嘻嘻嘻嘻嘻下</span></p>

  </section>

  --3

  <!-- 商品列表 -->

  <section id="test_3" class="clearfix">

    <a href="javascript:;">

      <span>图片</span>

      <dl>

        <dt>商品标题商品标题商品标题商品标题商品标题商品标题商品标题</dt>

        <dd>这是一段内容内容内容内容内容</dd>

        <dd>这是一段内容内容内容内容内容</dd>

      </dl>

      <p>底部</p>

    </a>

  </section>

  --4

  <!-- 文字宽度平分 -->

  <section id="test_4">

    <p>文字啊</p>

  </section>

  --5

  <!-- 特效 -->

  <section id="test_5">

    <h3>显示</h3>

    <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>

  </section>

</body>

</html>
/* reset */

div,h1,h2,h3,h4,h5,h6,dl,dt,dd,ul,ol,li,p{

  margin:;

  padding:;

}

/* clearfix */

.clearfix{

  overflow:auto;

  zoom:;

}

/* test_1 */

#test_1 span{

  display:inline-block;

  width:80%;

  vertical-align:top;

}

/* test_2 */

#test_2 span{

  display:inline-block;

  width:80%;

  vertical-align:top;

  min-height: 50px;

  outline: none;

  border: 1px solid #fff;

  padding:3px;

}

#test_2 span:hover{

  border: 1px solid #a0b3d6;

}

/* test_3 */

#test_3 span{

  float:left;

  height:120px;

  margin-right:12px;

}

#test_3 dl{

  min-height:100px;

  max-height:100px;

}

#test_3 dt{

  overflow: hidden;

  text-overflow: ellipsis;

  display: -webkit-box;

  -webkit-line-clamp:;

  -webkit-box-orient: vertical;

}

#test_3 dd{

  padding:5px 0;

}

/* test_4 */

#test_4 p{

  width: 60px;

  text-align: justify;

}

#test_4 p:after{

  content: "";

  display: inline-block;

  width: 100%;

  height:;

}

/* 特效 */

#test_5:hover p{

  opacity:;

  border:1px solid #ccc;

  padding:10px 0;

}

#test_5 p{

  opacity:;

  transition:all 0.5s;

}

............

领会CSS，实际中的研究的更多相关文章

  1. 说说CSS学习中的瓶颈

    虽已数年,但未就学习专门写过文章,这回破处了.苍蝇不叮没有缝隙的鸡蛋,领导不做没有跟拍的表演,同样,想到写CSS学习的文章也是有原因的(虽然我的不少行为没有原因). 情景再现(尊重隐私,下面故事中人名 ...

  2. CSS学习中的瓶颈期深入分析

    虽已数年,但未就学习专门写过文章,这回破处了.苍蝇不叮没有缝隙的鸡蛋,领导不做没有跟拍的表演,同样,想到写CSS学习的文章也是有原因的(虽然我的不少行为没有原因). 情景再现(尊重隐私,下面故事中人名 ...

  3. 算警示吧——此文来自张鑫旭（说说CSS学习中的瓶颈）

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2523 虽已数年,但未 ...

  4. 透过现象看webpack处理css文件中图片路径转换的具体过程

    webpack是目前使用比较流行的一个前端模块打包器,前端的任何资源都被当成一个模块来处理,如图片.css文件等等.在基于webpack构建的前端项目中,一般都会配置有关css文件处理的规则,这其中也 ...

  5. 关于 CSS 反射倒影的研究思考

    原文地址:https://css-tricks.com/state-css-reflections 译者:nzbin 友情提示:由于演示 demo 的兼容性,推荐火狐浏览.该文章篇幅较长,内容庞杂,有 ...

  6. DIV+CSS布局中主要CSS属性介绍

    Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能 ...

  7. CSS布局中的水平垂直居中

    CSS布局中的水平垂直居中 各位好,先说两句题外话.今天是我开通博客园的博客第一天,虽然我申请博客园的账号已经有一年半了,但是由于各种原因迟迟没有开通自己的博客.今天非常有幸开通博客,在此也写一篇关于 ...

  8. 怎样将多个CSS文件导入一个CSS文件中

    问题: 在HTML中引入css的其中的两个方法:    导入式和链接式的目的都是将一个独立的css文件引入一个文件中,二者的区别不大,事实上,二者最大的区别在于链接式使用html的标记引入外部css文 ...

  9. DIV CSS布局中position属性用法深入探究

    本文向大家描述一下DIV CSS布局中的position属性的用法,position属性主要有四种属性值,任何元素的默认position的属性值均是static,静态.这节课主要讲讲relative( ...

  10. 认识和理解css布局中的BFC

    认识和理解css布局中的BFC BFC的定义 是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用. Block Formatting Con ...

随机推荐

  1. xilium CefGlue集成包

    最近很苦B的要做一个C#的HTM5项目,build了一下xilium CefGlue包,提供下载地址,供那些无法下载的同学们使用. http://yun.baidu.com/s/1slEdNEt

  2. 洛谷P1330 封锁阳光大学

    题目描述 曹是一只爱刷街的老曹,暑假期间,他每天都欢快地在阳光大学的校园里刷街.河蟹看到欢快的曹,感到不爽.河蟹决定封锁阳光大学,不让曹刷街. 阳光大学的校园是一张由N个点构成的无向图,N个点之间由M ...

  3. C++函数返回局部指针变量

    遇到过好几次关于函数返回指针变量问题,有时候是可以的,有时候是不可以的,然后就混乱了.今天研究了下,结果发现原来和内存分配有关. 用下面的例子分析下吧: char * test() { char a[ ...

  4. tar.xz文件解压

    原文:http://blog.csdn.net/rheostat/article/details/7614451 感谢CSDN的<帝都码农> ======================= ...

  5. PyQt4学习资料汇总

    一个月前研究了下PyQt4,感觉比较不错.相比wxpython,界面美观了很多,并且将界面设计与代码逻辑很好的分离了开来.关于PyQt4的资料也不少,这里我将我找到的资料汇总一下,以防自己以后忘得一干 ...

  6. HDU4430 Yukari's Birthday(枚举+二分)

    Yukari's Birthday  HDU4430 就是枚举+二分: 注意处理怎样判断溢出...(因为题目只要10^12) 先前还以为要用到快速幂和等比数列的快速求和(但肯定会超__int64) 而 ...

  7. poj 3067 - Japan(树状数组)

    先按第一个数从大到小排序,相等的情况下,第二个数按照从大到小排序..... 预处理后,照着树状数组写就行了... 注意:k的最大值应取1000*1000 代码如下: include <cstdi ...

  8. flashcache

    Flashcache系统管理员手册 1.简介Flashcache 是为Linux操作系统开发的块设备回写缓存内核模块,使用了Device Mapper的方式实现,本文档可指导你快速掌握Flashcac ...

  9. Amazon AWS EC2开启Web服务器配置

    在Amazon AWS EC2申请了一年的免费使用权,安装了CentOS + Mono + Jexus环境做一个Web Server使用. 在上述系统安装好之后,把TCP 80端口开启(iptable ...

  10. CSS3之图片3D翻转效果(网页效果--每日一更)

    今天,带来的是纯CSS3的效果--图片3D翻转. 请看效果:亲,请点击这里 这个效果主要还是运用了CSS3的transform变形属性,与上个效果不同的是,这次并不是动画,所以没有采用animatio ...