-
media queries——媒体类型（二） 引用方法常见的有：link标签、@import和CSS3新增的@media几种 <link rel="stylesheet" type="text/css" href="style.css" media="screen" /> @importurl(reset.css) screen; <head> <style type="text/css"> @importurl(style.css) all; </style> </head> @media screen { 选择器{/*你的样式代码写在这里…*/} } <head> <style type="text/css"> @media screen{ 选择器{/*你的样式代码写在这里…*/} } </style> </head>查看全部
-
Media Queries——媒体类型（一） 使用CSS3中的Media Queries模块来让一个页面适应不同的终端（或屏幕尺寸），从而让你的页面让用户有一个更好的体验。 一、媒体类型 通过媒体类型对不同的设备指定不同的样式。 在CSS2中常碰到的就是all(全部)、screen(屏幕)、print(页面打印或打印预览模式)查看全部
-
CSS3 伸缩布局（二） 水平垂直居中 .flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; }查看全部
-
matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY()); 水平伸缩量，纵向扭曲，横向扭曲，垂直伸缩量，水平偏移量，垂直偏移量 其中： scaleX():为元素的水平伸缩量，1为原始大小； skewY():为纵向扭曲，0为不变； skewX():为横向扭曲，0为不变； scaleY()：为垂直伸缩量，为原始大小； translateX():为水平偏移量，0为初始位置； translateY()：为垂直偏移量，0为初始位置。查看全部
-
多练习熟悉使用动画效果； 兼容性问题查看全部
-
综合而言，Flexbox布局功能主要具有以下几点： 第一，屏幕和浏览器窗口大小发生改变也可以灵活调整布局； 第二，可以指定伸缩项目沿着主轴或侧轴按比例分配额外空间（伸缩容器额外空间），从而调整伸缩项目的大小； 第三，可以指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间，分配到伸缩项目之前、之后或之间； 第四，可以指定如何将垂直于元素布局轴的额外空间分布到该元素的周围； 第五，可以控制元素在页面上的布局方向； 第六，可以按照不同于文档对象模型（DOM）所指定排序方式对屏幕上的元素重新排序。也就是说可以在浏览器渲染中不按照文档流先后顺序重排伸缩项目顺序。查看全部
-
CSS3支持更多的颜色和更广泛的颜色定义。新颜色CSS3支持HSL ， CMYK ，HSLA and RGBA。查看全部
-
3D旋转导航查看全部
-
创建动画查看全部
-
CSS3切换背景图像效果（不依赖js，点击小图切换大的背景图）查看全部
-
CSS3属性选择器查看全部
-
制作导航菜单综合练习题:**使用渐变与伪元素制作导航分隔线**查看全部
-
多重背景查看全部
-
CSS3 伸缩布局（一） Flexbox布局，即伸缩布局盒模型（Flexible Box），用来提供一个更加有效的方式制定、调整和分布一个容器里项目布局，即使它们的大小是未知或者动态的 1.创建一个flex容器 .flexcontainer{ display: -webkit-flex; display: flex; } 2.Flex项目显示 Flex项目是Flex容器的子元素。他们沿着主要轴和横轴定位。默认的是沿着水平轴排列一行。你可以通过flex-direction来改变主轴方向修改为column，其默认值是row。 3.Flex项目列显示 .flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; } 4.Flex项目移动到顶部 如何将flex项目移动到顶部，取决于主轴的方向。如果它是的水平方向通过align-items设置；如果它是垂直的方向通过justify-content设置。 .flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-align-items: flex-start; align-items: flex-start; } align-items：flex-start | flex-end | center | baseline | stretch(默认)查看全部
-
CSS3 盒子模型 盒模型中主要包括width、height、border、background、padding和margin这些属性 CSS中盒模型被分为两种，第一种是w3c的标准模型，另一种是IE的传统模型 W3C标准盒模型: 外盒尺寸计算（元素空间尺寸） element空间高度＝内容高度＋内距＋边框＋外距 内盒尺寸计算（元素大小） element高度＝内容高度＋内距＋边框（height为内容高度） IE传统下盒模型 外盒尺寸计算（元素空间尺寸） element空间高度＝内容高度＋外距（height包含了元素内容宽度、边框、内距） 内盒尺寸计算（元素大小） element高度＝内容高度（height包含了元素内容宽度、边框、内距） box-sizing属性，能够事先定义盒模型的尺寸解析方式，其语法规则如下： box-sizing: content-box | border-box | inherit查看全部
举报
0/150
提交
取消