Skip to content

Commit 10fb3c1

Browse files
materialcodermaterialcoder
committed
add display page
1 parent 3f61b8c commit 10fb3c1

File tree

7 files changed

+167
-0
lines changed

7 files changed

+167
-0
lines changed

‎css/style.css

+95
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
border: none;
5+
}
6+
body {
7+
font-family: "Microsoft Yahei";
8+
min-width: 800px;
9+
}
10+
a {
11+
text-decoration: none;
12+
display: block;
13+
}
14+
.nav {
15+
width: 100%;
16+
height: 60px;
17+
}
18+
.nav img {
19+
display: block;
20+
height: 40px;
21+
float: right;
22+
margin-right: 50px;
23+
margin-top: 10px;
24+
opacity: .5;
25+
}
26+
.nav a:hover img {
27+
opacity: 1;
28+
}
29+
.container {
30+
width: 100%;
31+
height: auto;
32+
margin: 0 auto;
33+
}
34+
.logo {
35+
width: 500px;
36+
height: 500px;
37+
margin: -60px auto 0 auto;
38+
}
39+
.content {
40+
width: 100%;
41+
margin-top: 10px;
42+
margin-bottom: 50px;
43+
}
44+
.content::after {
45+
content: '';
46+
display: block;
47+
clear: both;
48+
}
49+
.content div {
50+
width: 30%;
51+
height: auto;
52+
border: 1px solid #ccc;
53+
float: left;
54+
margin-left: 2.5%;
55+
padding: 10px;
56+
box-sizing: border-box;
57+
box-shadow: 2px 2px 2px rgba(0,0,0,.2);
58+
}
59+
.ife h2 {
60+
font-size: 24px;
61+
line-height: 40px;
62+
}
63+
.ife_html h2 {
64+
color: #3CB371;
65+
}
66+
.ife_js h2 {
67+
color: #CD5C5C;
68+
}
69+
.ife_eg h2 {
70+
color: #1E90FF;
71+
}
72+
.ife a {
73+
font-size: 16px;
74+
color: #228B22;
75+
display: block;
76+
line-height: 26px;
77+
padding-left: 20px;
78+
}
79+
.ife a:hover {
80+
text-decoration: underline;
81+
}
82+
.ife_js a {
83+
color: #D87093;
84+
}
85+
.ife_eg a {
86+
color: #0066FF ;
87+
}
88+
.ife_baidu a {
89+
color: #333;
90+
}
91+
.ife p {
92+
padding-left: 20px;
93+
font-size: 14px;
94+
color: #666;
95+
}

‎favicon.ico

60.6 KB
Binary file not shown.

‎img/2.gif

974 KB
Loading

‎img/github.jpg

13.8 KB
Loading

‎img/github2.jpg

5.22 KB
Loading

‎img/in.gif

513 KB
Loading

‎index.html

+72
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>MaterialCoder</title>
6+
<link rel="stylesheet" href="css/style.css">
7+
<link href="favicon.ico" rel="icon" type="image/X-icon" />
8+
</head>
9+
<body>
10+
11+
<div class="nav">
12+
<a href="https://github.com/materialcoder" target="_blank"><img src="img/github.jpg" alt="" title="materialcoder"></a>
13+
</div>
14+
15+
<div class="container">
16+
<div class="logo">
17+
<img src="img/in.gif" alt="">
18+
</div>
19+
<div class="content">
20+
<div class="ife_html ife">
21+
<h2>HTML & CSS</h2>
22+
<a href="http://materialcoder.me/BaiduIFE2017/HTML-CSS/task1/index.html" target="_blank">task1 零基础HTML编码</a>
23+
<a href="http://materialcoder.me/BaiduIFE2017/HTML-CSS/task2/index.html" target="_blank">task2 零基础HTML及CSS编码（一）</a>
24+
<a href="http://materialcoder.me/BaiduIFE2017/HTML-CSS/task3/index.html" target="_blank">task3 三栏式布局</a>
25+
<a href="http://materialcoder.me/BaiduIFE2017/HTML-CSS/task4/index.html" target="_blank">task4 定位和居中问题</a>
26+
<a href="http://materialcoder.me/BaiduIFE2017/HTML-CSS/task5/index.html" target="_blank">task5 零基础HTML及CSS编码（二）</a>
27+
<a href="http://materialcoder.me/BaiduIFE2017/HTML-CSS/task6/index.html" target="_blank">task6 通过HTML及CSS模拟报纸排版</a>
28+
<a href="http://materialcoder.me/BaiduIFE2017/HTML-CSS/task7/index.html" target="_blank">task7 常见的技术产品官网页面</a>
29+
<a href="http://materialcoder.me/BaiduIFE2017/HTML-CSS/task8/index.html" target="_blank">task8 响应式网格（栅格化）布局</a>
30+
<!-- <p>持续更新中......</p> -->
31+
</div>
32+
<div class="ife_js ife">
33+
<h2>JavaScript</h2>
34+
<a href="http://materialcoder.me/BaiduIFE2017/JS/task1/index.html" target="_blank">task1 零基础JavaScript编码（一）</a>
35+
<a href="http://materialcoder.me/BaiduIFE2017/JS/task2/index.html" target="_blank">task2 零基础JavaScript编码（二）</a>
36+
<a href="http://materialcoder.me/BaiduIFE2017/JS/task3/index.html" target="_blank">task3 零基础JavaScript编码（三）</a>
37+
<a href="http://materialcoder.me/BaiduIFE2017/JS/task4/index.html" target="_blank">task4 基础JavaScript练习（一）</a>
38+
<a href="http://materialcoder.me/BaiduIFE2017/JS/task5/index.html" target="_blank">task5 基础JavaScript练习（二）</a>
39+
<a href="http://materialcoder.me/BaiduIFE2017/JS/task6/index.html" target="_blank">task6 基础JavaScript练习（三）</a>
40+
<a href="http://materialcoder.me/BaiduIFE2017/JS/task7/index.html" target="_blank">task7 JavaScript和树（一）</a>
41+
<a href="http://materialcoder.me/BaiduIFE2017/JS/task8/index.html" target="_blank">task8 JavaScript和树（二）</a>
42+
<a href="http://materialcoder.me/BaiduIFE2017/JS/task9/index.html" target="_blank">task9 JavaScript和树（三）</a>
43+
<!-- <p>(已完结，初学者，欢迎指出不足之处)</p> -->
44+
</div>
45+
<div class="ife_eg ife">
46+
<h2>Demos</h2>
47+
<a href="http://materialcoder.me/BaiduIFE2017/Practice/task1/index.html" target="_blank">task1 表单（一）单个表单项的检验</a>
48+
<a href="http://materialcoder.me/BaiduIFE2017/Practice/task2/index.html" target="_blank">task2 表单（二）多个表单项的动态检验</a>
49+
<a href="http://materialcoder.me/BaiduIFE2017/Practice/task3/index.html" target="_blank">task3 表单（三）联动</a>
50+
<a href="http://materialcoder.me/BaiduIFE2017/Practice/task6/index.html" target="_blank">task6 任务六：UI组件之浮出层</a>
51+
<!-- <p>更新中......</p> -->
52+
</div>
53+
</div>
54+
<div class="content">
55+
<div class="ife_baidu ife">
56+
<h2>综合案例</h2>
57+
<a href="http://materialcoder.me/BaiduIFE2017/1 自定义checkbox，radio样式/index.html" target="_blank">自定义checkbox，radio样式(一)</a>
58+
<a href="http://materialcoder.me/BaiduIFE2017/1 自定义checkbox，radio样式/index2.html" target="_blank">自定义checkbox，radio样式(二)</a>
59+
<a href="http://materialcoder.me/BaiduIFE2017/2 自定义网页右键菜单/index.html" target="_blank">自定义网页右键菜单</a>
60+
<a href="http://materialcoder.me/BaiduIFE2017/3 鼠标悬停模糊效果/index.html" target="_blank">鼠标悬停模糊效果</a>
61+
<a href="http://materialcoder.me/BaiduIFE2017/5 音乐播放器/index.html" target="_blank">音乐播放器</a>
62+
<a href="http://materialcoder.me/BaiduIFE2017/6 使用CSS实现折叠面板/index.html" target="_blank">使用CSS实现折叠面板</a>
63+
<a href="http://materialcoder.me/BaiduIFE2017/7 实现树形组件/index.html" target="_blank">实现树形组件</a>
64+
<a href="http://materialcoder.me/BaiduIFE2017/8 CSS3饼状loading效果/index.html" target="_blank">CSS3饼状loading效果</a>
65+
<a href="http://materialcoder.me/BaiduIFE2017/9 CSS3实现3D轮播图/index.html" target="_blank">CSS3实现3D轮播图</a>
66+
<!-- <p>持续更新中......</p> -->
67+
</div>
68+
</div>
69+
</div>
70+
71+
</body>
72+
</html>

0 commit comments

Comments
 (0)