Hike News

新人任务

1. css 页面居中随意拉伸布局(什么鬼···

class="haha">
1
2
3
<div class="sector1"></div>
<div class="sector2"></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
background-color: grey;
width:400px;
height:200px;
position:relative;
top:50%;
left:50%;
margin-top:-100px;
margin-left:-200px;
}
.sector1{
background-color:yellow;
border-radius: 0 0 50px 0;
height:50px;
width:50px;
}
.sector2{
background-color:yellow;
border-radius:50px 0 0 0 ;
height:50px;
width:50px;
position:absolute;
bottom:0;
right:0;
}

2.单行文本省略···

1
2
3
4
<div class="headline">
<div class="head">标题文字标题文字标题文字标题文字标题文字标题文字哈哈哈哈哈哈哈哈哈标题文字</div>
</div>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
line-height:25px;
}
.head{
font-size:16px;
font-family:PingFang SC;
color:black;
width:200px;
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;
}

3. 浮动及其清除

class="parent clearfix">
1
2
3
<div class="side">侧栏</div>
<div class="main">主栏</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
width:810px;
margin:0 auto;
font-size:40px;
text-align:center;
line-height:200px;
color:white;
background:black;
}
.side {
width:200px;
margin-right:10px ;
float:left;
background-color:red;
}
.main {
width:600px;
float:left;
margin:0 auto;
background-color:blue;
}
.clearfix:after{
clear:both;
display:block;
content:'';
}

4.信息集锦?调查问卷模式

name="description" content="wwy 的task2作业">
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
<form action="/login" method="post">
<div>
<label for=“headportrait”>头像</label>
<input type="file" name=“headportrait”>
</div>
<div>
<label for="nickname">昵称</label>
<input class="txt" type="text" name="nickname">
</div>
<div>
<label for="education">学历</label>
<select id="education">
<option value="0" selected>大专</option>
<option value="1">本科</option>
</select>
</div>
<div>
<label for="gender">性别</label>
<input class="rd" type="radio" name="gender" id="rd_0" value="male" checked>
<label for="rd_0">男</label>
<input class="rd" type="radio" name="gender" id="rd_1" value="female">
<label for="rd_1">女</label>
</div>
<div>
<label for="hobbies">爱好</label>
<input class="cb" type="checkbox" name="hobbies" id="cb_0" value="movie" checked>
<label for="cb_0">电影</label>
<input class="cb" type="checkbox" name="hobbies" id="cb_1" value="photography">
<label for="cb_1">摄影</label>
<input class="cb" type="checkbox" name="hobbies" id="cb_2" value="music">
<label for="cb_2">音乐</label>
<input class="cb" type="checkbox" name="hobbies" id="cb_3" value="read" checked>
<label for="cb_3">阅读</label>
</div>
<div>
<label for="signature">签名</label>
<textarea name="signature" rows="4"></textarea>
</div>
<div>
<button type="Preservation">保存</button>
</div>
</form>

5.超链接及其跳转方式x2

1
2
3
4
5
6
7
8
9
10
<html>
<body>
<div id="main1"> <p><a href="http://yuedu.163.com/source/5e34d573e918435581c052f5a5e31f30_4"target="_blank" title="当我足够好,才会遇见你">1.当我足够好,才会遇见你</a></p></div>
<div id="main2"> <p><a href="http://yuedu.163.com/search.do?key=%E7%9A%AE%E5%9B%8A&type=4"target="_blank" title="皮囊">2.皮囊</a></p></div>
<div id="main3" ><p><a href="http://yuedu.163.com/search.do?key=%E6%9D%8E%E5%85%89%E8%80%80%E8%AE%BA%E4%B8%AD%E5%9B%BD%E4%B8%8E%E4%B8%96%E7%95%8C&type=4"target="_blank" title="李光耀论中国与世界">3.李光耀论中国与世界</a></p></div>
<div id="main4"><p><a href="http://yuedu.163.com/search.do?key=%E4%B9%96%EF%BC%8C%E6%91%B8%E6%91%B8%E5%A4%B4&type=4"target="_blank" title="乖,摸摸头">4.乖,摸摸头</a></p></div>
<div id="main5"><p><a href="http://yuedu.163.com/search.do?key=%E7%94%B7%E5%A5%B3%E5%86%85%E5%8F%82&type=4"target="_blank" title="男女内参">5.男女内参</a></p></div>
</body>
</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
max-width:600px;
margin:10 auto;
padding:2px;
height:40px;
background-color:66ccff;
}
#main2{
max-width:600px;
margin:10 auto;
padding:2px;
height:40px;
background-color:6699ff;
}
#main3{
max-width:600px;
margin:10 auto;
padding:2px;
height:40px;
background-color:6663ff;
}
#main4{
max-width:600px;
margin:10 auto;
padding:2px;
height:40px;
background-color:6633ff;
}
#main5{
max-width:600px;
margin:10 auto;
padding:2px;
height:40px;
background-color:6633cc;
}

6.HTML实现表格

border="1" >
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
<caption>运费详情</caption>
<thead>
<tr>
<th>区域</th><th>寄达地</th><th>首重(元/kg)</th><th>续重(元/kg)</th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="2">一区</th>
<td>浙江 上海 江苏</td>
<td>6</td>
<td>1</td>
</tr>
<tr>
<td>江西 安徽</td>
<td>7</td>
<td>1</td>
</tr>
<tr>
<th>二区</th>
<td>黑龙江 吉林 云南</td>
<td>10</td>
<td>6</td>
</tr>
<tr>
<th>三区</th>
<td>新疆 西藏</td>
<td>15</td>
<td>10</td>
</tr>
</tbody>
</table>