Skip to content

Commit 56062fe

Browse files
author
ben
committed
create full structure
version 2
1 parent c1dc71f commit 56062fe

File tree

114 files changed

+47500
-3
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

114 files changed

+47500
-3
lines changed

‎README.md

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
1-
# 半撇私塾全栈「新媒体骇客训练营」 新媒体网络技术模块
2-
本仓库为半撇私塾「新媒体骇客训练营」 新媒体网络技术模块的配套文件
1+
# 半撇私塾「全栈新媒体骇客训练营」 新媒体网络技术模块
2+
3+
本仓库为半撇私塾「全栈新媒体骇客训练营」 新媒体网络技术模块的配套文件

‎第三章/flexbox/after/index.htm

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<title>修改布局</title>
5+
<link rel="stylesheet" href="style.css">
6+
<script src=""></script>
7+
</head>
8+
<body>
9+
<div class="box">
10+
<div class="option">
11+
首页
12+
</div>
13+
<div class="option">
14+
课程
15+
</div>
16+
<div class="option">
17+
博客
18+
</div>
19+
<div class="option">
20+
知识库
21+
</div>
22+
<div class="option">
23+
关于
24+
</div>
25+
26+
27+
</body>
28+
</html>

‎第三章/flexbox/after/style.css

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.box {
2+
}
3+
4+
.option {
5+
border: 1px solid red;
6+
7+
}

‎第三章/flexbox/before/index.htm

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<title>修改布局</title>
5+
<link rel="stylesheet" href="style.css">
6+
<script src=""></script>
7+
</head>
8+
<body>
9+
<div class="app">
10+
<div class="red-border option">
11+
首页
12+
</div>
13+
<div class="red-border option">
14+
课程
15+
</div>
16+
<div class="red-border option">
17+
博客
18+
</div>
19+
<div class="red-border option">
20+
知识库
21+
</div>
22+
</div>
23+
</body>
24+
</html>

‎第三章/flexbox/before/style.css

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
.red-border {
2+
border: 1px solid red;
3+
}
4+
5+
.app {
6+
display: flex;
7+
display: -webkit-flex;
8+
}
9+
10+
.option {
11+
width: 25%;
12+
}

‎第三章/javascript/after/index.html

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="description" content="">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<title>感受Javascript</title>
8+
<link rel="stylesheet" href="style.css">
9+
<script src="script.js"></script>
10+
</head>
11+
<body>
12+
<div>
13+
<h1>掌握前沿的新媒体技能，成为抢手的全栈新媒体人才</h1>
14+
<h2>通过完整项目实战，系统学习应用传播、故事、产品、技术、短视频与增长黑客，成为全栈新媒体人才，仅在半撇私塾</h2>
15+
</div>
16+
<div>
17+
<a href="#">观看视频介绍</a>
18+
<a href="#">立即免费体验</a>
19+
</body>
20+
</html>

‎第三章/javascript/after/script.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
alert("欢迎加入全栈新媒体骇客训练营")
2+
3+
document.write("欢迎加入全栈新媒体骇客训练营")

‎第三章/javascript/after/style.css

Whitespace-only changes.

‎第三章/javascript/before/index.html

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="description" content="">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<title>感受Javascript</title>
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
<body>
11+
<div>
12+
<h1>掌握前沿的新媒体技能，成为抢手的全栈新媒体人才</h1>
13+
<h2>通过完整项目实战，系统学习应用传播、故事、产品、技术、短视频与增长黑客，成为全栈新媒体人才，仅在半撇私塾</h2>
14+
</div>
15+
<div>
16+
<a href="#">观看视频介绍</a>
17+
<a href="#">立即免费体验</a>
18+
</body>
19+
</html>

‎第三章/javascript/before/script.js

Whitespace-only changes.

‎第三章/javascript/before/style.css

Whitespace-only changes.

‎第三章/method/after/index.htm

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<title>添加CSS样式的多种方式</title>
5+
<link rel="stylesheet" href="style.css">
6+
<style type="text/css">
7+
　　 </style>
8+
</head>
9+
<body>
10+
<h1 style="color:red">这个标题会是什么颜色呢？</h1>
11+
</body>
12+
</html>

‎第三章/method/after/style.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
h1 {
2+
color: blue;
3+
}

‎第三章/method/before/index.htm

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<title>添加CSS样式的多种方式</title>
5+
<link rel="stylesheet" href="style.css">
6+
<style type="text/css">
7+
　　 </style>
8+
</head>
9+
<body>
10+
<h1>这个标题会是什么颜色呢？</h1>
11+
</body>
12+
</html>

‎第三章/method/before/style.css

Whitespace-only changes.

‎第三章/revisit-box-model/bootstrap.min.css

Lines changed: 10 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎第三章/revisit-box-model/index.htm

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<title>深入了解盒模型</title>
5+
<link rel="stylesheet" href="bootstrap.min.css">
6+
<link rel="stylesheet" href="style.css">
7+
</head>
8+
<body>
9+
<div class="container">
10+
<div class="row">
11+
<div class="col-md-12 text-center">
12+
<h1>盒模型</h1>
13+
</div>
14+
</div>
15+
<div class="row">
16+
<div class="col-md-7">
17+
<div class="outer-box">
18+
<div id="grid">
19+
<h3 id="demo" class="box">
20+
元素内容
21+
</h3>
22+
</div>
23+
</div>
24+
</div>
25+
<div class="col-md-2">
26+
<h3>颜色:</h3>
27+
<dfn title="margin">margin（外边距）</dfn>
28+
<dfn title="border">border（边框）</dfn>
29+
<dfn title="padding">padding（内边距）</dfn>
30+
<dfn title="content">content（元素内容）</dfn>
31+
</div>
32+
<div class="col-md-3">
33+
<h3>网格</h3>
34+
<p>左图中网格的设置是出于视觉上方便查看考虑。</p>
35+
<p>左图中元素的边框宽度为10px</p>
36+
<h3>如何使用Chrome Dev Tools进行查看</h3>
37+
<ul>
38+
<li><span class="glyphicon glyphicon-chevron-right"></span>在Chrome 浏览器中对准左图的“元素内容”点击鼠标右键，然后选择“审查元素”按钮</li>
39+
<li>打开审查元素的面板后，在“style”样式面板中尝试修改#demo的css属性值，查看发生什么变化；</li>
40+
<li>修改一些属性值后，在切换到“style”旁边的“computed”按钮，看看元素的大小数值发生了什么变化；</li>
41+
</ul>
42+
</div>
43+
</div>
44+
</div>
45+
</body>
46+
</html>

‎第三章/revisit-box-model/style.css

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
img {
2+
width: 200px;
3+
}
4+
5+
#demo {
6+
width: 200px;
7+
height: 200px;
8+
9+
margin: 20px auto;
10+
border-width: 10px;
11+
border-color: #feedbb;
12+
border-style: solid;
13+
padding: 30px;
14+
15+
box-sizing: content-box;
16+
}
17+
18+
.box {
19+
background-image: linear-gradient(#8AB3BF, #8AB3BF), linear-gradient(#C1CD89, #C1CD89);
20+
background-clip: content-box, padding-box, border-box;
21+
}
22+
.outer-box {
23+
width: 400px;
24+
background-color: #F8CB9C;
25+
border: 1px white solid;
26+
padding: 0;
27+
margin: 0 auto;
28+
position: relative;
29+
}
30+
#grid:after {
31+
content: "";
32+
position: absolute;
33+
top: 0; right: 0; bottom: 0; left: 0;
34+
pointer-events: none;
35+
background: linear-gradient(0deg, rgba(0,0,0,.05) 1px, transparent 1px),
36+
linear-gradient(0deg, rgba(0,0,0,.1) 1px, transparent 1px),
37+
linear-gradient(90deg, rgba(0,0,0,.05) 1px, transparent 1px),
38+
linear-gradient(90deg, rgba(0,0,0,.1) 1px, transparent 1px);
39+
background-size: 10px 10px, 50px 50px, 10px 10px, 50px 50px;
40+
}
41+
42+
dfn {
43+
display: block;
44+
font-size: 1.5em;
45+
}
46+
47+
48+
dfn:before {
49+
content:"";
50+
display: inline-block;
51+
width: 1em;
52+
height: 1em;
53+
vertical-align: -.2em;
54+
margin-right: .4em;
55+
border-radius: 50%;
56+
}
57+
58+
dfn[title="border"]:before { background: #feedbb }
59+
dfn[title="margin"]:before { background: #F8CB9C }
60+
dfn[title="padding"]:before { background: #C1CD89 }
61+
dfn[title="content"]:before { background: #8AB3BF }
62+
63+
ul {
64+
padding-left: 15px;
65+
}

‎第三章/seletor/after/index.html

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>CSS 选择器</title>
7+
<link rel="stylesheet" href="style.css">
8+
<link rel="author" href="humans.txt">
9+
</head>
10+
<body>
11+
<div>
12+
<h1>这是标题</h1>
13+
<p class="paragraph">这是段落</p>
14+
<span id="id">这是文本</p>
15+
</div>
16+
</body>
17+
</html>

‎第三章/seletor/after/style.css

Whitespace-only changes.

‎第三章/seletor/before/index.html

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>CSS 选择器</title>
7+
<link rel="stylesheet" href="style.css">
8+
<link rel="author" href="humans.txt">
9+
</head>
10+
<body>
11+
<div>
12+
<h1>这是标题</h1>
13+
<p class="paragraph">这是段落</p>
14+
<span id="id">这是文本</p>
15+
</div>
16+
</body>
17+
</html>

‎第三章/seletor/before/style.css

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
h1 {
2+
background-color: black;
3+
color: white;
4+
}
5+
6+
.paragraph{
7+
background-color: black;
8+
color: white;
9+
}
10+
#id{
11+
background-color: black;
12+
color: white;
13+
}

‎第三章/style/after/index.html

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="description" content="为网页增加css样式">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<link rel="stylesheet" href="style.css">
8+
<title>半撇私塾</title>
9+
</head>
10+
<body>
11+
<section>
12+
<div>
13+
<h1>掌握前沿的新媒体技能，成为抢手的全栈新媒体人才</h1>
14+
<h2>通过完整项目实战，系统学习应用传播、故事、产品、技术、短视频与增长黑客，成为全栈新媒体人才，仅在半撇私塾</h2>
15+
</div>
16+
<div>
17+
<a href="#">观看视频介绍</a>
18+
<a href="#">立即免费体验</a>
19+
</div>
20+
</section>
21+
</body>
22+
</html>

‎第三章/style/after/style.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.description {
2+
color: blue;
3+
}

‎第三章/style/before/index.html

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<link rel="stylesheet" type="text/css" href="style.css">
5+
</head>
6+
<body>
7+
<div>
8+
<h1 class="description">掌握前沿的新媒体技能，成为抢手的全栈新媒体人才</h1>
9+
<h2 class="description">通过完整项目实战，系统学习应用传播、故事、产品、技术、短视频与增长黑客，成为全栈新媒体人才，仅在半撇私塾</h2>
10+
</div>
11+
<div>
12+
<a href="#">观看视频介绍</a>
13+
<a href="#">立即免费体验</a>
14+
</div>
15+
</body>
16+
</html>

‎第三章/style/before/style.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.description {
2+
text-align: left;
3+
color:blue;
4+
}

‎Box-model/index.html renamed to ‎第二章/box-model/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html>
33
<head>
44
<title>HTML盒模型</title>
5-
<link rel="stylesheet" type="text/css" href="style.css">
5+
<link rel="stylesheet" href="style.css">
66
</head>
77
<body>
88
<div id="content">

‎Box-model/style.css renamed to ‎第二章/box-model/style.css

File renamed without changes.

‎Explore/index.html renamed to ‎第二章/explore/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
<!doctype html>
12
<html>
23
<head>
34
<meta charset="utf-8">

‎Explore/script.js renamed to ‎第二章/explore/script.js

File renamed without changes.

‎Explore/style.css renamed to ‎第二章/explore/style.css

File renamed without changes.

0 commit comments

Comments
 (0)