页面的head部分需引入两个CSS样式文件，代码如下：

<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link type="text/css" rel="stylesheet" href="css/style.css">

页面的body部分结构比较简单，消息内容放在一个div容器里，6个按钮分别用了6个a标签，代码如下：

<div class="notify bar-top do-show" data-notification-status="success">要相信，美好的事情正在发生...</div>
<main>
  <div class="wrapper">
    <h1>6种CSS消息提示特效</h1>

    <nav>
      <a href="#" class="button" data-type="top-left" data-status="success">顶部左侧</a>
      <a href="#" class="button" data-type="top-right" data-status="warning">顶部右侧</a>
      <a href="#" class="button" data-type="bottom-right" data-status="error">底部右侧</a>
      <a href="#" class="button" data-type="bottom-left" data-status="notice">底部左侧</a>
      <a href="#" class="button" data-type="bar-top" data-status="plain">顶部固定</a>
      <a href="#" class="button" data-type="bar-bottom" data-status="plain">底部固定</a>
    </nav>
  </div>
</main>

页面的底部引入jQuery库和一个js文件，用来响应按钮的点击事件代码如下：

<script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script type="text/javascript" src="js/index.js"></script>