css续集3

于 2019-06-02 20:28:48 发布
阅读量87 收藏
点赞数
原文链接：http://blog.51cto.com/10983441/2403957
版权

1.background属性

1.1background-image

"默认平铺整个页面"

<!DOCTYPE HTML>
<html>
    <head lang='en'>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>学城</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
        body{
            background-image: url("1.jpg");
        }
        </style>
    </head>
<body>
    <div class="box1">
    </div>
</body>
</html>

css续集3

1.2background-repeat:

css续集3

<!DOCTYPE HTML>
<html>
    <head lang='en'>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>学城</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
        body{
            background-image: url("1.jpg");
            background-repeat: no-repeat;
        }
        </style>
    </head>
<body>
    <div class="box1">
    </div>
</body>
</html>

css续集3
css续集3

1.3给元素设置padding,padding区域也会平铺背景图片

<!DOCTYPE HTML>
<html>
    <head lang='en'>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>学城</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
        body{
            background-image: url("1.jpg");
            background-repeat: repeat-x;
            padding: 100px 100px;
        }
        </style>
    </head>
<body>
    <div class="box1">
    </div>
</body>
</html>

css续集3

1.4repeat应用-背景图片

"对于对称的图片，可以使用repeat效果，用作背景图片"
<!DOCTYPE HTML>
<html>
    <head lang='en'>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>学城</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
        body{
            background-image: url("./images/timg2.jpeg");
        }
        </style>
    </head>
<body>
    <div class="box1">
    </div>
</body>
</html>

css续集3

1.5background-position

background-position: -100px -100px;
正值 第一个值表示往右偏移 第二个值表示往下移 
负值则相反

除了设置像素值，还有下面的设置方法
水平方向属性值还有三种选择 left center right
垂直方向属性值还有三种选择 top center bottom

1.5.1background-position应用1-雪碧图技术-在一张大图中剪切出小图形

CSS 雪碧图应用原理：
只有一张大的合并图， 每个小图标节点如何显示单独的小图标呢？

其实就是 截取 大图一部分显示，而这部分就是一个小图标。

使用雪碧图的好处：
1、利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
2、CSS Sprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。
3、解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。
4、更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便

不足：

1）CSS雪碧的最大问题是内存使用
2）拼图维护比较麻烦
3）使CSS的编写变得困难
4）CSS 雪碧调用的图片不能被打印

css续集3

<!DOCTYPE HTML>
<html>
    <head lang='en'>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>学城</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            .box1{
                /*48px是一个小图形的宽和高*/
                width: 48px;
                height: 48px;
                background-image: url("./images/1.png");
                background-repeat: no-repeat;
                /*这个528px就是该小图片顶部距离整张图片顶部的距离,可以使用ps来查看该距离*/
                background-position: 0px -528px;
            }
            .box2{
                width: 48px;
                height: 48px;
                background-image: url(./images/1.png);
                background-repeat: no-repeat;
                background-position: 0 -440px;
            }
        </style>
    </head>
<body>
    <div class="box1">
    </div>
    <div class="box2">
    </div>
</body>
</html>

css续集3

1.5.2background-position应用2-通天banner-背景图形水平居中

一般我们电脑的屏幕都是1439.但是设计师给我们的banner图都会比这个大，那么我们可以制作通天banner。
/*通天banner*/
background-image: url("./images/banner.jpg");
background-repeat: no-repeat;
/*顶部水平居中*/
background-position: top center;

/*综合属性设置*/
background:  url('./images/banner.jpg')  no-repeat   center top;
<!DOCTYPE HTML>
<html>
    <head lang='en'>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>学城</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            .box1{
                height: 812px;
                padding-top: 100px;
                background-image: url("./images/banner.jpg");
                background-repeat: no-repeat;
                /*通天banner*/
                background-position: top center;
            }
            .box2{
                width: 960px;
                height: 36px;
                border-radius: 5px;
                overflow: hidden;
                background-color: purple;
                margin: 0px auto;
            }
            ul{
                /*取消ul的样式*/
                list-style: none;
            }
            a{
                /*去除a标签的下划线*/
                text-decoration: none;
                /*一共6个，所以每个设置960/6=160px*/
                width: 160px;
                /*与父元素的高度一样*/
                height: 36px;
                /*与height相同，可让字体垂直居中*/
                line-height: 36px;
                font-size: 20px;
                color: white;
                /*文字水平居中*/
                text-align: center;
                float: left;
            }
            a:hover{
                /*鼠标悬浮时，背景色红色*/
                background-color: red;
            }

        </style>
    </head>
<body>
    <div class="box1">
        <div class="box2">
            <ul>
                <li><a href="ww">导航</a></li>
                <li><a href="ww">导航</a></li>
                <li><a href="ww">导航</a></li>
                <li><a href="ww">导航</a></li>
                <li><a href="ww">导航</a></li>
                <li><a href="ww">导航</a></li>

            </ul>
        </div>

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

css续集3

1.6background-attachment: fixed;

"固定背景，滚动页面时，背景不动，上面的内容会滚动"
/*单独设置*/
background-attachment: fixed;

/*综合属性设置*/
background: url(./images/timg2.jpeg) no-repeat 0 0  fixed;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        div{
            width: 1200px;
            height: 2000px;
            border: 1px solid red;
            background: url(./images/timg2.jpeg) no-repeat 0 0  fixed;
            /*固定 背景 滚动页面时，背景不动，上面的内容会滚动*/
            /*background-attachment: fixed;*/
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <p>文字</p>
        <p>文字</p>
        <p>文字</p>
        <p>文字</p>
        <p>文字</p>
        <p>文字</p>
        <p>文字</p>
        <p>文字</p>
        <p>文字</p>
        <p>文字</p>
        <p>文字</p>
        <p>文字</p>
        <p>文字</p>
        <p>文字</p>
        <p>文字</p>
        <p>文字</p>
        <p>文字</p>
        <p>文字</p>
        <p>文字</p>
        <p>文字</p>
        <p>文字</p>
        <p>文字</p>

    </div>

</body>
</html>

css续集3

2.定位

定位有三种：

1.相对定位 
2.绝对定位 
3.固定定位

2.1相对定位

相对定位:相对于自己原来的位置定位

现象和使用：
1.如果对当前元素仅仅设置了相对定位，那么与标准流的盒子什么区别。
2.设置相对定位之后，我们才可以使用四个方向的属性： top、bottom、left、right

特性：
1.不脱标
2.形影分离
3.老家留坑
所以说相对定位 在页面中没有什么太大的作用。影响我们页面的布局。我们不要使用相对定位来做压盖效果

用途：
1.微调元素位置
2.做绝对定位的参考（父相子绝）绝对定位会说到此内容。

2.1.1验证相对定位特性

特性：
1.不脱标
2.形影分离
3.老家留坑
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">

        *{
            padding: 0;
            margin: 0;
        }
        div{
            width: 50px;
            height: 50px;

        }
        .box1{
            background-color: red;
        }
        .box2{
            background-color: green;
            position: relative;
            top: 30px;
            left: 20px;
        }
        .box3{
            background-color: blue;
        }

    </style>
</head>
<body>

    <!-- 相对定位三大特性： 1.不脱标  2.形影分离  3.老家留坑 :占着茅房不拉屎，恶心人 。 所以说 相对定位 在页面中没有什么太大的作用。影响我们页面的布局。但是我们不要使用相对定位来做压盖效果-->

    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>

</body>
</html>

css续集3

2.1.2相对定位应用一：微调

css续集3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
        .input_text{
            font-size: 30px;

        }
        .input_button{
            position: relative;
            /*微调之后*/
            top:3px;
        }
    </style>
</head>
<body>
    <div class=" box box1">
        <input class="input_text" type="text">
        <input class="input_button" type="button" value="按钮">
    </div>

</body>
</html>

css续集3

2.2绝对定位

特性：
1.脱标
2.做遮盖效果，提升了层级
3.设置了绝对定位后，不区分行内元素和块级元素，都能设置宽高。

2.2.1验证绝对定位特性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
        .box{
            height: 50px;
            width: 50px;
        }
        .box1{
            width: 40px;
            height: 40px;
            background-color: green;
            position: absolute;
        }
        .box2{
            background-color: yellow;
        }
        .box3{
            background-color: red;
        }
        span{
            height: 25px;
            width: 25px;
            position: absolute;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class=" box box1">
    </div>
    <div class=" box box2">
    </div>
    <div class=" box box3">
    </div>
<span></span>
</body>
</html>

css续集3

2.2.2absolute的top属性

"top是以页面左上角为参考点(不是以浏览器左上角)调整位置"
所以滚动鼠标后，看不到30px的距离了。

css续集3
css续集3

2.2.3absolute的bottom属性

"bottom是以“首屏”页面左下角为参考点调整位置"
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
        .box{
            height: 50px;
            width: 50px;
        }
        .box1{
            width: 40px;
            height: 40px;
            background-color: green;
            position: absolute;
        }
        .box2{

            background-color: yellow;
        }
        .box3{
            background-color: red;
            height: 2500px;
        }
        span{
            height: 500px;
            width: 25px;
            position: absolute;
            /**/
            bottom:30px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class=" box box1">
    </div>
    <div class=" box box2">
    </div>
    <div class=" box box3">
    </div>
<span></span>
</body>
</html>

css续集3
css续集3

2.2.4以父辈盒子作为参考点

1.父辈元素设置相对定位，子元素设置绝对定位，即（"父相子绝"），那么会以父辈元素左上角为参考点。这个父辈元素可以是爸爸，爷爷，曾爷爷。
2.如果父亲元素没有设置定位，那么以所有父辈元素中，设定定位的元素为参考点，即上面所说的爷爷，曾爷爷。
3.不仅仅父相子绝，父绝子绝 ，父固子绝,都是以父辈元素为参考点
"父绝子绝，没有实战意义，做网站的时候不会出现父绝子绝。
因为绝对定位脱离标准流，影响页面布局。
父相子绝在页面布局中，是常用的布局方案。
因为父亲设置相对定位，不脱离标准流，子元素设置绝对定位，仅仅是在当前父辈元素内调整位置信息。"
4.绝对定位的盒子，无视父辈的padding.
2.2.4.1验证：父相子绝
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }

        .box1{
            width: 200px;
            height: 200px;
            background-color: green;
            padding: 50px;
        }
        .box2{
            width: 80px;
            height: 80px;
            background-color: yellow;
            position: relative;
        }
        .box3{
            width: 50px;
            height: 50px;
            background-color: red;
            position: absolute;
            top: 0px;
            left: 0px;
        }

    </style>
</head>
<body>
    <div class=" box1">
            <div class=" box2">
                    <div class=" box3">
                    </div>
            </div>
    </div>

<span></span>
</body>
</html>

css续集3

2.2.4.2验证以父辈中设置了定位的盒子为参考点
"如果父亲元素没有设置定位，那么以所有父辈元素中，设定定位的元素为参考点，即上面所说的爷爷，曾爷爷"
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }

        .box1{
            width: 200px;
            height: 200px;
            background-color: green;
            padding: 50px;
            position: relative;
        }
        .box2{
            width: 80px;
            height: 80px;
            background-color: yellow;

        }
        .box3{
            width: 50px;
            height: 50px;
            background-color: red;
            position: absolute;
            top: 0px;
            left: 0px;
        }

    </style>
</head>
<body>
    <div class=" box1">
            <div class=" box2">
                    <div class=" box3">
                    </div>
            </div>
    </div>

<span></span>
</body>
</html>

css续集3

2.2.4.3不仅仅父相子绝，父绝子绝 ，父固子绝,都是以父辈元素为参考点
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }

        .box1{
            width: 200px;
            height: 200px;
            background-color: green;
            padding: 50px;
                        /*父亲的父亲是定位的*/
            position: absolute;
        }
        .box2{
            width: 80px;
            height: 80px;
            background-color: yellow;

        }
        .box3{
            width: 50px;
            height: 50px;
            background-color: red;
                        /*子元素是相对的*/
            position: absolute;
            top: 0px;
            left: 0px;
        }

    </style>
</head>
<body>
    <div class=" box1">
            <div class=" box2">
                    <div class=" box3">
                    </div>
            </div>
    </div>

<span></span>
</body>
</html>

css续集3
css续集3

2.2.4.4验证绝对定位的盒子，无视父辈的padding
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }

        .box1{
            width: 200px;
            height: 200px;
            background-color: green;
            padding: 50px;
            position: fixed;
            /*虽然设置了padding,但没有效果*/
            padding-top: 50px;
        }
        .box2{
            width: 80px;
            height: 80px;
            background-color: yellow;

        }
        .box3{
            width: 50px;
            height: 50px;
            background-color: red;
            position: absolute;
            top: 0px;
            left: 0px;
        }

    </style>
</head>
<body>
    <div class=" box1">
            <div class=" box2">
                    <div class=" box3">
                    </div>
            </div>
    </div>

<span></span>
</body>
</html>

css续集3

2.2.5绝对定位盒子居中
绝对定位的盒子margin: 0 auto;不管用了，需要进行如下的设置

left: 50%;
margin-left: -480px;"这里的距离是盒子宽度的一半"

        .box .c{
            width: 960px;
            height: 69px;
            background-color: pink;
            /*margin: 0 auto;*/
            position: absolute;
            left: 50%;
            margin-left: -480px;
            }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 100%;
            height: 69px;
            background: #000;

        }
        .box .c{
            width: 960px;
            height: 69px;
            background-color: pink;
            /*margin: 0 auto;*/
            position: absolute;
            left: 50%;
            margin-left: -480px;

            /*设置绝对定位之后，margin:0 auto;不起任何作用，如果想让绝对定位的盒子居中。当做公式记下来 设置子元素绝对定位，然后left:50%; margin-left等于元素宽度的一半，实现绝对定位盒子居中*/
        }

    </style>
</head>
<body>
    <div class="box">
        <div class="c"></div>
    </div>

</body>
</html>

css续集3

2.3固定定位

固定当前元素，使其不会随着页面滚动而滚动

特性：
1.脱标
2.遮盖，提升层级
3.固定不变

参考点：
设置固定定位，用top描述，是以浏览器左上角为参考点。
设置bottom描述，是以浏览器左下角为参考点

作用：
1.返回顶部栏
2.固定导航栏
3.小广告

2.3.1验证固定定位特性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }

        .box2{
            width: 100%;
            height: 2000px;
            background-color: yellowgreen;

        }
        .box3{
            width: 50px;
            height: 50px;
            background-color: red;
            /*设置固定定位*/
            position: fixed;
            right: 50px;
            bottom: 50px;
        }

    </style>
</head>
<body>
    <div class=" box1">
            <div class=" box2">
                    <div class=" box3">
                    </div>
            </div>
    </div>

<span></span>
</body>
</html>

css续集3

2.3.2固定定位--返回顶部案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }

        .box2{
            width: 100%;
            height: 2000px;
            background-color: yellowgreen;

        }
        .box3{
            width: 80px;
            height: 50px;
            background-color: red;
            /*设置固定定位*/
            position: fixed;
            right: 50px;
            bottom: 50px;
            text-align: center;
            line-height: 50px;
        }

    </style>
</head>
<body>
    <div class=" box1">
            <div class=" box2">
                    <div class=" box3">
                        返回顶部
                    </div>
            </div>
    </div>

<span></span>
</body>
</html>

css续集3

2.3.3固定定位--固定导航栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
        body{
            /*这里是为了让图片完整显示*/
            padding-top: 36px;
        }
        .back_top{
            background-color: yellowgreen;
            width: 100%;
            /*固定定位，也无视了父元素的padding*/
            /*固定定位后，一定要加top属性和left属性*/
            position: fixed;
            top: 0px;
            left: 0px;
        }
        .box1{
            width: 960px;
            height: 36px;
            background-color: purple;
            margin: 0px auto;
            border-radius: 5px;

        }
        ul{
            list-style: none;
        }
        a{
            color: white;
            text-align: center;
            line-height: 36px;
            float: left;
            height: 36px;
            width: 160px;
            text-decoration: none;
        }
        a:hover{
            background-color: red;
        }

    </style>
</head>
<body>
<div class="back_top">
        <div class=" box1">
        <ul>
            <li><a href="ww">导航</a></li>
            <li><a href="ww">导航</a></li>
            <li><a href="ww">导航</a></li>
            <li><a href="ww">导航</a></li>
            <li><a href="ww">导航</a></li>
            <li><a href="ww">导航</a></li>

        </ul>
    </div>
</div>
<img src="1.jpg" alt="">
<img src="1.jpg" alt="">
<img src="1.jpg" alt="">
<img src="1.jpg" alt="">
<img src="1.jpg" alt="">
<img src="1.jpg" alt="">
<img src="1.jpg" alt="">
<img src="1.jpg" alt="">
<img src="1.jpg" alt="">
<img src="1.jpg" alt="">

<span></span>
</body>
</html>

css续集3

3.z-index

1.定位的元素，永远压在没定位的元素上面
1.z-index值表示谁压着谁，谁的值大，谁就在上面
2.只有有了定位的元素，才能设置z-index，即不管是相对定位，绝对定位，固定定位，都可以使用z-index，浮动元素不能使用z-index.
3.z-index值没有单位，是一个正整数。默认z-index值为0.
4.如果都没有设置z-index值或z-index值一样，那么哪个设置在后面，就显示在上层。

5.从父现象，父亲的z-index值大，就显示在上面，即使子元素的z-index值小，也会显示在上面。

3.1验证--定位的元素，永远压在没定位的元素上面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
        .box{
            height: 50px;
            width: 50px;
        }
        .box1{
            background-color: yellowgreen;
            /*验证定位的元素压在没定位的元素上面*/
            position: relative;
            top: 20px;
            left: 20px;
        }
        .box2{
            background-color: yellow;
        }
        .box3{
            background-color: blue;
        }
    </style>
</head>
<body>
<div class="box1 box"></div>
<div class="box2 box"></div>
<div class="box3 box"></div>
</body>
</html>

css续集3

3.2验证--z-index值表示谁压着谁，谁的值大，谁就在上面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
        .box{
            height: 50px;
            width: 50px;
        }
        .box1{
            background-color: yellowgreen;
            position: relative;
            top: 20px;
            left: 20px;
            z-index: 3;
        }
        .box2{
            background-color: yellow;
            position: relative;
            top: 0px;
            left: 0px;
            /*验证z-index值大的，压着z-index值小的*/
            z-index: 5;
        }
        .box3{
            background-color: blue;
        }
    </style>
</head>
<body>
<div class="box1 box"></div>
<div class="box2 box"></div>
<div class="box3 box"></div>
</body>
</html>

css续集3

3.3验证--都没有设置z-index，谁设置在后面，谁显示在上面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
        .box{
            height: 50px;
            width: 50px;
        }
        .box1{
            background-color: yellowgreen;
            position: relative;
            top: 20px;
            left: 20px;

        }
        .box2{
            background-color: yellow;
            position: relative;
            top: 0px;
            left: 0px;
        /*    验证都没有设置z-index，谁设置在后面，谁显示在上面*/
        }
        .box3{
            background-color: blue;
        }
    </style>
</head>
<body>
<div class="box1 box"></div>
<div class="box2 box"></div>
<div class="box3 box"></div>
</body>
</html>

css续集3

3.4验证--从父现象，父亲的z-index值大，就显示在上面，即使子元素的z-index值小，也会显示在上面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
        .box{
            height: 100px;
            width: 100px;
            position: relative;
            top: 0px;
            left: 0px;
        }
        .box1{
            background-color: coral;
            z-index: 10;
        }
        .box2{
            background-color: yellowgreen;
            z-index: 9;

        }
        .box1_child{
            width: 50px;
            height: 50px;
            background-color: blue;
            position: relative;
            top: 150px;
            left: 150px;
            z-index: 4;
        }
        .box2_child{
            width: 80px;
            height: 80px;
            background-color: red;
            position: relative;
            top: 0px;
            left: 150px;
            z-index: 6;

        }
    </style>
</head>
<body>
<div class="box1 box">
    <div class="box1_child"></div>
</div>
<div class="box2 box">
    <div class="box2_child"></div>
</div>

</body>
</html>

css续集3

转载于:https://blog.51cto.com/10983441/2403957

weixin_33726943
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
爆笑鹦鹉续集
01-01
3. **文档压缩**：尽管没有直接提到压缩包，但文档的分发通常可能通过压缩文件进行，比如ZIP或RAR格式。这些压缩工具可以减小文件大小，便于传输和存储。了解如何使用和解压这类文件是基础的计算机操作技能。 4. **...
css高清学习视频（从入门到精通）最佳的视频教程
08-07
在描述中提到的“css高清晰学习视频 从入门到精通（续集）”，意味着这个系列教程不仅适合初学者，也适合那些已经学过一些CSS但希望进一步提高技能的人。续集通常会包含更高级的主题，深化对已有概念的理解，并引入...
巴巴运动网续集源码
09-28
3. **数据库设计**：巴巴运动网续集源码很可能包含了数据库模型，如MySQL、MongoDB或PostgreSQL。数据库设计包括表结构、关系和索引，对于理解数据存储和检索至关重要。 4. **前端技术**：WebRoot目录通常包含网站...
FSA3:这是我们要开发的全功能Web应用程序。 提供了GitHub页面上的托管应用程序链接
03-16
Group3-全栈应用： 概述： 在此应用程序中，用户将必须检查两种颜色。 如果用户单击或触摸颜色1，则它将请求一个宝藏位置。 如果用户单击/触摸第二种颜色，则如果他在该位置内，则用户必须像获得宝藏一样获得信息。...
WEB_STUDY_FullStack:具有简单项目的全栈研究。 （HTMLCSS，JavaScriptES6Typescript，BootstrapAngular7，Node.jsExpress，JavaJSPSpring，ASP.NET（C＃），MySQLMariaDBOracleDBMSSQLMongoDB，Docker）
05-28
续集 猫鼬 安卓 开发运维 9-1。 码头工人 1.网络标准 1-1。 HTML，CSS 转到存储库 如何编写与Web标准相对应HTML文档以及如何使用键标签 仓库通过CSS研究设计模式 1-2。 JavaScript 转到存储库 JavaScript基本...
深度学习数据集：x射线下的人体骨骼关节图像语义分割
08-16
深度学习数据集：x射线下的人体骨骼关节图像语义分割 类别个数（3）：【具体类别参考json类别文件】 数据分为分为训练集和验证集、测试集： 训练集图像数量：1100 张左右的图片。验证集图像数量：100 张左右图片
嵌入式单片机安装包整理合集1
08-16
嵌入式单片机安装包整理合集1
基于Android时间管理系统APP设计与实现.docx
08-16
基于Android时间管理系统APP设计与实现.docx
基于springboot的在线考试交流网站 源码+数据库（毕业设计）
08-16
基于Vue.js和SpringBoot的在线考试交流网站是一个功能丰富的平台，它为用户提供了一个便捷的在线学习和交流环境。该网站分为用户前台和管理后台两个部分，以满足不同角色的需求。管理员可以利用后台系统进行论坛管理、公告信息发布、学习视频上传、试题试卷编辑和考试管理等操作，从而确保网站内容的质量和更新。普通用户则可以在前台参与论坛讨论、查看公告、学习视频、进行在线考试等活动，实现自我提升和知识交流。整个网站的设计注重用户体验和操作便捷性，为用户提供了一个高效、易用的在线学习平台。 录屏：https://www.bilibili.com/video/BV1UH4y1g7mQ 教程：https://space.bilibili.com/417412814/channel/collectiondetail?sid=2242844
Android端汤姆猫小游戏源码.rar
08-16
Android端汤姆猫小游戏源码.rar Android端汤姆猫小游戏源码.rar Android端汤姆猫小游戏源码.rar Android端汤姆猫小游戏源码.rar Android端汤姆猫小游戏源码.rar Android端汤姆猫小游戏源码.rar Android端汤姆猫小游戏源码.rar Android端汤姆猫小游戏源码.rar Android端汤姆猫小游戏源码.rar Android端汤姆猫小游戏源码.rar Android端汤姆猫小游戏源码.rar Android端汤姆猫小游戏源码.rar Android端汤姆猫小游戏源码.rar
一个.NET库，提供了弹性和瞬态故障处理功能 它允许开发人员以流畅且线程安全的方式表达诸如重试、断路器、超时和回退等策略
08-16
Polly 是一个 .NET 库，提供了弹性和瞬态故障处理功能。它允许开发人员以流畅且线程安全的方式表达诸如重试、断路器、超时和回退等策略。 Polly 可以用于通过实现重试和回退机制，使应用程序更加弹性地处理外部依赖项（如数据库和 Web 服务）的故障。它还可以用于通过实现断路器模式来防止级联故障。
奥柯玛DC18A电磁炉原理图.rar
08-16
奥柯玛DC18A电磁炉原理图
yolov5复现.docx
08-16
YOLOv5 是一个流行的实时对象检测系统，由 Ultralytics 开发。它基于 YOLO（You Only Look Once）算法，该算法以其快速和高效而闻名。YOLOv5 是 YOLO 系列中的第五个主要版本，它在速度和准确性方面进行了改进。 复现 YOLOv5 通常涉及以下步骤： ### 1. 环境配置 确保你有一个适当的环境来运行 YOLOv5。通常，这包括： - Python（推荐使用 Python 3.6+） - CUDA 支持的 GPU（NVIDIA） - cuDNN 库 ### 2. 安装依赖 安装 Python 依赖项，包括 PyTorch、OpenCV 等。可以通过 pip 来安装： ```bash pip install torch torchvision opencv-python pillow matplotlib ``` ### 3. 下载 YOLOv5 可以从 Ultralytics 的 GitHub 仓库下载 YOLOv5 的代码和预训练模型： ```bash git clone https://github.com/ultralyti
数据圣域的守护者：SQL第三范式的深度解析
最新发布
08-16
SQL（Structured Query Language，结构化查询语言）是一种用于管理和操作关系数据库的标准编程语言。它被广泛用于创建、修改、查询和删除数据库中的数据。SQL的主要功能包括： 1. **查询**（Query）：从数据库中检索数据。 2. **插入**（Insert）：向数据库表中添加新的数据行。 3. **更新**（Update）：修改数据库表中的现有数据。 4. **删除**（Delete）：从数据库表中移除数据。 5. **创建**（Create）：创建新的数据库、表、视图等。 6. **修改**（Alter）：修改现有数据库结构，如添加或删除表的列。 7. **授权**（Grant）：为用户设置数据库权限。 8. **撤销**（Revoke）：移除用户的数据库权限。 SQL语言具有以下特点： - **声明性**：用户只需指定要检索或修改的数据，而不需要编写完成这些操作的步骤。 - **高度非过程化**：SQL允许用户以非过程化的方式操作数据，这意味着不需要编写复杂的算法。 - **易于学习和使用**：SQL语法直观，易于理解和编写。 - **跨平台**：
2023-04-06-项目笔记 - 第二百二十七阶段 - 4.4.2.225全局变量的作用域-225 -2024.08.16
08-16
2023-04-06-项目笔记-第二百二十七阶段-课前小分享_小分享1.坚持提交gitee 小分享2.作业中提交代码 小分享3.写代码注意代码风格 4.3.1变量的使用 4.4变量的作用域与生命周期 4.4.1局部变量的作用域 4.4.2全局变量的作用域 4.4.2.1全局变量的作用域_1 4.4.2.225局变量的作用域_225- 2024-08-16
sql进阶（99页 PPT）.ppt
08-16
sql进阶（99页 PPT）
一、前后端分离通用权限系统（1）源码：gansu-auth-parent(1).zip
08-16
一、前后端分离通用权限系统（1）源码：gansu-auth-parent(1).zip
基于Android任务管理器系统APP设计与实现.docx
08-16
基于Android任务管理器系统APP设计与实现.docx
毕业设计，基于VB+ACCESS开发的企业生产管理系统，内含完整源代码，数据库，开题报告，论文答辩，毕业论文
08-16
毕业设计，基于VB+ACCESS开发的企业生产管理系统，内含完整源代码，数据库，开题报告，论文答辩，毕业论文 当今时代是飞速发展的信息时代。在各行各业中离不开信息处理，这正是计算机被广泛应用于信息管理系统的环境。计算机的最大好处在于利用它能够进行信息管理。使用计算机进行信息控制，不仅提高了工作效率，而且大大的提高了其安全性。尤其对于复杂的信息管理，计算机能够充分发挥它的优越性。计算机进行信息管理与信息管理系统的开发密切相关，系统的开发是系统管理的前提。本系统就是用计算机操作企业生产管理系统，是企业单位用户更好的维护各项生产管理业务处理工作而开发的管理软件。 数据库管理系统（DBMS）是指数据库系统中管理数据的软件系统。DBMS是数据库系统的核心组成部分。对数据库的一切操作，包括定义、更新及各种控制,都是通过DBMS进行的。DBMS总是基于某种数据模型，可以把DBMS看成是某种数据模型在计算机系统上的具体实现。根据数据模型的不同，DBMS可以分成层次型、网状型、关系型、面向对象型等。Access就是一种关系型数据库管理系统。 根据需求分析，实现企业生产管理业务，效益已越来越明显。因此，
CSS3未来网页设计指南
"The Book of CSS3" 本书《The Book of CSS3》是Peter Gasston所著的一本关于CSS3的指南，旨在帮助开发者了解CSS3的最新技术和应用。下面是本书的一些重要知识点： 一、 CSS3简介 CSS3是层叠样式表语言的最新版本...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值