html5初学day4[作业]

最新推荐文章于 2024-06-02 22:09:45 发布

nwan_96

最新推荐文章于 2024-06-02 22:09:45 发布

阅读量280

点赞数

本文链接：https://blog.csdn.net/nwan_96/article/details/70233827

版权

html文档中内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>idol</title>
    <link href="day4.css" type="text/css" rel="stylesheet">
</head>
<body>
    <div id="d1">
        <img src="../img/day4.jpg">
        <p id="p1">张杰</p>
        <p id="p2">jason</p>
        <p id="p3">中国内地歌手</p>
        <p id="p4">经纪公司：行星文化&&张杰工作室</p>
        <p id="p5">作者：@naweixiao*yuan</p>
    </div>
</body>
</html>

css文档中内容：

#d1{

    margin: 20px auto;
    width: 400px;
    height: 230px;
    border: dashed 1px lightsteelblue;
    padding: 30px 30px 30px 3px;/*设置内间距*/
    background-color: palegreen;
}
img{
    width: 130px;
    height: 148px;
    float: right;
}
#p1{
    position: absolute;
    font-family:"微软雅黑";
    font-size: 30px;
    padding-left: 45px;
    float: left;
}
#p2{
    position: absolute;
    font-size: 20px;
    padding-left: 65px;
    padding-top: 50px;
    float: left;
}
#p3{
    position: absolute;
    font-size: 18px;
    padding-left: 85px;
    padding-top: 90px;
    float: left;
}
#p4{
    position: absolute;
    font-family: cursive;
    font-size: 17px;
    padding-left: 115px;
    padding-top: 170px;
    float: left;
}
#p5{
    position: absolute;
    font-family: cursive;
    font-size: 17px;
    padding-left: 140px;
    padding-top: 197px;
    float: left;
}