web前端

最新推荐文章于 2022-10-03 13:38:05 发布

奈何故里无故人

最新推荐文章于 2022-10-03 13:38:05 发布

阅读量103

点赞数

文章标签： web

本文链接：https://blog.csdn.net/weixin_46910841/article/details/105937343

版权

一、处理兼容问题：

IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。

强制兼容处理：<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
css3 样式在ie9 以下不兼容用css3pipe来处理兼容性，behavior: url("js/PIE.htc"); 处理css3在IE8或者IE7上的兼容性。
如果ie版本小于9：[if lt IE 9] <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script> [endif]
如果ie版本小于等于9：[if lte IE 9] <script src="//misc.360buyimg.com/mtd/pc/index/home/ie6tip.min.js"></script>[endif]
如果ie版本大于等于9：[if gte IE 9]<script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>[endif]
如果ie版本大于9：[if gt IE 9]<script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>[endif]
浏览器之间的样式差异处理重置浏览器的默认样式：<link rel="stylesheet" href="./css/normalize.css"/>

二、HTML5：

html4的升级版，html5主要在移动端应用比较多；html5中的新标签语义化更明确。

其中footer==div：块元素

兼容性：  支持所有现代的浏览器，比较旧的浏览器不支持
上面的书写格式语法  兼容性语法   csshack
IE9以下版本  做html5兼容处理

三、新的标签：

canvas 标签绘图标签通过js在canvas 上进行绘图 canvas cocos-2d引擎做网页游戏基于js的绘图API来制作新的多媒体元素标签
video 视频 src 视频的路径 autoplay 自动播放 controls 控制器 loop 通过js提供的api来制作视频控制
audio 音频 src 视频的路径 autoplay 自动播放 controls 控制器 loop 通过js提供的api来制作视频控制
source 是视频音频资源文件

代码如图：

网页效果图：

datalist提示列表和input连用

代码如图：

网页效果如图：

四、新的寓意和结构元素：

article 定义相对页面独立的内容区域
aside 定义侧边栏
bdi 文本突出，类似span

代码如图：

网页效果如图：

details 描述详细显示详细类容标签兼容性不太好

代码如图：

网页效果如图：（箭头可以点击）

footer 定义页脚的
header 定义头部的

代码如图：

网页效果如图：

mark 文本的突出显示默认带黄色

代码如图：

网页效果如图：

meter 定义进度条的

代码如图：

网页效果如图：

nav 定义导航

代码如图：

网页效果如图：

progress 定义进度条

代码如图：

网页效果如图：

section 定义内容

代码如图：

网页效果如图：

time 写时间的

代码如图：

网页效果如图：

自定义列表 dl、 dt 、dd

代码如图：

网页效果如图：

五、好玩的东西：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box {
            /*margin: auto;*/
            width: 711px;
            height: 400px;
            border: 5px solid #000;
            padding: 0;
            font-size: 15px;
            text-align: center;
            line-height: 200px;
            /*border-radius: 15px 25px 35px 45px;边框变化*/
            /*border-radius: 20px 40px;*/
           /* box-shadow: 5px 10px 8px blue;盒子阴影*/
            /*box-shadow: 0 0 5px orange,0 0 15px red,0 0 25px pink;*/
           /* border-image: url("../image/1.jpg") 30 round;*/
           /* border-image-source: url("../image/1.jpg");*/
            /*border-image-slice:10;*/
            /*border-image-width:0;*/
            /*border-image-outset:20;*/
            /*border-image-repeat: round;*/
            background-image: url("../image/1.jpg");
            /*background-origin:content-box;*/
            /*background: linear-gradient(180deg,yellow,#fff,blue);*/
            /*background: linear-gradient(to bottom right,#fff,yellow);向着右下颜色深*/
            /*background: linear-gradient(90deg,red 10%,#fff 30%,orange);*/
            /*background: radial-gradient(orange,blue,black);圆的超级好看*/
           /* background: radial-gradient(orange 20%, blue 30%,black)*/
           /* text-shadow: 2px 3px 3px red;*文字颜色 挺好看的*/
           /*text-shadow: 2px 3px 3px red,4px 6px 6px blue;*/
            /*单行溢出省略*/
            /*overflow: hidden;*/
            /*text-overflow: ellipsis;*/
            /*white-space: nowrap;*/
            /*多行溢出省略*/
            /*display: -webkit-box;*/
            /*overflow: hidden;*/
            /*text-overflow: ellipsis;*/
            /*-webkit-box-orient: vertical ;*/
            /*-webkit-line-clamp:3;*/
        }
    </style>
</head>
<body>
<div class="box">
</div>
</body>
</html>

六、css3里的过渡：

过渡动画，过渡的是css样式属性。

代码如图：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .btn{
            width: 110px;
            height: 55px;
            text-align: center;
            line-height: 55px;
            outline: none;
            border-style: none;
            border-radius: 0;
            box-shadow: 0 0 10px orange;
            overflow: hidden;
            transition: all 2.0s ease-in-out;
            /*在默认样式里面设置  过渡一定要有过渡样式的默认样式*/
            /*transition: border-radius 1s .5s linear, box-shadow .5s linear;*/
            /*如果过渡的属性比较多   设置一样*/
            /*过渡延迟
            transition-delay: 0s;*/
            /*过渡时间
            transition-duration: .5s;*/
            /*过渡属性
            transition-property: width;*/
            /*过渡方式
            ease-in：先慢后快   ease-in-out：先慢后快再慢   ease-out ：先快后慢 linear：匀速过渡   ease:逐渐变慢*/
            /*transition-timing-function: ease-in;*/

        }
        .btn:hover{
            border-radius: 20px;
            box-shadow: 4px 3px 10px orange;
        }
    </style>
</head>
<body>

</body>
<button class="btn">按钮</button>
</html>

七、媒体查询：

媒体查询做屏幕适配pc移动端

根据不同的设备显示不同的box all所有设备 screen 屏幕设备电脑 ipaid 手机 print 打印设备 not print 不包含打印设备不加限制条件所有的屏幕共有的样式写min-width 注意：从小到大写写max-width 注意：从大到小写。

八、css3里面的动画：

（网页效果可以自己复制以下代码去试试）

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            border: 1px solid #000;
            background-image: url("../image/2.jpg");
            animation:flowers 3s 1s ease-in-out infinite alternate ;
        }
        .box:hover {
            animation-play-state: paused;
        }
       @keyframes flowers{
            from{
                  transform: translatey(0px)rotatez(0deg);
              }
            to{
                transform: translatey(800px)rotatez(360deg);
            }
        }
        .ball{
            position: absolute;
            width: 100px;
            height: 100px;
            left: 400px;
            top: 500px;
            border-radius: 50%;
            background: radial-gradient(at 20px 20px, #fff 5%, #39a0ff, #1142ff);
            animation: ball_1  5s linear forwards;
        }
        /*第二种*/
        @keyframes ball_1{
            0%{
                top: 0;
                transform: translatex(0px);
            }
            5%{
                top: 500px;
                transform: translatex(15px);
            }
            10%{
                top: 100px;
                transform: translatex(30px);
            }
            15%{
                top: 500px;
                transform: translatex(45px);
            }
            20%{
                top: 150px;
                transform: translatex(60px);
            }
            25%{
                top: 500px;
                transform: translatex(75px);
            }
            30%{
                top: 200px;
                transform: translatex(90px);
            }
            35%{
                top: 500px;
                transform: translatex(105px);
            }
            40%{
                top: 250px;
                transform: translatex(120px);
            }
            45%{
                top: 500px;
                transform: translatex(135px);
            }
            50%{
                top: 300px;
                transform: translatex(150px);
            }
            55%{
                top: 500px;
                transform: translatex(165px);
            }
            60%{
                top: 350px;
                transform: translatex(180px);
            }
            65%{
                top: 500px;
                transform: translatex(195px);
            }
            70%{
                top: 400px;
                transform: translatex(210px);
            }
            75%{
                top: 500px;
                transform: translatex(225px);
            }
            80%{
                top: 450px;
                transform: translatex(240px);
            }
            85%{
                top: 500px;
                transform: translatex(255px);
            }
            }
    </style>
</head>
<body>
<div class="box"></div>
<div class="ball"></div>
</body>
</html>

九、css3里的2D：

translate 平移
rotate 旋转
scale 伸缩
skew 变形

十、css3里的3D：

构建一个正方体

代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
            background-color: #000000;
            overflow: hidden;
        }
        .box{
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            width: 200px;
            height: 200px;
            transform-style: preserve-3d;
            transform: rotatex(45deg) rotatey(45deg);
            perspective:10px;/*默认为0*/
        }
        .box-1{
            position: absolute;
            width: 200px;
            height: 200px;
            left: 0;
            top: 0;
            border: 1px solid #ffffff;
            box-sizing: border-box;
            transform-origin: 50%;/*设置旋转中心*/
        }
        .box1{
            background-color: red;
            transform: translatez(100px);
        }
        .box2{
            background-color: orange;
            transform: translatez(-100px);
        }
        .box3{
            background-color: yellow;
            transform: translatex(100px) rotatey(90deg);
        }
        .box4{
            background-color: green;
            transform: translatex(-100px) rotatey(90deg);
        }
        .box5{
            background-color: cyan;
            transform: translatey(100px) rotatex(90deg);
        }
        .box6{
            background-color: blue;
            transform: translatey(-100px) rotatex(90deg);
        }
    </style>
</head>
<body>

</body>
<div class="box">
    <div class="box-1 box1"></div>
    <div class="box-1 box2"></div>
    <div class="box-1 box3"></div>
    <div class="box-1 box4"></div>
    <div class="box-1 box5"></div>
    <div class="box-1 box6"></div>
</div>
</html>

网页效果如图：

十一、多列布局：

添加meta 响应移动端
viewport 视口
width=device-width 宽度等于屏幕的宽
initial-scale=1.0 伸缩比例1.0
mininum-scale=1.0 最小比例1.0
maximum-scale=3.0 最大比例3.0
user-scalable=no 禁止用户缩放

代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=3.0,user-scalable=no">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            font-size: 12px;
        }
        .box {
            column-count: 3;
            -webkit-column-count: 3;
            -moz-column-count: 3;
            column-gap: 0;
            
        }
        .box_1{
            height: 4rem;
            border: 1px solid #000;
            box-sizing: border-box;
        }
        .box1{
            column-count: 2;
            -webkit-column-count: 2;
            -moz-column-count: 2;
            column-gap: 0;
           
        }
        .box_4{
            column-width: 50px;
            column-gap: 5px;
           
        }
    </style>
</head>
<body>
<div class="manybox">
    <div class="box">
        <div class="box_1">1</div>
        <div class="box_1">2</div>
        <div class="box_1">3</div>
    </div>
    <div class="box1">
        <div class="box_1  box_4">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
        </div>
        <div class="box_1 ">5</div>
    </div>
</div>
</body>
</html>

网页效果如图：

奈何故里无故人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web前端

一、处理兼容问题：IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。强制兼容处理：<metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=...
复制链接

扫一扫