HTML5新特性之标签使用：header、nav、aside、main、footer......

最新推荐文章于 2021-08-19 19:06:24 发布

VIP文章 bkLion

最新推荐文章于 2021-08-19 19:06:24 发布

阅读量1w

点赞数 17

分类专栏：前端

本文链接：https://blog.csdn.net/h_w_1212/article/details/104554528

版权

关注重工黑大帅，学习不迷路

一、概念理解

header	一般放置在页面的顶部或者页面中某个区块元素的顶部，包含整个页面或某个区块的标题等信息
nav	页面导航
aside	侧边栏区域
main	注内容区
footer	页脚
artical	一段独立的内容
section	通常包含一个明确的主题
figure	带有标题的图片或其它文件
figcaption	经常和figure连用，图片或其它文件的文字说明
time	表示时间
strong	着重强调
b	加粗效果
i	文字倾斜

二、效果图显示

在这里插入图片描述

三、实际应用

1.应用效果图

在这里插入图片描述

2.上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="keywords" content="网页布局，浮动">
    <meta name="description" content="这是一个精美的网页布局">
    <meta http-equiv="refresh" content="20">
    <title>网页布局练习</title>
</head>
<style type="text/css">
    *{
   
        margin: 0;
        padding: 0;
    }
    ul{
   
        list-style:none;
        display: inline-block;
    }
    a{
   
        text-decoration: none;
    }
    .clears {
   
        clear: both;
        height: 0;
        line-height: 0;
        font-size: 0;
        overflow: hidden;
    }
    body {
   
        margin: 0 auto;
    }
    .total {
   
        width: 1920px;
        height: 825px;
        background-color:darkgrey;
        padding-top: 50px;
    }
    .all{
   
        widht: 1900px;
        height: 740px;
        background-color:aquamarine;
        margin-left:50px;
        margin-right: 50px;
        padding-top: 40px;

    }
    .header {
   
        height: 50px;
        width: 1300px;
        background-color: aqua;
        color: white;
        margin: 20px auto 30px;
        text-align: center;
        line-height: 50px;
        font-size: 30px;
        cursor: pointer;
        animation: banner_big 1s infinite alternate;
        animation: Ani 0.4s  0.2s both;
    }
    @keyframes banner_big{
   
        0%{
   
            opacity: 0;
            transform: scale(1,1);
        }
        100%{
   
            opacity: 1;
            transform: scale(1.5,1.5);
        }
    }
    @keyframes Ani{

最低0.47元/天解锁文章

bkLion

关注

17
点赞
踩
65

收藏

觉得还不错? 一键收藏
5
评论
HTML5新特性之标签使用：header、nav、aside、main、footer......

关注重工黑大帅，学习不迷路一、概念理解header一般放置在页面的顶部或者页面中某个区块元素的顶部，包含整个页面或某个区块的标题等信息nav页面导航aside侧边栏区域main注内容区footer页脚artical一段独立的内容section通常包含一个明确的主题figure带有标题的图片或其它文件figcaption...
复制链接

扫一扫