HTML学习11－布局

最新推荐文章于 2024-11-25 22:35:18 发布

Leemin_ios

最新推荐文章于 2024-11-25 22:35:18 发布

阅读量547

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML5 基础教程学习笔记

本文链接：https://blog.youkuaiyun.com/Leemin_ios/article/details/52086051

HTML5 基础教程学习笔记专栏收录该内容

15 篇文章

订阅专栏

本文介绍了一个简单的HTML网页布局实例，通过使用CSS样式定义了不同区块的样式和位置，包括header、menu、content和footer等部分，展示了如何创建一个基本但功能完整的网页结构。

HTML布局

网页布局对改善网络的外观非常重要。

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>NEWS</title>
    <style type="text/css">
       div#container
        {
            width: 500px;
        }
        div#header
        {
            background-color:#99bbbb;
        }
        div#menu
        {
            background-color:#ffff99;
            height: 200px;
            width: 100px;
            float: left;
        }
        div#content
        {
            background-color: #eeeeee;
            height: 200px;
            width: 400px;
            float: left;
        }
        div#footer
        {
            background-color: #99bbbb;
            clear: both;
            text-align: center;
        }
        h1
        {
            margin-bottom: 0;
        }
        h2
        {
            margin-bottom: 0;
            font-size: 18px;
        }
        ul
        {
            margin: 0;
            font-size: 12px;
        }
    </style>
</head>
<body>
     <div id="container">
         <div id="header">
              <h1>Main Title of Web Page</h1>
         </div>

         <div id="menu">
         <h2>Menu</h2>
             <ul>
                 <li>HTML</li>
                 <li>CSS</li>
                 <li>JavaScript</li>
             </ul>
         </div>
         <div id="content">Content goes here</div>
         <div id="footer">Copyright limin.com.cn</div>
     </div>
</body>
</html>

在浏览器中显示的样式：