!!!常用CSS代码

常用CSS代码大全（工作必备）

用html+css可以很方便的进行网页的排版布局,但不是每一种属性或者代码我们都铭记于心,最近我把CSS中的常用代码进行了归纳总结,方便自己以后查看,同时也分享给大家,希望对你们有用. 一.文本设置 .font-size: 字号参数 .font-style: 字体格式 .font-weight: 字体粗细 .颜色属性 color: 参数注意使用网页安全色二.超链接设置 text-decoration: 参数主要用途是改变浏览器显示文字链接时的下划线. 参数取值范围: underline:为…

discuz内置常用CSS代码分析

CSS多IE下兼容HACK写法所有 IE浏览器适用:.ie_all .foo { ... } IE6 专用:.ie6 .foo { ... } IE7 专用:.ie7 .foo { ... } IE8 专用:.ie8 .foo { ... } CSS书写规范属性写在一行内,属性之间.属性名和值之间以及属性与“{}”之间须有空格,例如:.class { width: 400px; height: 300px; } 属性的书写顺序: 针对特殊浏览器的属性,应写在标准属性之前,例如:-webkit…

常用css代码(scss mixin)

溢出显示省略号参过参数可以只是单/多行. /** * 溢出省略号 * @param {Number} 行数 */ @mixin ellipsis($rowCount: 1) { @if $rowCount <=1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @else { min-width: 0; overflow: hidden; text-overflow: ellipsis; display:…

http://www.cnblogs.com/qq21270/p/4854643.html 伪类 http://www.cnblogs.com/qq21270/p/4891167.html CSS3动画(自用) http://www.cnblogs.com/qq21270/p/5083105.html 手机页面,常用字号和布局(工作中用) 2015-12-28 常用的CSS命名规则 http://www.cnblogs.com/qq21270/p/5191219.html 2016-2-16…

常用CSS代码片段常见css bug

1.禁止文字被选中 .unselectable { -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; /* Introduced in IE 10. See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/ */ -ms-user-select: none; user-select: none; } /*整站的话给body这…

!!!常用CSS代码块

图片排满一行.左右两端无间隙. <style type="text/css"> .img_abc{float:left;width:30%;margin-left:5%;} .img_abc:first-child{margin-left:0} .body92{margin-left:4%;margin-right:4%;} </style> <div class="body92"> <img src="14085…

常用CSS代码片断

单行文本截字 .nowrap { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-break: normal; word-wrap: normal; width: 200px; /* 宽度根据实际情况修改 */ }…

css代码添加背景图片常用代码

css代码添加背景图片常用代码 1 背景颜色 { font-size: 16px; content: ""; display: block; width: 700px; height: 0px; margin: 20px 0px;"> 2 背景图片 {background-image: url(url)|none} 3 背景重复 {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y} 4 背景固定 {…

前端常用得CSS代码分享

前端常用得CSS代码分享本文首发于公众号:小夭同学,同步更新个人博客:故事影片,转载请署名.代码不断更新中!! 1,垂直居中对齐 .vc { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .vc { position:absolute; top: 50%; left: 50%; width: 100px; height: 100px; margin:-50px 0 -50px; } 2,…

Less:优雅的写CSS代码

css是不能够定义变量的,也不能嵌套.它没有编程语言的特性.在项目开发中,常常发现有很多css代码是相同的,但我们通常都是复制然后粘贴. 举个例子:假设h5应用里主题色是#FF3A6D,可能用于文字或者背景色.通常开发中,哪里需要这个颜色,我们就复制这个颜色并粘贴.下次要修改就得全部查找批量替换,其实不是很方便. 本文即将介绍的less将让我们更快更方便的编写css代码. Less是什么 Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量.混合(mixin).函数等功能…

60个有用CSS代码片段

1.垂直对齐如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,可以很优雅的解决这个困惑: .verticalcenter{ position: relative; top: 50%; -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } (ps:[译]如何实现CSS居中?–CSS居中常用方法)使用这个…

工作中总结的常用PHP代码

[目录] ◆PHP常用的代码 ◆HTML常用代码 [值传递和引用传递] [单例模式] [魔术常量] [代码调试(自定义一个简单的debug函数)] [thinkphp多表查询] [获取客户端IP地址] [PHP json_encode中文乱码解决方法] [Apache设置二级域名和虚拟主机,在httpd.conf的最后] [CURL 获取远程网页数据] [使用CURL抓取网页] [在cURL中用POST方法发送数据] [使用cURL上传文件] [上传网络图片] [PHP将XML数据转换为数组…

如何写出优雅的CSS代码？(转)

对于同样的项目或者是一个网页,尽管最终每个前端开发工程师都可以实现相同的效果,但是他们所写的代码一定是不同的.有的优雅,看起来清晰易懂,代码具有可拓展性,这样的代码有利于团队合作和后期的维护:而有的混乱,虽然表达出了最终的效果,然而却晦涩难懂,显然团队成员在读这样的代码时就显得无从下手,更不利于后期的维护了.那么如何写出优雅的代码呢?下面我将以一个很小的项目就以下几个方面简单的表达一下自己的看法,如有不妥,望批评指正. 如何整理一个项目. 如何写出清晰易懂的HTML代码. 如何写出优雅的css代…

CSS代码重构与优化之路

作者:@狼狼的蓝胖子网址:http://www.cnblogs.com/lrzw32/p/5100745.html 写CSS的同学们往往会体会到,随着项目规模的增加,项目中的CSS代码也会越来越多,如果没有及时对CSS代码进行维护,CSS代码不断会越来越多.CSS代码交错复杂,像一张庞大的蜘蛛网分布在网站的各个位置,你不知道修改这行代码会有什么影响,所以如果有修改或增加新功能时,开发人员往往不敢去删除旧的冗余的代码,而保险地增加新代码,最终的坏处就是项目中的CSS会越来越多,最终陷入无底洞.…

如何写出优雅的css代码？

如何写出优雅的css代码 ? 对于同样的项目或者是一个网页,尽管最终每个前端开发工程师都可以实现相同的效果,但是他们所写的代码一定是不同的.有的优雅,看起来清晰易懂,代码具有可拓展性,这样的代码有利于团队合作和后期的维护:而有的混乱,虽然表达出了最终的效果,然而却晦涩难懂,显然团队成员在读这样的代码时就显得无从下手,更不利于后期的维护了.那么如何写出优雅的代码呢?下面我将以一个很小的项目就以下几个方面简单的表达一下自己的看法,如有不妥,望批评指正. 如何整理一个项目. 如何写出清晰易懂的HTML…

Emmet：HTML/CSS代码快速编写神器

本文来源:http://www.iteye.com/news/27580 ,还可参考:http://www.w3cplus.com/tools/emmet-cheat-sheet.html Emmet的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌生.它使用仿CSS选择器的语法来生成代码,大大提高了HTML/CSS代码编写的速度,比如下面的演示: Zen coding下的编码演示去年年底,该插件已经改名为Emmet.但Emmet不只改名,还带来了一…

h5专题常用小代码

今天把做专题常用的js代码总结出来(持续更新),方便以后直接复制使用,不用老敲啊敲 1.屏幕适配JS代码 <script> var phoneScale = parseInt(window.screen.width)/640;document.write('<meta name=\'viewport\' content=\'width=640, minimum-scale = '+ phoneScale +', maximum-scale = '+ phoneScale +', user…

CSS代码重构

CSS代码重构的目的我们写CSS代码时,不仅仅只是完成页面设计的效果,还应该让CSS代码易于管理,维护.我们对CSS代码重构主要有两个目的:1.提高代码性能2.提高代码的可维护性提高代码性能提高CSS代码性能主要有两个点:1.提高页面的加载性能提高页面的加载性能,简单说就是减小CSS文件的大小,提高页面的加载速度,尽可以的利用http缓存2.提高CSS代码性能不同的CSS代码,浏览器对其解析的速度也是不一样的,如何提高浏览器解析CSS代码的速度也是我们要考虑的提高代码的可维护性提高CS…

精简CSS代码

精简CSS代码可以帮助减小样式文件的大小,使代码清晰,方便维护. 使用简写属性及默认值 .header { margin-top: 10px; margin-right: 20px; margin-bottom: 30px; margin-left: 40px; } /* 可以使用简写属性 margin */ .header { margin: 10px 20px 30px 40px; /* 4个值分别对应方向为 top right bottom left */ } /* ==========…

30个最常用css选择器解析(zz)

你也许已经掌握了id.class.后台选择器这些基本的css选择器.但这远远不是css的全部.下面向大家系统的解析css中30个最常用的选择器,包括我们最头痛的浏览器兼容性问题.掌握了它们,才能真正领略css的巨大灵活性. 1. * * { margin: 0; padding: 0; } 星状选择符会在页面上的每一个元素上起作用.web设计者经常用它将页面中所有元素的margin和padding设置为0. *选择符也可以在子选择器中使用. #container * { border: 1px…

如何利用CSS代码使图片和文字在同一行显示且对齐

对于初学css的新手朋友来说,经常会遇到这样一个问题,当文字和图片出现在同一行或者同一个div里面的时候,在浏览器中运行出来的显示效果往往是在不同的行,那么,我们怎么才能利用CSS代码使图片和文字在同一行显示且对齐呢? 对于这种现象,方法有3种: 1.通过添加css的“vertical-align:middle;”: 2.如果图片是背景图片,可以在css中设置背景图片,然后设置文字的padding属性: 3.把文字和图片分别放入不同的div中. 经过多次的测试,上面三种方法都可以让图片和文字在同…

Emmet：HTML/CSS代码快速编写神器(转)

Emmet的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌生.它使用仿CSS选择器的语法来生成代码,大大提高了HTML/CSS代码编写的速度,比如下面的演示: Zen coding下的编码演示去年年底,该插件已经改名为Emmet.但Emmet不只改名,还带来了一些新特性.本文就来直观地演示给你. 一.快速编写HTML代码 1. 初始化 HTML文档需要包含一些固定的标签,比如<html>.<head>.<body>等,现在你…

30个最常用css选择器解析

转自:http://www.cnblogs.com/yiyuanke/archive/2011/10/22/CSS.html 你也许已经掌握了id.class.后台选择器这些基本的css选择器.但这远远不是css的全部.下面向大家系统的解析css中30个最常用的选择器,包括我们最头痛的浏览器兼容性问题.掌握了它们,才能真正领略css的巨大灵活性. 1. * * { margin: 0; padding: 0; } 星状选择符会在页面上的每一个元素上起作用.web设计者经常用它将页面中所有元素的m…

【!!!常用CSS代码】的更多相关文章