CSS3详解-程序员宅基地

技术标签： css html css3

CSS3详解

一、CSS3

1-1、基本概念

层叠样式表(Cascading Style Sheets)是一种用来表现HTML或XML等文件样式的计算机语言
CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力

1-2、发展历程

CSS1.0：网页基本样式
CSS2.0：DIV（块）+ CSS，提出HTML与CSS结构分离的思想，网页变得简单，利于SEO
CSS2.1：浮动，定位
CSS3.0：圆角，阴影，动画…浏览器兼容性

1-3、快速入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--规范， <style> 可以编写css代码，每一个声明，最好使用分好结尾
    语法：
        选择器{
            声明1;
            声明2;
            声明3;
        }
    -->
    <link rel="stylesheet" href="css/style.css">

</head>
<body>

<h1>我是标题</h1>

</body>
</html>

1-4、导入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--内部样式表-->
    <style>
        h1{
      
            color: green;
        }
    </style>

    <!--外部样式-->
    <link rel="stylesheet" href="css/style.css">

</head>
<body>
<!--优先级：行内样式>内部样式>外部样式，但遵循就近原则-->
<!--行内样式：在标签元素中，编写一个style属性，编写样式即可-->
<h1 style="color: red">hello!</h1>
</body>
</html>

拓展：外部样式两种写法

链接式（html）：

    <!--外部样式-->
    <link rel="stylesheet" href="css/style.css">

导入式（CSS2.1）：

    <!--导入式-->
    <style>
        @import url("css/style.css");
    </style>

区别：
- link是XHTML标签，除了加载CSS外，还可以定义RSS等事务。@import属于CSS范畴，只能加载CSS。
- link引用CSS在页面加载时同时加载，@import需要完全加载后加载。同时link是XHTML标签，没有兼容性，@import是在CSS2.1中提出的，低版浏览器不支持。link支持使用Javascript控制DOM来改变样式；@import不支持。

二、选择器

作用：选择页面上的某一个元素或者某一类元素

2-1、基本选择器

优先级：id>class>标签

标签选择器：选择一类标签（标签{}）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*标签选择器，会选择到页面上所有这个标签的元素*/
        h1{
      
            color: #030e0c;
            background: cornflowerblue;
            border-radius: 24px;
        }
        p{
      
            font-size: 80px;
        }
    </style>
</head>
<body>

<h1>天水姜伯约</h1>
<h1>天水姜伯约</h1>
<p>你好</p>

</body>
</html>

类选择器 class：选择所有属性一致的标签，可跨标签（.类名{}）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*类选择器的格式 .class的名称
        优点：可以多个标签归类，是同一个class，可以复用
        */
        .boyue{
      
            color: cornflowerblue;
        }
        .jiang{
      
            color: red;
        }
    </style>
</head>
<body>
<h1 class="boyue">姜维</h1>
<h1 class="jiang">姜伯约</h1>
<h1 class="boyue">你好</h1>
<p class="jiang">早上好</p>
</body>
</html>

Id选择器：全局唯一（#id{}）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*id选择器：id必须保证全局唯一
          #id名称{}
          不遵循就近原则，固定的
          优先级：id选择器> class选择器> 标签选择器
        */
        #by{
      
            color: aqua;
        }
        .style01{
      
            color: red;
        }
    </style>
</head>
<body>
<h1 id="by">天</h1>
<h1 class="style01">水</h1>
<h1 class="style01">姜</h1>
<h1>伯</h1>
<h1>约</h1>
</body>
</html>

2-2、层次选择器

后代选择器：在某个元素的后面（祖爷爷爷爷爸爸你）

/*后代选择器*/
body p{
    
    background: red;
}

子选择器：一代，儿子

/*子选择器*/
body>p{
    
    background: aqua;
}

相邻兄弟选择器

/*相邻兄弟选择器，只有一个相邻（向下选择）*/
.active + p{
    
    background: darkblue;
}

通用选择器

/*通用兄弟选择器，当前选中元素的向下的所有兄弟元素*/
.active~p{
    
    background: aquamarine;
}

2-3、结构伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--避免使用，class，id选择器-->
    <style>
        /*ul的第一个元素*/
        ul li:first-child{
    
            background: aquamarine;
        }
        /*ul的最后一个元素*/
        ul li:last-child{
    
            background: red;
        }

        /*选中 p1：定位到父元素，选择当前的第一个元素
        选择当前p元素的父元素，选中父元素的第一个，并且是当前元素才生效
        */
        p:nth-child(1){
    
           background: cornflowerblue;
        }

        /*选中父元素下的p元素的第二个*/
        p:nth-of-type(2){
    
            background: yellow;
        }
    </style>
</head>
<body>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
    </ul>
</body>
</html>

在这里插入图片描述

2-4、属性选择器（常用）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .demo a{
      
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background: blue;
            text-align: center;
            color: gainsboro;
            text-decoration: none;
            margin-right: 5px;
            font: bold 20px/50px Arial;
        }

        /*属性名， 属性名 = 属性值（正则）
        = 绝对等于
        *= 包含这个元素
        ^= 以这个开头
        $= 以这个结尾
        */
        /*存在id属性的元素  a[]{}*/
        /*a[id]{
            background: yellow;
        }*/

        /*id=first元素*/
        /*a[id=first]{
            background: green;
        }*/

        /*class 中有link的元素*/
        /*a[class *= "link"]{
            background: red;
        }*/

        /*选中href中以http开头的元素*/
        /*a[href^=http]{
            background: green;
        }*/

        a[href$=pdf]{
      
            background: red;
        }

    </style>
</head>
<body>
<p class="demo">
    <a href="http://www.baidu.com" class="link item first" id="first">1</a>
    <a href="" class="link item active" target="_blank" title="test">2</a>
    <a href="images/1.html" class="link item">3</a>
    <a href="images/1.png" class="link item">4</a>
    <a href="images/1.jpg" class="link item">5</a>
    <a href="abc" class="link item">6</a>
    <a href="/a.pdf" class="link item">7</a>
    <a href="/abc.pdf" class="link item">8</a>
    <a href="abc.doc" class="link item">9</a>
    <a href="abcd.doc" class="link item last">10</a>
</p>
</body>
</html>

在这里插入图片描述

三、美化网页元素

3-1、美化网页原因

有效传递页面信息
页面漂亮可吸引用户
凸显页面主体
提高用户体验

span标签：重点要突出的文字，使用span套起来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #title01{
    
            font-size: 50px;
        }
    </style>
</head>
<body>

天水<span id="title01">姜伯约</span>
</body>
</html>

3-2、字体样式

<!--
font-family：字体
font-size：字体大小
font-weight：字体粗细
color：字体颜色
-->
<style>
body{
    
font: oblique bolder 16px "华文行楷";
/*font-family: 华文行楷;*/
color: crimson;
}
h1{
    
font-size: 50px;
text-align: center;
}
.p1{
    
font-weight: bold;
}
</style>

3-3、文本样式

颜色：color，rgb，rgba
文本对齐方式：text-align = center
首行缩进：text-indent：2em；
行高：line-height（单行文字上下居中：line-height = height）
装饰：text-decoration
文本图片水平对齐：vertical-align：middle；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--
    颜色：
        单词
        RGB 0~F
        RGBA A：0~1a
    text-align: 排版，居中
    text-indent: 2em; 段落首行缩进
    line-height:行高，和块的高度一致，就可以上下居中
    -->
    <style>
        h1{
      
            color: rgba(0,255,255,0.8);
            text-align: center;
        }
        .p1{
      
            text-indent: 2em;
        }
        .p4{
      
            background: aqua;
            height: 100px;
            line-height: 20px;
        }
        /*下划线*/
        .l1{
      
            text-decoration: underline;
        }
        /*中划线*/
        .l2{
      
            text-decoration: line-through;
        }
        /*上划线*/
        .l3{
      
            text-decoration: overline;
        }
    </style>
</head>
<body>
<p class="l1">12</p>
<p class="l2">34</p>
<p class="l3">56</p>
<h1>《滕王阁序》</h1>
<p class="p1">豫章故郡，洪都新府。星分翼轸，地接衡庐。襟三江而带五湖，控蛮荆而引瓯越。物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻。雄州雾列，俊采星驰。台隍枕夷夏之交，宾主尽东南之美。都督阎公之雅望，棨戟遥临；宇文新州之懿范，襜帷暂驻。十旬休假，胜友如云；千里逢迎，高朋满座。腾蛟起凤，孟学士之词宗；紫电青霜，王将军之武库。家君作宰，路出名区；童子何知，躬逢胜饯。
</p>
<p>时维九月，序属三秋。潦水尽而寒潭清，烟光凝而暮山紫。俨骖騑于上路，访风景于崇阿；临帝子之长洲，得天人之旧馆。层峦耸翠，上出重霄；飞阁流丹，下临无地。鹤汀凫渚，穷岛屿之萦回；桂殿兰宫，即冈峦之体势。
</p>
<p>披绣闼，俯雕甍，山原旷其盈视，川泽纡其骇瞩。闾阎扑地，钟鸣鼎食之家；舸舰弥津，青雀黄龙之舳。云销雨霁，彩彻区明。落霞与孤鹜齐飞，秋水共长天一色。渔舟唱晚，响穷彭蠡之滨；雁阵惊寒，声断衡阳之浦。
</p>
<p class="p4">遥襟甫畅，逸兴遄飞。爽籁发而清风生，纤歌凝而白云遏。睢园绿竹，气凌彭泽之樽；邺水朱华，光照临川之笔。四美具，二难并。穷睇眄于中天，极娱游于暇日。天高地迥，觉宇宙之无穷；兴尽悲来，识盈虚之有数。望长安于日下，目吴会于云间。地势极而南溟深，天柱高而北辰远。关山难越，谁悲失路之人？萍水相逢，尽是他乡之客。怀帝阍而不见，奉宣室以何年？
</p>
</body>
</html>

3-4、阴影

在这里插入图片描述

/*text-shadow：阴影颜色，水平偏移，垂直偏移，阴影半径*/
#man{
    
    text-shadow: aqua 10px 10px 2px;
}

3-5、超链接伪类

正常情况下：a，a:hover

a{
    
    text-decoration: none;
    color: #030e0c;
}
/*鼠标悬浮的颜色（只需要记住）*/
a:hover{
    
    color: orange;
    font-size: 50px;
}
/*鼠标按住未释放的状态*/
a:active{
    
    color: red;
}

3-6、列表

/*ul li*/
/*
list-style:
none 去掉原点
circle 空心圆
decimal：数字
square：正方形
*/
ul{
    
    background: darkgrey ;
}
ul li{
    
    height: 30px;
    list-style: none;
    text-indent: 1em;
}

3-7、背景

背景颜色
背景图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
    
            width: 1000px;
            height: 700px;
            border: 1px solid red;
            /*默认是全部平铺*/
            background-image: url("images/1.png");
        }
        .div1{
    
            background-repeat: repeat-x;
        }
        .div2{
    
            background-repeat: repeat-y;
        }
        .div3{
    
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>

3-8、渐变

background-color: #D9AFD9;
background-image: linear-gradient(340deg, #D9AFD9 0%, #97D9E1 100%);

四、盒子模型

4-1、概念

在这里插入图片描述

margin：外边距
padding：内边距
border：边框

4-2、边框

边框的粗细
边框的样式
边框的颜色

/*border：粗细，样式，颜色*/
#box{
    
    width:300px;
    border: 1px solid red;
}

4-3、内外边距

<!--外边距的妙用：居中元素-->
<style>
#box{
    
    width:300px;
    border: 1px solid red;
    margin: 0 auto;
}

h2{
    
    font-size: 16px;
    background-color: aquamarine;
    line-height: 30px;
    /* margin四个参数时，为 上右下左 */
    margin: 0 1px 2px 3px;
}

form{
    
    background: aquamarine;
}
input{
    
    border: 1px solid black;
}
</style>

盒子的计算方式：margin + border + padding + 内容宽度

4-4、圆角边框

<!--
左上 右上 右下 左下， 顺时针方向
-->
<!--
圆圈：圆角 = 半径
-->
<style>
div{
    
    width: 100px;
    height: 100px;
    border: 10px solid red;
    border-radius: 20px;
}
</style>

4-5、阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- margin: 0 auto;居中
     要求：块元素，块元素有固定的高度
     -->
    <style>
        img{
    
            margin: 0 auto;
            border-radius: 50px;
            box-shadow: 10px 10px 100px blue;
        }
    </style>
</head>
<body>
    <div style="width: 500px; display: block; text-align: center">
        <img src="images/1.png" alt="">
    </div>
</body>
</html>

五、浮动

5-1、标准文档流

块级元素：独占一行

h1~h6 p div 列表...

行内元素：不独占一行

span a img strong...

行内元素可以被包含在块级元素中，反之则不行

5-2、display

display是一种实现行内元素的排列方式，但多数情况用float

<!--
block 块元素
inline 行内元素
inline-block 是块元素，但是可以内联，在一行
none
-->
<style>
    div{
      
        width:100px;
        height: 100px;
        border: 1px solid red;
        display: inline-block;
    }
    span{
      
        width:100px;
        height: 100px;
        border: 1px solid red;
        display: inline-block;
    }
</style>

5-3、float

#father{
    border:1px #000 solid
}
.layer01{
    border:1px #F00 dashed;
    display: inline-block;
    float: left;
}
.layer02{
    border:1px #F00 dashed;
    display: inline-block;
    float: left;
}
.layer03{
    border:1px #F00 dashed;
    display: inline-block;
    float: right;
}

5-4、父级边框塌陷问题

clear

/*
clear:left; 左侧不允许有浮动元素
clear:right; 右侧不允许有浮动元素
clear:both; 两侧不允许有浮动元素
*/

解决方案：

增加父级元素的高度

#father{
    border:1px #000 solid;
    height: 500px;
}

增加一个空的div标签，清除浮动

<div class="clear"></div>

.clear{
    clear: both;
}

overflow

在父级元素中增加一个 overflow：hidden

父类添加一个伪类：after

#father:after{
    
    content: '';
    display: block;
    clear: both;
}

小结：

浮动元素后面增加空div，简单，但代码中尽量避免空div
设置父元素高度，简单，但元素设置了固定的高度，就会被限制
overflow，简单，下拉的一些场景避免使用
父类添加一个伪类：after（推荐使用），写法稍微复杂，但没有副作用

5-5、对比

display：方向不可以控制
float：浮动起来会脱离标准文档流，要解决父级边框塌陷问题

六、定位

6-1、相对定位

6-1-1、基本操作

相对定位：position：relative

相对于原来的位置，进行指定的偏移，相对定位仍处在标准文档流中，原来的位置会被保留

top、left、bottom、right

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--相对定位
    相对于自己原来的位置进行偏移
    -->
    <style>
        div{
      
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
      
            border: 1px solid red;
        }
        #first{
      
            border: 1px dashed orange;
            background-color: #FFFFFF;
            background-image: linear-gradient(339deg, #FFFFFF 0%, #6284FF 50%, #FF0000 100%);
            position: relative;/*相对定位：上下左右*/
            top: -20px;
            left: 50px;

        }
        #second{
      
            border: 1px dashed green;
            background-color: #D9AFD9;
            background-image: linear-gradient(298deg, #D9AFD9 0%, #97D9E1 100%);

        }
        #third{
      
            border: 1px dashed cornflowerblue;
            background-color: #FFE53B;
            background-image: linear-gradient(270deg, #FFE53B 0%, #FF2525 74%);
            position: relative;
            bottom: 10px;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>
</body>
</html>

6-1-2、方块定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       #box{
      
           border: 1px solid red;
           width: 300px;
           height: 300px;
            padding: 10px;
       }
       .first{
      
           border: 1px solid orange;
           position: relative;
       }

        .second{
      
            border: 1px solid orange;
            position: relative;
            left: 202px;
            bottom: 102px;
        }
        .third{
      
            border: 1px solid orange;
            position: relative;
            bottom: 2px;
        }
        .forth{
      
            border: 1px solid orange;
            position: relative;
            left: 202px;
            bottom: 104px;
        }
        .fifth{
      
            border: 1px solid orange;
            position: relative;
            left: 101px;
            bottom: 306px;
        }

        a{
      
            width: 100px;
            height: 100px;
            text-decoration: none;
            line-height: 100px;
            text-align: center;
            background-color: #D9AFD9;
            background-image: linear-gradient(298deg, #D9AFD9 0%, #97D9E1 100%);
            display: block;
        }
        a:hover{
      
            background-color: #FFE53B;
            background-image: linear-gradient(270deg, #FFE53B 0%, #FF2525 74%);
        }
    </style>
</head>
<body>
<div id="box">
    <a href="#" class="first">链接一</a>
    <a href="#" class="second">链接二</a>
    <a href="#" class="third">链接三</a>
    <a href="#" class="forth">链接四</a>
    <a href="#" class="fifth">链接五</a>
</div>
</body>
</html>

在这里插入图片描述

6-2、绝对定位

定位：基于xxx定位，上下左右。

没有父级元素的前提下，相对于浏览器定位
假设父级元素存在定位，通常会相对父级元素进行偏移
在父级元素范围内移动
相对于父级或浏览器的位置，进行指定的偏移，绝对定位不在标准文档流中，原来的位置不会被保留

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
      
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
      
            border: 1px solid red;
            position: relative;
        }
        #first{
      
            border: 1px dashed orange;
            background-color: #FFFFFF;
            background-image: linear-gradient(339deg, #FFFFFF 0%, #6284FF 50%, #FF0000 100%);

        }
        #second{
      
            border: 1px dashed green;
            background-color: #D9AFD9;
            background-image: linear-gradient(298deg, #D9AFD9 0%, #97D9E1 100%);
            position: absolute;
            right: 30px;

        }
        #third{
      
            border: 1px dashed cornflowerblue;
            background-color: #FFE53B;
            background-image: linear-gradient(270deg, #FFE53B 0%, #FF2525 74%);

        }
    </style>
</head>
<body>
<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>
</body>
</html>

6-3、固定定位 fixed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
      
            height: 1000px;
        }
        div:nth-of-type(1){
      
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            right: 0;
            bottom: 0;
        }
        div:nth-of-type(2){
      
            /*fixed 固定定位*/
            width: 50px;
            height: 50px;
            background: darkolivegreen;
            position: fixed;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
<div>first</div>
<div>second</div>
</body>
</html>

6-4、z-index

图层

默认是0，最高无限

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="content">
    <ul>
        <li><img src="images/1.png" alt=""></li>
        <li class="tipText">天水姜伯约</li>
        <li class="tipBg"></li>
        <li>时间：2023-04-10</li>
        <li>地点：武汉</li>
    </ul>
</div>
</body>
</html>

透明度：opacity:0.5

#content{
    
    width: 500px;
    padding: 0px;
    margin: 0px;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px solid red;
}
ul,li{
    
    padding: 0px;
    margin: 0px;
    list-style: none;
}
/*父级元素相对定位*/
#content ul{
    
    position: relative;
}
.tipText, .tipBg{
    
    position: absolute;
    width: 250px;
    height: 25px;
    top: 125px;
}
.tipText{
    
    color:white;
    z-index: 999 ;
}
.tipBg{
    
    background: black;
    /*opacity: 0.5;*//*背景透明度*/
}

     right: 0;
        bottom: 0;
    }
</style>

first

second

```

6-4、z-index

图层

默认是0，最高无限

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="content">
    <ul>
        <li><img src="images/1.png" alt=""></li>
        <li class="tipText">天水姜伯约</li>
        <li class="tipBg"></li>
        <li>时间：2023-04-10</li>
        <li>地点：武汉</li>
    </ul>
</div>
</body>
</html>

透明度：opacity:0.5

#content{
    
    width: 500px;
    padding: 0px;
    margin: 0px;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px solid red;
}
ul,li{
    
    padding: 0px;
    margin: 0px;
    list-style: none;
}
/*父级元素相对定位*/
#content ul{
    
    position: relative;
}
.tipText, .tipBg{
    
    position: absolute;
    width: 250px;
    height: 25px;
    top: 125px;
}
.tipText{
    
    color:white;
    z-index: 999 ;
}
.tipBg{
    
    background: black;
    /*opacity: 0.5;*//*背景透明度*/
}

本文链接：https://blog.csdn.net/clover_page/article/details/130100672

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

python程序化交易实例-python程序化交易神器——tushare-程序员宅基地

文章浏览阅读1.1k次。一直想试着将自己的交易思路程序化，可惜困难重重，连第一步获取数据都要花很多精力，直到最近发现了Tushare，不仅使用非常便利，功能也无比强大，股票、期货、基金、财经新闻，甚至电影票房等都可以非常便捷的获取，更难得的是这么强大的存在居然是开源免费的，不得不说国人的开源项目越来越强大了！不废话了，简单介绍下用法：一、安装使用前提安装Python安装pandaslxml也是必须的，正常情况下安装了A..._python期货自动化交易

shell基本案例-程序员宅基地

文章浏览阅读128次。2019独角兽企业重金招聘Python工程师标准>>> ..._shell change master to

视频教程-Thinkphp3.2.3+Bootstrap初级入门到商城实战-PHP-程序员宅基地

文章浏览阅读234次。Thinkphp3.2.3+Bootstrap初级入门到商城实战 7年php..._thinkphp bootstrap 外贸商城定制

视频教程-微信小程序支付java-Java-程序员宅基地

文章浏览阅读354次。微信小程序支付java 我是一名java高级开发工程师，已有七年的工作经验，..._微信小程序支付教学视频

HarmonyOS Next从入门到精通实战精品课

Canvas完成矩形的绘制；华为闹钟的订阅和取消；华为闹钟的基本绘制；华为闹钟的时针-分针-秒针的绘制；华为闹钟的任务列表的样式；关于State的状态更新的须知；关于样式的简单介绍；关于vp和fp的介绍；知乎数据的真实的渲染；实现底部组件的封装；华为闹钟的添加闹钟；完成知乎小案例的UI布局；ForEach的商品列表案例；ForEach的商品列表的Grid布局；ForEach的key的一个简单介绍；Watch的刷题案例-做题的思路；State嵌套更新的实现方式；你画我猜的签字板实现；

vue2实现复制粘贴功能

【代码】vue2实现复制粘贴功能。