HTML基础第五课（冲浪笔记5）

申小兮
60 阅读4分钟

一、透明度

1、opacity：不透明度，还是占位置的，子元素也会透明
0（完全透明）-1（完全不透明）
（1）区别display: none; 块会消失，不占位置
（2）opacity: 0; 块会消失，但是还占位置
（3）代码例子，具体效果可以将代码复制查看

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box2{
            width: 100px;
            height: 200px;
            background-color: blue;
            display: none;
        }
        .box1{
            width: 100px;
            height: 200px;
            background-color: rgb(187, 255, 0);
        }
        .box{
            width: 200px;
            height: 200px;
            background-color: rgb(255, 0, 4);
            opacity: 0;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

2、background: rgba(r,g,b,a); 元素不受影响

二、手势（改变鼠标形状）菜鸟教程在线编辑器

小手cursor: pointer;

image.png

三、最大/最小宽度：一般
1、max-width、max-height：类似与将宽高定死
2、min-width、min-height：当界面缩小到固定范围后，内容不会再跟着缩小
代码例子，需要的小伙伴可以复制运行在自己的浏览器看效果

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box{
            background-color: rgb(255, 0, 4);
            min-width: 500px;
            max-height: 50px;
        }
    </style>
</head>
<body>
    <div class="box">多地高招录取启动3中国经济正在稳步恢复热1枪击案嫌犯称最初目标并非安倍热480秒看斯里兰卡大抗议6个时间节点新231省份新增本土“65+279”热5《密室大逃脱》节目组致歉</div>
</body>
</html>

image.png

四、transform属性

1、平移：transform: translate(x轴, y轴); 、transform:translateX(200px); 、transform:translateY();

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box{
            width: 200px;
            height: 200px;
            background-color: rgb(255, 0, 4);
            /* transform: translate(100px,50px); */
            /* transform: translateX(200px); */
            transform: translateY(150px);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

image.png

其他平移效果，小伙伴可以将上面代码的注释去掉观察蛤

2、旋转：transform: rotate(45deg)

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box{
            width: 200px;
            height: 200px;
            background-color: rgb(255, 0, 4);
            transform:rotate(135deg);
        }
    </style>
</head>
<body>
    <div class="box">2</div>
</body>
</html>

image.png

旋转135°的效果，deg为度的角度单位

3、缩放：transform: scale(缩放比例)、transform: scaleX()、transform: scaleY()

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box{
            width: 200px;
            height: 200px;
            background-color: rgb(255, 0, 4);
            transform: scale(0.5);
            /* transform: scaleX(0.6); */
            /* transform: scaleY(0.3); */
        }
    </style>
</head>
<body>
    <div class="box">2</div>
</body>
</html>

image.png

注意：缩放改变大小，但是位置还在

4、三合一：transform: translate(200px,200px) rotate(45deg) scale(0.5);
注意：三者位置不同效果截然不同
（1）transform: translate(200px,200px) rotate(45deg) scale(0.5); 先平移，再旋转，最后缩小
正确编写顺序

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box{
            width: 200px;
            height: 200px;
            background-color: rgb(255, 0, 4);
            transform: translate(200px,200px) rotate(45deg) scale(0.5);
        }
    </style>
</head>
<body>
    <div class="box">2</div>
</body>
</html>

image.png

（2） transform: rotate(45deg) translate(200px,200px) scale(0.5); 先旋转，再平移，最后缩小
会出现显示不正常

image.png

还有其他情况，这里就不一一展示，小伙伴们可以自己去尝试

 五、动画CSS3 animation 属性 | 菜鸟教程
1、代码例子

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box{
            width: 500px;
            height: 500px;
            border: 10px solid rgb(168, 38, 166);
        }
        .move{
            width: 100px;
            height: 100px;
            background-color: blue;
            animation-name: moveBox;/*动画名称*/
            animation-duration: 2s;/*2s完成这件事情（周期2s）*/
            animation-iteration-count: infinite;/*动画迭代次数：无限次*/
            animation-delay: 2s;/*延迟3s后才开始（延迟启动时间）*/
            animation-timing-function: linear;/*动画从头到尾速度相同（默认是以低速开始，然后加快，结束前变慢）*/
            /* animation: moveBox 2s linear 2s infinite; */
        }@keyframes moveBox{
            0%{
                transform: translate(0,0);
                background-color: aqua;
            }
            25%{
                transform: translateX(400px) rotate(360deg);
                background-color: rebeccapurple;
                height: 50px;
            }
            50%{
                transform: translate(400px,400px) rotate(90deg);
                background-color: black;
                width: 200px;
            }
            75%{
                transform: translate(0,400px) rotate(360deg) scale(0.5);
                background-color: blue;
            }
            100%{
                transform: translate(0,0) rotate(0deg);
                background-color: green;
            }
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="move"></div>
    </div>
</body>
</html>

代码效果小伙伴们可以把代码复制，运行查看，更多效果可以参考网址介绍

六、calc函数（自动计算动态宽度）
注意： -前后有空格

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .left{
            width: 300px;
            height: 200px;
            background-color: aqua;
            float: left;
        }
        .right{
            width: calc(100% - 300px);/*注意-前后有空格*/
            height: 200px;
            background-color: orange;
            float: left;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

image.png

七、媒体查询： 适应设备CSS3 @media查询 | 菜鸟教程
代码例子，小伙伴可以复制代码运行查看效果

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box1{
            width: 300px;
            height: 200px;
            background-color: aqua;
            float: left;
            margin-bottom: 10px;
            margin-right: 10px;
        }@media screen and (max-width:620px){
            body{
                background-color: brown;
            }
            .box1{
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box1"></div>
</body>
</html>

八、清除浮动：因为float不占空间，有时候影响后面的布局
代码例子

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box{
           border: 10px solid yellow;
        }
        /* 清除浮动 
        .box::after{
            content: "";
            display: block;
            clear: both;
        }
        */
        .item{
            width: 100px;
            height: 100px;
            background-color: blue;
            margin-right: 10px;
            float: left;
        }
        .part{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div class="part"></div>
</body>
</html>

1、清除浮动前

image.png

2、清除浮动后

image.png

九、过渡属性：标签样式发生变化时有动画效果
1、格式： transition: 2s;

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
            transition: 2s;
        }
        .box:hover{
            height: 200px;
            background-color: rgb(0, 234, 255);
            transform: translate(100px,100px);
        }
    </style>
</head>
<body>
    <div class="box">
    </div>
</body>
</html>

十、简易版昵图网代码例子（稍微有些瑕疵，轮播图部分没有实现）
1、昵图网网址：昵图网_原创素材共享平台www.nipic.com

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
        }
 
        a {
            text-decoration: none;
        }
 
        .head {
            width: 100%;
            height: 555px;
            /* background-color: aqua; */
        }
 
        .title {
            width: 100%;
            height: 75px;
        }
 
        .limit {
            width: 1260px;
            height: 75px;
            margin: auto;
            /* background-color: yellowgreen; */
        }
 
        .title-logo {
            width: 149px;
            height: 45px;
            /* background-color: black; */
            background-image: url('../imgs/soso.png');
            background-repeat: no-repeat;
            background-position: -208px 0px;
            float: left;
            margin-right: 70px;
            margin-top: 18px;
        }
 
        .title-box {
            /* background-color: black; */
            float: left;
            line-height: 75px;
        }
 
        .title-text {
            font-size: 16px;
            margin-right: 28px;
            text-decoration: none;
            color: rgb(51, 51, 51);
        }
 
        .title-text:hover {
            color: blue;
        }
 
        .title-login {
            width: 100px;
            height: 38px;
            background-color: rgb(49, 204, 255);
            float: right;
            text-align: center;
            line-height: 38px;
            margin-top: 20px;
            border-radius: 3px;
            border: 1px solid #1ebcf0;
            margin-right: 10px;
        }
 
        .title-login-text {
            text-decoration: none;
            color: white;
        }
 
        .bg {
            max-width: 1920px;
            margin: auto;
            position: relative;
        }
 
        .bg-img {
            width: 100%;
            height: 480px;
            background-image: url('../imgs/昵图.png');
            background-size: cover;
        }
        .search{
            width: 1260px;
            margin: auto;
            font-size: 14px;
        }
 
        .search-form{
            height: 50px;
            border-radius: 3px;
            top: 215px;
            left: 50%;
            margin-left: -346px;
            position: absolute;
        }
 
        .search-box{
            padding: 4px 1px 4px 4px;
            background-color: rgba(0, 0, 0, .15);
            width: 687px;
            border-radius: 3px;
            position: absolute;
        }
 
        .search-input{
            background-color: rgba(255, 255, 255, .88);
            position: relative;
            float: left;
            padding-left: 16px;
            width: 570px;
            height: 48px;
            line-height: 48px;
            border-top-left-radius: 3px;
            border-bottom-left-radius: 3px;
            font-size: 14px;
            border: 1px solid #adadad;
            display: block;
        }
 
        .search-submit{
            float: left;
            width: 97px;
            height: 50px;
            background-image: url('../imgs/2.png');
            background-repeat: no-repeat;
            background-size: initial;
            border: 1px solid #adadad;
        }
 
        .body-one {
            width: 1260px;
            height: 288px;
            margin: auto;
            /* background-color: blueviolet; */
            font-size: 14px;
            padding: 50px 0;
        }
 
        .body-one-part {
            height: 200px;
            width: 100%;
            /* background-color: #1ebcf0; */
        }
 
        .body-one-line {
            width: 290px;
            height: 200px;
            float: left;
            margin-right: 33px;
            text-decoration: none;
            position: relative;
        }
 
        .body-one-window {
            height: 50px;
            width: inherit;
            text-align: center;
            background-color: rgba(0, 0, 0, .5);
            color: #fff;
            font-size: 20px;
            line-height: 50px;
            display: none;
            position: absolute;
            bottom: 0;
        }
 
        .body-one-line:hover .body-one-window {
            display: block;
        }
 
        .body-one-text {
            margin-top: 40px;
        }
 
        .body-one-text a {
            width: 122px;
            height: 36px;
            color: #666;
            font-size: 14px;
            background-color: #fff;
            border: 1px solid #dfdfdf;
            border-radius: 2px;
            display: block;
            text-align: center;
            line-height: 36px;
            text-decoration: none;
            margin-right: 20px;
            float: left;
            padding: 5px 8px;
        }
 
        .body-one-text a:hover {
            color: #31ccff;
        }
 
        .body-two {
            padding: 50px 0;
            background-color: #f6f6f6;
        }
 
        .body-two-part {
            width: 1260px;
            font-size: 14px;
            margin: auto;
        }
 
        .body-two-content {
            width: 100%;
            height: 420px;
        }
 
        .body-two-content-left {
            width: 290px;
            height: 420px;
            float: left;
            display: inline;
        }
 
        .body-two-content-right {
            width: 936px;
            height: 420px;
            float: right;
            display: inline;
        }
 
        .body-two-line {
            width: 290px;
            height: 420px;
            float: left;
            margin-right: 33px;
            text-decoration: none;
            position: relative;
        }
 
        .body-two-window {
            height: 50px;
            width: inherit;
            text-align: center;
            background-color: rgba(0, 0, 0, .5);
            color: #fff;
            font-size: 20px;
            line-height: 50px;
            display: none;
            position: absolute;
            bottom: 0;
        }
 
        .body-two-line:hover .body-two-window {
            display: block;
        }
 
        .body-three {
            padding: 50px 0;
 
        }
 
        .body-three-part {
            width: 1260px;
            height: 125px;
            font-size: 14px;
            border: 1px solid #dfdfdf;
            padding: 30px 0;
            margin: auto;
        }
 
        .body-three-content {
            width: 314px;
            float: left;
            display: block;
            border-right: 1px solid #dfdfdf;
            text-align: center;
            position: relative;
        }
 
        .body-three-text {
            font-size: 24px;
        }
 
        .body-three-textTwo {
            margin-top: 10px;
            color: #999;
            margin-bottom: 15px;
        }
 
        .body-three-btn {
            width: 145px;
            height: 40px;
            display: block;
            border: 1px solid #1ebcf0;
            line-height: 42px;
            border-radius: 4px;
            color: #1ebcf0;
            text-decoration: none;
            margin: auto;
        }
 
        .body-three-table {
            width: 24px;
            height: 18px;
            color: #fff;
            font-size: 12px;
            display: block;
            position: absolute;
            background-color: #ff2e2e;
            padding: 1px 5px;
            left: 208px;
            border-radius: 2px;
            top: 0;
        }
        .foot {
            width: 100%;
            height: 288px;
            padding: 36px 0 20px 0;
            background-color: #f6f6f6;
            border-top: 1px solid #ccc;
            margin-top: 40px;
        }
        .foot-top {
            width: 1260px;
            height: 132px;
            margin: auto;
        }
        .foot-top-box {
            margin-left: 8px;
            padding-right: 35px;
            border-right: 1px solid #dfdfdf;
            height: 118px;
            padding-top: 14px;
            float: left;
            display: block;
        }
        .foot-top-part {
            width: 56px;
            height: 56px;
            font-size: 14px;
            line-height: 28px;
            margin-top: 20px;
            float: left;
            display: inline;
            margin-right: 35px;
            color: rgb(51, 51, 51);
        }
        .foot-top-btn:hover {
            color: #31ccff;
        }
        .foot-top-boxTwo {
            padding: 14px 35px 0 35px;
            width: 310px;
            display: block;
            border-right: 1px solid #dfdfdf;
            height: 118px;
            float: left;
        }
 
        .foot-top-partTwo {
            width: 72px;
            height: 56px;
            font-size: 14px;
            line-height: 28px;
            margin-top: 20px;
            float: left;
            display: inline;
            margin-right: 35px;
            color: rgb(51, 51, 51);
        }
 
        .foot-top-partThree {
            width: 79px;
            height: 56px;
            font-size: 14px;
            line-height: 28px;
            margin-top: 20px;
            float: left;
            display: inline;
            margin-right: 35px;
            color: rgb(51, 51, 51);
        }
 
        .foot-top-partFour {
            width: 84px;
            height: 56px;
            font-size: 14px;
            line-height: 28px;
            margin-top: 20px;
            float: left;
            display: inline;
            margin-right: 35px;
            color: rgb(51, 51, 51);
        }
 
        .foot-top-boxThree {
            width: 160px;
            padding: 14px 35px 0 35px;
            display: block;
            border-right: 1px solid #dfdfdf;
            height: 118px;
            float: left;
        }
 
        .foot-top-boxText {
            width: 162px;
            height: 23px;
            font-size: 14px;
            margin-top: 20px;
        }
 
        .foot-top-boxText2 {
            margin-top: 12px;
        }
 
        .qq {
            display: block;
            height: 33px;
            width: 108px;
            background-image: url('../imgs/qq1.png');
            background-repeat: no-repeat;
        }
 
        .text {
            margin: auto
        }
        .foot-top-boxFour{
            padding: 14px 35px 0 35px;
            display: block;
            border-right: 1px solid #dfdfdf;
            height: 118px;
            float: left;
        }
        .foot-top-boxFive{
            display: block;
            height: 118px;
            padding-top: 14px;
            float: left;
            position: relative;
        }
        .box{
            position: absolute;
            top: 14px;
            left: 35px;
            width: 90px;
            height: 99px;
            background-image: url('../imgs/weixin_icon.png');
            background-repeat: no-repeat;
        }
        .nipic{
            float: left;
            width: 90px;
            height: 88px;
            margin-right: 5px;
        }
        .foot-bottom{
            width: 100%;
            padding-top: 25px;
            text-align: center;
            min-width: 1260px;
            height: 131px;
        }
        .foot-bottom-part{
            width: 1260px;
            height: 121px;
            margin: auto;
        }
        .foot-bottom-text{
            font-size: 12px;
        }
        .foot-bottom-box{
            width: 100%;
            height: 18px;
            margin-top: 10px;
            color: #666;
            display: block;
        }
        .font{
            font-family: tahoma;
 
        }
        .foot-bottom-box2{
            width: 396px;
            height: 35px;
            margin: 0 auto;
            padding: 20px 0;
        }
        .foot-bottom-box3{
            width: 153px;
            height: 29px;
            display: block;
            text-decoration: none;
            height: 29px;
            line-height: 29px;
            margin-right: 22px;
            color: #333;
            float: left;
        }
        .foot-bottom-box4{
            width: 120px;
            float: left;
            height: 29px;
            line-height: 29px;
            margin-left: 5px;
            color: #939393;
        }
        .foot-bottom-box5{
            width: 178px;
            height: 29px;
            line-height: 29px;
            color: #939393;
            float: left;
        }
        .foot-bottom-box6{
            width: 206px;
            height: 29px;
            display: block;
            text-decoration: none;
            height: 29px;
            line-height: 29px;
            color: #333;
            float: left;
        }
    </style>
 
 
</head>
 
<body>
    <div class="all">
        <!-- 全局 -->
        <div class="head">
            <!-- 头部 -->
            <div class="title">
                <div class="limit">
                    <div>
                        <a class="title-logo" href="https://www.nipic.com/" title="昵图网" target="_self"></a>
                    </div>
                    <div class="title-box">
                        <a class="title-text" href="https://www.nipic.com/" title="首页" target="_self">首页</a>
                        <a class="title-text" href="https://www.nipic.com/design" title="设计" target="_self">设计</a>
                        <a class="title-text" href="https://www.nipic.com/photo" title="摄影" target="_self">摄影</a>
                        <a class="title-text" href="https://www.nipic.com/media" title="多媒体" target="_self">多媒体</a>
                        <a class="title-text" href="https://www.nipic.com/original" title="原创交易" target="_self">原创交易</a>
                    </div>
                    <div class="title-login">
                        <a class="title-login-text"
                            href="https://login.nipic.com/?backurl=https://www.nipic.com/">登录/注册</a>
                    </div>
                </div>
            </div>
                
            <div class="bg">
                <div class="bg-img"></div>
                <div class="search">
                    <form class="search-form" action="https://soso.nipic.com/?names=" method="get">
                        <div class="search-box">
                            <input type="text" class="search-input" name="names" placeholder="请输入标题、关键词、作品编号搜索">
                            <input type="submit" class="search-submit" value>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <!-- 中部 -->
        <div class="body">
            <div class="body-one">
                <div class="body-one-part">
                    <div class="body-one-card"></div>
                    <a class="body-one-line" href="https://www.nipic.com/topic/show_27562_1.html" target="_blank">
                        <img src="https://pic.ntimg.cn/BannerPic/20220606/original/20220606090000_1.jpg" alt="">
                        <div class="body-one-window">夏季美陈</div>
                    </a>
                    <a class="body-one-line" href="https://www.nipic.com/topic/show_27082_1.html" target="_blank">
                        <img src="https://pic.ntimg.cn/BannerPic/20220606/original/20220606090048_1.jpg" alt="">
                        <div class="body-one-window">父亲节</div>
                    </a>
                    <a class="body-one-line" href="https://www.nipic.com/topic/show_27270_1.html" target="_blank">
                        <img src="https://pic.ntimg.cn/BannerPic/20220606/original/20220606090114_1.jpg" alt="">
                        <div class="body-one-window">夏至</div>
                    </a>
                    <a class="body-one-line" style="margin-right: 0px;"
                        href="hhttps://soso.huitu.com/search?kw=%E4%BA%8C%E5%8D%81%E5%A4%A7&from=nipicgd"
                        target="_blank">
                        <img src="https://pic.ntimg.cn/BannerPic/20220606/original/20220606144406_1.jpg" alt="">
                        <div class="body-one-window">党的二十大</div>
                    </a>
                </div>
                <div class="body-one-text">
                    <a href="https://www.nipic.com/topic/show_27202_1.html" target="_blank">星空</a>
                    <a href="https://www.nipic.com/topic/show_27093_1.html" target="_blank">打折促销海报</a>
                    <a href="https://www.nipic.com/topic/show_27051_1.html" target="_blank">美食海报</a>
                    <a href="https://www.nipic.com/topic/show_27071_1.html" target="_blank">旅游海报</a>
                    <a href="https://soso.huitu.com/search?kw=%E5%AE%89%E5%85%A8%E7%94%9F%E4%BA%A7%E6%9C%88&from=nipicgd"
                        target="_blank">安全生产月</a>
                    <a href="https://soso.huitu.com/search/?kw=%E6%8A%A4%E8%82%A4%E5%93%81%E6%B5%B7%E6%8A%A5&s1=2&page=1&from=nipicgd"
                        target="_blank">护肤品广告</a>
                    <a href="https://www.nipic.com/newpic/1.html" target="_blank">最新图片</a>
                    <a href="https://www.nipic.com/topic/1.html" target="_blank">查看更多>></a>
                </div>
            </div>
            <div class="body-two">
                <div class="body-two-part">
                    <div class="body-two-content">
                        <div class="body-two-content-left">
                            <a class="body-two-line" href="https://www.nipic.com/topic/show_27152_1.html"
                                target="_blank">
                                <img src="https://pic.ntimg.cn/BannerPic/20220606/original/20220606090226_1.jpg" alt="">
                                <div class="body-two-window">活动策划计划书</div>
                            </a>
                        </div>
                        <div class="body-two-content-right">
                            <a class="body-one-line" href="https://www.nipic.com/topic/show_27437_1.html"
                                target="_blank">
                                <img src="https://pic.ntimg.cn/BannerPic/20220606/original/20220606090247_1.jpg" alt="">
                                <div class="body-one-window">烧烤</div>
                            </a>
                            <a class="body-one-line" href="https://www.nipic.com/topic/show_27216_1.html"
                                target="_blank">
                                <img src="https://pic.ntimg.cn/BannerPic/20220606/original/20220606090318_1.jpg" alt="">
                                <div class="body-one-window">党建</div>
                            </a>
                            <a class="body-one-line" style="margin-right: 0px;"
                                href="https://www.nipic.com/topic/show_27075_1.html" target="_blank">
                                <img src="https://pic.ntimg.cn/BannerPic/20220606/original/20220606090338_1.jpg" alt="">
                                <div class="body-one-window">小龙虾</div>
                            </a>
                            <a class="body-one-line" style="margin-top: 20px;"
                                href="https://www.nipic.com/topic/show_27054_1.html" target="_blank">
                                <img src="https://pic.ntimg.cn/BannerPic/20220606/original/20220606090409_1.jpg" alt="">
                                <div class="body-one-window">房地产</div>
                            </a>
                            <a class="body-one-line" style="margin-top: 20px;"
                                href="https://www.nipic.com/topic/show_27338_1.html" target="_blank">
                                <img src="https://pic.ntimg.cn/BannerPic/20220606/original/20220606090420_1.jpg" alt="">
                                <div class="body-one-window">主题婚礼</div>
                            </a>
                            <a class="body-one-line" style="margin-right: 0px;margin-top: 20px;"
                                href="https://www.nipic.com/topic/show_27563_1.html" target="_blank">
                                <img src="https://pic.ntimg.cn/BannerPic/20220606/original/20220606090428_1.jpg" alt="">
                                <div class="body-one-window">枇杷</div>
                            </a>
                        </div>
                    </div>
                    <div class="body-one-text" style="height: 97px;">
                        <a href="https://www.nipic.com/topic/show_27202_1.html" target="_blank">星空</a>
                        <a href="https://www.nipic.com/topic/show_27093_1.html" target="_blank">打折促销海报</a>
                        <a href="https://www.nipic.com/topic/show_27051_1.html" target="_blank">美食海报</a>
                        <a href="https://www.nipic.com/topic/show_27071_1.html" target="_blank">旅游海报</a>
                        <a href="https://soso.huitu.com/search?kw=%E5%AE%89%E5%85%A8%E7%94%9F%E4%BA%A7%E6%9C%88&from=nipicgd"
                            target="_blank">安全生产月</a>
                        <a href="https://soso.huitu.com/search/?kw=%E6%8A%A4%E8%82%A4%E5%93%81%E6%B5%B7%E6%8A%A5&s1=2&page=1&from=nipicgd"
                            target="_blank">护肤品广告</a>
                        <a href="https://www.nipic.com/newpic/1.html" target="_blank">最新图片</a>
                        <a href="https://www.nipic.com/topic/1.html" target="_blank">查看更多>></a>
                    </div>
                </div>
            </div>
            <div class="body-three">
                <div class="body-three-part">
                    <div class="body-three-content">
                        <p class="body-three-text">免费素材</p>
                        <p class="body-three-textTwo">海量共享图任你选择</p>
                        <a class="body-three-btn" href="https://soso.nipic.com/?g=1&or=0">去看看</a>
                    </div>
                    <div class="body-three-content">
                        <p class="body-three-text">原创精品</p>
                        <p class="body-three-textTwo"> 千万精品图片满足你所需</p>
                        <a class="body-three-btn" href="https://www.nipic.com/original">去看看</a>
                    </div>
                    <div class="body-three-content">
                        <p class="body-three-text">
                            正版图库
                        <div class="body-three-table">推广</div>
                        </p>
                        <p class="body-three-textTwo">正版图片，版权无忧，放心使用</p>
                        <a class="body-three-btn" href="https://www.huitu.com/">去看看</a>
                    </div>
                    <div class="body-three-content" style="border-right: 0;">
                        <p class="body-three-text">
                            汇图悬赏
                        <div class="body-three-table">推广</div>
                        </p>
                        <p class="body-three-textTwo">高端定制，量身打造</p>
                        <a class="body-three-btn" href="https://task.huitu.com/">去看看</a>
                    </div>
                </div>
            </div>
        </div>
        <!-- 脚部 -->
        <div class="foot">
            <div class="foot-top">
                <div class="foot-top-box">
                    <h4>关于昵图</h4>
                    <div class="foot-top-part">
                        <a class="foot-top-btn" href="https://service.nipic.com/">昵图简介</a>
                        <a class="foot-top-btn" href="https://service.nipic.com/site/wzsm.html">网站声明</a>
                    </div>
                    <div class="foot-top-part">
                        <a class="foot-top-btn" href="https://service.nipic.com/site/wzgy.html">网站公约</a>
                        <a class="foot-top-btn" href="https://www.huitu.com/">汇图网</a>
                    </div>
                    <div class="foot-top-part" style="margin-right: 0;">
                        <a class="foot-top-btn" href="https://service.nipic.com/site/copy.html">版权声明</a>
                        <a class="foot-top-btn" href="https://service.nipic.com/site/yqlj.html">友情链接</a>
                    </div>
                </div>
                <div class="foot-top-boxTwo">
                    <h4>常见问题</h4>
                    <div class="foot-top-partTwo">
                        <a class="foot-top-btn" href="https://login.nipic.com/reg">注册</a>
                        /
                        <a class="foot-top-btn" href="https://login.nipic.com/">登录</a>
                        <br>
                        <a class="foot-top-btn" href="https://service.nipic.com/site/help_gxfen.html">关于共享分</a>
                    </div>
                    <div class="foot-top-partThree">
                        <a class="foot-top-btn" href="https://service.nipic.com/site/help_add.html">如何上传</a>
                        <br>
                        <a class="foot-top-btn" href="https://service.nipic.com/site/vip.html">关于VIP特权</a>
                    </div>
                    <div class="foot-top-partFour" style="margin-right: 0;">
                        <a class="foot-top-btn" href="https://service.nipic.com/site/zpsc.html">上传事项</a>
                        <br>
                        <a class="foot-top-btn" href="https://service.nipic.com/site/vip.html">关于账户金额</a>
                    </div>
                </div>
                <div class="foot-top-boxThree">
                    <h4>联系我们</h4>
                    <p class="foot-top-boxText">
                        <span class="text">QQ在线时间 08:30-21:30</span>
                    </p>
                    <p class="foot-top-boxText2">
                        <a class="qq" href="https://service.nipic.com/site/contact.html"></a>
                    </p>
                </div>
                <div class="foot-top-boxFour">
                    <h4>友情链接</h4>
                    <p style="margin-top: 26px;">
                        <a href="http://www.cmbchina.com/">
                            <img src="https://static.ntimg.cn/original/images/zhaohang_logo.png" alt="">
                        </a>
                    </p>
                </div>
                <div class="foot-top-boxFive">
                    <div class="box">
                        <a target="_blank">
                            <div class="nipic"></div>
                        </a>
                    </div>
                </div>
            </div>
            <div class="foot-bottom">
                <div class="foot-bottom-part">
                    <div class="foot-bottom-text">
                        <p class="foot-bottom-box">
                            <span class="font">Copyright © 2022 NiPic.com All Rights Reserved</span>
                            版权所有·昵图网  昵图网是网络服务平台方，若您的权利被侵害，请联系 
                            <span class="font">copyright@nipic.com</span>
                            本站法律顾问：陈明律师
                        </p>
                        <p class="foot-bottom-box">
                            <a href="https://beian.miit.gov.cn/" target="_blank">浙ICP备14012994号-1  增值电信业务经营许可证：浙B2-20140130</a>
                            违法和不良信息举报电话：0571-89267010
                        </p>
                        <div class="foot-bottom-box2">
                            <a class="foot-bottom-box3" href="http://idinfo.zjamr.zj.gov.cn/bscx.do?method=lzxx&id=3301843301840000233550"
                                target="_blank">
                                <img style="float: left;" src="https://static.ntimg.cn/original/images/webgongshang_icon.png" alt="">
                                <div class="foot-bottom-box4">网络工商电子营业执照</div>
                            </a>
                            <a class="foot-bottom-box6" target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=33011002011092">
                                <img style="float: left;" src="https://static.ntimg.cn/original/images/gongan_icon.png" alt="">
                                <div class="foot-bottom-box5">浙公网安备 33011002011092号</div>
                            </a>
                            
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
 
</body>
 
</html>

image.png

avatar
文章
阅读
粉丝