一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，点击查看活动详情。 layui是大家众所周知的一款ui框架 下面组要给大家讲一讲layui的弹层组件layer 基础参数

看到新浪微博、百度百家等等平台上都带有文章“打赏”功能，觉得很新鲜，于是也想在自己的博客中加入“打赏”功能。

当然，加入打赏功能并非是真的想要让别人打赏。因为只有那些真正能引起共鸣，发人深思,让人受益匪浅的文章才值得打赏，值得点赞。

而我的博客站仅仅是用作记录笔记，当做自己的知识库（如果能不经意间帮助别人那是再好不过了）。

加入打赏功能纯粹是“觉得好玩”，就是这么简单，Just have a fun!（博主喜欢折腾，看见一个酷炫的功能就想去实现它）

上节课的时候我们完成的页面是这个样子！

• 之后我们通过绝对定位来解决位置定位的问题

 .header-container {
        width: 1200px;
        margin: 0 auto;
         
        left: 50%;
        top: 50%;
}
header {
        height: 100vh;
        background-color: orange;
        position: relative;
}

编辑导读：B类产品设计时一定要注意产品细节，即使是对话框这样容易被忽略的产品设计细节也不要放过。本文从“对话框 vs 抽屉”的设计细节出发，给出不同的设计细节及展示，一起来看看。

说在前面：对话框和抽屉都是在当前页面之上覆盖出现的组件，让用户在不离开主路径的情况下，查看信息/提示/反馈，或快速执行某些的操作。两者的交互模式有类似之处，使用场景也有所重叠。本文对两个组件的主要差别进行了对比，并提供方法帮助大家快速判断应该选择哪一个。

本文介绍了CSS（层叠样式表）的基本概念和作用，然后深入讨论了10个常用的CSS属性。这些属性包括边框（border）、背景（background）、定位（positioning）、盒模型（box model）等。每个属性都有一个小节，解释了它的作用、语法和用法示例。

默认效果：

展开效果：

废话不多说，直接上代码：

Html Code：
<div class=" header" id="eventDetailNavMain">
<a href="javascript:void(0)" class="fl h-logo" title="logo">LOGO</a>
<!-- 按钮 -->
<a href="javascript:;" class="fr h-nu-btn" id="hNuBtn">
  <span class="h-nu-default-icon">
    </span> //-->h-nu-default-icon 放默认图标
    //-->h-nu-close-icon 放关闭X 图标
    <i class="common-icon h-nu-close-icon"></i>
</a>				
<div class="h-nu-box">
  //这里还可以放登陆-退出等div的box，布局要做好扩展
  <div class="h-nav-box">//h-nav-box 这个是导航box
    <ul class="nav nav-tabs clearfix ">
      <li class="item itemli">
        <a href="/" class="anchoritem">首页</a>
</li>
<li class="item itemli active">
  <a href="#dsinfo" class="anchoritem">大赛简介</a>
</li>
<li class="item itemli">
  <a href="#zzjg" class="anchoritem">组织机构</a>
</li>
<li class="item itemli">
  <a href="#scplan" class="anchoritem">赛程安排</a>
</li>
<li class="item itemli">
  <a href="#jxset" class="anchoritem">奖项设置</a>
</li>
<li class="item itemli">
  <a href="#works" class="anchoritem">参赛作品要求</a>
</li>
<li class="item itemli">
  <a href="#dspw" class="anchoritem">评审委员会</a>
</li>
<li class="item itemli">
  <a href="javascript:;" class="anchoritem applicjob">实习招聘</a>
</li>
</ul>
//这里可以是 其他box，这里放的是一个a标签
<a href="/" class="apply-link" target="_blank">
  报名入口
</a>
</div>
</div>
</div>
//hNuMask 是背景遮罩曾，可以全局的
 <a href="javascript:;" class="c-mask" id="cMask"></a>

注意：??锚点定位栏目结构：-->赛程安排 id="scplan"
<div class="resume-contitle">
  <div class="title-mod" id="scplan"></div>
	<h2 class="title-text">赛程安排</h2>
</div>
<style>//锚点准确跳转的关键样式
  .title-mod {
      position: absolute;
      left: 0;
      top: -60px;
      width: 100%;
      height: 60px;
      z-index: -1;
  }
</style>