如何创建：创建弹出消息

学习如何使用 CSS 创建弹出消息（Callout Message）。

弹出消息

弹出消息通常位于页面底部，用于通知用户一些特殊事项：提示/技巧、折扣、需要采取的行动等。

亲自试一试

创建弹出消息

第一步 - 添加 HTML：

<div class="callout">
  
Callout Header

  ×
  

    
Some text...

如果您想要关闭弹出消息的功能，请添加一个 元素，并为其设置一个 onclick 属性，该属性表示“当您点击我时，隐藏我的父元素”，即容器 <div class="callout">。

సలహా:హెచ్ఎంఎల్ ఎంబ్లెమ్ "&times;" అక్షరం "x" సృష్టించండి。

రెండవ చర్య - CSS జోడించు:

కల్లౌట్ మెసేజ్ బాక్స్ మరియు మూసివేసిన బటన్కు స్టైల్స్ అమర్చు:

/* కల్లౌట్ మెసేజ్ బాక్స్ - పేజీ బోటంలో స్థిరంగా */
.callout {
  పోసిషన్: ఫిక్స్డ్;
  బోటం: 35పిక్సెల్స్;
  రెడ్డి: 20పిక్సెల్స్;
  మార్గం-లెఫ్ట్: 20పిక్సెల్స్;
  మాక్స్-విడ్త్: 300పిక్సెల్స్;
{}
/* కల్లౌట్ మెసేజ్ హెడర్ */
.callout-header {
  ప్యాడింగ్: 25పిక్సెల్స్ 15పిక్సెల్స్;
  బ్యాక్గ్రౌండ్: #555;
  ఫాంట్-సైజ్: 30పిక్సెల్స్;
  రంగు: వెండి;
{}
/* కల్లౌట్ మెసేజ్ కంటైనర్/ప్రధానం */
.callout-container {
  ప్యాడింగ్: 15పిక్సెల్స్;
  బ్యాక్గ్రౌండ్-కలర్: #ccc;
  రంగు: బ్లాక్;
{}
/* మూసివేసిన బటన్ */
.closebtn {
  పోసిషన్: ఆబ్సూల్యూట్;
  టాప్: 5పిక్సెల్స్;
  రెడ్డి: 15పిక్సెల్స్;
  రంగు: వెండి;
  ఫాంట్-సైజ్: 30పిక్సెల్స్;
  కర్సర్: పాయింటర్;
{}
/* మౌస్ హోవర్ చేసినప్పుడు రంగు మార్చు */
.closebtn:hover {
  రంగు: లైట్ గ్రే;
{}

亲自试一试

相关页面

教程：如何创建警告消息

教程：如何创建便签