css3 总结02

【css3 总结02】的更多相关文章

CSS3基础 02（2D /3D）

一.2D转换概念:就是元素在2D平面上实现移动,旋转,缩放,斜切的操作就称之为2D转换语法:transform:值值:移动,旋转,缩放,斜切 (1.1)移动 transform:translate() 参数说明: (1)只有一个值的情况下,表示水平方向运动,正值向右,负值向左,也可以接受百分比,百分比参照的是自身的宽,高 (2)两个值分别控制水平和垂直 (3)移动不会影响其他的元素,类似于相对定位 (4)我们可以通过盒子的绝对定位配合transform:translate(-50%,-50…

CSS3选择器02—CSS3部分选择器

该部分主要为CSS3新增的选择器接上一篇 CSS(CSS3)选择器(1) 一.通用兄弟选择器: 24:E ~ F,匹配任何E元素之后的同级F元素. div ~ p{ background-color:#00FF00; } 二.属性选择器: 25:E[att ^= val],匹配属性att的值以”val“开头的元素. [id ^= start]{ background-color:red; ] /*匹配以id属性的值为start开头的,如id="start1",id="sta…

盒子尺寸 .border-box{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; border-sizing: border-box; } //默认为content-box 变形 //顺时针旋转 transform: rotate(30deg); //沿着x,y轴旋转 transform: skew(30deg, 30deg); //平移(多个书写没有逗号) transform: translateX(30px) tra…

大前端时代已经到来！传智播客2015之WEB前端视频教程（全套教程共15G）

大前端时代已经到来!传智播客2015之WEB前端视频教程(全套教程共15G)大前端时代已经到来!如今,前端开发工程师的职责,不是只有切图.制作网页这么简单哦! G:\传智播客2015-WEB前端视频教程-----------├文件夹1:[01 html教程视频]│ ├文件夹1:[324带你一周hold住html+css 第01讲 html标记语法基础]│ │ ├(1)html标记语法基础 (1)│ │ ├(2)html标记语法基础 (2)│ │ ├(3)html标记语法基础 (3)…

CSS3基础入门02

CSS3 基础入门02 边框相关属性 border-radius 通过这个属性我们可以设置边框圆角,即可以将四个角设置为统一的圆角,也可以单独的设置具体的某一个角的圆角. grammer: border-radius: 1-4 length|% / 1-4 length|%; 注释:按此顺序设置每个 radii 的四个值.如果省略 bottom-left,则与 top-right 相同.如果省略 bottom-right,则与 top-left 相同.如果省略 top-right,则与 top-…

【02】HTML5与CSS3基础教程（第8版）（全）

[02]HTML5与CSS3基础教程(第8版)(全) 共392页. (魔芋:大体上扫了一遍.没有什么新东西,都是入门的一些基础知识.) 已看完. [美]elizabeth castro bruce hyslop 著望以文译 2014年5月出版. 亚马逊: https://www.amazon.cn/HTML5%E4%B8%8ECSS3%E5%9F%BA%E7%A1%80%E6%95%99%E7%A8%8B-%E7%BE%8E-Elizabeth-Castro…

02.Web大前端时代之：HTML5+CSS3入门系列~H5结构元素

Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 1.结构元素可以理解为语义话标记,比如:以前这么写<div id="nav"></div> 现在偷懒写:<nav></nav> 1.header头部区域,包含对主页的介绍 <header> 标签定义文档的页眉(介绍信息) 2.nav导航系列 <nav> 标签定义导航链接的…

【HTML5&CSS3进阶学习02】Header的实现·CSS中的布局

前言我们在手机上布局一般是这个样子的: 其中头部对整个mobile的设计至关重要,而且坑也很多: ① 一般来说整个header是以fixed布局,fixed这个产物在移动端来说本身坑就非常多 ② 在Hybrid应用中,Header很多时候扮演了不一样的角色,首先要完成以webview(window)为容器的功能,又要调用native提供的接口 Hybrid中Header的实现往往是一个难点,主要原因是同一套接口,要保证H5站点与native处于不一样的环境调用相同的接口,完成不同的功能 ③ 若…

CSS3 02. 边框、边框圆角、边框阴影、边框图片、渐变、线性渐变、径向渐变、背景、过渡transition、2D转换

边框圆角 border-radius 每个角可以设置两个值,x值.y值 border-top-left-radius:水平半径垂直半径 border-radius:水平半径/垂直半径 border-radius:60px 30px 120px 160px/160px 120px 30px 60px ; 单位:百分比和像素.最好使用% 练习盒子阴影 box-shadow 可设置多重边框阴影,增强立体感 box-shadow: 5px 5px 27px red,-5px -5px 27px gr…

[UI] 02 - Layout & CSS3

开胃小菜一.纯CSS布局 UI效果 From: 创建一个没有表格的网页代码详情 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style> * { box-sizing: border-box; } body { margin:; } .header { background…