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

善用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. CentOS 7编译安装gcc5.3碰到的坑

    下载最新的iso安装完毕后,发现gcc还是4.8版本的,就考虑升级到5.x 参考这个帖子 基本也没啥,但是执行download_prerequisites 时简直坑爹,三个压缩包都不超过2M 反复尝试 ...

  2. gridview汇出EXCEL (ExportGridViewToExcel(dt, HttpContext.Current.Response);)

    调用 ExportGridViewToExcel(dt, HttpContext.Current.Response); private void ExportGridViewToExcel(DataT ...

  3. libev安装与示例程序编译运行

    Linux平台C网络编程,之前总是看各大名著(如UNIX环境高级编程和UNIX网络编程,还有TCP/IP详解 卷1:协议和深入理解计算机系统(原书第2版)),同时写点小程序练习.然而还是拿不出手. 参 ...

  4. 产品研发过程中UCD目标的制定与实现

    摘 要:以用户为中心的设计(UCD, User-Centered Design)是保障产品具有较好用户体验(User Experience)的基本活动,其中可用性目标是有效衡量 UCD 活动最终效果的 ...

  5. IntelliLock

    IntelliLock的使用说明: http://blog.csdn.net/gnicky/article/details/20737107 http://download.csdn.net/deta ...

  6. .NET跨平台实践：用C#开发Linux守护进程（转）

    Linux守护进程(Daemon)是Linux的后台服务进程,它脱离了与控制终端的关联,直接由Linux init进程管理其生命周期,即使你关闭了控制台,daemon也能在后台正常工作. 一句话,为L ...

  7. [Asp.net 开发系列之SignalR篇]专题二：使用SignalR实现酷炫端对端聊天功能

    一.引言 在前一篇文章已经详细介绍了SignalR了,并且简单介绍它在Asp.net MVC 和WPF中的应用.在上篇博文介绍的都是群发消息的实现,然而,对于SignalR是为了实时聊天而生的,自然少 ...

  8. 扒皮下GitHub 404的图片层次轴动特效

    今天要克隆的前端特效非常有意思,可以参见GitHub404页面 https://github.com/vajoy/master/index.html 记得之前华为在站酷发布EMUI设计大赛的主页也用了 ...

  9. WPF，Silverlight与XAML读书笔记第四十四 - 外观效果之样式

    说明:本系列基本上是<WPF揭秘>的读书笔记.在结构安排与文章内容上参照<WPF揭秘>的编排,对内容进行了总结并加入一些个人理解. 如果你有Web编程的经验,你会知道使用Sty ...

  10. 字体大小自适应纯css解决方案

    viewpoint css3提供了一些与当前viewpoint相关的元素,vw,vh,vim等. “viewpoint” = window size vw = 1% of viewport width ...