Html部分

Html部分

E[attr]-------------------存在attr属性即可

E[attr=val]--------------- 属性值完全等于val

E[attr*=val]-------------- 属性值里包含val字符并且在“任意”位置

E[attr^=val]---------------属性值里包含val字符并且在“开始”位置

E[attr$=val]------------- -- 属性值里包含val字符并且在“结束”位置

E:first-child----------------其父元素的第1个子元素且这个子元素必须是E

E:last-child-----------------其父元素的最后1个子元素，且子元素必须是E

E:nth-child(n)-------------- 其父元素的第n个子元素，且子元素必须是E

E:nth-last-child(n)--------- 其父元素的第n个子元素(倒数),子元素可以不是E

E:nth-of-type(n)------------ 同一父元素的第n个E元素

E::first-letter{ }------------文本的第一个字母或字

E::first-line{ }--------------文本第一行

E::selection{ }---------------可改鼠标变选中文本的样式

E::before和E::after{ }-----在E元素内部的开始位置和结束位创建一个元素，该元素为行内元素，

且必须要结合content属性使用。

E{opacity}-----------------------只能针对整个盒子设置透明度，子盒子及内容会继承父盒子的透明度

E{visibility:hidden}------------隐藏，原来位置会被保留

E{display:none}---------------隐藏，原来位置不会被保留

E{text-indent}-----------------首行缩进

以下三项必须同时使用：

text-overflow:clip/ellipsis--------------用来设置是否使用一个省略标记（...）标示对象内文本的溢出

white-space:nowrap---------定义强制文本在一行内显示

overflow:hidden---------------溢出内容为隐藏

text-shadow: X Y B color--------------可以用来设置文本的阴影效果。X轴，Y轴，B模糊度，颜色

border-radius:上左，上右，下右，下----------边框圆角，四个圆角值都设置为宽度或者高度的一半

显示一个圆，设置为50%，显示一个椭圆（宽高不一样时）

box-shadow：X,Y,B,color----------------------------边框阴影

E: linear-gradient( to 方向，起始色，结束色)----- 线性渐变指沿着某条直线朝一个方向产生渐变效果

E: radial-gradient( to 方向，起始色，结束色)---径向渐变指从一个中心点开始沿着四周产生渐变效果

<nav> ------------------------------------------------------------导航

<header>---------------------------------------------------------页眉

<footer>------------------------------------------------------------页脚

<section>------------------------------------------------------------区块

<article>---------------------------------------------------------------文章

<progress min=”0” max=”100” value=”70”>------------------进度条

<d e t a i l s>--------------------------------------------------------文档细节

<aside>---------------------------------------------------------侧边栏

<summary>----------------------------------------标题

<time>----------------------------------------------------日期,时间

<dialog>-------------------------------------------------对话框

<input type="email">-------------------------输入邮箱格式

<input type="tel">-------------------------------输入手机号码格式

<input type="url">-----------------------------------输入url格式

<input type="number">-----------------------------输入数字格式

<input type="search">--------------------------------搜索框（体现语义化）

<input type="range">------------------------------------自由拖动滑块

<input type="color">--------------------------------------拾色器

<input type="time">---------------------------------时间

<input type="date">-------------------------------年、月、日

<input type="datetime">-----------------------------

<input type="month">----------------------------年、月

<input type="week">-----------------------------第。。年。。周

<datalist>-----------------------------------------------数据列表

<keygen>--------------------------------------------生成加密字符串

<output>---------------------------------------------------输出结果

<meter min=”0” mix=”100” value=”66”>------------------度量器

<input type="text" placeholder="请输入用户名">----------占位符

<input type="text" autofocus>-----------------------------------自动获得焦点

<input type="file" multiple>-------------------------------------多文件上传

<input type="text" required>-------------------------------必填项

<audio>--------------------------------------------------插入音频文件

autoplay---------------------------------------------------自动播放支持.mp3 .wav .ogg三种格式

controls------------------------------------是否显示默认播放控件

</audio>

<video>--------------------------------------插入电影，用法同上 .mp4 .ogg .webm

Loop---------------------------------------循环播放

Width-----height--------------------------设置视频播放器的宽度---高度

Controls-------------------------------------播放控件按钮

position:relative;----------------------------- 相对定位

position:absolute;----------------------------- 绝对定位，绝对定位脱标

position:fixed;---------------------------------- 固定定位

left:50%; margin-left:负的宽度的一半-----------------浮动元素居中

z-index-------------------------------------------------表示谁压着谁。数值大的压盖住数值小的，没有单位

solid------------------------------------------------实线

dashed---------------------------------------------线形虚线

dotted-------------------------------------------------虚线

border------------------border-width border-style border-color

display: inline;-----------------------转换为行内元素

display:block；------------------------转换为块级元素

text-decoration:-------------------------定义文本修饰

underline----------------------下划线

overline--------------------上划线

line-throught--------------删除线

float-------------------------浮动投标、贴边、字围、收缩。

clear:both---------------------浮动的清除，盒子之间的margin会失效

a:link------------------------------正常，未访问过的链接

a:visited---------------------------用户已访问过的链接

a:hover----------------------------当用户鼠标放在链接上时悬停

a:active------------------------------链接被点击的那一刻

background-repeat:no-repeat;--------------- 不重复

background-repeat:repeat-x;-------------------- 横向重复

background-repeat:repeat-y;------------------------- 纵向重复

letter-spacing：------------------------------------------字间距，字符与字符之间的空白

word-sapce：---------------------------------单词间距，定义英文单词之间的间距，对中文字符无效

 -----------------------------------------------------------空格

<------------------------------------------------------------------小于

>-----------------------------------------------------------------大于

"-------------------------------------------------------------------引号

disc------------------------------------------------------------圆点列表

circle------------------------------------------------------------圆圈列表

square-----------------------------------------------------------正方形列表

rowspan---------------------------------------------------------跨行

colspan--------------------------------------------------------------跨列

<input type="text">------------------------------------------文本框

<input type="password">------------------------------------密码框

<input type="radio">------------------------------------------单选框

<input type="checkbox">-------------------------------------多选框

<input type="submit" value="提交">-----------------------提交按钮

Username: <input type="text" name="user">

</form>

<input type="button" value="Hello world!">---------------按钮

<textarea rows="10" cols=" 30">-------------------文本域

<input type="reset" value="重置">-----------------重置按钮

<select name="cars">

<option value="volvo">Volvo</option>

<option value="saab">Saab</option> 下拉列表

<option value="fiat">Fiat</option>

<option value="audi">Audi</option>

</select>

</form>

Transform------------------向元素应用 2D 或 3D 转换

Transform:rotate(Xdeg)-----------------------------旋转

Transform:skew(Xdeg,Ydeg)------------------------------扭曲

Transform:scale(X,Y)-----------------------------------缩放倍数

Transform：translate( Xpx,Ypx)-----------------------位移

Perspective: （500） px;-----------------------------添加透视投影矩阵效果（3D效果必须用）

perspective-origin:（X,Y）--------------------设置3D元素的基点位置

transform-style: preserve-3d------------------呈现出3D效果

transform:rotate3d(1, 1, 1, 360deg)--------------3D效果图360度旋转

transform-origin: left；-------------------------------以左边为轴

transform-origin: right；------------------------------以右边为轴

transform-origin: top；---------------------------------以顶边为轴

transform-origin: bottom；-----------------------------以底边为轴

（ 按顺序写 ）

animation:名字 持续时间 延迟时间播放效果结尾效果 --------------------动画效果

@keyframes 名字{ }-----------------------结合上面的使用

infinite-------------------------------------无限次播放

linear--------------------------------------------恒速

animation-name------------------------------设置动画序列名称

animation-duration-----------------------------动画持续时间

animation-delay-------------------------------动画延时时间

animation-timing-function----------------------动画执行速度

动画执行速度：

ease---------------------------------------------由快到慢

ease-in------------------------------------------越来越快

ease-out------------------------------------越来越慢

ease-in-out------------------------------------先加速再减速

animation-play-state-------------------------动画播放状态，running(默认)、paused(暂停)等

animation-direction-------------------------动画逆播，alternate等

其主要有两个值：normal、alternate

1、normal是默认值，如果设置为normal时，动画的每次循环都是向前播放；

2、另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。

animation-fill-mode-----------------------------动画执行完毕后状态，forwards、backwards等

属性值	效果
none	默认值，表示动画将按预期进行和结束，在动画完成其最后一帧时，动画会反转到初始帧处
forwards	表示动画在结束后继续应用最后的关键帧的位置
backwards	会在向元素应用动画样式时迅速应用动画的初始帧
both	元素动画同时具有forwards和backwards效果

opacity-------------------------------------------------------透明度（0---1）

<marquee>--------------------------------------------------走马灯效果

direction----------------------------------------------------定义移动方向

behavior：“”“”---------------------------------------------------定义运动的形式

slide--------------------------------------------运动一次就停下

alternate---------------------------------来回运动

scroll-------------------------------单向循环运动

alternate----------------------------------------------------

loop-----------------------------------------------------运动几次

scrollamount-------------------------------------------移动的速度

scrolldelay-----------------------------------------------延时移动

delay--------------------------------------延时

图像映射

<area shap=”circle” cords=”坐标” href=“url”>圆形区域

<area shap=”rect” cords=”坐标” href=“url”>矩形区域

</map>

坐标定义：圆：圆心坐标加上半径（0,0,5）

矩形：左上角加右下角（0,0,5,5）

页面的分割

<frameset rows="19%,*"frameboder="2">--------------rows 上下分割

<frameset cols="20%,*" frameboder="2">------------cols 左右分割

</frameset>

frameset不能喝body同时使用

noresize-------------------------------让页面不变形

frameboder----------------------------frame 的border

resize:none;-------------------------文本域禁止拖动

p::selection{bckground:red}-------------改变选中文本的背景颜色

posted on 2017-07-03 19:42 YC小杨阅读(153) 评论(0) 编辑收藏举报