昨天介绍了各类提示框，今天来进行简单的范例：制作一个询问是否接受cookie的讯息框
同时也搭配 bootstrap 框架快速打造！
首先要先做出讯息框的大小及配置
<main>
<div class="message-box">
<div class="container"></div>
</div>
<body>
...
</body>
</main>
.message-box{
/* 设定高度跟宽度 */
width:300px;
height:200px;
/* 边框及背景样式 */
border:2px solid #000000;
background-color:#ffffff;
/* fixed不让这区块随滚轮移动 */
position:fixed;
/* 因为想放在左下角，因此设定上方跟左方的距离 */
top:calc(100vh - 200px - 20px);
left:20px;
}
因为我想要讯息框是在网页滚动时，依然呈现在左下角，因此会设定 position:fixed 因此会放置在 <body></body> 之外，不让他受到其他元件影响。
另外想要将讯息框放置在左下角，不要挡到中央区块，因此使用 top(物件上方距离)和 left(物件与左方距离)来更动位置。
left 在这边很单纯，我希望跟左边隔 20px，打上去就好了。
top 要空一大段距离，但是这段距离随着不同装置有不的数值，这里使用css的计算机 calc ，在後方使用 ( ) 就能帮你算出需要的数值。使用 100vh (萤幕100%高度) 扣掉讯息框的 200px 高度，再扣掉 20px 是我想要为讯息框跟下方边界留的距离，剩下就是讯息框在上方要留的高度了。
再来针对传递资讯做排版
<main>
<div class="message-box">
<div class="container">
<!-- 制作右上角的关闭叉叉：×是叉叉实体字符，因此会使用文字的样式 -->
<div class="row">
<div class="d-flex justify-content-end">
<button class="btn close">×</button>
</div>
</div>
<!-- 主要问题 -->
<div class="row justify-content-center question">
是否同意接受cookie?
</div>
<!-- 同意按钮 -->
<div class="row justify-content-center mt-3">
<button class="btn accept-btn">同意</button>
</div>
<!-- 不同意按钮 -->
<div class="row justify-content-center mt-2">
<button class="btn accept-no-btn">不同意</button>
</div>
</div>
</div>
<body></body>
</main>
/* 让叉叉大一点 */
.close{
font-size:20px;
}
/* 不想要按下按钮的外围样式 */
.btn:focus{
box-shadow:none;
}
/* 问题的字体大小 */
.question{
font-size:16px;
}
/* 同意按钮的字体大小、宽度、样式 */
.accept-btn{
font-size:14px;
width:70%;
background-color:#000000;
color:#ffffff;
}
/* 同意按钮滑鼠移入样式 */
.accept-btn:hover{
color:#ffffff;
opacity:85%;
}
/* 同意按钮的字体大小、宽度、样式 */
.accept-no-btn{
font-size:14px;
width:70%;
border:#000000 1.5px solid;
color:#000000;
}
范例连结：https://codepen.io/aavlice/pen/gORVMLX
透过置换位置、样式设计等，就能快速变出不同的用途！简单介绍完电商的必用的提示类元件，多观察并分析讯息传递的用途，可以将这类型元件运用得更恰当喔！
tags: 铁人赛 AWS Outposts network 前情提要 昨天将 AWS 的网路配置好...
注释基本概念 注释(Annotations) 是Java 5.0 加入的新功能，它强化了程序注解与J...
当客体机在 Proxmox VE 节点上运作且客体磁碟储存於节点的本机储存即区时，若想要让客体机的...
115. Distinct Subsequences https://leetcode.com/pr...
react-router-dom中的适用於function component的hook函式，在上一...