前端网页布局

最新推荐文章于 2024-05-09 12:12:30 发布

weixin_44819723

最新推荐文章于 2024-05-09 12:12:30 发布

阅读量55

点赞数

文章标签：前端 css3 css

本文链接：https://blog.csdn.net/weixin_44819723/article/details/122678151

版权

网页布局

头部为header

主体为main

底部为footer

<!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>网页结构</title>
    <style>

        header,main,footer{
            margin: 0 auto;
            width: 800px;
            
        }
        header{
            height: 150px;
            background-color: red;
        }
        main{
            margin: 10px auto;
            height: 600px;
            background-color: #bfa;
        }
        nav,article,aside{
            float: left;
            height: 100%;
        }
        nav{
            
            background-color: salmon;
            width: 190px;
            
           
        }

        article{
           
            background-color: sandybrown;
            width: 400px;
         
            margin: 0 10px;
        }

        aside{
            
            background-color: salmon;
            width: 190px;
   
        }
        footer{
            height: 150px;
            background-color: rosybrown;
        }
    </style>
</head>
<body>
    <!-- 头部 -->
    <header></header>

    <!-- 主体 -->
    <main>
        <!-- 左侧部分 -->
        <nav></nav>

        <!-- 中间部分 -->
        <article></article>

        <!-- 右边部分 -->
        <aside></aside>
    </main>

    <!-- 底部 -->
    <footer></footer>
</body>
</html>

效果图

在这里插入图片描述

weixin_44819723

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端网页布局

网页布局头部为header主体为main底部为footer<!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-sc
复制链接

扫一扫