HTML学习（二）布局

最新推荐文章于 2023-11-03 20:20:04 发布

咸鱼hao

最新推荐文章于 2023-11-03 20:20:04 发布

阅读量124

点赞数

分类专栏： Web 文章标签： HTML Web CSS

本文链接：https://blog.csdn.net/weixin_43868436/article/details/89685036

版权

Web 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

HTML学习（二）布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html布局</title>
    <style>
        .cities {
            background-color:black;
            color:white;
            margin:20px;
            padding:20px;
        }
        .red{
            background-color: red;
        }
        #header {
            background-color:black;
            color:white;
            text-align:center;
            padding:5px;
        }
        #nav {
            line-height:30px;
            background-color:#eeeeee;
            height:300px;
            width:100px;
            float:left;
            padding:5px;
        }
        #section {
            width:350px;
            float:left;
            padding:10px;
        }
        #footer {
            background-color:black;
            color:white;
            clear:both;
            text-align:center;
            padding:5px;
        }
    </style>
</head>
<body>
<!--城市布局-->
<!--<div> 元素是块级元素。它能够用作其他 HTML 元素的容器。 设置 <div> 元素的类，使我们能够为相同的 <div> 元素设置相同的类-->
<!--使用类布局-->
<div class="cities">
    <h2>London</h2>
    <p>
        London is the capital city of England.
        It is the most populous city in the United Kingdom,
        with a metropolitan area of over 13 million inhabitants.
    </p>
</div>

<div class="cities">
    <h2>Paris</h2>
    <p>Paris is the capital and most populous city of France.</p>
</div>

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

<!--HTML <span> 元素是行内元素，能够用作文本的容器。 设置 <span> 元素的类，能够为相同的 <span> 元素设置相同的样式-->
<h1>My <span class="red">Important</span> Heading</h1>

<!--使用id布局 H5中header nav section footer为标签，在编辑css时不用写#header中的#-->
<div id="header">
    <h1>City Gallery</h1>
</div>

<div id="nav">
    London<br>
    Paris<br>
    Tokyo<br>
</div>

<div id="section">
    <h1>London</h1>
    <p>
        London is the capital city of England. It is the most populous city in the United Kingdom,
        with a metropolitan area of over 13 million inhabitants.
    </p>
    <p>
        Standing on the River Thames, London has been a major settlement for two millennia,
        its history going back to its founding by the Romans, who named it Londinium.
    </p>
</div>

<div id="footer">
    Copyright W3School.com.cn
</div>

<!-- RWD 响应式 Web 设计 能够以可变尺寸传递网页 使用bootstrap-->

<!--框架 通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。
即在一个窗口运行多个html文件-->

<!-- iframe 用于在网页内显示网页-->
<iframe src="html基础.html" width="200" height="200" frameborder="0"></iframe>
<!-- 由于链接的目标匹配 iframe 的名称，所以链接会在 iframe 中打开-->
<iframe src="html基础.html" name="iframe_a"></iframe>
<p><a href="http://www.baidu.com" target="iframe_a">search here</a></p>

</body>
</html>

咸鱼hao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML学习（二）布局

HTML学习（二）布局<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>html布局</title> <style> .cities { background-...
复制链接

扫一扫

专栏目录