Html 警报-偏移图标、标题和正文文本

我正在尝试创建一条系统警报消息，该消息经过模拟（仅为Grahplicy），如下所示：

然而，我还不能做到这一点，因为我不是一个前端开发人员/用户体验人员，所以我正在向社区寻求帮助

HTML:

<div class="apparent-message warning-message">
  <div class="message-container">
    <div class="apparent-message-icon fa fa-fw fa-2x fa-exclamation-triangle">
        </div>
        <div class="content-container">
            <div class="message-header">
                <span>Header</span>
            </div>
            <div class="message-body">Message</div>
            <div class="message-action">View</div>
        </div>
  </div>
</div>

.apparent-message {
    height: 75px;
    width: 75%;
    border-style: solid;
    border-width: 1px;
    margin-bottom: 50px;

    .apparent-message-icon {
        font-size: 3em;
        color: #fff;
        padding: 15px 0px 0px 0px;
        .fa-2x{
            box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.45);
        }
        text-shadow: 1px 1px 10px #000;
        width: 100%;
        height: 100%;
    }
}

.message-container {
    > div {
        display: inline-block;
    }
    .icon-col {
        width: 7%;
    }
    .content-container {
        width: 92.4%;
        height: 98%;
        padding-left: 15px;
        background-color: #fff;
        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.45);
        .message-header {
            margin-top: 10px;
            font-size: 20px;
        }
        .message-body {
            margin-top: 10px;
            font-size: 14px;
            color: #515151;
        }
        .message-action {
            position: absolute;
            right: 30px;
            bottom: 10px;
        }
    }
}

.warning-message {
    background-color:#f39b0e;
    border-color: #f39b0e;
}

.info-message {
    background-color:#3598db;
    border-color: #3598db;
}

.success-message {
    background-color:#43a046;
    border-color: #43a046;
}

.error-message {
    background-color:#e1374c;
    border-color: #e1374c;
}

下面是一个附带的JSFIDLE，它试图实现这一点

---

您好，您只能使用HTML5来完成此操作。请找到下面的例子

var close=document.getElementsByClassName（“closebtn”）；
var i；
对于（i=0；i

.alert{
填充：20px；
背景色：#f44336；
颜色：白色；
不透明度：1；
过渡：不透明度0.6s；
边缘底部：15px；
}
.alert.success{背景色：#4CAF50；}
.alert.info{背景色：#2196F3；}
.alert.warning{背景色：#ff9800；}
.关闭{
左边距：15px；
颜色：白色；
字体大小：粗体；
浮动：对；
字体大小：22px；
线高：20px；
光标：指针；
过渡：0.3s；
}
.closebtn:悬停{
颜色：黑色；
}

警报消息
单击“x”符号以关闭警报消息

&时代；
危险表示危险或潜在的负面行为。
&时代；
成功表示成功或积极的行动。
&时代；
信息表示中性的信息性更改或操作。
&时代；
警告表示可能需要注意的警告。

试试这个，根据需要进行更改

。警告框{浮动：左侧；宽度：100%；位置：相对；边框：1px纯黄色；边距底部：15px；}
信息{边框：1px纯蓝色；}
.icon{float:左；宽度：100px；背景：黄色；高度：100px；文本对齐：中心；位置：相对；溢出：隐藏；}
.info.icon{背景：蓝色；}
.icon span{位置：绝对；顶部：自动；边距：33%自动；左侧：0；右侧：0；底部：自动}
.text{float:left；width:calc（100%-220px）；width:-webkit-calc（100%-200px）；padding:5px；}
.视图{浮动：左；宽度：90px；文本对齐：中心；位置：相对；高度：100px}
.视图span{位置：绝对；底部：10px；左侧：10px；}

⚠️
在mel中，所有的不动产都会触犯我们的法律，最低的部分是vix

看法
❕
在mel中，所有的不动产都会触犯我们的法律，最低的部分是vix

看法

嘿@blgrnboy这里有一个工作演示

@导入url（'https://fonts.googleapis.com/css?family=Open+Sans'）；
* {
框大小：边框框；
保证金：0；
填充：0；
}
身体{
填充：50px；
字体系列：“开放式Sans”，无衬线；
}
.明显的信息{
宽度：100%；
边框样式：实心；
边框宽度：2倍；
边缘底部：50px；
}
.外观消息。外观消息图标{
flex:070px；
显示器：flex；
对齐项目：居中；
证明内容：中心；
字体大小：30px；
颜色：#fff；
文本阴影：1px10px#000；
}
.明显信息。明显信息图标。fa-2x{
盒影：1px1px0pxRGBA（0,0,0,0.45）；
}
.邮件容器{
显示器：flex；
}
.message container.content container{
弹性基准：0；
柔性生长：1；
最大宽度：100%；
显示器：flex；
证明内容：中心；
弯曲方向：立柱；
高度：75px；
左侧填充：15px；
背景色：#fff；
位置：相对位置；
}
.message container.content container.message header{
字体大小：20px；
}
.message container.content container.message body{
边缘顶部：10px；
字体大小：14px；
颜色：#515151；
}
.message container.content container.message操作{
位置：绝对位置；
底部：10px；
右：30px；
}
.警告信息{
背景色：#f39b0e；
边框颜色：#f39b0e；
}
.警告消息。消息操作，
.警告消息.消息头{
颜色：#f39b0e；
}
.info消息{
背景色：#3598db；
边框颜色：#3598db；
}
.info消息。消息操作，
.info消息.消息头{
颜色：#3598db；
}
.成功信息{
背景色：#43a046；
边框颜色：#43a046；
}
.成功消息。消息操作，
.成功消息.消息头{
颜色：#43a046；
}
.错误消息{
背景色：#e1374c；
边框颜色：#e1374c；
}
.错误消息。消息操作，
.错误消息.消息头{
颜色：#e1374c；
}

标题
消息
看法

有什么问题吗？您尝试了什么？@reergymerej编辑了问题以包含该问题。需要帮助才能使事物正确显示。所以你需要准确地标记相同的内容，对吗？@patelapan，这是aimOk@blgrnboy。我得到了它我正在寻求帮助，更多关于如何获得完全像模型的外观。我知道还有其他的选择，但我需要实现它完全模拟。然后你可以参考这里的图标链接。看起来和你需要的差不多。