第二次的实操任务

最新推荐文章于 2024-06-20 21:45:27 发布

giamiang

最新推荐文章于 2024-06-20 21:45:27 发布

阅读量230

点赞数

本文链接：https://blog.csdn.net/giamiang/article/details/70478329

版权

<!DOCTYPE html>
<html>
<head>
<title>盒子模型</title>
</head>
<link href="盒子模型的.css" type="text/css" rel="stylesheet"/>
<body>
<div id="d1">
    <div id="d2">神</div>
    <div id="d3">周</div>
    <div id="d4">瑜</div>
    <div>
        <p class="c1">武将技能</p>
        <p class="c2">①琴音  ②业炎</p>
</div>

</div>
</body>
</html>

CSS部分：

#d1
{
    width: 370px;
    height:500px;
    border: solid 1px black;
    background-image: url(周瑜.jpg);
    background-repeat: no-repeat;
margin: 80px 450px;

}

#d2
{
    font-family:"书体坊米芾体";
    font-size: 45px;
    color: white;
    position: relative;
    top: 5px;
    left: 1px;
}

#d3
{
    font-family: "书体坊米芾体";
    font-size: 55px;
    color:black;
    position: relative;
    top: 5px;
    left: 310px;
}

#d4
{
    font-family: "书体坊米芾体";
    font-size: 55px;
    color:black;
    position: relative;
    left: 310px;
}

.c1
{
    width: 350px;
    height:80px;
    font-family: "书体坊米芾体";
    font-size: 30px;
    color: darkslategrey;
    background-color: wheat;
    position: absolute;
    bottom: 57px;
    right: 547px;
}

.c2
{
    font-family: "书体坊米芾体";
    font-size: 28px;
    color: darkslategrey;
    position: absolute;
     bottom: 65px;
    right: 558px;
}