html5初学day4[作业]

来源：互联网发布：关于程序员的搞笑图片编辑：程序博客网时间：2024/06/05 17:01

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;}

效果图：

0 0