25、网页布局示例

最新推荐文章于 2024-04-10 18:39:37 发布

五仁卤鸡翅

最新推荐文章于 2024-04-10 18:39:37 发布

阅读量162

点赞数

分类专栏： css 文章标签： css css3

本文链接：https://blog.csdn.net/MoonNight608/article/details/106931702

版权

css 专栏收录该内容

50 篇文章 0 订阅

订阅专栏

文章目录

介绍
网页布局示例

介绍

本文是在学习CSS时做的学习笔记，所有笔记内容为 CSS学习笔记

网页布局示例

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>meta</title>
</head>
<style>
header,main,footer{
    width:1000px;
    margin:0 auto;
}
// 设置头部
header{
    height:200px;
    background-color:silver; 
}
// 设置主体
main{
    height:200px;
    background-color:silver;
    margin:10px auto;
}
// 设置左侧导航
nav{
    float:left;
    width:200px;
    height:100%;
    background-color:yellow;
}
// 设置中间内容
article{
    float:left;
    width:580px;
    height:100%;
    background-color:orange;
    margin:0 10px;
}
aside{
    float:left;
    width:200px;
    height:100%;
    background-color:pink;
}

// 设置footer
footer{
    height:200px;
    background-color:silver;
}

       
</style>
<body>
<!--- 创建头部 -->
<header></header>

<!-- 创建网页的主体-->
<main>
  <nav></nav>
  <article></article>
  <aside></aside>
  
</main>

<!--网页底部-->
<footer></footer>


</body>
</html>