CSS3 创建多列column-count 属性指定了需要分割的列数。12345678910111213141516171819202122<!DOCTYPE html><html><head><style> .newspaper{ -webkit-column-count:6; /* Safari and Chrome */ }</style></head><body> <p><b>注意:</b> Internet Explorer 9及更早 IE 版本浏览器不支持 column-count 属性。</p> <div class="newspaper">“当我年轻的时候,我梦想改变这个世界;当我成熟以后,我发现我不能够改变这个世界,我...
效果如下::before,:afterCSS伪类是用来添加一些选择器的特殊效果。使用了css3的伪类,即相当于是在一个div中写入文字,然后在它前后各加了一个div,然后进行位置及宽高的调节。代码:<div>中间文字,两边横线</div>
div {font: 400 20px Helvetica, Arial, sans-serif;display: flex;justify-content: center;align-items: center;}/*CSS伪类用法*/div:after, div:before {background: #000000;content: "";height: 2px;width: 2...
前言webkit支持拥有overflow属性的区域,列表框,下拉菜单,textarea的滚动条自定义样式,所以用处还是挺大的。当然,兼容所有浏览器的滚动条样式目前是不存在的。演示来看看这2个滚动条demo: demo1(图片版)、demo2(纯CSS3版)滚动条组成::-webkit-scrollbar 滚动条整体部分::-webkit-scrollbar-thumb 滚动条里面的小方块,能向上向下移动(或往左往右移动,取决于是垂直滚动条还是水平滚动条)::-webkit-scrollbar-track 滚...
首先我们了解下什么是css3,css3是css技术的一个升级。css3中并没有采用总体结构,而是采用分工协作的模块化结构。css3中的模块模块名称功能描述basic box model定义各种与盒相关的样式line定义与各种直线相关的样式speech定义各种与声音有关的样式,譬如音量、音速、说话间歇时间等属性background and border定义各种与背景和边框相关的样式 text定义各种与文字相关的样式color定义各种与颜色相关的样式font定义各种与字体相关...
#rcorners1 {border-radius: 25px;background: #8AC007;padding: 20px;width: 200px;height: 150px;
}#rcorners2 {border-radius: 25px;border: 2px solid #8AC007;padding: 20px;width: 200px;height: 150px;
}#rcorners3 {border-radius: 25px;background: url(/images/paper.gif);background-position: left top;background-repeat: repeat;padding: 20px;width: 200px;height: 150px;
}#rcorners4 {border-radius:...
Media Queries直译过来就是“媒体查询”,在我们平时的Web页面中head部分常看到这样的一段代码: 复制代码代码如下:<link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" /> <link href="css/style.css" rel="stylesheet" type="text/css" media="all" /> <link href="css/print.css" rel="stylesheet" type="text/css" media="print" />或者这样的形式: 复制代码代码如下: <style type="text/css" med...
css3 box-sizing属性box-sizing属性可以为三个值之一:content-box(default),border-box,padding-box。content-box,border和padding不计算入width和height之内,浏览器默认也是这样padding-box,padding计算入width内border-box,border和padding计算入width之内,其实就是怪异模式了~ ie8+浏览器支持content-box和border-box;ff则支持全部三个值。 案例 #a1{width:500px;padding: 10px;border:1px solid #ee240f;}问...
nternet Explorer 10 和 Opera 支持多列属性。Firefox 需要前缀 -moz-。Chrome 和 Safari 需要前缀 -webkit-。注释:Internet Explorer 9 以及更早的版本不支持多列属性。column-count 属性规定元素应该被分隔的列数:column-gap 属性规定列之间的间隔:div
{
-moz-column-rule:3px outset #ff0000; /* Firefox */
-webkit-column-rule:3px outset #ff0000; /* Safari and Chrome */
column-rule:3px outset #ff0000;
}column-coun...
在CSS中,与媒体相关的样式定义是从CSS2.1开始的。CSS2.1中定义了各种媒体类型,包括显示器、便携设备、电视机,等等。
CSS3中加入了Media
Queries模块,该模块中允许添加媒体查询表达式,用以指定媒体类型,然后根据媒体类型来选择应该使用的样式。换句话说,允许我们在不改变内容的情况下在样式中选择一种页面的布局以精确地适应不同的设备,从而改善用户体验。
我们知道,在不同的设备中,浏览器的窗口尺寸可能是不...
.ribbon {background: #45c9c8;position: absolute;width: 75px;height: 25px;line-height: 25px;top: -4px;left: -11px;font-size: 14px;color: #fff;text-align: center;font-style: normal;z-index: 1;&:after{content: "";position: absolute;width: 0;height: 0;border-left: 12px solid transparent;border-top: 5px solid #329c9b;top: 25px;left: 0px;z-index: 0;}&:before{content: "";position: absolute;right: -10px;f...
h5增加特性 语义标签化如 section article meter footer progress等等html代码h5增加了重要的自定义属性的功能;给标签添加自定义属性 必须以data-开头自定义的属性 需要通过 dateset[]方式来获取如自定义属性 data-box获取自定义属性 dataset设置自定义属性 dataset[“box”];<!-- 定义数据列表—><datalist id="sex"> <option >男</option> <option >女</option> <option >不祥</option></datalist><!—定义度量器—><...
1、属性选择器:实例展示:html代码:<a href="xxx.pdf">我链接的是PDF文件</a><a href="#" class="icon">我类名是icon</a><a href="#" title="我的title是more">我的title是more</a>css代码:a[class^=icon]{background: green;color:#fff;
}
a[href$=pdf]{background: orange;color: #fff;
}
a[title*=more]{background: blue;color: #fff;
} 结果显示:2、结构性伪类选择器1、—root:root选择器,从字面上我们就可以很清楚的理解...
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>使用transform和transition制作CSS3动画</title>
<style>
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input{margin:0; padding:0;}
/* HTML ELEMENTS */
body { background-color:#deddcd; font:14px/21px Arial,Helvetica,sans-serif; }
h1 { font: bold 65px/60px Helvetica, Arial, Sans-serif; text-align: center; col...
transform是一个属性,本质跟width,height是一样的,加上transform也就是为类增加一个变换属性。transition是一个属性,它是用来控制过渡效果的,因为用transform可以增加变换效果,而那个变换是瞬间突变,如果想让这个变化是平滑的、过渡型的,则要用transition来控制,设定要控制的属性和过渡的时间即可。animation是动画效果,要先用@keyframes定义一个动画过程,然后在类中用animation的各个参数制定想要添加的动画名称,运行时...
格式IEFirefoxOperaChromeSafariOggNo3.5+10.5+5.0+NoMPEG 49.0+NoNo5.0+3.0+WebMNo4.0+10.6+6.0+NoOgg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件 <video width="320" height="240" controls="controls"><source src="movie.ogg" type="video/ogg"><source src="movie.mp4" type="video/mp4">
Your b...