web前端——简单的网页布局案列

命运之光

发布于 2024-03-20 13:05:06

840

发布于 2024-03-20 13:05:06

文章被收录于专栏：我在本科期间写的文章我在本科期间写的文章

问题背景

将网页布局成上面的样子。

解决样例

网页版

手机版

源代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页设计</title>
    <style>
       
         hr {
            height: 3px;
            background-color: green;
            border: none;
            margin: 20px 0;
        }

        
        .center-text {
            text-align: center;
            color: blue;
            font-size: 24px;
            margin-top: 20px;
        }

        .poem {
            text-align: center;
            margin: 20px 0;
        }

        .bold-center {
            text-align: center;
            font-weight: bold;
        }

        .poem-title {
            font-weight: bold;
        }

    </style>
</head>

<body>

    <div class="center-text">网页中的文字</div>
    <hr>
    <div class="poem">
        <div class="poem-title">锦瑟</div>
        锦瑟无端五十弦，一弦一柱思华年。
        <br>庄生晓梦迷蝴蝶，望帝春心托杜鹃。
        <br>沧海月明珠有泪，蓝田日暖玉生烟。
        <br>此情可待成追忆，只是当时已惘然。
    </div>
    <hr>
    <div class="bold-center">使用<code>&lt;code&gt;</code>标签输入计算机代码。</div><br>
<code>
int main(){
    int x;
    printf("请输入一个十进制整数：\n");
    scanf("%d",&x);
    printf("输入十进制整数为：%d\\n");
    doctob{x};
    doctob{x};
    doctob{x}; 
}
</code>
    <hr>
    <div class="bold-center">使用<code>&lt;pre&gt;</code>标签输入计算机代码。</div><br>
<pre>
int main(){
    int x;
    printf("请输入一个十进制整数：\n");
    scanf("%d",&x);
    printf("输入十进制整数为：%d\\n");
    doctob{x};
    doctob{x};
    doctob{x}; 
}
</pre>
</body>

</html>