前端笔记-html布局-20221025

HTML 布局

1.<div>元素：<div> 元素常用作布局工具，因为能够轻松地通过 CSS 对其进行定位。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

　　<link rel="stylesheet" href="./index.css">
</head>
<body>
        <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">
            <p>Copyright W3School.com.cn</p>
            

        </div>
       
</body>
</html>

2. 设置css 样式

#header{
    background-color: black;
    color: white;
    text-align: center;
    padding: 5px;
}
#nav{
    line-height: 30px;
    background-color: #eeee;
    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;
}

3. 使用html5写

　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <header>
        <h1>City Gallery</h1>
    </header>
    
    <nav>
        London <br>
        Paris <br>
        Tokyo <br>

    </nav>

    <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>
    </section>
    <footer>
        Copyright W3School.com.cn
    </footer>
</body>
</html>

4. 使用css设置样式 html5

header{
    background-color: black;
    color: white;
    text-align: center;
    padding: 5px;
}
nav{
    line-height: 30px;
    background-color: #eeee;
    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;
}

5.使用表格的html +css 布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./表格.css">
</head>
<body>
    <table class="lamp">
        <tr>
            <th>
                <img src="./sun.gif" alt="Sun" style="height: 30px; width: 20px">
            </th>
            <td>
                The table element was not designed to be a layout tool
            </td>
        </tr>

    </table>
</body>
</html>

　　

table.lamp{
    width: 100%;
    border: 1px solid #d4d4d4;
}
table.lamp th, td{
    padding: 10px;
}
table.lamp td{
    width: 40px;
}

 ###html5语义元素总结：非常重要！！

header 定义文档或节的页眉
nav 定义导航链接的容器
section 定义文档中的节
article 定义独立的自包含文章
aside 定义内容之外的内容（比如侧栏）
footer 定义文档或节的页脚
details 定义额外的细节
summary 定义 details 元素的标题
posted @ 2022-10-25 23:05  Zoe1997  阅读(56)  评论(0)    收藏  举报