Web前端练习1

悦悦子a啊2026-02-15 10:05

题目

图片提供（图源：网页）

解答

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>前端 练习1</title>
    <style>
        .container{
            margin:0;
            width: 720px;
            margin-bottom: 200px;
            border: solid;
            padding: 20px;
        }
        .picture{
            width: 100%;  /* 宽度占满容器 */
            height: auto;  /* 高度自动按比例缩放 */
        }
        .part1,.part2{
            margin-left: 25px;
        }
    </style>
</head>
<body>
    <div class="container">
        <img src="故宫.png" alt="故宫图片" class="picture">
        <div class="part1">
            <h1>故宫简介</h1>
            <p>
                北京故宫 (The Imperial Palace) 是中国明清两代的皇家宫殿，旧称紫禁城，位于北京中轴线的中心。故宫以三大殿为中心，占地面积约72万平方米，建筑面积约15万平方米，有大小宫殿七十多座，据1973年专家现场测量故宫有房间8707间。
            </p>
        </div>
        <div class="part2">
            <h1>部分经典藏品</h1>
            <ol>
                <li><strong>陶瓷：</strong>在近百万件藏品中，陶瓷器占约35万件。</li>
                <li><strong>绘画：</strong>故宫藏有历代绘画作品，几乎囊括了中国绘画发展各历史时期的名家名品。</li>
                <li><strong>铭刻：</strong>故宫所藏殷墟刻辞甲骨4千余片，著录于《殷虚书契续编》《卜辞通纂》《殷契佚存》《殷契拾掇》《殷契拾掇二篇》《甲骨文合集》等书中。</li>
            </ol>
        </div>
    </div>
</body>
</html>

最终效果

做题心得

1、如何让图片适应边框大小

核心代码：

css 复制代码

width: 100%;  /* 宽度占满容器 */
height: auto;  /* 高度自动按比例缩放 */

让图片宽度完全适配容器，高度按比例自动调整，保证图片不变形（height 不用设定也会默认按比例自动调整的）

拓展：

css 复制代码

display: block;

因为图片默认是行内元素，底部会有少量空白，可以加上 display: block; 来消除这个间隙，让布局更干净。

2、两段文本的缩进处理

这里我是使用了两个盒子来包装两段文本，然后用并集选择器实现统一的缩进处理。

Web前端 练习1

题目

解答

最终效果

做题心得

1、如何让图片适应边框大小

2、两段文本的缩进处理

Web前端练习1