HTML Responsive Web Page

最新推荐文章于 2024-08-28 09:42:08 发布

晨识草

最新推荐文章于 2024-08-28 09:42:08 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： web 文章标签： html web responsive

本文链接：https://blog.csdn.net/lichen_yun/article/details/75003473

web 专栏收录该内容

29 篇文章

订阅专栏

本文介绍了一个简单的响应式网页设计实例，展示了如何使用HTML和CSS实现页面元素在不同设备上的自适应布局。示例中包含了伦敦、巴黎和东京三个城市的简介。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

注：参考网站 https://www.w3schools.com

HTML Responsive Web Page

index.html

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="style.css">
        <title>Responsive web page</title>
        <meta lang="en" charset="utf-8">
    </head>
    <body>
        <h1>Responsive Web Design</h1>
        <div class="city">
            <h2>London</h2>
            <p>London is the capital city of England.</p>
            <p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
        </div>

        <div class="city">
            <h2>Paris</h2>
            <p>Paris is the capital of France.</p>
            <p>The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.</p>
        </div>

        <div class="city">
            <h2>Tokyo</h2>
            <p>Tokyo is the capital of Japan.</p>
            <p>It is the center of the Greater Tokyo Area,  and the most populous metropolitan area in the world.</p>
        </div>
    </body>
</html>

style.css

h1 {
    text-align:center;
    background-color:black;
    padding:5px;
    color:white;
}
.city {
    height:200px;
    max-width:410px;
    border:1px solid grey;
    margin:10px;
    padding:5px;
    overflow:hidden;
    float:left;  /*关键是这一行代码，使得该代码能够在不同的设备上自适应的显示*/
}

显示结果为：
这里写图片描述