使用 float 创建一个网页页眉、页脚、左边的内容和主要内容。

最新推荐文章于 2023-01-04 10:13:38 发布

只是六号z

最新推荐文章于 2023-01-04 10:13:38 发布

阅读量260

点赞数

分类专栏：前端文章标签： html css 前端

赵小奥的专属文章

本文链接：https://blog.csdn.net/z318913/article/details/125174842

版权

前端专栏收录该内容

10 篇文章 1 订阅

订阅专栏

这个示例展示了如何利用CSS的float属性来构建一个包含页眉、侧边栏和主要内容的网页布局。HTML结构包括顶部菜单、内容区域和页脚，CSS样式定义了各个部分的样式和浮动方式，使得内容能够按预期排列。通过这种方式，可以创建出一种常见的网页布局模式。

摘要由CSDN通过智能技术生成

使用 float 创建一个网页页眉、页脚、左边的内容和主要内容。
来源：菜鸟教程：https://www.runoob.com/try/try.php?filename=trycss_float6

一、案例样式

示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。

二、源代码

1.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>精简版网页</title>
        <link rel="stylesheet" type="text/css" href="test.css">
    </head>
    <body>
        <ul class="topmenu">
            <li><a href="#home" class="active">主页</a></li>
            <li><a href="#news">新闻</a></li>
            <li><a href="#contact">联系我们</a></li>
            <li><a href="#about">关于我们</a></li>
        </ul>
        <div class="clearfix">
            <div class="column sidemenu">
                <ul>
                    <li><a href="#flight">The Filght</a></li>
                    <li><a href="#city" class="active">The City</a></li>
                    <li><a href="#island">The Island</a></li>
                    <li><a href="#food">The Food</a></li>
                    <li><a href="#people">The People</a></li>
                    <li><a href="#history">The History</a></li>
                    <li><a href="#oceans">The Oceans</a></li>
                </ul>
            </div>
        </div>

        <div class="column content">
            <div class="header">
                <h1>The City</h1>
            </div>
            <h1>Chania</h1>
            <p>Chania is the capital of the Chania region on the island of Crete. 
                The city can be divided in two parts, the old town and the modern city.</p>
            <p>You will learn more about responsive web pages in a later chapter.</p>
        </div>

        <div class="footer">
            <p>底部文本</p>
        </div>
    </body>
</html>

2.css

*{
    /* margin: 0;
    padding: 0; */
    box-sizing: border-box;
}
body{
    margin: 0;
}
.header{
    background-color: #2196f3;
    color: white;
    text-align: center;
    padding: 15px;
}
.footer{
    background-color: #444;
    color: white;
    padding: 15px;
    text-align: center;
    clear: both;
}
.topmenu{
    /* 去除列表样式 */
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #777;
}
.topmenu li{
    float:left;
}
.topmenu li a{
    display: inline-block;
    color: white;
    text-align: center;
    padding: 16px;
    text-decoration: none;
}
.topmenu li a:hover{
    background-color: #222;
}
.topmenu li a.active{
    color: white;
    background-color: #4caf50;
}
.column{
    float: left;
    padding: 15px;
}
.clearfix::after{
    content: "";
    clear: both;
    display: table-row;
}
.sidemenu{
    width: 25%;
}
.content{
    width: 75%;
}
.sidemenu ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.sidemenu li a{
    margin-bottom: 4px;
    display: block;
    padding: 8px;
    background-color: #eee;
    text-decoration: none;
    color: #666;
}
.sidemenu li a:hover{
    background-color: #555;
    color: white;
}
.sidemenu li a.active{
    background-color: #008cba;
    color: white;
}