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

善用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. jboss developers studio 快速创建 spring mvc 项目

    1. 2. 部署运行 还有一个 rest very good !! ps:其实就是 一个 jboss 的 spring mvc maven 原型

  2. HttpWatch的Result中出现Aborted的原因分析[配图]

    我们在使用HttpWatch进行Web调试的过程中有时候会看到非HTTP Status Code(状态码)的值,例如:(Aborted). (Aborted)是HttpWatch中定义的三种非HTTP ...

  3. Zookeeper会话

    Zookeeper会话的状态可以分为以下四种:CONNECTING,CONNECTED,CLOSED和NOT_CONNECTED.下图展示了会话的状态和状态之间的转移过程: 会话的初始状态为NOT_C ...

  4. Resellerclub –Cpanel 主机中如何设置 index 缺省首页

    管理面板,点击[文件管理器],如图: ],如图 1. 进入 cPanel 管理面板,点击[文件管理器],如图: 选中[主目录] 显示隐藏文件],如图: ],如图 2. 选中[主目录]和[显示隐藏文件] ...

  5. Swift不同storyboard之间的交互

    如何实现多个Storyboard之间的切换 正如大家所知道的,Main-board是·程序运行的入口,如果找不到就会抛出异常,打开plist文件可以看到关于Main-board的描述,特别的制定了其b ...

  6. Replication的犄角旮旯（二）--寻找订阅端丢失的记录

    <Replication的犄角旮旯>系列导读 Replication的犄角旮旯(一)--变更订阅端表名的应用场景 Replication的犄角旮旯(二)--寻找订阅端丢失的记录 Repli ...

  7. NativeScript 也能开发桌面应用 (nativescript-dotnet-runtime)

    自从看了NativeScript就甚是喜欢,心想要是也能开发桌面应用该多好.求人不如求己,开源组件很强大,差不多组装一下就行了,说干就干. Javascript 引擎用 Jint , 纯C#实现,集成 ...

  8. HTML5按钮的点击态问题

    开始在网页上实现点击态是mousedown mouseup来实现但是手机HTML5实现点击态怎么就不可以了呢 经过查资料才知道手机浏览器来实现点击态是通过 touchstart touchend实现

  9. IIS7 Application Pool Integrate Mode 和 Classic Mode 的区别

    IIS7也用了好久了,关于Application Pool Integrate Mode 和 Classic Mode 究竟是什么也是懵懵懂懂,于是下决心去官网看了技术文档,终于恍然大悟,特来分享一下 ...

  10. VS2013 生成安装文件

    在VS2012之前,我们做安装包一般都是使用VS自带的安装包制作工具来创建安装包的,VS2012.VS2013以后,微软把这个去掉,集成使用了InstallShield进行安装包的制作了,虽然思路差不 ...