-
响应式设计 弹性图片实现方法: img {max-width:100%;}查看全部
-
响应式设计需要满足以下三个条件:网站必须建立灵活的网格基础;引用到网站的图片必须是可伸缩的;不同的显示风格,需要在Media Queries上写不同的样式。查看全部
-
media queries 媒体类型的引用方法有多种,常见的有:link标签、@import和CSS3新增的@media. 举例: link方法引入媒体类型其实就是在<link>标签引用样式的时候,通过link标签中的media属性来指定不同的媒体类型。如下所示。 <link rel="stylesheet" type="text/css" href="style.css" media="screen" /> <link rel="stylesheet" type="text/css" href="print.css" media="print" /> @import方法 @import可以引用样式文件,同样也可以用来引用媒体类型。@import引入媒体类型主要有两种方式,一种是在样式中通过@import调用另一个样式文件;另一种方法是在<head></head>标签中的<style></style>中引入,但这种使用方法在IE6~7都不被支持,如样式文件中调用另一个样式文件时,就可以指定对应的媒体类型。 @importurl(reset.css) screen; @importurl(print.css) print; 在<head>中的<style>标签中引入媒体类型方法。 <head> <style type="text/css"> @importurl(style.css) all; </style> </head> @media方法 @media是CSS3中新引进的一个特性,被称为媒体查询。在页面中也可以通过这个属性来引入媒体类型。@media引入媒体类型和@import有点类似也具有两方式。 (1)在样式文件中引用媒体类型: @media screen { 选择器{/*你的样式代码写在这里…*/} } (2)使用@media引入媒体类型的方式是在<head>标签中的<style>中引用。 <head> <style type="text/css"> @media screen{ 选择器{/*你的样式代码写在这里…*/} } </style> </head>查看全部
-
border-image:url(http://img1.sycdn.imooc.com//52e22a1c0001406e03040221.jpg) 70 repeat查看全部
-
三角形: h1:after{ content:""; width:0; height:0; overflow:hidden; border-left:50px solid transparent; border-right:50px solid transparent; border-top:red 45px solid; }查看全部
-
弹性盒子(左右用box-flex 中间用width): .content{ display:-webkit-box; } .left{ -webkit-box-flex:3; } .right{ -webkit-box-flex:4 } .mid{ width:500px; } <div class="content"> <div class="left"></div> <div class="mid"></div> <div class="right"></div> </div>查看全部
-
自由缩放属性resize 取值both //x和y方向同时改变 horizontal x方向 vertical 垂直查看全部
-
box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];查看全部
-
四个半径值分别是左上角、右上角、右下角和左下角,顺时针查看全部
-
@media screen and (max-width:980px)and (min-width:480px){}查看全部
-
background-image:linear-gradient(to left渐变方向,颜色,颜色;可以多个颜色); 0deg = to top =从下到上渐变 90deg = to right =从左到右渐变 180deg = to bottom =从上到下渐变 270deg = to left =从右到左渐变 to top left =右下角到左上角 to top right=左下角到右上角查看全部
-
语法: background-origin : border-box | padding-box | content-box; 参数分别表示背景图片是从边框,还是内边距(默认值),或者是内容区域开始显示。查看全部
-
CSS3把很多以前需要使用图片和脚本来实现的效果、甚至动画效果,只需要短短几行代码就能搞定。比如圆角,图片边框,文字阴影和盒阴影,过渡、动画等。 @Font-Face 轻松实现定制字体。 border-radius:圆角边框查看全部
-
IE10以后也开始全面支持CSS3; 虽然目前较新版本的浏览器都是不需要前缀的,但为了更好的向前兼容前缀还是少不了的。 chrome&Safari:-webkit; Firefox:-moz; IE(10以上):-ms; opera:-o查看全部
-
scale()的取值默认的值为1,当值设置为0.01到0.99之间的任何值,作用使一个元素缩小;而任何大于或等于1.01的值,作用是让元素放大。查看全部
举报
0/150
提交
取消