警报 - 偏移图标，标题和正文

时间：2018-05-04 02:51:22

标签： html css

我正在尝试创建一个系统警报消息，该消息被模拟（仅仅是通常情况下），如下所示：

enter image description here

但是，由于我不是一个前端开发人员/用户体验人员，所以我无法这样做，所以我正在向社区寻求帮助。

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>

CSS： 

.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;
}

这是一个随附的JSFiddle，试图实现这一目标。

https://jsfiddle.net/latchkostov/dLL1r1ap/

3 个答案:

答案 0 :(得分：1)

嘿@blgrnboy fiddle带有工作演示

＆＃13;
＆＃13; 
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
* {
  box-sizing: border-box;
  margin:0;
  padding:0;
}
body {
  padding: 50px;
    font-family: 'Open Sans', sans-serif;
}

.apparent-message {
  width: 100%;
  border-style: solid;
  border-width: 2px;
  margin-bottom: 50px;
}
.apparent-message .apparent-message-icon {
  flex: 0 0 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  color: #fff;
  text-shadow: 1px 1px 10px #000;
}
.apparent-message .apparent-message-icon .fa-2x {
  box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.45);
}

.message-container {
  display: flex;
}
.message-container .content-container {
  flex-basis: 0;
  flex-grow: 1;
  max-width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 75px;
  padding-left: 15px;
  background-color: #fff;
  
  position: relative;
}
.message-container .content-container .message-header {
  font-size: 20px;
}
.message-container .content-container .message-body {
  margin-top: 10px;
  font-size: 14px;
  color: #515151;
}
.message-container .content-container .message-action {
  position: absolute;
  bottom: 10px;
  right: 30px;
}

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

.warning-message .message-action,
.warning-message .message-header{
  color: #f39b0e;
}

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

.info-message .message-action,
.info-message .message-header{
  color: #3598db;
}

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

.success-message .message-action,
.success-message .message-header{
  color: #43a046;
}

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

.error-message .message-action,
.error-message .message-header{
  color: #e1374c;
}
＆＃13; 
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

您好，您只能使用HTML 5。请找下面的例子。

Object.freeze(originalObject)
var close = document.getElementsByClassName("closebtn");
var i;

for (i = 0; i < close.length; i++) {
    close[i].onclick = function(){
        var div = this.parentElement;
        div.style.opacity = "0";
        setTimeout(function(){ div.style.display = "none"; }, 600);
    }
}
.alert {
    padding: 20px;
    background-color: #f44336;
    color: white;
    opacity: 1;
    transition: opacity 0.6s;
    margin-bottom: 15px;
}

.alert.success {background-color: #4CAF50;}
.alert.info {background-color: #2196F3;}
.alert.warning {background-color: #ff9800;}

.closebtn {
    margin-left: 15px;
    color: white;
    font-weight: bold;
    float: right;
    font-size: 22px;
    line-height: 20px;
    cursor: pointer;
    transition: 0.3s;
}

.closebtn:hover {
    color: black;
}

答案 2 :(得分：0)

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

.warning-box{float:left;width:100%;position:relative;border:1px solid yellow;margin-bottom:15px;}
info{border:1px solid blue;}
.icon{float:left;width:100px;background:yellow;height:100px;text-align:center;position:relative;overflow:hidden;}
.info .icon{background:blue;}
.icon span{position:absolute;top:auto;margin:33% auto;left:0;right:0;bottom:auto}
.text{float:left;width:calc(100% - 220px);width:-webkit-calc(100% - 200px);padding:5px;}
.view{float:left;width:90px;text-align:center;position:relative;height:100px}
.view span{position:absolute;bottom:10px;left:10px;}
<div class="warning-box">
<div class="icon"><span>⚠️</span></div>
<div class="text"><p>Lorem ipsum dolor sit amet, case discere concludaturque in mel, omnis aliquid offendit ut usu, ea minim partiendo vix</p></div>
<div class="view"><span>View</span></div>
</div>
<div class="warning-box info">
<div class="icon"><span>❕</span></div>
<div class="text"><p>Lorem ipsum dolor sit amet, case discere concludaturque in mel, omnis aliquid offendit ut usu, ea minim partiendo vix</p></div>
<div class="view"><span>View</span></div>
</div>

相关问题
最新问题