├── README.md ├── task_1_3 ├── my.jpg ├── index.html └── task_1_3.css ├── task_1_5 ├── my.jpg ├── logo.png ├── baidu-logo.png ├── task_1_5.css └── index.html ├── task_1_6 ├── pic1.png ├── pic2.png ├── pic3.png ├── index.html └── task_1_6.css ├── task_1_4 ├── index.html └── task_1_4.css ├── test ├── index.html └── test.css ├── task_2_13 └── index.html └── task_1_8 ├── index.html └── task_1_8.css /README.md: -------------------------------------------------------------------------------- 1 | ife2016 2 | -------------------------------------------------------------------------------- /task_1_3/my.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jocelynthink/ife2016/master/task_1_3/my.jpg -------------------------------------------------------------------------------- /task_1_5/my.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jocelynthink/ife2016/master/task_1_5/my.jpg -------------------------------------------------------------------------------- /task_1_5/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jocelynthink/ife2016/master/task_1_5/logo.png -------------------------------------------------------------------------------- /task_1_6/pic1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jocelynthink/ife2016/master/task_1_6/pic1.png -------------------------------------------------------------------------------- /task_1_6/pic2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jocelynthink/ife2016/master/task_1_6/pic2.png -------------------------------------------------------------------------------- /task_1_6/pic3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jocelynthink/ife2016/master/task_1_6/pic3.png -------------------------------------------------------------------------------- /task_1_5/baidu-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jocelynthink/ife2016/master/task_1_5/baidu-logo.png -------------------------------------------------------------------------------- /task_1_4/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | task_1_4 6 | 7 | 8 | 9 |
10 |
11 |
12 |
13 |
14 |
15 | 16 | -------------------------------------------------------------------------------- /test/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | test 5 | 6 | 7 | 8 | 9 |
10 |
Box 1
11 |
Box 2
12 |
Box 3
13 |
14 | 15 | -------------------------------------------------------------------------------- /task_1_4/task_1_4.css: -------------------------------------------------------------------------------- 1 | body{ 2 | margin:0; 3 | background:white; 4 | position: relative; 5 | } 6 | .rect{ 7 | width: 400px; 8 | height: 200px; 9 | background: #ccc; 10 | position: fixed; 11 | left:50%; 12 | top:50%; 13 | margin-left: -200px; 14 | margin-top: -100px; 15 | } 16 | .yuan1{ 17 | background: #fc0; 18 | position: absolute; 19 | border-radius: 0 0 50px 0; 20 | width: 50px; 21 | height: 50px; 22 | } 23 | .yuan2{ 24 | background: #fc0; 25 | position: absolute; 26 | bottom: 0px; 27 | right: 0px; 28 | border-radius:50px 0 0 0; 29 | width: 50px; 30 | height: 50px; 31 | } -------------------------------------------------------------------------------- /task_2_13/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | IFE JavaScript Task 01 6 | 7 | 8 | 9 | 10 | 11 | 12 |
您输入的值是：尚无录入
13 | 14 | 29 | 30 | -------------------------------------------------------------------------------- /task_1_3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | task3 6 | 7 | 8 | 9 |
10 |
11 | 12 |

坚持就是胜利

13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |

坚持就是胜利

22 |

来自西安电子科技大学

23 |

百度前端技术学院是百度人力资源部校园招聘组、百度EFE团队,百度前端技术学院是百度人力资源部校园招聘组、百度EFE团队,百度前端技术学院是百度人力资源部校园招聘组、百度EFE团队,百度前端技术学院是百度人力资源部校园招聘组、百度EFE团队百度前端技术学院是百度人力资源部校园招聘组、百度EFE团队,百度前端技术学院是百度人力资源部校园招聘组、百度EFE团队

24 |
25 |
26 | 27 | 28 | -------------------------------------------------------------------------------- /task_1_8/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Baidu IFE Task_1_8 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 | -------------------------------------------------------------------------------- /task_1_8/task_1_8.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | margin: 0; 3 | padding: 0; } 4 | 5 | .wrapper { 6 | box-sizing: border-box; 7 | width: 100%; 8 | padding: 10px; } 9 | 10 | .wrapper:before, .wrapper:after { 11 | content: ""; 12 | display: table; 13 | clear: both; } 14 | 15 | .outer { 16 | box-sizing: border-box; 17 | float: left; 18 | padding: 10px; } 19 | 20 | .inner { 21 | height: 50px; 22 | background-color: #eee; 23 | border: 1px solid #999; } 24 | 25 | @media (min-width: 769px) { 26 | .col-md-1 { 27 | width: 8.33333%; } 28 | 29 | .col-md-2 { 30 | width: 16.66667%; } 31 | 32 | .col-md-3 { 33 | width: 25%; } 34 | 35 | .col-md-4 { 36 | width: 33.33333%; } 37 | 38 | .col-md-5 { 39 | width: 41.66667%; } 40 | 41 | .col-md-6 { 42 | width: 50%; } 43 | 44 | .col-md-7 { 45 | width: 58.33333%; } 46 | 47 | .col-md-8 { 48 | width: 66.66667%; } 49 | 50 | .col-md-9 { 51 | width: 75%; } 52 | 53 | .col-md-10 { 54 | width: 83.33333%; } 55 | 56 | .col-md-11 { 57 | width: 91.66667%; } 58 | 59 | .col-md-12 { 60 | width: 100%; } } 61 | @media (max-width: 768px) { 62 | .col-sm-1 { 63 | width: 8.33333%; } 64 | 65 | .col-sm-2 { 66 | width: 16.66667%; } 67 | 68 | .col-sm-3 { 69 | width: 25%; } 70 | 71 | .col-sm-4 { 72 | width: 33.33333%; } 73 | 74 | .col-sm-5 { 75 | width: 41.66667%; } 76 | 77 | .col-sm-6 { 78 | width: 50%; } 79 | 80 | .col-sm-7 { 81 | width: 58.33333%; } 82 | 83 | .col-sm-8 { 84 | width: 66.66667%; } 85 | 86 | .col-sm-9 { 87 | width: 75%; } 88 | 89 | .col-sm-10 { 90 | width: 83.33333%; } 91 | 92 | .col-sm-11 { 93 | width: 91.66667%; } 94 | 95 | .col-sm-12 { 96 | width: 100%; } } -------------------------------------------------------------------------------- /test/test.css: -------------------------------------------------------------------------------- 1 | /*相对定位*/ 2 | /*.box-set { 3 | background: #e8eae9; 4 | } 5 | .box-1,.box-2,.box-3 { 6 | background: #8ec63f; 7 | height: 80px; 8 | position: relative; 9 | width: 80px; 10 | } 11 | .box-1 { 12 | top: 20px; 13 | } 14 | .box-2 { 15 | left: 40px; 16 | } 17 | .box-3 { 18 | bottom: -10px; 19 | right: 20px; 20 | }*/ 21 | /*绝对定位*/ 22 | /*.box-set { 23 | background: #e8eae9; 24 | height: 200px; 25 | position: relative; 26 | } 27 | .box-1,.box-2,.box-3 { 28 | background: #8ec63f; 29 | height: 80px; 30 | position: absolute; 31 | width: 80px; 32 | } 33 | .box-1 { 34 | top: 6%; 35 | left: 2%; 36 | } 37 | .box-2 { 38 | top: 0; 39 | right: -40px; 40 | } 41 | .box-3 { 42 | bottom: -10px; 43 | right: 20px; 44 | } 45 | .box-4 { 46 | bottom: 0; 47 | }*/ 48 | /*flex定位*/ 49 | /*.box-1,.box-2,.box-3 { 50 | background: #8ec63f; 51 | height: 80px; 52 | width: 80px; 53 | position: fixed; 54 | } 55 | .box-1 { 56 | top: 6%; 57 | left: 2%; 58 | } 59 | .box-2 { 60 | top: 0; 61 | right: -40px; 62 | } 63 | .box-3 { 64 | bottom: -10px; 65 | right: 20px; 66 | } 67 | .box-4 { 68 | bottom: 0; 69 | } 70 | */ 71 | /*z-index属性*/ 72 | .box-set { 73 | background: #e8eae9; 74 | height: 160px; 75 | position: relative; 76 | } 77 | .box-1,.box-2,.box-3 { 78 | width: 80px; 79 | height: 80px; 80 | background: #8ec63f; 81 | border: 3px solid #f7941d; 82 | position: absolute; 83 | } 84 | .box-1 { 85 | left: 10px; 86 | top: 10px; 87 | } 88 | .box-2 { 89 | bottom: 10px; 90 | left: 70px; 91 | z-index: 3; 92 | } 93 | .box-3 { 94 | left: 130px; 95 | top: 10px; 96 | z-index: 2; 97 | } 98 | .box-4 { 99 | bottom: 10px; 100 | left: 190px; 101 | z-index: 1; 102 | } -------------------------------------------------------------------------------- /task_1_3/task_1_3.css: -------------------------------------------------------------------------------- 1 | /*方法一：绝对定位相对定位*/ 2 | /*该方法有缺点，就是父元素的高度要给定，不能自适应高度*/ 3 | /**{ 4 | margin: 0 auto; 5 | } 6 | .content{ 7 | margin: 20px; 8 | height: 500px; 9 | background: #eee; 10 | position: relative; 11 | padding:20px; 12 | } 13 | img{ 14 | width: 80px; 15 | height: 80px; 16 | } 17 | .left-area{ 18 | position: absolute; 19 | width: 200px; 20 | border: #999 solid; 21 | padding: 20px; 22 | } 23 | .teamname{ 24 | position: absolute; 25 | top: 20px; 26 | left: 120px; 27 | } 28 | .mid-area{ 29 | position: absolute; 30 | margin: 0 20px; 31 | border: #999 solid; 32 | left:260px; 33 | right:140px; 34 | padding: 20px; 35 | line-height: 2em; 36 | } 37 | .right-area{ 38 | right: 20px; 39 | width: 120px; 40 | position: absolute; 41 | border:#999 solid; 42 | } 43 | .team_num{ 44 | width: 80px; 45 | height: 80px; 46 | margin:20px; 47 | }*/ 48 | 49 | 50 | /*三栏布局，采用float实现*/ 51 | /*思路：左中右三个栏，在HTML中的排放顺序是左右中*/ 52 | /*浮动左和右元素，margin适当的距离*/ 53 | /*中间元素是文档流元素，直接margin适当的距离，放在适当的位置*/ 54 | /*由于父元素是根据文档流中的元素确定大小的，也就是中间元素的大小决定位置*/ 55 | /*所以要清除浮动*/ 56 | /*方法一：设置父元素的overflow属性:为auto*/ 57 | /*方法二：给父元素添加一个伪类，然后添加一个空元素，并且对空元素清除浮动*/ 58 | *{ 59 | margin: 0 auto; 60 | } 61 | .content{ 62 | margin: 20px; 63 | height: 100%; 64 | background: #eee; 65 | padding:20px; 66 | border: #999 solid; 67 | overflow: auto; //方法一：设置父元素 68 | } 69 | 70 | .left-area{ 71 | width: 200px; 72 | border: #999 solid; 73 | padding: 20px; 74 | float: left; 75 | } 76 | img{ 77 | width: 80px; 78 | height: 80px; 79 | } 80 | .mid-area{ 81 | margin-left: 280px; 82 | margin-right: 160px; 83 | border: #999 solid; 84 | padding: 20px; 85 | line-height: 2em; 86 | 87 | } 88 | .right-area{ 89 | margin-right: 20px; 90 | float: right; 91 | width: 120px; 92 | border:#999 solid; 93 | } 94 | .team_num{ 95 | width: 80px; 96 | height: 80px; 97 | margin:20px; 98 | } 99 | /*给父元素添加一个伪类*/ 100 | /*.clearfix:after{ 101 | clear:both; 102 | display: block; 103 | visibility: hidden; 104 | height: 0; 105 | line-height: 0; 106 | content:""; 107 | }*/ -------------------------------------------------------------------------------- /task_1_5/task_1_5.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin:0; 3 | font-family: "黑体"; 4 | /*font-size: 14px;*/ 5 | } 6 | /*导航部分*/ 7 | .nav-area{ 8 | width: 100%; 9 | height: 70px; 10 | background: black; 11 | position: relative; 12 | } 13 | .nav-area .logo{ 14 | position: absolute; 15 | left: 40px; 16 | top:20px; 17 | } 18 | nav ul{ 19 | float: right; 20 | margin: 0px; 21 | padding: 0px; 22 | } 23 | nav ul li{ 24 | line-height: 70px; 25 | float: left; 26 | margin-right: 20px; 27 | } 28 | nav ul li a{ 29 | color:white; 30 | text-decoration: none; 31 | } 32 | 33 | nav ul li a:hover{ 34 | color:gray; 35 | } 36 | /*中间部分*/ 37 | .center{ 38 | background: #eee; 39 | overflow: auto; 40 | padding: 20px; 41 | } 42 | 43 | .content{ 44 | margin-right: 440px; 45 | background: white; 46 | padding: 20px; 47 | line-height: 2; 48 | margin-bottom:20px; 49 | overflow: auto; 50 | box-shadow: 2px 2px 2px #848484; 51 | } 52 | .content .text-indent{ 53 | text-indent: 2em; 54 | /*line-height: 1.5;*/ 55 | } 56 | .content ul{ 57 | list-style: none; 58 | margin-left: -10px; 59 | } 60 | .content .mypic img{ 61 | width: 100px; 62 | height: 80px; 63 | } 64 | 65 | .color_gray{ 66 | color:gray; 67 | } 68 | 69 | .mypic{ 70 | width: 100px; 71 | height: 100px; 72 | float: left; 73 | margin-left: 20px; 74 | margin-top: 20px; 75 | border: 1px solid black; 76 | padding: 10px 20px 25px 20px; 77 | text-align: center; 78 | } 79 | .picture img{ 80 | width: 80px; 81 | height: 80px; 82 | } 83 | /*表格布局*/ 84 | table{ 85 | width: 100%; 86 | margin: 0 auto; 87 | border-color: #ccc; 88 | border-collapse:collapse; 89 | } 90 | thead{ 91 | background: black; 92 | text-align: left; 93 | color:white; 94 | } 95 | tfoot{ 96 | background: #eee; 97 | } 98 | /*左边部分*/ 99 | .left-area{ 100 | width: 380px; 101 | padding: 20px; 102 | background: white; 103 | float: right; 104 | right: 20px; 105 | box-shadow: 2px 2px 2px #848484; 106 | } 107 | .aside{ 108 | padding-left: 10px; 109 | border-left: 3px #ccc solid; 110 | } 111 | 112 | form{ 113 | width: 100%; 114 | min-width: 300px; 115 | } 116 | form>div{ 117 | margin: 10px 0; 118 | } 119 | tfoot{ 120 | font-weight: bold; 121 | } 122 | ol>li{ 123 | font-weight: bold; 124 | } 125 | .bot{ 126 | vertical-align: bottom; 127 | } 128 | .input_message{ 129 | width: 30%; 130 | text-align: right; 131 | display:inline-block; 132 | margin-right: 20px; 133 | margin-top: 10px; 134 | vertical-align: top; 135 | margin-bottom: 0px; 136 | } 137 | .input_messages{ 138 | width: 30%; 139 | text-align: right; 140 | display:inline-block; 141 | margin-right: 10px; 142 | margin-top: 10px; 143 | margin-bottom: 0px; 144 | } 145 | .demand{ 146 | font-size: 13px; 147 | color: gray; 148 | margin-left: 37.5%; 149 | margin-top: 10px; 150 | } 151 | 152 | textarea{ 153 | margin-top: 10px; 154 | width: 50%; 155 | height: 100px; 156 | margin-left: -7px; 157 | } 158 | input[type='submit']{ 159 | width: 100%; 160 | height: 40px; 161 | background: #3355D0; 162 | color: #fff; 163 | cursor: pointer; 164 | border-radius: 8px; 165 | border:1px solid #3355D0; 166 | font-size:20px; 167 | } 168 | /*底部部分*/ 169 | footer{ 170 | background: black; 171 | width: 100%; 172 | height: 80px; 173 | text-align: center; 174 | color: white; 175 | font-size: 14px; 176 | padding-top:20px; 177 | } 178 | -------------------------------------------------------------------------------- /task_1_6/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 海报 6 | 7 | 8 | 9 |
10 |
11 |
12 | ife.baidu.com 13 |
14 | 2016.04 15 |
16 |
17 |
18 |
19 | 20 |
21 |
22 |
23 |
24 |

About

25 |

Technologe

26 | About technologe about technologe about technologe 27 | 700 28 | 3.2 29 | css 30 | csscssscssscsss 31 |
32 |
33 |
34 |
35 |

What

36 |

37 | 前端前端前端前端前端前端前端前端前端前 38 | 端前端前端前端前端前端前端前端前端前端 39 | 前端前端前端前端前端前端前端前端前端前 40 | 端前端前端前端前端前端前端前端前端前端 41 | 前端前端前端前端前端前端前端前端前端前 42 | 端前端前端前端前端前端前端前端前端前端 43 | 前端前端前端前端前端前端前端前端前端前 44 | 端前端前端前端前端前端前端前端前端前端 45 | 前端前端前端前端前端前端前端前端前端前 46 | 端前端前端前端前端前端前端前端前端前端 47 | 前端前端前端前端前端 48 |

49 |
50 |
51 |

When

52 |

53 | 前端前端前端前端前端前端前端前端前 54 | 端前端前端前端前端前端前端前端前端 55 | 前端前端前端前端前端前端前端前端前 56 | 端前端前端前端前端前端前端前端前端 57 | 前端前端前端前端前端前端前端前端前 58 | 端前端前端前端前端前端前端前端前端 59 | 前端前端前端前端前端前端前端前端前 60 | 端前端前端前端前端前端前端前端前端 61 | 前端前端前端前端前端前端前端前端前 62 | 端前端前端前端前端前端前端前端前端 63 | 端前端前端前端前端前端前端 64 |

65 |
66 |
67 |

How

68 |

69 | 前端前端前端前端前端前 70 | 端前端前端前端前端前端 71 | 前端前端前端前端前端前 72 | 端前端前 73 |

74 |
    75 |
  • What----40%
    • 76 |
  • What----30%
    • 77 |
  • What----30%
    • 78 |
79 |
80 |
81 |
82 |
83 | The

technologe

84 |

of front

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 |

0

132 |

133 | ONE TWO
THREE FOUR FIVE 134 |

135 |

136 | hello world hello world
hello world 137 |

138 |
139 |
140 |

141 | “ 142 | world hello world world hello world hello world hello world hello world hello world hello world hello 143 | ” 144 |

145 |
146 |
147 |
148 |
149 |
150 | 153 |
154 | 155 | 156 | -------------------------------------------------------------------------------- /task_1_5/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 百度 6 | 7 | 8 | 9 |
10 | 13 | 21 | 22 |
23 |
24 |
25 |

这里以后是一个侧栏，这是侧栏的标题

26 |
27 |
28 |
请输入邮箱地址
29 | 30 |
31 |
邮箱地址请按要求格式输入
32 |
33 |
请输入密码
34 | 35 |
36 |
37 |
请重复输入密码
38 | 39 |
40 |
密码请为6-16位英文数字
41 |
42 |
性别：
43 | 44 | 45 | 46 | 47 |
48 |
49 |
城市：
50 | 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 |

这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长很长的段落，换行了
这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这里有一个链接到http://ife.baidu.com这是一个很长的段落,这里有个粗体字这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落

86 | 这是一个好看的图片 87 |

这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落

88 |
89 |
90 |
91 |

文章一级标题

92 |

文章二级标题

93 |
94 |
95 |

96 | 文章作者 97 | 98 |

99 |
100 |

这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落,这是一个很长的段落

101 | 102 | 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 |
  1. 排名1
    2. 157 |
  2. 排名2
    3. 158 |
  3. 排名3
    4. 159 |
160 | 161 | 162 | 下面是一个表格，给表格加了一个border="1"好让你看出是一个表格 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 |
表头表头表头
表内单元格表内单元格操作
表内单元格表内单元格操作
表内单元格表内单元格操作
表内单元格表内单元格操作
总计1000
200 |
201 | 202 |
203 | 206 | 207 | -------------------------------------------------------------------------------- /task_1_6/task_1_6.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0 auto; 3 | } 4 | body{ 5 | background-color: #ccc; 6 | font-family: "黑体"; 7 | } 8 | .main{ 9 | width: 980px; 10 | height: 1386px; 11 | margin:0 auto; 12 | background-color: #fff; 13 | } 14 | .top{ 15 | width: 892px; 16 | height:61px; 17 | margin: 0 auto; 18 | background: white; 19 | font-style: 12px; 20 | border-bottom: 2px solid #938e8c; 21 | } 22 | .top_bg{ 23 | width: 110px; 24 | height: 61px; 25 | background: #f77; 26 | float: left; 27 | } 28 | .top_bg span{ 29 | float: left; 30 | margin-top: 45px; 31 | } 32 | .top_time{ 33 | float: right; 34 | margin-top: 45px; 35 | } 36 | 37 | .middle_left{ 38 | margin: 44px; 39 | } 40 | .middle_left_left{ 41 | display: inline-block; 42 | position: relative; 43 | } 44 | .middle_left_right{ 45 | float: right; 46 | width: 203px; 47 | border-top: 2px solid #cc8091; 48 | } 49 | 50 | .middle_left_right p{ 51 | font-size: 24px; 52 | font-variant: small-caps; 53 | font-family: "微软雅黑"; 54 | color:#000000; 55 | text-decoration:underline; 56 | } 57 | .cover_left{ 58 | position: absolute; 59 | top: 0px; 60 | left: 0px; 61 | width: 191px; 62 | height: 301px; 63 | background: green; 64 | opacity: 0.20; 65 | } 66 | .cover_right{ 67 | position: absolute; 68 | top:0px; 69 | right: 0px; 70 | width: 191px; 71 | height: 301px; 72 | background: red; 73 | opacity: 0.20; 74 | } 75 | .span1{ 76 | font-size: 12px; 77 | color: #676767; 78 | font-family: "楷体"; 79 | line-height: 10px; 80 | } 81 | .span2{ 82 | font-size: 116px; 83 | color: #75b86b; 84 | font-family: "微软雅黑"; 85 | /*text-decoration: underline;*/ 86 | font-style: italic; 87 | } 88 | .span3{ 89 | font-size: 55px; 90 | color:#cc8091; 91 | font-family: "微软雅黑"; 92 | } 93 | .span4{ 94 | font-size: 21px; 95 | color: #cc8091; 96 | font-family: "微软雅黑"; 97 | vertical-align: 50%; 98 | } 99 | .span5{ 100 | font-size: 12px; 101 | color:#cc8091; 102 | font-family: "微软雅黑"; 103 | vertical-align: -80%; 104 | margin-left: -35px; 105 | } 106 | .content{ 107 | 108 | } 109 | .what{ 110 | width: 230px; 111 | margin: 0px 20px 20px 44px; 112 | line-height: 2; 113 | display: inline-block; 114 | } 115 | .what h3{ 116 | font-size: 16px; 117 | color: #418c59; 118 | text-decoration: underline; 119 | font-weight: bolder; 120 | font-family: "微软雅黑"; 121 | } 122 | .what p{ 123 | font-size: 12px; 124 | color: #767777; 125 | font-family: "宋体"; 126 | line-height: 16px; 127 | } 128 | .when{ 129 | width: 210px; 130 | margin: 0px 20px 44px 0px; 131 | line-height: 2; 132 | display: inline-block; 133 | } 134 | .when h3{ 135 | font-size: 16px; 136 | color: #d2994f; 137 | text-decoration: underline; 138 | font-weight: bolder; 139 | font-family: "微软雅黑"; 140 | /*line-height: 16px;*/ 141 | } 142 | .when p{ 143 | font-size: 12px; 144 | color: #231815; 145 | font-family: "微软雅黑"; 146 | line-height: 16px; 147 | } 148 | .how{ 149 | width: 140px; 150 | display: inline-block; 151 | line-height: 2; 152 | } 153 | .how h3{ 154 | font-size: 16px; 155 | color: #cc7680; 156 | font-weight: bolder; 157 | text-decoration: underline; 158 | } 159 | .how p{ 160 | padding-bottom: 20px; 161 | } 162 | .how p,.how ul{ 163 | font-size: 12px; 164 | color: #231815; 165 | font-family: "微软雅黑"; 166 | line-height: 16px; 167 | margin-bottom: 45px; 168 | } 169 | .how ul { 170 | list-style: none; 171 | margin-left: -30px; 172 | 173 | } 174 | .how span{ 175 | color:#cd4a48; 176 | } 177 | .bottom{ 178 | width: 892px; 179 | margin: 0px 44px 0px 44px; 180 | overflow: auto; 181 | } 182 | .bottom_left{ 183 | width: 415px; 184 | float: left; 185 | } 186 | .bottom h1{ 187 | font-size: 42px; 188 | font-family: "黑体"; 189 | line-height: 16px; 190 | font-weight: bolder; 191 | color:#11456b; 192 | } 193 | .bottom h2{ 194 | border-bottom:solid 2px ; 195 | font-size:33px; 196 | color:#11456b; 197 | font-family: "黑体 "; 198 | font-weight: bolder; 199 | line-height: 2em; 200 | } 201 | .bottom img{ 202 | float: right; 203 | margin: 20px 0px 20px 20px; 204 | } 205 | span.the{ 206 | font-size: 72px; 207 | color:#f5e327; 208 | font-family: "黑体"; 209 | font-weight: bolder; 210 | font-style: italic; 211 | } 212 | p.p1{ 213 | font-size: 42px; 214 | color:#11456b; 215 | font-family: "黑体"; 216 | font-weight: bolder; 217 | text-transform: uppercase; 218 | } 219 | .text{ 220 | margin-top: 25px; 221 | } 222 | p.bottom_text:first-letter{ 223 | float: left; 224 | font-size: 70px; 225 | color:#f5e327; 226 | font-family: "微软雅黑"; 227 | line-height: 70px; 228 | margin:0px 10px 10px 0px; 229 | } 230 | p[class^="bottom_text"]{ 231 | font-size:12px; 232 | color: #767777; 233 | font-family: "宋体"; 234 | line-height: 16px; 235 | /*text-indent: 2em;*/ 236 | } 237 | 238 | .bottom_right{ 239 | float: right; 240 | width: 458px; 241 | height: 637px; 242 | } 243 | .bottom_right_pic{ 244 | width: 458px; 245 | height: 275px; 246 | position: relative; 247 | } 248 | .bottom_right_pic .bottom_bg{ 249 | width: 458px; 250 | height: 61px; 251 | background: #000; 252 | opacity: 0.6; 253 | position: absolute; 254 | bottom: 0px; 255 | } 256 | .bottom_right_pic .bottom_bgg{ 257 | margin-left: 40px; 258 | margin-top: 10px; 259 | border-left: solid 3px #72b16a; 260 | } 261 | .bottom_right_pic .bspan1{ 262 | font-size: 26px; 263 | color:#ffffff; 264 | font-family: "微软雅黑"; 265 | padding-left: 20px; 266 | } 267 | .bottom_right_pic .bspan2{ 268 | font-size: 12px; 269 | color:#72b16a; 270 | font-family: "微软雅黑"; 271 | font-style:italic; 272 | } 273 | 274 | .bottom_right_b{ 275 | width: 458px; 276 | height: 318px; 277 | background: #eeeed6; 278 | margin-top: 18px; 279 | position: relative; 280 | } 281 | .bottom_right_b ul{ 282 | list-style-image: url("triangle.png"); 283 | } 284 | .bottom_right_b ul li{ 285 | font-size: 16px; 286 | color:#5a5b5b; 287 | text-align: left; 288 | line-height: 20px; 289 | font-family: "宋体"; 290 | /*margin-left: 50px;*/ 291 | padding-top:20px; 292 | } 293 | .bb_left{ 294 | width: 260px; 295 | height: 160px; 296 | position: absolute; 297 | left:0px; 298 | bottom:0px; 299 | background: #d45d5c; 300 | } 301 | .bb_right{ 302 | font-size: 14px; 303 | color: #5a5b5b; 304 | font-family: "黑体"; 305 | font-style: oblique; 306 | line-height: 16px; 307 | text-indent: 3em; 308 | } 309 | 310 | .zero{ 311 | float: left; 312 | font-size: 110px; 313 | color: #fff; 314 | font-family: "微软雅黑"; 315 | border-right: 2px solid #fff; 316 | height: 86px; 317 | line-height: 86px; 318 | margin: 37px 10px; 319 | } 320 | .nums{ 321 | margin-top: 37px; 322 | font-size: 21px; 323 | font-family: "黑体"; 324 | font-style: oblique; 325 | line-height: 24px; 326 | color: #fff; 327 | } 328 | .hello{ 329 | font-size: 12px; 330 | font-family: "黑体"; 331 | line-height: 10px; 332 | color: #fff; 333 | margin: 10px; 334 | } 335 | .bb_right{ 336 | font-size: 14px; 337 | color: #5a5b5b; 338 | font-family: "黑体"; 339 | font-style: oblique; 340 | line-height: 16px; 341 | text-indent: 3em; 342 | position: absolute; 343 | right: 0px; 344 | bottom: -25px; 345 | width: 178px; 346 | height: 160px; 347 | margin-right: 10px; 348 | } 349 | .bb_right span{ 350 | font-size: 72px; 351 | color: #d45d5c; 352 | font-family: "黑体"; 353 | line-height: 30px; 354 | } 355 | .pu_left{ 356 | position: absolute; 357 | bottom: 120px; 358 | right: 150px; 359 | font-style: normal; 360 | } 361 | .pu_right{ 362 | position: absolute; 363 | bottom: 45px; 364 | right: 0px; 365 | font-style: normal; 366 | } 367 | footer{ 368 | width: 892px; 369 | border-top: 1px solid #938e8c; 370 | text-align: right; 371 | } --------------------------------------------------------------------------------