领会CSS，实际中的研究

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

善用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:0;padding:0;
}/* clearfix */
.clearfix{overflow:auto;zoom:1;
}/* 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: 2;-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: 0;
}/* 特效 */
#test_5:hover p{opacity:1;border:1px solid #ccc;padding:10px 0;
}
#test_5 p{opacity:0;transition:all 0.5s;
}

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

转载于:https://www.cnblogs.com/pssp/p/5856968.html

领会CSS，实际中的研究相关推荐

Liferay Dynamic CSS Filter方法的研究 - 总体过程
背景知识: 最近项目组遇到一个问题就是改了一个new theme之后导致某些css文件不起作用了,这也激起了我的好奇心,让我有机会去研究下Liferay Dynamic CSS Filter的原理. ...
前端工程师高手说说CSS学习中的瓶颈
一.何为瓶颈? "瓶颈"指瓶子的颈部,相对狭窄.这是很传神的一个词,因为狭窄,因此难以突破:但是,一旦突破了,就是广阔天空(偌大瓶身)! 小弟不才,凑合画了个瓶颈示意图,如下: 图 ...
算警示吧——此文来自张鑫旭（说说CSS学习中的瓶颈）
by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=2523 虽已数年,但 ...
CSS学习中的瓶颈期深入分析
虽已数年,但未就学习专门写过文章,这回破处了.苍蝇不叮没有缝隙的鸡蛋,领导不做没有跟拍的表演,同样,想到写CSS学习的文章也是有原因的(虽然我的不少行为没有原因). 情景再现(尊重隐私,下面故事中人名 ...
说说CSS学习中的瓶颈【转】
一.何为瓶颈? "瓶颈"指瓶子的颈部,相对狭窄.这是很传神的一个词,因为狭窄,因此难以突破:但是,一旦突破了,就是广阔天空(偌大瓶身)! 小弟不才,凑合画了个瓶颈示意图,如下: 图 ...
说说CSS学习中的瓶颈
by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=2523 虽已数年,但 ...
css布局中的居中问题
css布局中的居中问题作者:阿捷 2004-7-5 14:35:49 #sample{ HEIGHT:240px;WIDTH:400px; BACKGROUND: url(http://www.w3 ...
float属性html,详解CSS样式中的float属性
详解CSS样式中的float属性.float是 css 样式的定位属性.我们在印刷排版中,文本可以按照需要围绕图片.一般把这种方式称为"文本环绕".在网页设计中,应用了CSS的fl ...
css规则中区块block,css常用属性总结：背景background下篇
前言:这段时间天天加班到10:30之后,简直是x了. 在上一篇文章中,分别解析了background各个属性的用法和注意细节.如果我们在项目上使用背景效果,如果使用下面的写法,你可能抓狂. body{ ...
CSS基础篇--CSS/CSS3中的原生变量var详解
使用语法首先我们先来看一个例子: html代码: <div class="element">这是一段文字</div> css代码: .element {w ...

领会CSS，实际中的研究

领会CSS，实际中的研究相关推荐

最新文章

热门文章