html+css

web

CSS识别格式

• <link tpye="text/css" rel="stylesheet" href=“文档地址.css" />
  
  • 链接CSS样式文件代码。
• <style type="text/css"></style>
  
  • html页面样式输入格式

*{影响整体属性}
#id{大括号扩选属性；分号为一个属性的结束；}
.class{}
.class ul li{class中li标签属性输入格式}
#id a{id中a标签属性输入格式}
#id:hover{伪累属性输入格式}

属性style

1. box-sizing的用法:(和outline效果一样)
   box-sizing:border-box；
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
2. linear-gradient的用法:( 方向 ， 颜色 位置 ， 颜色 位置 )
   color:linear-gradient(top,#ff0 0%,#f00 100%);
-moz-color:linear-gradient(top,#ff0 0%,#f00 100%);
-wedkit-color:linear-gradient(top,#ff0 0%,#f00 100%);
3. box-shadow的用法:(通用于text-shadow)
   box-shadow:10px 10px 5px #000; ( 左右 上下 模糊度 颜色 )
   box-shadow:10px 10px 5px rgba();
4. animation的使用方法:

//设置一个名为"go"的动画模式.
@keyframes go {
    0% {
        left:0;
    }
    50% {
        left:100px;
    }
    100% {
        lefi:250px;
    }
}
//只要在用animation-name:引用设定好的动画的名字(如go)即可.
.div {
    animation-name: go;
    animation-duration: 1s;
    animation-iteration:count: 4;
    animation-direction:alternate;
    animation-timing-function: ease-in-out;
/* 可简写：animation: go 1s 4 alternate ease-in-out; */
}

• @media使用方法:

//查询屏幕在300px以内时{}
@media screen and (max-width: 300px){}
//查询只针对屏幕在640以内和竖屏时(一般用于 iphone4 & 5){}
@media only screen and (max-width:640px) and (orientation:portrait){}
//查询设备宽度在375px以上667px以内且设备像素比率为2(一般用于 iphone6)
@media (min-device-width:375px) and (max-device-width:667px) and (-webkit-min-device-pixel-ratio:2){}
//查询设备宽度在414px以上736px以内且设备像素比率为3(一般用于 iphone6plus)
@media (min-device-width:414px) and (max-divice-width:736px) and (-webkit-min-device-pixel-ratio:3){}

透明度样式：
opacity:0.85;filter:alpha(opacity=85);-moz-opacity:0.85;-o-opacity:0.85;-webkit-opacity:0.85;

• 使用<ul>标签默认带边距，如需修改：ul{margin:0;padding:0}

1. 定位属性position用法

• position定位中，absolute是相对于relative作定位，当position:absolute单独存在时，作为绝对定位使用；当position:relative单独存在时，默认相对父级模块作定位。
  
  • 绝对定位即相对网页窗口作定位。
  • 定位background-image可用负数作为截取图片中一部分

标签html

移动端HTML5识别尺寸：

//标签名="" 内容="宽度等于设备的宽度,
/* 页面首次被显示时,页面按照标准尺寸显示 */
/* 缩放最大值为标准值 */
/* 用户无法缩放页面 */
/* 缩放最小值为标准值 */
<meta name="viewport" content="width=device-width,
pinitial-scale=1.0,
minimun-scale=1.0,
user-scalable=no,
maximun-scale=1.0">

使文本无法选取：
方法1:

<div unselectable="no" onselectstart="return false">
    此时你将无法选取我
</div>

方法2:css

div{
    //此时所有div中的文本都无法选取；
    -webkit-user-select:none;
    -moz-user-select:none;
    -o-user-select:none;
    user-select:none;
}

导入音频：

<audio autoplay="autoplay" controls="controls">
    <source src="" />
</audio>

导入视频：

<video controls preload>
    <source src="" />
</video>

伪累选择器CSS3