第二次作业
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0px;
padding: 0px;
}
ul,ol {
list-style: none;
}
ul.box > li {
margin: auto;
margin-block-start: 20px;
width: 250px;
display: flex;
border: 1px solid #d7d1d1;
background-color: rgb(240, 232, 232);
}
ul.box > li > img {
width: 80px;
height: 80px;
}
ul.box > li > div {
flex: 1;
padding: 10px;
}
ul.box > li > div > h3 {
font-size: 20px;
margin-bottom: 5px;
}
ul.box > li > div > p {
font-size: 15px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<ul class="box">
<li class="l1">
<img src=""E:\jsjsyjs\20201203214346381.jpg"">
<div>
<h3>张惠妹aMEI</h3>
<p>台湾歌手张惠妹</p>
</div>
</li>
<li class="l1">
<img src=""E:\jsjsyjs\R-C (1).jpg"">
<div>
<h3>吴莫愁Momo</h3>
<p>《中国好声音》选...</p>
</div>
</li>
<li class="l1">
<img src=""E:\jsjsyjs\R-C (2).jpg"">
<div>
<h3>孙楠</h3>
<p>歌手孙楠 代表作《...</p>
</div>
</li>
<li class="l1">
<img src=""E:\jsjsyjs\R-C.jpg"">
<div>
<h3>麦田老狼</h3>
<p>歌手，音乐人。代...</p>
</div>
</li>
<li class="l1">
<img src=""E:\jsjsyjs\th.jpg"">
<div>
<h3>陈楚生</h3>
<p>唱作歌手</p>
</div>
</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0px;
padding: auto;
}
.box{
width: 200px;
height: 210px;
border:1px solid #201f1f;
box-shadow: 2px 2px 2px #888888;
margin: auto;
}
.img{
position: relative;
}
.img>img{
width: 100%;;
}
.content{
width: 200px;
height: 40px;
position: absolute;
left: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
font-size: 14px;
color: #fff;
line-height: 40px;
margin: auto;
}
</style>
</head>
<body>
<div class="box">
<div class="img">
<img src=""E:\jsjsyjs\th.png"" alt="">
<div class="content"> 播放量：3000w</div>
</div>
<p>「武侠影视金曲100首』每个人心中的江湖梦</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: auto;
padding: auto;
}
ul,ol {
list-style: none;
}
.box {
width: 300px;
height: 544px;
background-color: #ededed;
border: 1px solid #b2afaf;
margin-top: 50px;
margin-left: 30px;
}
.content {
display: flex;
}
.img {
width: 100px;
margin-top: 30px;
margin-left: 10px;
}
.text > div {
border: 0px solid #ed0b0b;
padding: 5px;
margin-left:-40px;
}
.text > div.odd {
background-color: #dddddd;
}
</style>
</head>
<body>
<div class="box">
<ul class="content">
<li class="img">
<img src=""E:\jsjsyjs\th.png"">
</li>
<h3 style="margin-top: 40px;">飙升榜</h3>
</ul>
<ul class="text">
<div > </div>
<div class="odd"><a style="color: rgb(185, 4, 4);">1</a> 不重逢</div>
<div ><a style="color: rgb(185, 4, 4);">2</a> 温暖的房子</div>
<div class="odd"><a style="color: rgb(185, 4, 4);">3</a> 永不熄灭的火焰</div>
<div >4 怪诞心理学</div>
<div class="odd">5 忒修斯的船</div>
<div >6 晨光里有你</div>
<div class="odd">7 No Cap (Phonk囗水)</div>
<div >8 Fire! (feat. YUQl((G)I-DLE))</div>
<div class="odd">9 Teeth</div>
<div >10 你是旷野 是山间的风</div>
<div class="odd"> 查看全部></div>
</ul>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 400px;
height: 630px;
justify-content: center;
align-items: center;
margin: auto;
background-color: rgb(231, 231, 231);
}
.line1{
width: 400px;
display: flex;
margin-left: 2px;
margin-top: 60px;
}
.img{
width: 140px;
height: 100px;
margin-left: 10px;
top: 50px;
}
.img img{
width: 100px;
height: 100px;
}
.img p{
font-size: 18px;
margin-top: 10px;
margin-left: 10px;
}
</style>
</head>
<body>
<div class="box">
<div class="line1">
<div class="img">
<img src="E:\web\work\img\1.png" alt="">
<p> 京豆</p>
</div>
<div class="img">
<img src="D:\web\work\img\2.png" alt="">
<p>充值中心</p>
</div>
<div class="img">
<img src="E:\web\work\img\3.png" alt="">
<p>政府消费券</p>
</div>
</div>
<div class="line1">
<div class="img">
<img src="E:\web\work\img\4.png" alt="">
<p> 礼品卡</p>
</div>
<div class="img">
<img src="E:\web\work\img\5.png" alt="">
<p>金条借款</p>
</div>
<div class="img">
<img src="E:\web\work\img\6.png" alt="">
<p>国家补贴</p>
</div>
</div>
<div class="line1">
<div class="img">
<img src="E:\web\work\img\7.png" alt="">
<p> 爱回收</p>
</div>
<div class="img">
<img src="E:\web\work\img\8.png" alt="">
<p>企业计划购</p>
</div>
<div class="img">
<img src="E:\web\work\img\9.png" alt="">
<p>买贵双倍赔</p>
</div>
</div>
<div class="line1">
<div class="img">
<img src="E:\web\work\img\10.png" alt="">
<p> 游戏</p>
</div>
<div class="img">
<img src="E:\web\work\img\11.png" alt="">
<p>企采返E卡</p>
</div>
<div class="img">
<img src="E:\web\work\img\12.png" alt="">
<p> 酒店</p>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 450px;
height: 800px;
margin: auto;
background-color: rgb(245, 245, 245);
}
.box1{
width: 450px;
height: 200px;
display: flex;
margin: auto;
}
.content{
width: 80%;
height: 80%;
}
.content img{
width: 150px;
height: 150px;
margin: 20px;
}
.text{
display: flex;
width: 200px;
height: 50px;
margin-top: 20px;
margin-left: -180px;
}
.text-info{
display: flex;
width: 200px;
height: 50px;
margin-top: 60px;
margin-left:-200px;
color: rgb(126, 126, 126);
}
.box2{
width: 450px;
height: 120px;
display: flex;
margin: auto;
}
.itme{
width: 200px;
height: 40px;
margin: 20px;
}
.box3{
width: 450px;
height: 130px;
display: flex;
margin: auto;
}
.box4{
width: 450px;
height: 120px;
display: flex;
margin: auto;
display: flex;
}
.oder{
width: 450px;
height: 130px;
display: flex;
}
.oder-text1{
width: 200px;
height: 40px;
margin-left: 20px;
margin-top: 20px;
display: flex;
}
.oder-text2{
width: 200px;
height: 40px;
margin-left: -201px;
margin-top: 60px;
display: flex;
}
.box5{
width: 450px;
height: 120px;
display: flex;
margin: auto;
}
.vip{
display: flex;
width: 450px;
height: 20px;
}
.vip a{
width: 1200px;
height: 110px;
margin-left: 2px;
margin-top: 20px;
}
.vip-img{
width: 200px;
height: 150px;
margin-left: 10px;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">
<div class="content">
<img style="border-radius: 100%;" src="E:\web\work\img\mimi.jpg">
</div>
<div class="text">
<h2>93296zjth852h8</h2>
</div>
<div class="text-info">
<p style="font-size: 22px;">切换账号|退出</p>
</div>
</div>
<div class="box2">
<div class="itme">
<img src="E:\web\work\img\lljl.png">
<p>浏览记录</p>
</div>
<div class="itme">
<img src="E:\web\work\img\spsc.png">
<p>商品收藏</p>
</div>
<div class="itme">
<img src="E:\web\work\img\dpgz.png">
<p>店铺关注</p>
</div>
<div class="itme">
<img src="E:\web\work\img\wdjd.png">
<p>我的京东</p>
</div>
</div>
<div class="box3">
<div class="itme">
<h3 style="font-size: 25px;">0</h3>
<p>待付款</p>
</div>
<div class="itme">
<h3 style="font-size: 25px;">0</h3>
<p>待收货</p>
</div>
<div class="itme">
<h3 style="font-size: 25px;">7</h3>
<p>待评价</p>
</div>
<div class="itme">
<h3 style="font-size: 25px;">1</h3>
<p>退还售后</p>
</div>
</div>
<div class="box4">
<div class="oder">
<div class="jd-img">
<img style="width: 120px;height: 130px;" src="E:\web\work\img\jd.jpg">
</div>
<div class="oder-text1">
<h3>暂无订单信息</h3>
</div>
<div class="oder-text2">
<p>下单后查看更多订单信息</p>
</div>
</div>
</div>
<div class="box5">
<div class="vip">
<a href="#"><img class="vip-img" style="border-radius: 10%;" src="D:\web\work\img\PLUS.png"></a>
<a href="#"><img class="vip-img" style="border-radius: 10%;" src="D:\web\work\img\qyhy.png"></a>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.form {
display: flex;
align-items: center;
width: 400px;
height: 80px;
}
.itme {
padding: 0 10px;
border: 3px solid #ff2104;
width: 400px;
height: 40px;
margin-right: 10px;
margin-top: 10px;
display: flex;
border-radius: 5px;
}
.img {
width: 18px;
height: 18px;
margin-top: 5px;
display: flex;
margin-right: -200px;
}
.btn {
width: 90px;
height: 35px;
display: flex;
margin-left: 220px;
margin-top: 2px;
}
.input {
width: 300px;
height: 40px;
border: none;
padding: 10px;
border-radius: 5px;
font-size: 13px;
}
.info {
width: 100%;
height: 100%;
background-color: #ff2104;
color: #fff;
font-size: 18px;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="form">
<form action=" ">
<div class="itme">
<input class="input" type="search" placeholder="小白熊恒温调奶器">
<div class="img">
<img class="img" src="D:\web\work\img\zxj.png">
</div>
<div class="btn">
<button type="submit" class="info">搜索</button>
</div>
</div>
</form>
</div>
</body>
</html>
原文地址：https://blog.csdn.net/2201_75521607/article/details/145212712
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！