Html/CSS---其它

作者: 岸与海 | 来源:发表于2018-09-12 20:22 被阅读0次

Html/CSS---其它
js
html知识
Html/CSS---文本标签
Html/CSS---盒子模型
Html/CSS---定位与背景
Html/CSS---常用的选择器
HTML基础-meta其它类型
(24)day4-京东登录
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

Html/CSS---其它
框架集框架集和内联框架的作用类似，都是用于在一个页面中引入其他的外部的页面框架集可以同时引入多个页面，而内联框架...
js
/* * * 页面中有什么代码?html--展示内容,css---美化页面的,js---控制页面 * * js的代...
html知识
1. 网页由什么组成 html-------网页内容 css---修饰网页 JavaScript---让网页动起来...
Html/CSS---文本标签
文本标签 em 与strongem和strong这两个标签都表示一个强调的内容em主要表示语气上的强调，在浏览器中...
Html/CSS---盒子模型
盒子模式的计算公式宽=width+左右两边边框的高度+左右两边的内边距高=height+上下两边边框的高度+上下...
Html/CSS---定位与背景
定位 position属性可以控制Web浏览器如何以及在何处显示特定的元素可以使用position属性把一个元素放...
Html/CSS---常用的选择器
元素选择器作用：通过元素选择器可以选择页面中的所有指定元素语法：标签名{}p,h1{color:red;} /所...
HTML基础-meta其它类型
meta其它类型 Keywords类型作用: 告诉搜索引擎当前网页的关键词, 在SEO中非常重要, 能够提高搜索...
(24)day4-京东登录
4.1 css其它属性 4.2 京东登录 html: css:
CSS---简介
CSS是Cascading Style Sheet的缩写，译作“层叠样式表单”，是用于增强网页的显示效果，并允许将...

Html/CSS---其它

框架集

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

ieg6png的修复

条件Hack

属性

运动曲线

缩放

元素旋转

动画

图片列表

相关文章

Html/CSS---其它

js

html知识

Html/CSS---文本标签

Html/CSS---盒子模型

Html/CSS---定位与背景

Html/CSS---常用的选择器

HTML基础-meta其它类型

(24)day4-京东登录

CSS---简介

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读