p{width: 100px; //设置p标签宽度white-space: nowrap; //文本超出P标签宽度不换行,而是溢出overflow: hidden; //文本超出P标签,超出部分隐藏text-overflow: ellipsis; //CSS3的新属性:显示省略号代替被修剪的文本;其他两个属性:1、clip-修剪文本,2、string-使用给定的字符串来代表被修剪的文本} 原文:http://www.cnblogs.com/lvmylife/p/5339014.html
不得不佩服京东的速度,昨天刚下单的两本书今天上午就到了。其中一本是全彩页的《众妙之门 - 精通CSS3》,细看了前几十页,书上的叙述方式给我的印象其实不如“彩页”来的讨喜——接连说上几个例子,扔个例子的链接(没源码下载,要自己手动输入,而且近乎所有的例子页面均已失效),未经细剖便草草了事,感觉倒是适合作为厕所读物(汗)。。。。虽然书中不细剖,却也不能白花银子,不妨自己实打实地查资料、记笔记,不辜负了早上送...
<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style type="text/css"> html, body { height: 100%; margin: 0px; padding: 0px; } #main { background-color: #E01313; height: 100%; } #nav { backgr...
因为网上此类教程有很多,我就抓重点,让项目快速上手。如果是在windows系统下,就先安装ruby,官网下载地址:https://rubyinstaller.org/downloads/安装完之后,来跟着节奏燥起来。1、在命令行中:gem install sass2、这时候就可以直接进到你的项目文件中:sass --watch scss/:scss/ // 这监听scss整个文件夹,并生成新的css到scss文件夹中。(ps: 这里生成的文件夹也可以自己替换)提醒: 这里如果只想改变文件夹中某一个sc...
多列布局——Columns为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局,W3C特意给CSS3增加了一个多列布局模块(CSS Multi Column Layout Module)。它主要应用在文本的多列布局方面,这种布局在报纸和杂志上都使用了几十年了,但要在Web页面上实现这样的效果还是有相当大的难度,庆幸的是,CSS3的多列布局可以轻松实现。接下来咱们一起学习多列布局相关的知识。语法:columns:<column-width> || <column-count>多列布局...
课程地址:http://www.imooc.com/learn/33第1章 初识CSS3CSS3课程列出第一站,先带领大家进入CSS3的世界,探索CSS3的魅力!你做好准备了吗?第2章 边框本课程主要讲解border-color 、border-image 、border-radius 及box-shadow 相关知识第3章 颜色相关学习CSS3中与颜色有关的属性,包括RGBA colors和Gradient,来实现在此之前只能通过其它手段如背景图片才能得到的绚丽效果。第4章 文字与字体本章学习CSS3中文字相关的属性,包括t...
30种炫酷CSS3鼠标滑过按钮动画特效效果演示:http://www.htmleaf.com/Demo/201510282718.htmlCSS3鼠标hover按钮过渡动画效果演示:http://www.htmleaf.com/Demo/201708104678.html基于css3的各种新颖的鼠标hover图片动画效果演示:http://www.htmleaf.com/Demo/20141018225.html16种基于Bootstrap的css3图片hover效果演示:http://www.htmleaf.com/Demo/201703134400.html原文:https://www.cnblogs.com/he-qiang/p/8615153.html
用flex实现css里的三大经典布局,不需要额外很多代码。1,垂直居中 :子元素在父元素中,水平垂直居中。justify-content:center设置水平方向居中,align-center设置垂直方向居中。<div id="parent"><div id="child"></div></div>#parent {
/* align-content和align-items必须配合使用 */display: flex;justify-content: center;align-content: center;align-items: center;width: 300px;height: 300px;outline: solid 1px;}#child ...
话说CSS字体属性font-family、font-style、font-size、font-weight、font-variant:使用CSS,可以对字体进行设置,字体属性包括五种常见属性:字体系列font-family、字体样式/字体风格font-style、字体大小font-size、字体粗细font-weight、字体变量font-variant。通过这五个属性,可以设定文本在web页面的显示效果或文本的打印效果。1.字体系列font-family支持按照优先级顺序列出各种要指派使用的字体,当用户系统没有安装首选字体...
sublime开发前端确实好用,有好多些个的插件,轻量便捷,但是在使用sublime中的一些插件的时候总是会遇到困扰,跟自己想象中的不一样,比如在使用SublimeCodeIntel插件的时候,就会遇到一个烦人的问题:在css中输入分号要换行的时候,总是弹出自动提示,按下回车就会确认提示,很是烦人。为此:特意上网查了2个小时,终于找到解决方案:打开Sublime默认设置文件:‘Perferences->Package Settings->SublimeCodeIntel->Setting - De...
单行居中,多行居左,超过两行用省略号(绝对定位)<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>* {margin: 0;padding: 0;}.container {width: 320px;margin: 10px auto;background: #ddd;position: relative;}h2 {position: relative;line-height...
模板:<button class="r receive_code">获取验证码</button><span class="r code"></span>脚本:// 生成六位数字验证码$(".code").html(null);function createCode() {var code = "";var length = 6;var i;var str = "";var content;var codeSpan = $(".code");var arrColor = ["blue", "red", "green", "brown", "gray", "pink", "red", "green", "brown", "blue"];codeSpan.html(null);for (i = 0; i < length; i++) {index = Ma...
CSS3中使用了很多的属性选择器,通过这些属性选择器,可以根据我们自己的设计来定义元素的样式,制作精美的网页。CSS3属性选择器下面是CSS3的属性选择器的语法,及使用。元素名字[元素类型=“类型名字”]:选择器名字{属性:值;属性:值;
} 在元素类型匹配时,就可以使用类似正则的匹配方法。 [att=val] 指定特定名字的元素 [att*=val] 匹配val*的元素, [att^=val] 匹配val开头的元素,比如id为val1、val432432都可...
CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理技巧并整理了一下。对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声明。CSS技巧1.div的垂直居中问题vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了。缺点是要控制内容不要换行2. m...
1、line-height的定义 定义:两行文字基线之间的距离。 注:不同字体之间的基线是不同的。2、line-height与行内框盒子模型 行内框盒子模型: ①内容区域(content area),是一种围绕文字看不见的盒子,大小与font-size有关; ②内联盒子(inline boxes),不会让内容成块显示,而是排成一行。如果外部含inline水平标签,则属于内联盒子;如果是个光秃秃的文字,则属于”匿名内联盒子“; ③行框盒子(line boxe...