Web实现：语义化标签页面布局

最新推荐文章于 2022-08-30 19:13:54 发布

jasmyn518

最新推荐文章于 2022-08-30 19:13:54 发布

阅读量1.2k

点赞数

分类专栏：笔记 HTML CSS 文章标签：前端 css html

本文链接：https://blog.csdn.net/jasmyn518/article/details/122643730

版权

笔记同时被 3 个专栏收录

127 篇文章 4 订阅

订阅专栏

HTML

78 篇文章 2 订阅

订阅专栏

CSS

68 篇文章 0 订阅

订阅专栏

效果图：
语义化标签
HTML部分代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>练习</title>
    <link rel="stylesheet" href="index.css" type="text/css" media="all" />
</head>

<body>
    <header class="header-title">header</header>
    <header class="header-navigation">header</header>
    <main class="main">
        <nav>nav</nav>
        <section>section</section>
    </main>
    <aside class="aside">aside</aside>
    <section class="section">section</section>z
</body>

</html>

CSS部分代码：

* {
    color: #fff;
    font-weight: bold;
    margin: 0px;
    padding: 0px;
}

.header-title {
    background-color: #1eaeff;
    text-align: center;
    line-height: 50px;
}

.header-navigation {
    width: 1062px;
    margin: 0 auto;
    background-color: #14c5c5;
    line-height: 114px;
    text-align: center;
}

.main {
    width: 1062px;
    height: 363px;
    margin: 0 auto;
    margin-bottom: 24px;
    background-color: red;
}

.main>nav {
    float: left;
    width: 225px;
    line-height: 363px;
    text-align: center;
    background-color: #f3bf34;
}

.main>section {
    float: right;
    width: 837px;
    line-height: 363px;
    text-align: center;
    background-color: #fa7f4b;
}

.aside {
    position: fixed;
    top: 221px;
    right: 0px;
    width: 67px;
    line-height: 289px;
    text-align: center;
    background-color: #9497e8;
}

.section {
    width: 1062px;
    margin: 0 auto;
    line-height: 169px;
    text-align: center;
    background-color: #87cf2b;
}