代码样式=====》
html样式
<!DOCTYPE html>
<html lang="en">
<!--<html lang="zh">-->
<head>
<meta charset="utf-8" />
<title>作业3.商品卡片</title>
<link rel="icon" href="" type="image/gif">
<link href="../商业卡片-图/css/text.css" rel="stylesheet" type="text/css" />
</head>
<body style="background:rgb(119, 232, 236);">
<div class="Main_main">
<div class="main">
<!--设置div大小-->
<img class="img" src="../商业卡片-图/img/彩电.jpg" alt="呆脑">
<!--引入图片并设置图片大小防止溢出-->
<p class="">
<!--设置字体 大 主体-->
<p1 class="The_first_line">
Pro 14 增强版 i5 独显 - Win11
</p1>
<br>
<p2 class="The_second_line">
<!--字体特别-小-灰色-->
2.5K超视网膜全面屏
</p2>
<br>
<h4>
<p3 class="Third_row_number_one">
<!--字体特别-黄色-->
5299元
</p3>
<del>
<p4 class="Third_row_number_two">
<!--字体特别-删除符-灰色-->
5599元
</p4>
</del>
</h4>
</p>
</div>
</div>
</body>
</html>
css代码样式
/*引入我使用的字体*/
@font-face {
font-family:'BeautyTeacher-mua~' ;
src: url(../字体/MeowScript-Regular.ttf);
}
/**/
.Main_body{
font-family:'BeautyTeacher-mua~';
}
.Main_main{
margin: auto;
background:rgb(255, 255, 255);
width: 24%;
height: 671px;
/* box-shadow: 0px 10px 5px #5c5959; */
}
.Main_main:hover{
box-shadow: 0px 10px 8px #5c5959;
}
/**/
.main{
margin: auto;
width: 88%;
height: 670px;
text-align:center
}
/**/
.img{
/* margin: auto; */
width: 100%;
height: 450px;
}
/**/
.The_first_line{
font-size: 28px;
}
/**/
.The_second_line{
font-size: 24px;
color: rgb(98,98,98);
}
/**/
.Third_row_number_one{
font-size: 28px;
color: rgb(173, 113, 75);
}
/**/
.Third_row_number_two{
font-size: 28px;
color: rgb(98,98,98);
}
/*
/* .display>.Main_main>box-shadow: 0px 10px 5px #5c5959; */
/*---------------------喜欢的小伙伴点赞吧-------------------------------------*/