Html/CSS---其它

框架集

框架集和内联框架的作用类似，都是用于在一个页面中引入其他的外部的页面
框架集可以同时引入多个页面，而内联框架只能引入一个
在h5标准中，推荐使用框架集，而不使用内联框架
使用frameset来创建一个框架集，注意frameset不能和body出现在同一个页面中
所以要使用框架集，页面中就不可以使用body标签
属性：
rows，指定框架集中的所有的框架，一行一行的排列
cols，指定框架集中的所有的页面，一列一列的排列

这两个属性frameset必须选择一个，并且需要在属性中指定每一部分所占的大小

frameset中也可以再嵌套frameset

frameset和iframe一样，它里边的内容都不会被搜索引擎所检索
所以如果搜索引擎检索到的页面是一个框架页的话，它是不能去判断里边的内容的

使用框架集则意味着页面中不能有自己的内容，只能引入其他的页面
而我们每单独加载一个页面，浏览器都需要重新发送一次请求，引入几个页面就需要发送几次请求，用户的体验比较差
如果非得用建议使用frameset而不使用iframe

在frameset中使用frame子标签来指定要引入的页面，引入几个页面就写几个frame

<frameset cols="30%, *, 30%">
    <frame src="demo069_表格.html" />
    <frame src="demo070_给表格添加样式.html" />
    <frameset rows="30%, 50%, *">
        <frame src="demo072_表格的布局.html" />
        <frame src="demo073_完善clearfix.html" />
        <frame src="demo074_表单.html" />
    </frameset>
</frameset>

ieg6png的修复

在IE6中对图片格式png24支持度不高，如果使用的图片格式是png24，则会导致透明效果无法正常显示

解决方法：

可以使用png8来代替png24，即可解决问题，但是使用png8代替png24以后，图片的清晰图会有所下降
使用JavaScript来解决该问题，需要向页面中引入一个外部的JavaScript文件，然后在写一下简单的JS代码，来处理该问题

条件Hack

<!-- 
条件Hack
    它只对IE浏览器有效，其它的浏览器都会将它识别为注释
    IE10及以上的浏览器已经不支持这种方式
 -->

<!-- 以下内容只会出现在IE6中 -->
<!--[if IE 6]>
    <p>为了您和家人的健康，请远离IE6！！</p>
<![endif]-->

<!--[if IE 8]>
    <p>当前浏览器是IE8！！</p>
<![endif]-->

<!--[if lt IE 9]>
    <p>该标签会在IE9以下的浏览器中显示</p>
<![endif]-->

<!--[if gte IE 9]>
    <p>该标签会在IE9及以上的浏览器中显示</p>
<![endif]-->

<!--[if lte IE 9]>
    <p>该标签会在IE9及以下的浏览器中显示</p>
<![endif]-->

<!--[if ! IE 6]>
    <p>你的浏览器不是IE6</p>

属性

假设在IE6中需要将背景颜色设置为黄色才能达到和其它浏览器相同的效果
        */
        /*
        希望黄色背景只在IE6中生效
            在样式前添加一个下划线，则该样式只有IE6及以下的浏览器才可以识别
        */
        /*_background-color: yellow;*/

        /*添加了*的样式只有IE7及以下的浏览器认识*/
        /**background-color: yellow;*/

        /*在样式最后添加一个\0，则只有IE8及以上的浏览器才能识别*/
        /*background-color: yellow\0;*/

        /*
        CSS Hack不到万不得已的情况尽量不要使用

运动曲线

    div:nth-child(1){
        /*匀速*/
        transition: all 1s linear;
    }
    div:nth-child(2){
        /*开始和结束慢速，中间加速*/
        transition: all 1s ease;
    }
    div:nth-child(3){
        /*开始慢速，结尾突然停止*/
        transition: all 1s ease-in;
    }
    div:nth-child(4){
        /*突然开始，结束时慢速*/
        transition: all 1s ease-out;
    }
    div:nth-child(5){
        /*开始和结束时慢速*/
        transition: all 1s ease-in-out;
    }
    div:nth-child(6){
        /*贝塞尔（贝兹）曲线*/
        /*transition: all 1s cubic-bezier(0.250,0.250,0.750,0.750);匀速*/
        /*超出再缩回的弹性效果*/
        transition: all 1s cubic-bezier(0.470, -0.485, 0.460, 1.435);

缩放

.box:hover{
        /*box的动画不会影响到box2*/
        /*位移*/
        transform: translate(50px,50px);
    }
    .box2:hover{
        /*沿Z轴旋转360度*/
        transform: rotate(360deg);
    }
    .box3:hover{
        /*缩放*/
        transform: scale(0.5,0.2);
    }
    .box4:hover{
        /*斜切*/
        /*transform: skew(45deg,0);*/
        transform: skew(0,45deg);

元素旋转

/旋转方向判断
1、X轴向右、Y轴向下、Z轴向屏幕外
2、让轴向对着自己，顺时针方向就是该轴向的旋转方向/

.box{
            width: 300px;
            height: 300px;
            background-color: gold;
            margin: 50px auto 0;
            transition: all 500ms ease;
            /*设置盒子按3D空间显示*/
            transform-style: preserve-3d;
            transform: perspective(800px) rotateY(0deg);
        }
        .box:hover{
            /*默认沿Z轴旋转*/
            /*transform: rotate(45deg);*/
            /*perspective设置透视距离，经验数值800比较符合人眼的透视效果*/
            /*transform: perspective(800px) rotateX(45deg);*/
            transform: perspective(800px) rotateY(-45deg);

动画

动画名称、时间、曲线、延迟、播放次数、结束后是否返回、动画前后的状态
infinite不限制次数
alternate动画结束后返回，返回也算次数
animation-fill-mode 动画前后的状态
forwards动画完成保持在最后一帧
backwards在延迟时间内，在动画显示之前，应用from开始属性值（例如box宽100，from宽200，在延迟1s内显示200）
both向前和向后填充模式都被应用（例如起始按200，结束停在最后一帧）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        ul{
            width: 960px;
            height: 40px;
            list-style-type: none;
            margin:0;
            padding:0;
            overflow: hidden;
            background-color: #55a8ea;
            line-height: 40px;
            margin: 50px auto;
        }
        li{
            float: left;
        }
        li a{
            text-decoration: none;
            color: white;
            font-weight: bold;
            padding:33px; 
        }
        li a:hover:not(.first){
            background-color: #00619f;
        }
        li a.first{
            background-color: #00619f;
        }
        .new{
            width: 33px;
            height: 20px;
            background: url(img/TIM图片20180912185538.png) no-repeat;
            position: absolute;
            left:733px;
            top:40px;
        }
    </style>
</head>
<body>
    <ul>
        <li><a class='first' href="#">首页</a></li>
        <li><a href="#">网站建设</a></li>
        <li><a href="#">程序开发</a></li>
        <li><a href="#">网络营销</a></li>
        <li><a href="#">企业VI</a></li>
        <li><a href="#">案例展示</a></li>
        <li><a href="#">联系我们</a></li>
        <li class='new'></li>   
    </ul>
    </div>
</body>
</html>

结果：

TIM截图20180912203805.png

图片列表


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片列表</title>
    <style type="text/css">
        .box{
            width: 964px;
            height: 300px;          
            border: 2px solid rgb(240,240,240);
            /*background-color: #bfa*/
            margin: 100px auto;
        }
        .box1{
            width: 920px;
            height: 50px;
            border-bottom: 2px solid rgb(240,240,240);
            margin: 0 auto;
        }
        h3{
            font-size: 18px;
            font-family: '微软雅黑';
            color: #000;
        }
        .box2{
            width: 920px;
            height: 500px;
            margin: 0 auto;
            /*background-color: red;*/
            position: relative;
        }
        .box3{
            width: 100px;
            border-top: 3px red solid;

        }
        .i{
            display: inline-block;
            float: left;
            margin: 20px 14.5px 5px 0px;
        }
        .i1{

            display: inline-block;
            float: left;
            margin: 20px 14.5px 5px 14.5px;                                                                             
        }
        .i2{
            display: inline-block;
            float: left;
            margin: 20px 0px 5px 14.5px;
        }

        .i:hover,.i1:hover,.i2:hover{
            transform: translateY(5px);
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box1">
            <h3>图片展示</h3>
        </div>
        <div class="box2">
            <div class="box3"></div>
            <img class="i" src="img/TIM图片20180912185520.jpg" alt="世界杯">
            <img class="i1" src="img/TIM图片20180912185520.jpg" alt="世界杯">
            <img class="i1" src="img/TIM图片20180912185520.jpg" alt="世界杯">
            <img class="i1" src="img/TIM图片20180912185520.jpg" alt="世界杯">
            <img class="i2" src="img/TIM图片20180912185520.jpg" alt="世界杯">
            <img class="i" src="img/TIM图片20180912185520.jpg" alt="世界杯">
            <img class="i1" src="img/TIM图片20180912185520.jpg" alt="世界杯">
            <img class="i1" src="img/TIM图片20180912185520.jpg" alt="世界杯">
            <img class="i1" src="img/TIM图片20180912185520.jpg" alt="世界杯">
            <img class="i2" src="img/TIM图片20180912185520.jpg" alt="世界杯">

        </div>
        

        
    </div>
    
</body>
</html>

结果

世界杯.png