HTML+CSS-项目：学成在线

项目：学成在线

Date: September 9, 2022
Summary: 创建根目录、创建网页布局

0. 项目预览：

1. 创建根目录：

目标：创建项目根目录

根目录：网站的第一级文件夹

根目录：

图片文件夹: images
样式文件夹: CSS
首页 : index.html

VSCode中的根目录：

Untitled

Code:

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>学成在线title>
    
    <link rel="stylesheet" href="./css/index.css">
head>
<body>
    
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

注意点：

网站标题命名
引入CSS文件

2. 创建网页布局：

2.0 掌握网页布局基本步骤

2.1 网页预处理

index.css

/* 0 预处理 */
* {
    margin: 0;
    padding: 0;
    /* 內减模式 */
    box-sizing: border-box;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
}

.clearfix:before,.clearfix:after {
    content:"";
    display:table; 
}

.clearfix:after {
clear:both;
}

/* 1 背景色 */
.body{
    background-color: #f3f5f7;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

注意：

这里的*处补充了内减模式，更好。
pxcook中记得量一下网页的背景色，这里就不是纯白，需要调成#f3f5f7

2.1 设置版心

index.css

.wrapper{
    width: 1200px;
    margin:0 auto;
}
1
2
3
4

index.html

<body>
    <div class="header wrapper">123div>
body>
1
2
3

效果：

Untitled

总结经验：

以后项目中，可以单独设置 wrapper 这个类负责版心居中，然后具体模块如 header 再单独起一个类，负责模块特色效果，即分工明确。

3 网页导航

Untitled

3.1 设置Logo

Untitled

<h1>
    <a href="#"><img src="./images/logo.png" alt="">a>
h1>
1
2
3

3.2 设置导航

Untitled

HTML

<div class="nav">
    <ul>
        <li><a href="#">首页a>li>
        <li><a href="#">课程a>li>
        <li><a href="#">职业规划a>li>
    ul>
div>
1
2
3
4
5
6
7

CSS

.nav{
    float: left;
    margin-left: 70px;
    height: 42px;
    /* background-color: green; */
}

.nav li {
    float: left;
    margin-right: 26px;
}

.nav li a{
    display: block;
    /* 上下居中 */
    padding: 0 9px;
    height: 42px;
    line-height: 42px;
    /* border-bottom:2px solid #00a4ff; */

    font-size: 18px;
    color: #050505;
}

.nav li a:hover{
    border-bottom:2px solid #00a4ff;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

3.3 设置搜索框

Untitled

HTML

"search">
    "text" placeholder="请输入关键字">

1
2
3

CSS

.search{
    float: left;
    margin-left: 59px;
    width: 412px;
    height: 40px;
    border: 1px solid #00a4ff;
}

.search input{
    float: left;
    padding-left: 20px;
    width: 360px;
    height: 38px;
    border:0;
}
    /* 单独控制placeholder */
.search input::placeholder{
    font-size: 14px;
    color:#bfbfbf;
}

.search button{
    float: left;
    width: 50px;
    height: 40px;
    background-image: url(../images/btn.png);
    border: 0;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

3.4 设置用户栏

Untitled

HTML

"user">
    "./images/user.png" alt="">
    lilei

1
2
3
4

CSS

.user{
    float: right;
    margin-right: 35px;
    height: 42px;
    line-height: 42px;
}

.user img{
    vertical-align: middle;
}
1
2
3
4
5
6
7
8
9
10

4 轮播图

CSS

/* 2 轮播图 */
.banner{
    height: 420px;
    background-color: #1c036c;
}

    /* 2.1 标签页 */
.banner .wrapper{
    height: 420px;
    background-image: url(../images/banner2.png);
}
1
2
3
4
5
6
7
8
9
10
11

4.1 左部菜单栏

CSS

.banner .wrapper{
    height: 420px;
    background-image: url(../images/banner2.png);
}
.wrapper .left{
    float: left;
    padding: 28px 20px;
    opacity: 0.3;
    width: 190px;
	height: 420px;
    border: 1px solid red;
    /*1*/
    line-height: 44px;
}
.banner .left span{
    float: right;
    margin-right: 21px;
}
.banner .left a{
    font-size: 14px;
    color: #ffffff;
}
.banner .left:hover{
    color: #00b4ff;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

HTML

<div class="left">
    <ul>
        
        <li><a href="#">前端开发<span>>span>a>li>
        <li><a href="#">前端开发<span>>span>a>li>
        <li><a href="#">前端开发<span>>span>a>li>
        <li><a href="#">前端开发<span>>span>a>li>
        <li><a href="#">前端开发<span>>span>a>li>
        <li><a href="#">前端开发<span>>span>a>li>
        <li><a href="#">前端开发<span>>span>a>li>
        <li><a href="#">前端开发<span>>span>a>li>
        <li><a href="#">前端开发<span>>span>a>li>
    ul>
div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

注意：这里用行高来撑开

易错点&经验：

行高设置在外级标签，颜色等属性设置在内级标签

比如我们对left设置行高，对子级中的a设置具体的字体颜色
覆盖问题：

.banner .left li{
    font-size: 14px;
	line-height: 44px;
  /* 注意：这里color会失效，因为a在后面且本身为标签，会覆盖前面的，所以要设置a的字体颜色属性 */
  /* color: #ffffff; */
    margin-bottom: 25px;
}
.banner .left a{
    font-size: 14px;
	line-height: 44px;
    color: #ffffff;
    margin-bottom: 25px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13

研究下opacity与background-color: rgb的区别

background-color: rgb(0, 0, 0, 0.3);
伪类选择器写法
```
.banner .left :hover 
1
```

注意：这里的写法

4.2 课程表

CSS

.banner .right{
    float: right;
    width: 228px;
	height: 300px;
    margin-top: 50px;
    /* 当初背景色就应该立刻填好 */
    background-color: #fff;
}

.banner .right h2{
    text-align: center;
    height: 48px;
    /* 字体上下居中方式 */
    line-height: 48px;
    background-color: #9bceea;
    font-size: 18px;
    color: #ffffff;
}

.banner .right .content{
    padding: 0 18px;
}

.banner .right .content dl{
    padding: 12px 0;
    border-bottom: 2px solid #e5e5e5;
}

.banner .right .content .dt{
    font-size: 16px;
    color: #4e4e4e;
}

.banner .right .content .dd{
    font-size: 14px;
    color: #4e4e4e;
}

.banner .right .more{
    /* a中的宽高不生效 */
    display: block;
    margin: 0 auto;

    width: 200px;
    height: 40px;
    border: solid 1px #00a4ff;
    
    font-size: 16px;
	color: #00a4ff;
    font-weight: bold;
    line-height: 40px;
    text-align:center;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

HTML

<div class="right">
    <h2>我的课程表h2>
    <div class="content">
        <dl>
            <dt>继续学习 程序语言设计dt>
            <dd>正在学习-使用对象dd>
        dl>
        <dl>
            <dt>继续学习 程序语言设计dt>
            <dd>正在学习-使用对象dd>
        dl>
        <dl>
            <dt>继续学习 程序语言设计dt>
            <dd>正在学习-使用对象dd>
        dl>
        <a href="#" class="more">全部课程a>
    div>
div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

5 精品推荐

效果：

Untitled

注意：边框有阴影

HTML


<div class="goods wrapper">
    <h2>精品推荐h2>
    <ul>
        <li><a href="#">JavaScripta>li>
        <li><a href="#">JavaScripta>li>
        <li><a href="#">JavaScripta>li>
        <li><a href="#">JavaScripta>li>
        <li><a href="#">JavaScripta>li>
        <li><a href="#">JavaScripta>li>
    ul>
    <a href="#" class="interest">修改兴趣a>
div>
1
2
3
4
5
6
7
8
9
10
11
12
13

CSS

/* 3 精品推荐 */
.goods{
    margin-top: 8px;
    padding-left: 34px;
    padding-right: 26px;

    height: 60px;
    background-color: #ffffff;
	box-shadow: 0px 2px 3px 0px 
		rgba(118, 118, 118, 0.2);
    line-height: 60px;
}
.goods h2{
    float: left;
    font-size: 16px;
    color: #00a4ff;
    font-weight: bold;
}
.goods ul{
    float: left;
    margin-left: 30px;
}
.goods ul li{
    float: left;
}
.goods li a{
    border-left: 1px solid #bfbfbf;
    padding: 0px 30px;
    font-size: 16px;
    color: #050505;
}
.goods .interest{
    float: right;
    font-size: 14px;
    color: #00a4ff;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

6 精品推荐课程

CSS

/* 4 精品推荐课程 */
.box{
    margin-top: 36px;
    height: 595px;
}
.box .title{
    height: 40px;
}
.box .title h2{
    float: left;
    font-size: 20px;
    color: #494949;
}
.box .title a{
    float: right;
    margin-right: 35px;
    font-size: 12px;
    color: #a5a5a5;
    line-height: 40px;
}
.box .content li{
    float: left;
    margin-right: 15px;
    margin-bottom: 15px;
    width: 228px;
	height: 270px;
	background-color: #ffffff;
	box-shadow: 0px 2px 5px 0px 
		rgba(118, 118, 118, 0.5);
}
.box .content li:nth-child(5n){
    margin-right: 0px;
}
.box .content li h3{
    padding: 20px;
    font-size: 14px;
    color: #050505;
}
.box .content li p{
    padding: 0 20px;
    font-size: 12px;
    color: #999;
}
.box .content li p span{
    font-size: 12px;
    color: #ff7c2d;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

HTML


    <div class="box wrapper">
        <div class="title">
            <h2>精品推荐h2>
            <a href="#">查看全部a>
        div>
        <div class="content clearfix">
            <ul>
                <li>
                    <a href="#">
                        <img src="./images/course01.png" alt="?">
                        <h3>Think PHP 5.0 博客系统实战项目h3>
                        <p><span>高级span>·1125人正在学习p>
                    a>
                li>
                <li>
                    <a href="#">
                        <img src="./images/course01.png" alt="?">
                        <h3>Think PHP 5.0 博客系统实战项目h3>
                        <p><span>高级span>·1125人正在学习p>
                    a>
                li>
                <li>
                    <a href="#">
                        <img src="./images/course01.png" alt="?">
                        <h3>Think PHP 5.0 博客系统实战项目h3>
                        <p><span>高级span>·1125人正在学习p>
                    a>
                li>
                <li>
                    <a href="#">
                        <img src="./images/course01.png" alt="?">
                        <h3>Think PHP 5.0 博客系统实战项目h3>
                        <p><span>高级span>·1125人正在学习p>
                    a>
                li>
                <li>
                    <a href="#">
                        <img src="./images/course01.png" alt="?">
                        <h3>Think PHP 5.0 博客系统实战项目h3>
                        <p><span>高级span>·1125人正在学习p>
                    a>
                li>
                <li>
                    <a href="#">
                        <img src="./images/course01.png" alt="?">
                        <h3>Think PHP 5.0 博客系统实战项目h3>
                        <p><span>高级span>·1125人正在学习p>
                    a>
                li>
                <li>
                    <a href="#">
                        <img src="./images/course01.png" alt="?">
                        <h3>Think PHP 5.0 博客系统实战项目h3>
                        <p><span>高级span>·1125人正在学习p>
                    a>
                li>
                <li>
                    <a href="#">
                        <img src="./images/course01.png" alt="?">
                        <h3>Think PHP 5.0 博客系统实战项目h3>
                        <p><span>高级span>·1125人正在学习p>
                    a>
                li>
                <li>
                    <a href="#">
                        <img src="./images/course01.png" alt="?">
                        <h3>Think PHP 5.0 博客系统实战项目h3>
                        <p><span>高级span>·1125人正在学习p>
                    a>
                li>
                <li>
                    <a href="#">
                        <img src="./images/course01.png" alt="?">
                        <h3>Think PHP 5.0 博客系统实战项目h3>
                        <p><span>高级span>·1125人正在学习p>
                    a>
                li>                   
            ul>
        div>
    div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

关键：处理结构伪类选择器，即处理好第5n个li

7 版权区域

效果：

Untitled

CSS

/* 5  版权区域 */
.footer{
    margin-top: 40px;
    padding-top: 30px;

    height: 417px;
    background-color: #fff;
}
.footer .left{
    float: left;
}
.footer .left p{
    padding: 15px 0px;
    font-size: 12px;
    color: #666666;
}
.footer .left a{
	width: 120px;
	height: 36px;
    padding: 11px 27px;
    font-size: 16px;
    color: #00a4ff;
	border: solid 1px #00a4ff;
}
.footer .right dl{
    float: right;
    margin-left: 146px;
}
.footer .right dl:last-child{
    margin-left: 0px;
}
.footer .right dl dt{
    margin-bottom: 3px;
    font-size: 16px;
	color: #333333;
}
.footer .right dl dd{
    padding: 3px 0;
}
.footer .right dl dd a{
    font-size: 12px;
    color: #333333;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

HTML

"footer">
        "wrapper">
            "left">
                "./images/logo.png" alt="?">
                
                    学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。
                    

                    © 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号"
                
                "#">下载APP
            
            "right">
                
                    合作伙伴
                    "#">合作机构
                    "#">合作导师
                    "#">合作城市
                
                
                    合作伙伴
                    "#">合作机构
                    "#">合作导师
                    "#">合作城市
                
                
                    合作伙伴
                    "#">合作机构
                    "#">合作导师
                    "#">合作城市
                                
            
        
    
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

基础知识补充：

字体水平与上下居中：

.banner .right h2{
    height: 48px;
    background-color: #9bceea;
    **line-height: 48px;
    text-align: center;**
}
1
2
3
4
5
6

设置边线：

Untitled

.goods li a{
    border-left: 1px solid #bfbfbf;
    padding: 0 30px;
    font-size: 16px;
    color: #050505;
}
1
2
3
4
5
6

项目整体代码：

CSS

/* index.css用于美化首页的 */

/* 0 预处理 */
* {
    margin: 0;
    padding: 0;
    /* 內减模式 */
    box-sizing: border-box;
}
li {
    list-style: none;
}
a {
    text-decoration: none;
}
.clearfix:before,.clearfix:after {
    content:"";
    display:table; 
}
.clearfix:after {
clear:both;
}

/* 背景色 */
body{
    background-color: #f3f5f7;
}

/* 版心 */
.wrapper{
    width: 1200px;
    margin:0 auto;
}

/* 
    1 header 
*/

.header{
    height: 42px;
    
    margin-top: 30px;
    margin-bottom: 30px;
}

/* 注意：h1不要写成类（即 .h1 的形式） */
    /* 1.1 Logo */
h1{
    float: left;
}

    /* 1.2 导航栏 */
.nav{
    float: left;
    margin-left: 70px;
    height: 42px;
    /* background-color: green; */
}
.nav li {
    float: left;
    margin-right: 26px;
}
.nav li a{
    display: block;
    /* 上下居中 */
    padding: 0 9px;
    height: 42px;
    line-height: 42px;
    /* border-bottom:2px solid #00a4ff; */

    font-size: 18px;
    color: #050505;
}
.nav li a:hover{
    border-bottom:2px solid #00a4ff;
}

    /* 1.3 搜索框 */
.search{
    float: left;
    margin-left: 59px;
    width: 412px;
    height: 40px;
    border: 1px solid #00a4ff;
}
.search input{
    float: left;
    padding-left: 20px;
    width: 360px;
    height: 38px;
    border:0;
}
    /* 单独控制placeholder */
.search input::placeholder{
    font-size: 14px;
    color:#bfbfbf;
}
.search button{
    float: left;
    width: 50px;
    height: 40px;
    background-image: url(../images/btn.png);
    border: 0;
}

    /* 1.4 用户 */
.user{
    float: right;
    margin-right: 35px;
    height: 42px;
    line-height: 42px;
}
.user img{
    vertical-align: middle;
}

/* 2 轮播图 */
.banner{
    height: 420px;
    background-color: #1c036c;
}

    /* 2.1 标签页 */
.banner .wrapper{
    height: 420px;
    background-image: url(../images/banner2.png);
}
.banner .left{
    float: left;
    padding: 10px 20px;
    width: 190px;
	height: 420px;
    /* border: 1px solid red; */
    line-height: 44px;
    background-color: rgb(0, 0, 0, 0.3);
}
.banner .left span{
    float: right;
    margin-right: 21px;
}
.banner .left a{
    font-size: 14px;
    color: #fff;
}
.banner .left :hover{
    color: #00b4ff;
}

    /* 2.2 课程表 */
.banner .right{
    float: right;
    width: 228px;
	height: 300px;
    margin-top: 50px;
    /* 当初背景色就应该立刻填好 */
    background-color: #fff;
}

.banner .right h2{
    text-align: center;
    height: 48px;
    /* 字体上下居中方式 */
    line-height: 48px;
    background-color: #9bceea;
    font-size: 18px;
    color: #ffffff;
}

.banner .right .content{
    padding: 0 18px;
}

.banner .right .content dl{
    padding: 12px 0;
    border-bottom: 2px solid #e5e5e5;
}

.banner .right .content .dt{
    font-size: 16px;
    color: #4e4e4e;
}

.banner .right .content .dd{
    font-size: 14px;
    color: #4e4e4e;
}

.banner .right .more{
    /* a中的宽高不生效 */
    display: block;
    margin: 0 auto;

    width: 200px;
    height: 40px;
    border: solid 1px #00a4ff;
    
    font-size: 16px;
	color: #00a4ff;
    font-weight: bold;
    line-height: 40px;
    text-align:center;
}

/* 3 精品推荐 */
.goods{
    margin-top: 8px;
    padding-left: 34px;
    padding-right: 26px;

    height: 60px;
    background-color: #ffffff;
	box-shadow: 0px 2px 3px 0px 
		rgba(118, 118, 118, 0.2);
    line-height: 60px;
}
.goods h2{
    float: left;
    font-size: 16px;
    color: #00a4ff;
    font-weight: bold;
}
.goods ul{
    float: left;
    margin-left: 30px;
}
.goods ul li{
    float: left;
}
.goods li a{
    border-left: 1px solid #bfbfbf;
    padding: 0px 30px;
    font-size: 16px;
    color: #050505;
}
.goods .interest{
    float: right;
    font-size: 14px;
    color: #00a4ff;
}

/* 4 精品推荐课程 */
.box{
    margin-top: 36px;
    height: 595px;
}
.box .title{
    height: 40px;
}
.box .title h2{
    float: left;
    font-size: 20px;
    color: #494949;
}
.box .title a{
    float: right;
    margin-right: 35px;
    font-size: 12px;
    color: #a5a5a5;
    line-height: 40px;
}
.box .content li{
    float: left;
    margin-right: 15px;
    margin-bottom: 15px;
    width: 228px;
	height: 270px;
	background-color: #ffffff;
	box-shadow: 0px 2px 5px 0px 
		rgba(118, 118, 118, 0.5);
}
.box .content li:nth-child(5n){
    margin-right: 0px;
}
.box .content li h3{
    padding: 20px;
    font-size: 14px;
    color: #050505;
}
.box .content li p{
    padding: 0 20px;
    font-size: 12px;
    color: #999;
}
.box .content li p span{
    font-size: 12px;
    color: #ff7c2d;
}

/* 5  版权区域 */
.footer{
    margin-top: 40px;
    padding-top: 30px;

    height: 417px;
    background-color: #fff;
}
.footer .left{
    float: left;
}
.footer .left p{
    padding: 15px 0px;
    font-size: 12px;
    color: #666666;
}
.footer .left a{
	width: 120px;
	height: 36px;
    padding: 11px 27px;
    font-size: 16px;
    color: #00a4ff;
	border: solid 1px #00a4ff;
}
.footer .right dl{
    float: right;
    margin-left: 146px;
}
.footer .right dl:last-child{
    margin-left: 0px;
}
.footer .right dl dt{
    margin-bottom: 3px;
    font-size: 16px;
	color: #333333;
}
.footer .right dl dd{
    padding: 3px 0;
}
.footer .right dl dd a{
    font-size: 12px;
    color: #333333;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331

HTML




    
    
    
    
    学成在线
    
    


    
    
    

    
    
    
        
        
            
        
            
        

        
        
            
                首页
                课程
                职业规划
            
        

        
        
            
        

        
        
            
            lilei
        

    

    
    
        
            
            
                
                    
                    前端开发>
                    前端开发>
                    前端开发>
                    前端开发>
                    前端开发>
                    前端开发>
                    前端开发>
                    前端开发>
                    前端开发>
                
            
            
            
                我的课程表
                
                    
                        继续学习 程序语言设计
                        正在学习-使用对象
                    
                    
                        继续学习 程序语言设计
                        正在学习-使用对象
                    
                    
                        继续学习 程序语言设计
                        正在学习-使用对象
                    
                    全部课程
                
            
        
    

    
    
        精品推荐
        
            JavaScript
            JavaScript
            JavaScript
            JavaScript
            JavaScript
            JavaScript
        
        修改兴趣
    

    
    
        
            精品推荐
            查看全部
        
        
            
                
                    
                        
                        Think PHP 5.0 博客系统实战项目
                        高级·1125人正在学习
                    
                
                
                    
                        
                        Think PHP 5.0 博客系统实战项目
                        高级·1125人正在学习
                    
                
                
                    
                        
                        Think PHP 5.0 博客系统实战项目
                        高级·1125人正在学习
                    
                
                
                    
                        
                        Think PHP 5.0 博客系统实战项目
                        高级·1125人正在学习
                    
                
                
                    
                        
                        Think PHP 5.0 博客系统实战项目
                        高级·1125人正在学习
                    
                
                
                    
                        
                        Think PHP 5.0 博客系统实战项目
                        高级·1125人正在学习
                    
                
                
                    
                        
                        Think PHP 5.0 博客系统实战项目
                        高级·1125人正在学习
                    
                
                
                    
                        
                        Think PHP 5.0 博客系统实战项目
                        高级·1125人正在学习
                    
                
                
                    
                        
                        Think PHP 5.0 博客系统实战项目
                        高级·1125人正在学习
                    
                
                
                    
                        
                        Think PHP 5.0 博客系统实战项目
                        高级·1125人正在学习
                    
                                   
            
        
    

    
    
        
            
                
                
                    学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。
                    

                    © 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号"
                
                下载APP
            
            
                
                    合作伙伴
                    合作机构
                    合作导师
                    合作城市
                
                
                    合作伙伴
                    合作机构
                    合作导师
                    合作城市
                
                
                    合作伙伴
                    合作机构
                    合作导师
                    合作城市
                                
            
        
    


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226

相关阅读:
2022年国赛高教杯数学建模E题小批量物料的生产安排解题全过程文档及程序
 Unity 动画性能和优化
 USB插座外壳接地的处理和emi，esd考虑
 【主题广范|见刊快】2024年城市工程与建筑规划国际会议（ICURAP 2024）
slam学习笔记
 数学建模准备知识
 mysql创建定时器(event)，定时调用存储过程（Procedure）将查询出结果集并批量插入新表
 用AngleSharp & LINQPad抓取分析博客园排行榜
 58-66-hive-数据类型-分区-分桶
 【设计模式】适配器模式：攻敌三分，自留七分，以超兽武装的例子来谈谈适配器模式
原文地址：https://blog.csdn.net/CaptainDrake/article/details/128041855