EdmondFrank's 时光足迹

この先は暗い夜道だけかもしれない それでも信じて進むんだ。星がその道を少しでも照らしてくれるのを。
或许前路永夜,即便如此我也要前进,因为星光即使微弱也会我为照亮前途。
——《四月は君の嘘》

百度前端技术学院-任务6

百度前端技术学院-任务六

任务六:通过HTML及CSS模拟报纸排版

style.css

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
* {
  margin: 0;
  padding: 0;
}
header {
  border-bottom: 2px solid #938e3c;
  height: 61px;
  position: relative;
}
header div {
  height: 61px;
  width: 110px;
  background-color: #e74457;
}
header div p {
  position: absolute;
  left: 6px;
  bottom: 2px;
  font-size: 12px;
  color: #fff;
  font-family: "黑体";
}
header > p {
  position: absolute;
  right: 2px;
  bottom: 2px;
  font-size: 12px;
  color: #d45d5c;
  font-family: "黑体";
}
#column1 {
  margin-top: 20px;
}
#column1 #img1,
#column1 img {
  width: 641px;
  height: 301px;
}
#img1 {
  position: relative;
  display: inline-block;
}
#img1 div {
  width: 191px;
  height: 301px;
  position: absolute;
  opacity: 0.6;
  bottom: 0;
}
#img1 .green {
  background-color: #20a176;
  left: 0;
}
#img1 .red {
  background-color: #a6435a;
  right: 0;
}
#right1 {
  float: right;
  display: inline-block;
  width: 203px;
  border-top: 2px solid #938e8c;
}
#right1 .about {
  height: 26px;
  display: inline-block;
  border-bottom: 2px solid #808080;
}
#right1 .about > p {
  font-family: "Microsoft YaHei";
  font-size: 18px;
  color: #000;
}
#right1 .about > p:first-letter {
  font-size: 24px;
}
#column2 {
  margin-top: 20px;
  overflow: hidden;
}
#column2 div {
  float: left;
  display: inline-block;
  width: 200px;
  margin-right: 20px;
}
#column2 div p:first-child {
  font: bolder 16px "微软雅黑";
  text-decoration: underline;
  margin: 10px 0;
}
#column2 div span {
  font-style: italic;
  color: #cd4a48;
}
#column3 {
  margin-top: 20px;
  border-bottom: 1px solid #938e8c;
}
#column3 #left3 {
  width: 415px;
  display: inline-block;
}
#column3 #left3 #leftUp3 {
  border-bottom: 2px solid #11456b;
}
#column3 #left3 #leftUp3 p {
  font: bolder 42px "黑体";
  color: #11456b;
  line-height: 42px;
  margin-bottom: 16px;
}
#column3 #left3 #leftUp3 p span {
  font-size: 72px;
  font-style: italic;
  color: #f5e327;
  line-height: 72px;
}
#leftDown3 {
  margin: 30px 0;
}
#leftDown3 p {
  font: 12px "宋体";
  color: #767777;
  line-height: 16px;
}
#leftDown3 p:first-child:first-letter {
  font: 70px "微软雅黑";
  color: #f5e327;
  float: left;
  margin: 0 10px;
}
#leftDown3 img {
  width: 200px;
  height: 300px;
  float: right;
  margin: 20px 0 20px 20px;
}
#right3 {
  display: inline-block;
  width: 458px;
  float: right;
}
#right3 #rightUp3 {
  height: 275px;
  position: relative;
}
#right3 #rightUp3 img {
  width: 458px;
  height: 275px;
}
#right3 #rightUp3 div {
  width: 458px;
  height: 61px;
  background-color: #717171;
  opacity: 0.4;
  position: absolute;
  bottom: 0;
}
#right3 #rightUp3 p {
  height: 44px;
  border-left: 3px solid #72b16a;
  font: 26px "微软雅黑";
  color: #fff;
  position: absolute;
  bottom: 0;
  line-height: 44px;
  margin: 0 0 8px 30px;
  padding: 0 10px;
}
#right3 #rightUp3 p span {
  font: italic 12px "微软雅黑";
  color: #72b16a;
  padding: 0 8px;
}
#rightDown3 {
  margin-top: 30px;
  background-color: rgba(172,118,92,0.42);
}
#rightDown3 #downUp3 {
  margin: 20px 0 20px 20px;
}
#rightDown3 #downUp3 p {
  font: 16px;
  font-family:"宋体";
  color: #5a5b5b;
  padding: 20px 10px 0 10px;
}
#rightDown3 #downUp3 p span {
  font: italic 12px "宋体";
  text-align: right;
}
#down3 {
  height: 160px;
  margin-top: 30px;
}
#down3 #downL3 {
  width: 260px;
  height: 160px;
  display: inline-block;
  background-color: #d45d5c;
  position: relative;
}
#down3 #downL3 p {
  color: #fff;
}
#down3 #downR3 {
  display: inline-block;
  overflow: hidden;
  float: right;
  width: 198px;
  height: 160px;
}
#down3 #downR3 p {
  font: italic 14px "黑体";
  color: #5a5b5b;
  text-indent: 3em;
  padding: 16px 0 0 16px;
  position: relative;
}
#down3 #downR3 p span {
  font-size: 72px;
  color: #d45d5c;
  position: absolute;
  font-family:"黑体";
}

index.html

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
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Language" content="zh-ch"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="style.css" type="text/css"/>
    <title>任务六</title>
</head>
<body>
  <div style="width: 980px;height: 1386px;margin: 0 auto;">
    <div style="margin: 0 auto;width: 892px;">
        <header>
            <div><p>ife.baidu.com</p></div>
            <p>2016.03</p>
        </header>
        <div id="column1">
            <div id="img1">
                <img src="pic1.png">
                <div class="green"></div>
                <div class="red"></div>
            </div>
            <div id="right1">
                <div class="about">
                    <p>ABOUT</p>
                </div>
                <br/>
                <div class="about">
                    <p>TECHNOLOGE</p>
                </div>
                <p style="font: 12px 楷体;color: #676767;line-height: 10px; padding-top: 4px;">About technologe about technoge about technoge</p>
                <p style="font: italic 116px 微软雅黑;color: #75b86b;">700</p>
                <div style="display: inline-block;"><p style="font: 55px 微软雅黑;color: #cc8091;">3.2</p></div>
                <div style="display: inline-block;">
                    <p style="font: 21px 微软雅黑;color: #cc8091;">css</p>
                    <p style="font: 12px 微软雅黑;color: #cc8091;">cssssssssss</p>
                </div>
        </div>
    </div>
  </div>
  <div id="column2">
            <div><p style="color: #418c59;">What</p>
                <p style="font: 12px 宋体;color: #767777;line-height: 16px;">
前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端端前端前端前端前端前端前端前端</p>
            </div>
            <div><p style="color: #d2994f;">When</p>
                <p style="font: 12px 微软雅黑;color: #231815;line-height: 16px;opacity: 0.7;">
                    前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端</p></div>
            <div><p style="color: #cc7680;">How</p>
                <p style="font: 12px 微软雅黑;color: #231815;line-height: 20px;opacity: 0.7;">
                    前端前端前前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端端前端前端前端前端前端前端前端</p>
                <br>
                <br>
                <p style="font: bolder 12px 微软雅黑;color: #231815;line-height: 20px;opacity: 0.7;">
                    What--------<span>40%</span></p>
                <p style="font: bolder 12px 微软雅黑;color: #231815;line-height: 20px;opacity: 0.7;">
                    What--------<span>30%</span></p>
                <p style="font: bolder 12px 微软雅黑;color: #231815;line-height: 20px;opacity: 0.7;">
                    What--------<span>30%</span></p>
            </div>
  </div>
  <div id="column3">
            <div id="left3">
                <div id="leftUp3">
                    <p><span>THE</span> TECHNOLOGE OF FRONT</p>
                    <p>前端技术领域</p></div>
                <div id="leftDown3">
                    <p>前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端<img src="pic2.png" alt="">前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端</p>
                    <p style="text-indent: 2em;">
                        前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端</p>
                    <p style="text-indent: 2em;">
                        前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
                    </p>
                </div>
            </div>
            <div id="right3">
                <div id="rightUp3">
                    <img src="pic3.png" alt="">
                    <div></div>
                    <p>前端技术<span>前端技术前端技术</span></p>
                </div>
                <div id="rightDown3">
                    <div id="downUp3">
                        <p style="padding-top: 30px;">▲ 前端前端前端前端前端前端 ...................<span>前端</span></p>
                        <p>▲ 前端前端前端前端 .........................<span>前端前</span></p>
                        <p>▲ 前端前端前端前端前端前端 ...................<span>前端</span></p>
                    </div>
                    <div id="down3">
                        <div id="downL3">
                            <p style="font: 110px 微软雅黑;display: inline-block;line-height: 160px;">0</p>
                            <div style="display: inline-block;height: 86px;border-left: 2px solid #ffffff;position: absolute;top: 50%;margin-top: -43px;">
                                <p style="font: italic 21px 黑体;padding-left: 3px;">ONE TWO</p>
                                <P style="font: italic 21px 黑体;padding-left: 3px;">THREE FOUR FIVE</P>
                                <P style="font: 12px 黑体;padding-left: 3px;">hello world hello world</P>
                                <p style="font: 12px 黑体;padding-left: 3px;">hello word</p>
                            </div>
                        </div>
                        <div id="downR3">
                            <p><span style="left:-35px;top: 0;"></span> world
                                hello world hello world hello world hello world
                                hello world hello world hello world hello world
                                hello world hello world <span style="right: 0;"></span></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <p style="float: right;font: 12px 黑体;color: #d45d5c;">ife.baidu.com</p>
    </div>
  </div>
</body>
</html>

百度前端技术学院-任务5

百度前端技术学院-任务五

任务五:零基础HTML及CSS编码(二)

style.css

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
body{
            margin:20;
            padding:0;
            background-color: #CCCCCC;
        }
        .top{
            background-color: #333333;
            height:50px;
        }
        .top h1{
            color: blue;
            display: inline-block;
            margin: 0;
        }
        .top ul{
            float: right;
        }
        .top ul li{
            display: inline-block;
            padding-left: 10px;
            color: #FFFFFF;
        }
        .top ul li a{
            color: white;
        }
        .wrap h3{
            color: #646464;
        }
        .wrap .author{
            color: #707070;
            text-indent: 0;
        }
        .wrap>p{
            text-indent: 2em;
        }
     .wrap ul li{
         list-style-type:none;
     }

     aside
     {
         margin: 20px;
         padding: 20px;
         width: 310px;
         background-color: #FFFFFF;
         border: 1px solid #CDCDCD;
         box-shadow: 5px 5px 5px #888888;
         position: absolute;
         right: 0px;
         top: 60px;
     }
.wrap{
    margin: 20px 392px 20px 20px;
    padding: 20px;
    background-color: #FFFFFF;
    border: 1px solid #CDCDCD;
    box-shadow: 5px 5px 5px #888888;
}

span{
    padding: 5px;
    width: 120px;
    height: 120px;
    border: 1px solid #CDCDCD;
    font-size: 14px;
    text-align: center;
    display: inline-block;
}
div.aside_title{
    border-left: 3px solid #CCC;
    padding: 2px 1px 1px 2px;
}

div.aside_title h2{
    margin: 5px;
    font-size: 16px;
}

div.form table{
    width: 100%;
    font-size: 12px;
    text-align: left;

}
footer{
    color: #FFF;
    font-size: 12px;
    background-color: #000;
    margin: 0px;
    width: 100%;
    height: 60px;
    text-align: center;
    padding-top: 25px;
}

.notice{
            color:#8e8e8e;
        }

table.table1{
    width: 100%;
    text-align: left;
    border-collapse:collapse;
}

.table1 th{
    color: #FFF;
    font-size: 14px;
    padding: 5px;
    background-color: #333;
    border: 1px solid #CDCDCD;
}

.table1 td{
    width: 40%;
    font-size: 12px;
    padding: 5px;
    border: 1px solid #CDCDCD;
}



table.table1 tr.last_line{
    background-color: #CCCCCC;
}
.submit{
    width: 100%;
    height: 35px;
    color: #FFF;
    font-size: 14px;
    border-radius: 10px;
    background-color: rgb(51,85,208);
}

index.html

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
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Language" content="zh-ch"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="style.css" type="text/css"/>
    <title>任务五</title>
</head>
<body>
<div class="top">
    <h1>EdmondFrank</h1>
    <ul>
        <li><a href="">导航链接一</a></li>
        <li><a href="">导航链接二</a></li>
        <li><a href="">导航链接三</a></li>
        <li><a href="">导航链接四</a></li>
    </ul>
</div>
<div class="wrap">
    <h2>文章一级标题</h2>
    <h3>文件二级标题</h3>
    <p class="author">文章作者 文章发布时间</p>
<p>这是一个很长很长的段落,这是一个很长很长的段落,
                  这是一个很长很长的段落,这是一个很长很长的段落,
                  这是一个很长很长的段落,这是一个很长很长的段落,
                  这是一个很长很长的段落,<br/>换行了<br/>这是一个很长很长的段落,
                  这是一个很长很长的段落,这是一个很长很长的段落,
                  这是一个很长很长的段落,这是一个很长很长的段落,
                  这是一个很长很长的段落,换行了<br/>这是一个很长很长的段落,
                  这是一个很长很长的段落,<a href = "http://ife.baidu.com">这里有个链接链接到http://ife.baidu.com</a>
                  这是一个很长很长的段落,<b>这里有个粗体字</b>这是一个很长很长的段落,
                  这是一个很长很长的段落,这是一个很长很长的段落。</p>

                <img src="warp.png">

                <p>这是一个很长很长的段落,这是一个很长很长的段落,
                  这是一个很长很长的段落,这是一个很长很长的段落,
                  这是一个很长很长的段落,这是一个很长很长的段落,
                  这是一个很长很长的段落,<br/>换行了<br/>这是一个很长很长的段落,
                  这是一个很长很长的段落,这是一个很长很长的段落,
                  这是一个很长很长的段落,这是一个很长很长的段落,
                  这是一个很长很长的段落,换行了<br/>这是一个很长很长的段落,
                  这是一个很长很长的段落,<a href = "http://ife.baidu.com"target="_blank">这里有个链接新窗口链接到http://ife.baidu.com</a>
                  这是一个很长很长的段落,<b>这里有个粗体字</b>这是一个很长很长的段落,
                  这是一个很长很长的段落,这是一个很长很长的段落。</p>
</div>
<div class="wrap">
    <h2>另外一篇文章一级标题</h2>
    <h3>文章二级标题</h3>
    <p class="author">文章作者 文章发布时间</p>
    <p>这是一个很长很长的段落,这是一个很长很长的段落,
        这是一个很长很长的段落,这是一个很长很长的段落,
        这是一个很长很长的段落,这是一个很长很长的段落,
        这是一个很长很长的段落,<br/>换行了<br/>这是一个很长很长的段落,
        这是一个很长很长的段落,这是一个很长很长的段落,
        这是一个很长很长的段落,这是一个很长很长的段落,
        这是一个很长很长的段落,换行了<br/>这是一个很长很长的段落,
        这是一个很长很长的段落,<a href = "http://ife.baidu.com">这里有个链接链接到http://ife.baidu.com</a>
        这是一个很长很长的段落,<b>这里有个粗体字</b>这是一个很长很长的段落,
        这是一个很长很长的段落,这是一个很长很长的段落。</p>
    <img src="warp.png">
        <ul class="noli">
        <li>项目列表1</li>
        <li>项目列表2</li>
        <li>项目列表3</li>
    </ul>
</div>

    <div class="wrap">
        <h2>图片</h2>
            <span>
                好看的图片
                <img src="warp.png" width="120px" height="90px"/>
            </span>

            <span>
                好看的图片
                <img src="warp.png" width="120px" height="90px"/>
            </span>

            <span>
                好看的图片
                <img src="warp.png" width="120px" height="90px" />
            </span>

            <span>
                好看的图片
                <img src="warp.png" width="120px" height="90px" />
            </span>

            <span>
                好看的图片
                <img src="warp.png" width="120px" height="90px" />
            </span>

            <span>
                好看的图片
                <img src="warp.png" width="120px" height="90px" />
            </span>

            <span>
                好看的图片
                <img src="warp.png" width="120px" height="90px" />
            </span>

            <span>
                好看的图片
                <img src="warp.png" width="120px" height="90px" />
            </span>

            <span>
                好看的图片
                <img src="warp.png" width="120px" height="90px" />
            </span>

            <span>
                好看的图片
                <img src="warp.png" width="120px" height="90px" />
            </span>
    </div>
    <div class="wrap">
    <h2>最后一篇文章一级标题</h2>
    <h3>文章二级标题</h3>
    <p class="author">文章作者 发布时间</p>
    <ol>
        <li>排名1</li>
        <li>排名2</li>
        <li>排名3</li>
    </ol>
    <p>一个表格</p>
    <table class="table1" >
            <tr>
              <th>表头</th>
              <th>表头</th>
              <th>表头</th>
            </tr>
            <tr>
              <td>表内容单元格</td>
              <td>表内容单元格</td>
              <td><a href="http://edmondfrank.github.io">操作</a></td>
            </tr>
            <tr>
              <td>表内容单元格</td>
              <td>表内容单元格</td>
              <td><a href="http://edmondfrank.github.io">操作</a></td>
            </tr>
            <tr>
              <td>表内容单元格</td>
              <td>表内容单元格</td>
              <td><a href="http://edmondfrank.github.io">操作</a></td>
            </tr>
            <tr>
              <td>表内容单元格</td>
              <td>表内容单元格</td>
              <td><a href="http://edmondfrank.github.io">操作</a></td>
            </tr>
            <tr class ="last_line">
              <td>总计</td>
              <td colspan="2">1000</td>
            </tr>
          </table>
</div>
    <aside>
        <div class="aside_title">
            <h2>这里以后是一个侧栏,这是侧栏的标题</h2>
        </div>
        <div class="form">
                <table>
                <tr>
                    <td>请输入邮箱地址</td>
                    <td></td>
                    <td>,<input type="text" name="email" value="这是一个文本输入框" onclick="if(value==defaultValue){value='';this.style.color='#000'}" onBlur="if(!value){value=defaultValue;this.style.color='#999'}" style="color:#999"/></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td class="notice">邮箱地址请按要求格式输入</td>
                </tr>
                <tr>
                    <td>请输入密码</td>
                    <td></td>
                    <td><input type="text" name="password" value="这是一个文本输入框" onclick="if(value==defaultValue){value='';this.style.color='#000'}" onBlur="if(!value){value=defaultValue;this.style.color='#999'}" style="color:#999"/></td>
                </tr>
                <tr>
                    <td>请重复输入密码</td>
                    <td></td>
                    <td><input type="text" name="password" value="这是一个文本输入框" onclick="if(value==defaultValue){value='';this.style.color='#000'}" onBlur="if(!value){value=defaultValue;this.style.color='#999'}" style="color:#999"/></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td class="notice">密码请为6-16位英文数字</td>
                </tr>
                <tr>
                    <td>性别</td>
                    <td></td>
                    <td><input type="radio" name="Male" checked="checked"/><input type="radio" name="Female"/></td>
                </tr>
                <tr>
                    <td>城市</td>
                    <td></td>
                    <td>
                        <select>
                            <option>北京</option>
                            <option>广东</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>爱好</td>
                    <td></td>
                    <td><input type="checkbox" value="sports"/>运动 <input type="checkbox" value="art"/>艺术 <input type="checkbox" value="sciense"/>科学</td>
                </tr>
                <tr>
                    <td>个人描述</td>
                    <td></td>
                    <td><textarea cols="20"></textarea></td>
                </tr>
                </table>
        </div>
        <button class="submit">确认提交</button>
    </aside>
</body>

<footer><p>版权所有©</p></footer>
</html>

```

百度前端技术学院-任务4

百度前端技术学院-任务四

任务四:定位和居中问题

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
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Language" content="zh-ch"/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>任务四</title>
    <style>
        html,body,div {
            text-align:center;
            margin: 0;
            padding: 0;
            width:100%;
            height: 100%;
        }
        .center{
            width: 400px;
            height: 200px;
            margin:0 auto;
            background: #ccc;
            position: relative;
            top: 50%;
            transform: translateY(-50%);
        }
        .center .leftcir {

            background: #fc0;
            position: absolute;
            width: 50px;
            height: 50px;
            border-bottom-right-radius: 50px;
        }
        .center .rightcri {
            background: #fc0;
            position: absolute;
            bottom:0;
            right:0;
            width: 50px;
            height: 50px;
            border-top-left-radius: 50px;
        }
    </style>
</head>
<body>
    <div  class="center">
        <div class="leftcir"></div>
        <div class="rightcri"></div>
    </div>
</body>
</html>

百度前端技术学院-任务3

百度前端技术学院-任务三

任务三:三栏式布局

style.css

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
body, div {
  border: 1px solid #999;
  padding: 20px;
}
body {
      margin: 0;
}
#box {
  background-color: #eee;
  position: relative;
  overflow: auto;
  zoom: 1;
  min-height: 440px;
}
#leftbox {
  padding: 0;
  background-color: #fff;
  width: 200px;
  position: absolute;
  
}
#leftbox h2 {
  margin-top:20px;
  font-size: 12px;
  font-weight: normal;
  float: left;
}
#leftbox img{
  margin: 20px;
  float: left;
}
#rightbox {
  background-color: #fff;
  padding: 0;
  margin-bottom:20px;
  width: 120px;
  position: absolute;
  top: 20px;
  right: 20px;
}
#rightbox div{
    border:0;
  margin: 20px;
  padding: 0;
}
#midbox {
  background-color:#fff;
  margin-left: 220px;
  margin-right: 140px;
  float: left;
}

index.html

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
<!DOCTYPE html>
<html>
<head>
  <title>任务三</title>
    <meta http-equiv="Content-Language" content="zh-ch"/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div id="box">
      <div id="leftbox">
          <img src="pic.png" width="80px" height="80px" border="1">
          <h2>团队名称</h2>
            <p>EdmondFrank</p>
      </div>
      <div id="midbox">
          <h3>关于你们的团队</h3>
            <p>可以给我们解释一下团队名称的来历,或是分别介绍你们团队的成员.</p>
            <p>(以下为示例)</p>
            <p>百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计。我们尽力保证课程内容的质量以及学习难度的合理性,但即使如此,真正决定课程效果的,还是你的每一次思考和实践。
课程多数题目的解决方案都不是唯一的,这和我们在实际工作中的情况也是一致的。因此,我们的要求不仅仅是实现设计稿的效果,更是要多去思考不同的解决方案,评估不同方案的优劣,然后使用在该场景下最优雅的方式去实现。那些最终没有被我们采纳的方案,同样也可以帮助我们学到很多知识。所以,我们列出的参考资料未必是实现需求所必须的。有的时候,实现题目的要求很简单,甚至参考资料里就有,但是背后的思考和亲手去实践却是任务最关键的一部分。在学习这些资料时,要多思考,多提问,多质疑。相信通过和小伙伴们的交流,能让你的学习事半功倍。</p>
      </div>
      <div id="rightbox">
          <div><img src="pic.png" width="80px" height="80px" border="1"></div>
          <div> <img src="pic.png" width="80px" height="80px" border="1"></div>
          <div> <img src="pic.png" width="80px" height="80px" border="1"></div>
            <div> <img src="pic.png" width="80px" height="80px" border="1"></div>
      </div>
  </div>
</body>
</html>