526互联

HTML5 信纸背景的实现

发布时间 2023-11-30 16:02:26作者: 诺言1107

 HTML5 信纸背景的实现

 这个是一个信纸背景页面的实现添加文字无法自动换行

需要理解代码请查看代码注试

效果图

 

 html页面

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>信纸</title>
 <!-- 这里链接了一个外部的CSS样式表 -->
<link rel="stylesheet" type="text/css" href="xzlx.css"> 
</head>
<body>
    <!-- 这是一个包含所有内容的容器 -->
    <div class="frame"> 
        <!-- 这些是信纸上的行 -->
        <div class="content"></div>
        <div class="content"></div>
        <div class="content"></div>
        <div class="content"></div>
        <div class="content"></div>
        <div class="content"></div>
        <div class="content"></div>
        <div class="content"></div>
        <div class="content"></div>
        <div class="content"></div>
        <div class="content"></div>
        <div class="content"></div>
        <div class="content"></div>
        <div class="content"></div>
        <div class="content"></div>
        <div class="content"></div>
        <div class="content"></div>
        <div class="content"></div>
        <div class="content"></div>
        <div class="content"></div>
        <div class="content"></div>
        <div class="content"></div>

        <!-- 这是插入的图片，类名为'tp'，您需要将'./img/1.png'替换为您的图片路径 -->
        <img class="tp" src="./img/1.png" alt="">

        <!-- 这是插入的另一张图片，类名为'tp2'，您需要将'./img/2.png'替换为您的图片路径 -->
        <img class="tp2" src="./img/2.png" alt="">
    </div>
</body>
</html>

css部分

.frame{
    width: 500px; /* 定义框架的宽度 */
    height: 700px; /* 定义框架的高度 */
    border: 10px groove rgb(253, 162, 162); /* 定义框架的边框样式、宽度和颜色 */
    background-color: rgb(254, 241, 241); /* 定义框架的背景颜色 */
    position: relative; /* 设置框架的定位类型为相对定位 */
    left: 700px; /* 定义框架距离左边的位置 */
    top: 200px; /* 定义框架距离顶部的位置 */
    overflow: hidden; /* 设置如果内容溢出框架的话，隐藏溢出的部分 */
}
.content{
    width: 100%; /* 定义内容的宽度为100%，即占满整个框架的宽度 */
    height: 30px; /* 定义内容的高度 */
    border-bottom: 1px solid rgb(118, 116, 116); /* 定义内容底部的边框样式、宽度和颜色 */
}
.tp{
    position: absolute; /* 设置图片的定位类型为绝对定位 */
    top: 0px; /* 定义图片距离顶部的位置 */
    left: 0px; /* 定义图片距离左边的位置 */
}

.tp2{
    position: absolute; /* 设置图片的定位类型为绝对定位 */
    bottom: 0px; /* 定义图片距离底部的位置 */
    right: 0px; /* 定义图片距离右边的位置 */
}