<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>消息通知</title> <link rel="stylesheet" type="text/css" href=""> <script type="" src=""></script> <style> div{ display: block; } .h1, .h2, .h3, .h4, .h5, .h6, a, abbr, body, cite, dd, dl, dt, h1, h2, h3, h4, h5, h6, iframe, input, li, object, ol, p, pre, span, ul { font-family: 'Microsoft YaHei','SF Pro Display',Roboto,Noto,Arial,'PingFang SC',sans-serif; } a{ text-decoration: none; cursor: pointer; } ul, li, ol, dl, dt, dd { list-style: none; } div, figure, footer, header, hgroup, html, iframe, img, mark, menu, nav, object, section, span, summary, table, tbody, td, tfoot, thead, tr, video { border: 0; margin: 0; padding: 0; } .my_msg_list{ width: 1500px; /* 修改宽度为1500px */ min-height: 400px; margin-bottom: 20px; } .my_msg_list_view{ position: relative; margin-left: 200px; background-color: #fff; padding: 24px 16px; -webkit-box-shadow: 0 2px 4px 0 rgba(0,0,0,0.28); box-shadow: 0 2px 4px 0 rgba(0,0,0,0.28);//左右边框阴影部分 min-height: 520px; box-sizing: border-box; } .my_msg_list_box{ border: 0; margin: 0; padding: 0; box-sizing: border-box; } .my_msg_list_con{ border: 0; margin: 0; padding: 0; box-sizing: border-box; } .my_msg_list_title{ width: 100%; margin: 0; font-size: 14px; color: #3d3d3d; margin-bottom: 8px; display: block; overflow: hidden; zoom: 1; box-sizing: border-box; } .fr{ float: right!important; display: inline-block; color: #4a90e2; } .line{ display: inline-block; height: 12px; margin: 2px 12px; border-right: 1px solid #979797; } .msg_list{ padding: 0 0 0 15px; min-height: 370px; box-sizing: border-box; } .msg_list_ul{ font-size: 14px; vertical-align: baseline; margin: 0; padding: 0; } .msg_list_ul_li{ position: relative; padding: 16px 0; border-bottom: 1px solid #e0e0e0; } .msg_type{ display: inline-block; height: 20px; line-height: 18px; padding: 0 5px; color: #4d4d4d; font-size: 12px; text-align: center; background-color: #fff; border: 1px solid #e0e0e0; vertical-align: top; } .msg_info_box{ width: 79%; color: #4d4d4d; display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; } .msg_title{ display: inline-block; width: 85%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; } .options-f{ width: 16%; height: 20px; margin: 0; margin-top: -20px; padding: 0; } .msg_content{ margin-top: 15px; margin-bottom: -16px; padding: 15px; background-color: #f7f7f7; font-size: 14px; color: #4d4d4d; line-height: 22px; } .page-box{ width: 100%; margin: 32px 0 20px; text-align: center; border-top-color: initial; border-right-color: initial; border-bottom-color: initial; border-left-color: initial; } </style> </head> <body> <div class="my_msg_list"> <div class="my_msg_list_view"> <div class="my_msg_list_box"> <div class="my_msg_list_con"> <div class="my_msg_list_title"> <span >消息总数:</span><span>3</span> <a class="fr">清空所有消息</a> <span class="line fr"></span> <a class="fr">全部标记为已读</a> </div> <div class="msg_list"><!----> <ul class="msg_list_ul"> <li class="msg_list_ul_li"> <span class="msg_type ">系统</span> <span class="msg_info_box"> <span class="msg_title">版本更新</span> </span> <div class="fr options_info options-f"> <a class="btn-rush csdnc-trash" style="float: right;"> <img src="../static/sousuo.jpg" height="10"> </a> <em class="data-time" style="float: right;padding-right:10px">2024-04-09</em> </div> <div class="msg_content ">系统已有17.4.1版本,将于今晚开始自动更新。</div> </li> <li class="msg_list_ul_li"> <span class="msg_type ">私信</span> <span class="msg_info_box"> <span class="msg_title">阿钟</span> </span> <div class="fr options_info options-f"> <a class="btn-rush csdnc-trash" style="float: right;"> <img src="../static/sousuo.jpg" height="10"> </a> <em class="data-time" style="float: right;padding-right:10px">2024-04-10</em> </div> <div class="msg_content ">今天打羽毛球不</div> </li> <li class="msg_list_ul_li"> <span class="msg_type ">消息</span> <span class="msg_info_box"> <span class="msg_title">点赞</span> </span> <div class="fr options_info options-f"> <a class="btn-rush csdnc-trash" style="float: right;"> <img src="../static/sousuo.jpg" height="10"> </a> <em class="data-time" style="float: right;padding-right:10px">2024-04-11</em> </div> <div class="msg_content ">阿钟点赞了你的瞬间</div> </li> </ul> </div> <div class="page-box"> </div> </div> </div> </div> </div> </body> </html>
这个学期好多项目要做阿
最新推荐文章于 2024-09-02 22:47:55 发布