HTML网页主体构建-CSDN博客

本文详细讲解了如何使用HTML来构建网页的基本框架，包括头部、主体和底部等关键部分的实现，帮助读者掌握网页布局的基本技巧。

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        *{
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none;
        }
        body{
            height: 750px;
        }

        .top,.foot{
            background-color: #a1cdef;
            text-align: center;
            font-size: 30px;
        }

        .top{
            height:6%;
            margin-bottom: 10px;
        }

        .foot{
            height: 14%;
            margin-top: 10px;
        }

        .context{
            width: 910px;
            height: 79%;
            margin: 0 auto;
        }

        .nav{
            height: 10%;
            text-align: center;
            background-color: #b1eec7;
            margin-bottom: 12px;
        }

        .main{
            height: 88%;
            background-color: #f3e0e6;
            overflow: hidden;
        }

        li{
            width: 220px;
            margin-right: 10px;
            height: 255px;
            float: left;
            text-align: center;
            line-height: 255px;
            font-size: 10px;
            margin-bottom: 12px;
            background-color: #f38080;
        }

        ul li:last-child{
            margin-right: 0;
        }



        li:hover{
            background-color: #8b7070;
        }

    </style>
</head>
<body>
    <div class="top">
        top
    </div>
    <div class="context">
        <div class="nav">nav</div>
        <div class="main">
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
            </ul>
            <ul>
                <li>5</li>
                <li>6</li>
                <li>7</li>
                <li>8</li>
            </ul>
        </div>
    </div>
    <div class="foot">
        foot
    </div>
</body>
</html>

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5a-M5rGfwqI=,size_20,color_FFFFFF,t_70,g_se,x_16