作业1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>作业1</title>
<style>
*{
padding: 0;
margin: 0;
}
div{
width: 1500px;
height: 50px;
text-align: center;
background-color: rgb(69, 51, 51);
border-radius: 15px;
}
ul{
list-style: none;
}
li{
width: 80px;
text-align: center;
display: inline-block;
}
a{
padding: 10px 10px;
height: 30px;
line-height: 30px;
color: white;
text-decoration: none;
display: block;
text-shadow: 5px 7px 5px gray;
}
a:hover{
background-color: rgb(216, 97, 97);
}
</style>
</head>
<body>
<div>
<ul>
<li><a href="https://www.baidu.com">游戏1</a></li>
<li><a href="https://music.163.com">游戏2</a></li>
<li><a href="https://tb.alicdn.com/">游戏3</a></li>
<li><a href="https://www.jd.com">游戏4</a></li>
<li><a href="https://www.tmall.com">游戏5</a></li>
<li><a href="https://v.qq.com">游戏6</a></li>
<li><a href="https://hyrz.qq.com">游戏7</a></li>
<li><a href="https://gp.qq.com">游戏8</a></li>
<li><a href="https://speed.qq.com">游戏9</a></li>
</ul>
</div>
</body>
</html>
作业2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>作业2</title>
<style>
*{
padding: 0;
margin: 0;
}
.O{
width: 281px;
height: 80px;
border: 1px;
float: left;
margin-top: 10px;
margin-left: 10px;
}
.A{
width: 1500px;
height: 50px;
text-align: center;
}
ul{
list-style: none;
}
.A2{
width: 100px;
text-align: center;
display: inline-block;
}
.A21{
padding: 13px 10px;
height: 30px;
line-height: 30px;
color: #9b9b9b;
text-decoration: none;
display: block;
}
.A21:hover{
background-color: rgb(214, 196, 196);
}
.B{
float: left;
}
.B2{
list-style-type: none;
width: 234px;
height: 366px;
border: 1px solid #f2f2f2;
margin-top: 50px;
margin: 0px;
display: inline-block;
line-height: 1;
padding: 22px 20px 0;
position: relative;
box-sizing: border-box;
}
.B2:hover{
border-color: red;
}
.B3{
text-decoration: none;
}
.B31{
font-size: 14px;
color: #9b9b9b;
line-height: 20px;
padding-top: 10px;
}
.B32{
font-size: 18px;
color: #fd3f31;
line-height: 25px;
}
.B33{
font-size: 12px;
color: #9b9b9b;
line-height: 17px;
}
.B34{
border-top: 1px solid #f2f2f2;
position: relative;
}
.B341{
position: absolute;
top:9px;
right: 0;
color: #9b9b9b;
font-size: 12px;
}
.C{
width: 1190px;
height: 42.333px;
}
.C1{
height: 41px;
line-height: 41px;
background: #f5f5f5;
border: 1px solid #e9e9e9;
overflow: hidden;
padding: 0 0 0 19px;
}
dt{
font-size: 12px;
color: #747474;
margin: 0 -2px 0 0;
float: left;
}
dd{
float: left;
font-size: 12px;
}
.C5{
border-right: 1px solid #666;
color: #333;
padding: 0 13px 0 12px;
}
</style>
</head>
<body>
<div class="A">
<img class="O" src="https://img.alicdn.com/tfs/TB1R5fsgyDsXe8jSZR0XXXK6FXa-281-80.jpg">
<ul class="A1">
<li class="A2"><a class="A21" href="https://www.etao.com/cjfl/flash.htm?spm=a2e0b.20350158.1998559106.1.67ed468auLmudt&pid=mm_0_0_0">一淘限时抢</a></li>
<li class="A2"><a class="A21" href="https://uland.taobao.com/sem/tbsearch?refpid=mm_26632258_3504122_32538762&keyword=%E7%AC%94%E8%A2%8B&clk1=0a026a0daa0de7d0dccd3e2a4a91bf8d&upsId=0a026a0daa0de7d0dccd3e2a4a91bf8d">笔袋</a></li>
<li class="A2"><a class="A21" href="https://uland.taobao.com/sem/tbsearch?refpid=mm_26632258_3504122_32538762&keyword=%E6%89%8B%E6%9C%BA&clk1=0a026a0daa0de7d0dccd3e2a4a91bf8d&upsId=0a026a0daa0de7d0dccd3e2a4a91bf8d">手机</a></li>
<li class="A2"><a class="A21" href="https://uland.taobao.com/sem/tbsearch?refpid=mm_26632258_3504122_32538762&keyword=%E6%B4%97%E8%A1%A3%E6%9C%BA&clk1=0a026a0daa0de7d0dccd3e2a4a91bf8d&upsId=0a026a0daa0de7d0dccd3e2a4a91bf8d">洗衣机</a></li>
<li class="A2"><a class="A21" href="https://uland.taobao.com/sem/tbsearch?refpid=mm_26632258_3504122_32538762&keyword=%E7%89%99%E8%86%8F&clk1=0a026a0daa0de7d0dccd3e2a4a91bf8d&upsId=0a026a0daa0de7d0dccd3e2a4a91bf8d">牙膏</a></li>
<li class="A2"><a class="A21" href="https://uland.taobao.com/sem/tbsearch?refpid=mm_26632258_3504122_32538762&keyword=%E8%BF%90%E5%8A%A8%E9%9E%8B&clk1=0a026a0daa0de7d0dccd3e2a4a91bf8d&upsId=0a026a0daa0de7d0dccd3e2a4a91bf8d">运动鞋</a></li>
<li class="A2"><a class="A21" href="https://uland.taobao.com/sem/tbsearch?refpid=mm_26632258_3504122_32538762&keyword=%E7%94%B5%E5%8A%A8%E8%BD%A6&clk1=0a026a0daa0de7d0dccd3e2a4a91bf8d&upsId=0a026a0daa0de7d0dccd3e2a4a91bf8d">电动车</a></li>
<li class="A2"><a class="A21" href="https://uland.taobao.com/sem/tbsearch?refpid=mm_26632258_3504122_32538762&keyword=%E5%8D%AB%E8%A1%A3&clk1=0a026a0daa0de7d0dccd3e2a4a91bf8d&upsId=0a026a0daa0de7d0dccd3e2a4a91bf8d">卫衣</a></li>
<li class="A2"><a class="A21" href="https://uland.taobao.com/sem/tbsearch?refpid=mm_26632258_3504122_32538762&keyword=%E5%A5%B3%E5%A4%96%E5%A5%97&clk1=0a026a0daa0de7d0dccd3e2a4a91bf8d&upsId=0a026a0daa0de7d0dccd3e2a4a91bf8d">女外套</a></li>
<li class="A2"><a class="A21" href="https://uland.taobao.com/sem/tbsearch?refpid=mm_26632258_3504122_32538762&keyword=%E8%BF%9E%E8%A1%A3%E8%A3%99&clk1=0a026a0daa0de7d0dccd3e2a4a91bf8d&upsId=0a026a0daa0de7d0dccd3e2a4a91bf8d">连衣裙</a></li>
<li class="A2"><a class="A21" href="https://uland.taobao.com/sem/tbsearch?spm=a2e0b.20350158.1998559106.11.67ed468auLmudt&refpid=mm_26632258_3504122_32538762&keyword=%E9%9B%B6%E9%A3%9F&clk1=0a026a0daa0de7d0dccd3e2a4a91bf8d&upsId=0a026a0daa0de7d0dccd3e2a4a91bf8d&pid=mm_26632258_3504122_32538762&union_lens=recoveryid%3A201_33.44.185.121_3522030_1717308852577%3Bprepvid%3A201_33.44.185.121_3522030_1717308852577">零食</a></li>
</ul>
</div>
<div class="B">
<ul class="B1">
<li class="B2">
<a class="B3" href="https://item.taobao.com/item.htm?id=653379957867&ali_refid=a3_430673_1006:1121267516:N:emtiAWsF8%2Bzhhxaiwzc0Aw%3D%3D:c24a714d2caa46b0223e777fe267fe7f&ali_trackid=199_c24a714d2caa46b0223e777fe267fe7f&spm=a2e0b.20350158.31919782.4&bxsign=tanEL5DNXSLP_ugqaXc4j1Hc6meBg9p1esEUpZAHz8T0Ns6EnIRMPn44AC2Uqo6u3d_XCwTLG0SbyIGoT2hx2RClQ4WULRYvDjYjPzetsAyTOA">
<img src="https://gw.alicdn.com/imgextra/i2/1752264181/O1CN014cmMD41gkweQkbUNI_!!1752264181.jpg_Q75.jpg_.webp" width="194px" height="198px">
<div class="B31"><span>高级感西装套装女阔腿裤2024春季新款韩版高端英伦风休闲格子西服</span></div>
<div class="B32"><span>¥768</span></div>
<div class="B33"><span>冷子璇原创女装</span></div>
<div class="B34"><div class="B341"><span>月销 99w+</span></div></div>
</a>
</li>
<li class="B2">
<a class="B3" href="https://item.taobao.com/item.htm?id=653379957867&ali_refid=a3_430673_1006:1121267516:N:emtiAWsF8%2Bzhhxaiwzc0Aw%3D%3D:c24a714d2caa46b0223e777fe267fe7f&ali_trackid=199_c24a714d2caa46b0223e777fe267fe7f&spm=a2e0b.20350158.31919782.4&bxsign=tanEL5DNXSLP_ugqaXc4j1Hc6meBg9p1esEUpZAHz8T0Ns6EnIRMPn44AC2Uqo6u3d_XCwTLG0SbyIGoT2hx2RClQ4WULRYvDjYjPzetsAyTOA">
<img src="https://gw.alicdn.com/imgextra/i2/1752264181/O1CN014cmMD41gkweQkbUNI_!!1752264181.jpg_Q75.jpg_.webp" width="194px" height="198px">
<div class="B31"><span>高级感西装套装女阔腿裤2024春季新款韩版高端英伦风休闲格子西服</span></div>
<div class="B32"><span>¥768</span></div>
<div class="B33"><span>冷子璇原创女装</span></div>
<div class="B34"><div class="B341"><span>月销 99w+</span></div></div>
</a>
</li>
<li class="B2">
<a class="B3" href="https://item.taobao.com/item.htm?id=653379957867&ali_refid=a3_430673_1006:1121267516:N:emtiAWsF8%2Bzhhxaiwzc0Aw%3D%3D:c24a714d2caa46b0223e777fe267fe7f&ali_trackid=199_c24a714d2caa46b0223e777fe267fe7f&spm=a2e0b.20350158.31919782.4&bxsign=tanEL5DNXSLP_ugqaXc4j1Hc6meBg9p1esEUpZAHz8T0Ns6EnIRMPn44AC2Uqo6u3d_XCwTLG0SbyIGoT2hx2RClQ4WULRYvDjYjPzetsAyTOA">
<img src="https://gw.alicdn.com/imgextra/i2/1752264181/O1CN014cmMD41gkweQkbUNI_!!1752264181.jpg_Q75.jpg_.webp" width="194px" height="198px">
<div class="B31"><span>高级感西装套装女阔腿裤2024春季新款韩版高端英伦风休闲格子西服</span></div>
<div class="B32"><span>¥768</span></div>
<div class="B33"><span>冷子璇原创女装</span></div>
<div class="B34"><div class="B341"><span>月销 99w+</span></div></div>
</a>
</li>
<li class="B2">
<a class="B3" href="https://item.taobao.com/item.htm?id=653379957867&ali_refid=a3_430673_1006:1121267516:N:emtiAWsF8%2Bzhhxaiwzc0Aw%3D%3D:c24a714d2caa46b0223e777fe267fe7f&ali_trackid=199_c24a714d2caa46b0223e777fe267fe7f&spm=a2e0b.20350158.31919782.4&bxsign=tanEL5DNXSLP_ugqaXc4j1Hc6meBg9p1esEUpZAHz8T0Ns6EnIRMPn44AC2Uqo6u3d_XCwTLG0SbyIGoT2hx2RClQ4WULRYvDjYjPzetsAyTOA">
<img src="https://gw.alicdn.com/imgextra/i2/1752264181/O1CN014cmMD41gkweQkbUNI_!!1752264181.jpg_Q75.jpg_.webp" width="194px" height="198px">
<div class="B31"><span>高级感西装套装女阔腿裤2024春季新款韩版高端英伦风休闲格子西服</span></div>
<div class="B32"><span>¥768</span></div>
<div class="B33"><span>冷子璇原创女装</span></div>
<div class="B34"><div class="B341"><span>月销 99w+</span></div></div>
</a>
</li>
<li class="B2">
<a class="B3" href="https://item.taobao.com/item.htm?id=653379957867&ali_refid=a3_430673_1006:1121267516:N:emtiAWsF8%2Bzhhxaiwzc0Aw%3D%3D:c24a714d2caa46b0223e777fe267fe7f&ali_trackid=199_c24a714d2caa46b0223e777fe267fe7f&spm=a2e0b.20350158.31919782.4&bxsign=tanEL5DNXSLP_ugqaXc4j1Hc6meBg9p1esEUpZAHz8T0Ns6EnIRMPn44AC2Uqo6u3d_XCwTLG0SbyIGoT2hx2RClQ4WULRYvDjYjPzetsAyTOA">
<img src="https://gw.alicdn.com/imgextra/i2/1752264181/O1CN014cmMD41gkweQkbUNI_!!1752264181.jpg_Q75.jpg_.webp" width="194px" height="198px">
<div class="B31"><span>高级感西装套装女阔腿裤2024春季新款韩版高端英伦风休闲格子西服</span></div>
<div class="B32"><span>¥768</span></div>
<div class="B33"><span>冷子璇原创女装</span></div>
<div class="B34"><div class="B341"><span>月销 99w+</span></div></div>
</a>
</li>
<li class="B2">
<a class="B3" href="https://item.taobao.com/item.htm?id=653379957867&ali_refid=a3_430673_1006:1121267516:N:emtiAWsF8%2Bzhhxaiwzc0Aw%3D%3D:c24a714d2caa46b0223e777fe267fe7f&ali_trackid=199_c24a714d2caa46b0223e777fe267fe7f&spm=a2e0b.20350158.31919782.4&bxsign=tanEL5DNXSLP_ugqaXc4j1Hc6meBg9p1esEUpZAHz8T0Ns6EnIRMPn44AC2Uqo6u3d_XCwTLG0SbyIGoT2hx2RClQ4WULRYvDjYjPzetsAyTOA">
<img src="https://gw.alicdn.com/imgextra/i2/1752264181/O1CN014cmMD41gkweQkbUNI_!!1752264181.jpg_Q75.jpg_.webp" width="194px" height="198px">
<div class="B31"><span>高级感西装套装女阔腿裤2024春季新款韩版高端英伦风休闲格子西服</span></div>
<div class="B32"><span>¥768</span></div>
<div class="B33"><span>冷子璇原创女装</span></div>
<div class="B34"><div class="B341"><span>月销 99w+</span></div></div>
</a>
</li>
<li class="B2">
<a class="B3" href="https://item.taobao.com/item.htm?id=653379957867&ali_refid=a3_430673_1006:1121267516:N:emtiAWsF8%2Bzhhxaiwzc0Aw%3D%3D:c24a714d2caa46b0223e777fe267fe7f&ali_trackid=199_c24a714d2caa46b0223e777fe267fe7f&spm=a2e0b.20350158.31919782.4&bxsign=tanEL5DNXSLP_ugqaXc4j1Hc6meBg9p1esEUpZAHz8T0Ns6EnIRMPn44AC2Uqo6u3d_XCwTLG0SbyIGoT2hx2RClQ4WULRYvDjYjPzetsAyTOA">
<img src="https://gw.alicdn.com/imgextra/i2/1752264181/O1CN014cmMD41gkweQkbUNI_!!1752264181.jpg_Q75.jpg_.webp" width="194px" height="198px">
<div class="B31"><span>高级感西装套装女阔腿裤2024春季新款韩版高端英伦风休闲格子西服</span></div>
<div class="B32"><span>¥768</span></div>
<div class="B33"><span>冷子璇原创女装</span></div>
<div class="B34"><div class="B341"><span>月销 99w+</span></div></div>
</a>
</li>
<li class="B2">
<a class="B3" href="https://item.taobao.com/item.htm?id=653379957867&ali_refid=a3_430673_1006:1121267516:N:emtiAWsF8%2Bzhhxaiwzc0Aw%3D%3D:c24a714d2caa46b0223e777fe267fe7f&ali_trackid=199_c24a714d2caa46b0223e777fe267fe7f&spm=a2e0b.20350158.31919782.4&bxsign=tanEL5DNXSLP_ugqaXc4j1Hc6meBg9p1esEUpZAHz8T0Ns6EnIRMPn44AC2Uqo6u3d_XCwTLG0SbyIGoT2hx2RClQ4WULRYvDjYjPzetsAyTOA">
<img src="https://gw.alicdn.com/imgextra/i2/1752264181/O1CN014cmMD41gkweQkbUNI_!!1752264181.jpg_Q75.jpg_.webp" width="194px" height="198px">
<div class="B31"><span>高级感西装套装女阔腿裤2024春季新款韩版高端英伦风休闲格子西服</span></div>
<div class="B32"><span>¥768</span></div>
<div class="B33"><span>冷子璇原创女装</span></div>
<div class="B34"><div class="B341"><span>月销 99w+</span></div></div>
</a>
</li>
<li class="B2">
<a class="B3" href="https://item.taobao.com/item.htm?id=653379957867&ali_refid=a3_430673_1006:1121267516:N:emtiAWsF8%2Bzhhxaiwzc0Aw%3D%3D:c24a714d2caa46b0223e777fe267fe7f&ali_trackid=199_c24a714d2caa46b0223e777fe267fe7f&spm=a2e0b.20350158.31919782.4&bxsign=tanEL5DNXSLP_ugqaXc4j1Hc6meBg9p1esEUpZAHz8T0Ns6EnIRMPn44AC2Uqo6u3d_XCwTLG0SbyIGoT2hx2RClQ4WULRYvDjYjPzetsAyTOA">
<img src="https://gw.alicdn.com/imgextra/i2/1752264181/O1CN014cmMD41gkweQkbUNI_!!1752264181.jpg_Q75.jpg_.webp" width="194px" height="198px">
<div class="B31"><span>高级感西装套装女阔腿裤2024春季新款韩版高端英伦风休闲格子西服</span></div>
<div class="B32"><span>¥768</span></div>
<div class="B33"><span>冷子璇原创女装</span></div>
<div class="B34"><div class="B341"><span>月销 99w+</span></div></div>
</a>
</li>
<li class="B2">
<a class="B3" href="https://item.taobao.com/item.htm?id=653379957867&ali_refid=a3_430673_1006:1121267516:N:emtiAWsF8%2Bzhhxaiwzc0Aw%3D%3D:c24a714d2caa46b0223e777fe267fe7f&ali_trackid=199_c24a714d2caa46b0223e777fe267fe7f&spm=a2e0b.20350158.31919782.4&bxsign=tanEL5DNXSLP_ugqaXc4j1Hc6meBg9p1esEUpZAHz8T0Ns6EnIRMPn44AC2Uqo6u3d_XCwTLG0SbyIGoT2hx2RClQ4WULRYvDjYjPzetsAyTOA">
<img src="https://gw.alicdn.com/imgextra/i2/1752264181/O1CN014cmMD41gkweQkbUNI_!!1752264181.jpg_Q75.jpg_.webp" width="194px" height="198px">
<div class="B31"><span>高级感西装套装女阔腿裤2024春季新款韩版高端英伦风休闲格子西服</span></div>
<div class="B32"><span>¥768</span></div>
<div class="B33"><span>冷子璇原创女装</span></div>
<div class="B34"><div class="B341"><span>月销 99w+</span></div></div>
</a>
</li>
<li class="B2">
<a class="B3" href="https://item.taobao.com/item.htm?id=653379957867&ali_refid=a3_430673_1006:1121267516:N:emtiAWsF8%2Bzhhxaiwzc0Aw%3D%3D:c24a714d2caa46b0223e777fe267fe7f&ali_trackid=199_c24a714d2caa46b0223e777fe267fe7f&spm=a2e0b.20350158.31919782.4&bxsign=tanEL5DNXSLP_ugqaXc4j1Hc6meBg9p1esEUpZAHz8T0Ns6EnIRMPn44AC2Uqo6u3d_XCwTLG0SbyIGoT2hx2RClQ4WULRYvDjYjPzetsAyTOA">
<img src="https://gw.alicdn.com/imgextra/i2/1752264181/O1CN014cmMD41gkweQkbUNI_!!1752264181.jpg_Q75.jpg_.webp" width="194px" height="198px">
<div class="B31"><span>高级感西装套装女阔腿裤2024春季新款韩版高端英伦风休闲格子西服</span></div>
<div class="B32"><span>¥768</span></div>
<div class="B33"><span>冷子璇原创女装</span></div>
<div class="B34"><div class="B341"><span>月销 99w+</span></div></div>
</a>
</li>
<li class="B2">
<a class="B3" href="https://item.taobao.com/item.htm?id=653379957867&ali_refid=a3_430673_1006:1121267516:N:emtiAWsF8%2Bzhhxaiwzc0Aw%3D%3D:c24a714d2caa46b0223e777fe267fe7f&ali_trackid=199_c24a714d2caa46b0223e777fe267fe7f&spm=a2e0b.20350158.31919782.4&bxsign=tanEL5DNXSLP_ugqaXc4j1Hc6meBg9p1esEUpZAHz8T0Ns6EnIRMPn44AC2Uqo6u3d_XCwTLG0SbyIGoT2hx2RClQ4WULRYvDjYjPzetsAyTOA">
<img src="https://gw.alicdn.com/imgextra/i2/1752264181/O1CN014cmMD41gkweQkbUNI_!!1752264181.jpg_Q75.jpg_.webp" width="194px" height="198px">
<div class="B31"><span>高级感西装套装女阔腿裤2024春季新款韩版高端英伦风休闲格子西服</span></div>
<div class="B32"><span>¥768</span></div>
<div class="B33"><span>冷子璇原创女装</span></div>
<div class="B34"><div class="B341"><span>月销 99w+</span></div></div>
</a>
</li>
<li class="B2">
<a class="B3" href="https://item.taobao.com/item.htm?id=653379957867&ali_refid=a3_430673_1006:1121267516:N:emtiAWsF8%2Bzhhxaiwzc0Aw%3D%3D:c24a714d2caa46b0223e777fe267fe7f&ali_trackid=199_c24a714d2caa46b0223e777fe267fe7f&spm=a2e0b.20350158.31919782.4&bxsign=tanEL5DNXSLP_ugqaXc4j1Hc6meBg9p1esEUpZAHz8T0Ns6EnIRMPn44AC2Uqo6u3d_XCwTLG0SbyIGoT2hx2RClQ4WULRYvDjYjPzetsAyTOA">
<img src="https://gw.alicdn.com/imgextra/i2/1752264181/O1CN014cmMD41gkweQkbUNI_!!1752264181.jpg_Q75.jpg_.webp" width="194px" height="198px">
<div class="B31"><span>高级感西装套装女阔腿裤2024春季新款韩版高端英伦风休闲格子西服</span></div>
<div class="B32"><span>¥768</span></div>
<div class="B33"><span>冷子璇原创女装</span></div>
<div class="B34"><div class="B341"><span>月销 99w+</span></div></div>
</a>
</li>
<li class="B2">
<a class="B3" href="https://item.taobao.com/item.htm?id=653379957867&ali_refid=a3_430673_1006:1121267516:N:emtiAWsF8%2Bzhhxaiwzc0Aw%3D%3D:c24a714d2caa46b0223e777fe267fe7f&ali_trackid=199_c24a714d2caa46b0223e777fe267fe7f&spm=a2e0b.20350158.31919782.4&bxsign=tanEL5DNXSLP_ugqaXc4j1Hc6meBg9p1esEUpZAHz8T0Ns6EnIRMPn44AC2Uqo6u3d_XCwTLG0SbyIGoT2hx2RClQ4WULRYvDjYjPzetsAyTOA">
<img src="https://gw.alicdn.com/imgextra/i2/1752264181/O1CN014cmMD41gkweQkbUNI_!!1752264181.jpg_Q75.jpg_.webp" width="194px" height="198px">
<div class="B31"><span>高级感西装套装女阔腿裤2024春季新款韩版高端英伦风休闲格子西服</span></div>
<div class="B32"><span>¥768</span></div>
<div class="B33"><span>冷子璇原创女装</span></div>
<div class="B34"><div class="B341"><span>月销 99w+</span></div></div>
</a>
</li>
</ul>
</div>
<div class="C">
<dl class="C1">
<dt>您是不是要找:</dt>
<dd>
<span class="C5">vivo</span>
<span class="C5">睡衣</span>
<span class="C5">连衣裙</span>
<span class="C5">女装</span>
<span class="C5">新款外套</span>
<span class="C5">粉底</span>
<span class="C5">电动车</span>
<span class="C5">双肩包</span>
<span class="C5">新款包包</span>
<span class="C5">水杯</span>
</dd>
</dl>
</div>
</body>
</html>
作业3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>作业3</title>
<style>
*{
margin: 0;
padding: 0;
}
.A{
height: 90px;
}
.A1{
width: 350px;
height: 80px;
margin-top: 40px;
}
.B{
height: 560px;
width: 1300px;
}
.B1{
float: left;
}
.B3{
font-size: 25px;
}
.C{
font-size: 25px;
color: white;
background: #009cff;
width: 300px;
border-radius: 50px;
}
</style>
</head>
<body>
<div class="A">
<div class="A1"><img src="https://s2.yinghuaonline.com/upfiles/WUzL77476TPMufiIULIK.png"></div>
<div class="B">
<div class="B1">
<img src="https://zswxy.yinghuaonline.com/static/login/images/loginnew-img.jpg" width="550px" height="460px">
</div>
<div class="B3">
<table width="550px" height="460px" cellspacing="0px" cellpadding="0px"
<tr>
<td colspan="2" align="center"><strong>学生登录</strong></td>
<!-- <td></td> -->
</tr>
<tr>
<td align="center">用户名</td>
<td><input type="text" placeholder="请输入您的学号" ></td>
</tr>
<tr>
<td align="center">密码</td>
<td><input type="password"></td>
</tr>
<tr>
<td align="center" colspan="2"><button type="submit" class="C">登录<button></td>
<!-- <td></td> -->
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
作业4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>作业4</title>
<style>
.A1{
width: 190px;
height: 120px;
float: left;
margin-top: 20px;
}
.A{
width: 1500px;
height: 50px;
text-align: center;
}
*{
padding: 0;
margin: 0;
}
ul{
float: left;
margin-top: 50px;
list-style: none;
}
.A2{
font-size: 20Px;
width: 100px;
text-align: center;
display: inline-block;
}
.A3{
width: 190px;
height: 120px;
float: left;
margin-top: 10px;
margin-left: 20px;
}
.B{
width: 1600px;
}
.B1{
width: 1190px;
height: 90px;
margin-top: 10px;
}
.C{
width: 1600px;
}
.C1{
text-align: center;
font-size: 28px;
margin-top: 10px;
}
.D{
width: 1600px;
float: left;
}
.D2{
border: 1px solid #f2f2f2;
position: relative;
float: left;
width: 230px;
height: 322px;
margin: 0 5px 10px;
}
.D21{
height: 48px;
font-size: 14px;
line-height: 24px;
text-align: left;
color: #666;
}
.D22{
color: #e1251b;
font-size: 14px;
margin-top: 5px;
}
</style>
</head>
<body>
<div class="A">
<img class="A1" src="https://img10.360buyimg.com/img/jfs/t1/217337/13/41302/12933/6658993dF6b3349e7/19a1dab36f5e5bc9.jpg">
<ul>
<li class="A2">电脑数码</li>
<li class="A2">拍卖</li>
<li class="A2">京东超市</li>
<li class="A2">京东手机</li>
<li class="A2">京东生鲜</li>
<li class="A2">京东家电</li>
<li class="A2">企业会员</li>
<li class="A2">大牌奥莱</li>
<li class="A2">进口好物</li>
<li class="A2">京东五金城</li>
</ul>
<img class="A3" src="https://img12.360buyimg.com/babel/jfs/t20270530/219934/19/40764/88939/66588936Fc62020cb/556428d80813c7aa.png.avif">
</div>
<div class="B">
<img class="B1" src="https://m.360buyimg.com/babel/jfs/t20270402/241416/14/6455/32949/660b7f39Fdc8ca9dc/462908a310122c92.jpg">
</div>
<div class="C">
<h1 class="C1">为你推荐</h1>
</div>
<div class="D">
<ul class="D1">
<li class="D2">
<img src="https://img20.360buyimg.com/jdcms/s460x460_jfs/t1/160069/33/43882/104889/662c5bedF686b2647/da1ba968ada4f7c9.jpg.avif" width="230px" height="230px">
<div class="D21"><p>Apple苹果 iphone15pro 全网通5G手机 苹果15pro双卡双待分期免息 </p></div>
<div class="D22"><span>¥6399.00</span></div>
</li>
<li class="D2">
<img src="https://img20.360buyimg.com/jdcms/s460x460_jfs/t1/160069/33/43882/104889/662c5bedF686b2647/da1ba968ada4f7c9.jpg.avif" width="230px" height="230px">
<div class="D21"><p>Apple苹果 iphone15pro 全网通5G手机 苹果15pro双卡双待分期免息 </p></div>
<div class="D22"><span>¥6399.00</span></div>
</li>
<li class="D2">
<img src="https://img20.360buyimg.com/jdcms/s460x460_jfs/t1/160069/33/43882/104889/662c5bedF686b2647/da1ba968ada4f7c9.jpg.avif" width="230px" height="230px">
<div class="D21"><p>Apple苹果 iphone15pro 全网通5G手机 苹果15pro双卡双待分期免息 </p></div>
<div class="D22"><span>¥6399.00</span></div>
</li>
<li class="D2">
<img src="https://img20.360buyimg.com/jdcms/s460x460_jfs/t1/160069/33/43882/104889/662c5bedF686b2647/da1ba968ada4f7c9.jpg.avif" width="230px" height="230px">
<div class="D21"><p>Apple苹果 iphone15pro 全网通5G手机 苹果15pro双卡双待分期免息 </p></div>
<div class="D22"><span>¥6399.00</span></div>
</li>
<li class="D2">
<img src="https://img20.360buyimg.com/jdcms/s460x460_jfs/t1/160069/33/43882/104889/662c5bedF686b2647/da1ba968ada4f7c9.jpg.avif" width="230px" height="230px">
<div class="D21"><p>Apple苹果 iphone15pro 全网通5G手机 苹果15pro双卡双待分期免息 </p></div>
<div class="D22"><span>¥6399.00</span></div>
</li>
<li class="D2">
<img src="https://img20.360buyimg.com/jdcms/s460x460_jfs/t1/160069/33/43882/104889/662c5bedF686b2647/da1ba968ada4f7c9.jpg.avif" width="230px" height="230px">
<div class="D21"><p>Apple苹果 iphone15pro 全网通5G手机 苹果15pro双卡双待分期免息 </p></div>
<div class="D22"><span>¥6399.00</span></div>
</li>
<li class="D2">
<img src="https://img20.360buyimg.com/jdcms/s460x460_jfs/t1/160069/33/43882/104889/662c5bedF686b2647/da1ba968ada4f7c9.jpg.avif" width="230px" height="230px">
<div class="D21"><p>Apple苹果 iphone15pro 全网通5G手机 苹果15pro双卡双待分期免息 </p></div>
<div class="D22"><span>¥6399.00</span></div>
</li>
<li class="D2">
<img src="https://img20.360buyimg.com/jdcms/s460x460_jfs/t1/160069/33/43882/104889/662c5bedF686b2647/da1ba968ada4f7c9.jpg.avif" width="230px" height="230px">
<div class="D21"><p>Apple苹果 iphone15pro 全网通5G手机 苹果15pro双卡双待分期免息 </p></div>
<div class="D22"><span>¥6399.00</span></div>
</li>
<li class="D2">
<img src="https://img20.360buyimg.com/jdcms/s460x460_jfs/t1/160069/33/43882/104889/662c5bedF686b2647/da1ba968ada4f7c9.jpg.avif" width="230px" height="230px">
<div class="D21"><p>Apple苹果 iphone15pro 全网通5G手机 苹果15pro双卡双待分期免息 </p></div>
<div class="D22"><span>¥6399.00</span></div>
</li>
<li class="D2">
<img src="https://img20.360buyimg.com/jdcms/s460x460_jfs/t1/160069/33/43882/104889/662c5bedF686b2647/da1ba968ada4f7c9.jpg.avif" width="230px" height="230px">
<div class="D21"><p>Apple苹果 iphone15pro 全网通5G手机 苹果15pro双卡双待分期免息 </p></div>
<div class="D22"><span>¥6399.00</span></div>
</li>
<li class="D2">
<img src="https://img20.360buyimg.com/jdcms/s460x460_jfs/t1/160069/33/43882/104889/662c5bedF686b2647/da1ba968ada4f7c9.jpg.avif" width="230px" height="230px">
<div class="D21"><p>Apple苹果 iphone15pro 全网通5G手机 苹果15pro双卡双待分期免息 </p></div>
<div class="D22"><span>¥6399.00</span></div>
</li>
<li class="D2">
<img src="https://img20.360buyimg.com/jdcms/s460x460_jfs/t1/160069/33/43882/104889/662c5bedF686b2647/da1ba968ada4f7c9.jpg.avif" width="230px" height="230px">
<div class="D21"><p>Apple苹果 iphone15pro 全网通5G手机 苹果15pro双卡双待分期免息 </p></div>
<div class="D22"><span>¥6399.00</span></div>
</li>
<li class="D2">
<img src="https://img20.360buyimg.com/jdcms/s460x460_jfs/t1/160069/33/43882/104889/662c5bedF686b2647/da1ba968ada4f7c9.jpg.avif" width="230px" height="230px">
<div class="D21"><p>Apple苹果 iphone15pro 全网通5G手机 苹果15pro双卡双待分期免息 </p></div>
<div class="D22"><span>¥6399.00</span></div>
</li>
<li class="D2">
<img src="https://img20.360buyimg.com/jdcms/s460x460_jfs/t1/160069/33/43882/104889/662c5bedF686b2647/da1ba968ada4f7c9.jpg.avif" width="230px" height="230px">
<div class="D21"><p>Apple苹果 iphone15pro 全网通5G手机 苹果15pro双卡双待分期免息 </p></div>
<div class="D22"><span>¥6399.00</span></div>
</li>
<li class="D2">
<img src="https://img20.360buyimg.com/jdcms/s460x460_jfs/t1/160069/33/43882/104889/662c5bedF686b2647/da1ba968ada4f7c9.jpg.avif" width="230px" height="230px">
<div class="D21"><p>Apple苹果 iphone15pro 全网通5G手机 苹果15pro双卡双待分期免息 </p></div>
<div class="D22"><span>¥6399.00</span></div>
</li>
<li class="D2">
<img src="https://img20.360buyimg.com/jdcms/s460x460_jfs/t1/160069/33/43882/104889/662c5bedF686b2647/da1ba968ada4f7c9.jpg.avif" width="230px" height="230px">
<div class="D21"><p>Apple苹果 iphone15pro 全网通5G手机 苹果15pro双卡双待分期免息 </p></div>
<div class="D22"><span>¥6399.00</span></div>
</li>
<li class="D2">
<img src="https://img20.360buyimg.com/jdcms/s460x460_jfs/t1/160069/33/43882/104889/662c5bedF686b2647/da1ba968ada4f7c9.jpg.avif" width="230px" height="230px">
<div class="D21"><p>Apple苹果 iphone15pro 全网通5G手机 苹果15pro双卡双待分期免息 </p></div>
<div class="D22"><span>¥6399.00</span></div>
</li>
<li class="D2">
<img src="https://img20.360buyimg.com/jdcms/s460x460_jfs/t1/160069/33/43882/104889/662c5bedF686b2647/da1ba968ada4f7c9.jpg.avif" width="230px" height="230px">
<div class="D21"><p>Apple苹果 iphone15pro 全网通5G手机 苹果15pro双卡双待分期免息 </p></div>
<div class="D22"><span>¥6399.00</span></div>
</li>
</ul>
</div>
</body>
</html>