下面由Laravel教程欄目給大家推薦兩款非常漂亮的markdown格式css樣式，希望對(duì)大家有所幫助！

發(fā)送markdown格式郵件時(shí)推薦的兩款非常漂亮的markdown格式css樣式：

注意

如果你用了laravel 框架 你需要在resources/views/vendor/mail/html/themes聲明文件.css例如repayment.css

第一款非常漂亮灰色高亮格式

table { width: 100%; /*表格寬度*/ max-width: 65em; /*表格最大寬度，避免表格過寬*/ border: 1px solid #dedede; /*表格外邊框設(shè)置*/ margin: 15px auto; /*外邊距*/ border-collapse: collapse; /*使用單一線條的邊框*/ empty-cells: show; /*單元格無內(nèi)容依舊繪制邊框*/ } table th, table td { height: 35px; /*統(tǒng)一每一行的默認(rèn)高度*/ border: 1px solid #dedede; /*內(nèi)部邊框樣式*/ padding: 0 10px; /*內(nèi)邊距*/ } table th { font-weight: bold; /*加粗*/ text-align: center !important; /*內(nèi)容居中，加上 !important 避免被 Markdown 樣式覆蓋*/ background: rgba(158,188,226,0.2); /*背景色*/ } table tbody tr:nth-child(2n) { background: rgba(158,188,226,0.12); } table tr:hover { background: #efefef; } table th { white-space: nowrap; /*表頭內(nèi)容強(qiáng)制在一行顯示*/ } table td { white-space: nowrap; }

第二款藍(lán)色商務(wù)格式

body {     font-family: "Microsoft Yahei", Helvetica, arial, sans-serif ;     font-size: 14px;     line-height: 1.6;     padding-top: 10px;     padding-bottom: 10px;     background-color: white;     padding: 30px;     color: #516272;}  body > *:first-child {     margin-top: 0 !important; } body > *:last-child {     margin-bottom: 0 !important; }  a {     color: #4183C4; } a.absent {     color: #cc0000; } a.anchor {     display: block;     padding-left: 30px;     margin-left: -30px;     cursor: pointer;     position: absolute;     top: 0;     left: 0;     bottom: 0; }  h1, h2, h3, h4, h5, h6 {     margin: 20px 0 10px;     padding: 0;     font-weight: bold;     -webkit-font-smoothing: antialiased;     cursor: text;     position: relative; }  h1:hover a.anchor, h2:hover a.anchor, h3:hover a.anchor, h4:hover a.anchor, h5:hover a.anchor, h6:hover a.anchor {     background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA09pVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoMTMuMCAyMDEyMDMwNS5tLjQxNSAyMDEyLzAzLzA1OjIxOjAwOjAwKSAgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OUM2NjlDQjI4ODBGMTFFMTg1ODlEODNERDJBRjUwQTQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OUM2NjlDQjM4ODBGMTFFMTg1ODlEODNERDJBRjUwQTQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo5QzY2OUNCMDg4MEYxMUUxODU4OUQ4M0REMkFGNTBBNCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo5QzY2OUNCMTg4MEYxMUUxODU4OUQ4M0REMkFGNTBBNCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PsQhXeAAAABfSURBVHjaYvz//z8DJYCRUgMYQAbAMBQIAvEqkBQWXI6sHqwHiwG70TTBxGaiWwjCTGgOUgJiF1J8wMRAIUA34B4Q76HUBelAfJYSA0CuMIEaRP8wGIkGMA54bgQIMACAmkXJi0hKJQAAAABJRU5ErkJggg==) no-repeat 10px center;     text-decoration: none; }  h1 tt, h1 code {     font-size: inherit; }  h2 tt, h2 code {     font-size: inherit; }  h3 tt, h3 code {     font-size: inherit; }  h4 tt, h4 code {     font-size: inherit; }  h5 tt, h5 code {     font-size: inherit; }  h6 tt, h6 code {     font-size: inherit; }  h1 {     font-size: 28px;     color: #2B3F52; }  h2 {     font-size: 24px;     border-bottom: 1px solid #DDE4E9;     color: #2B3F52; }  h3 {     font-size: 18px;     color: #2B3F52;  }  h4 {     font-size: 16px;     color: #2B3F52;  }  h5 {     font-size: 14px;     color: #2B3F52;  }  h6 {     color: #2B3F52;     font-size: 14px; }  p, blockquote, ul, ol, dl, li, table, pre {     margin: 15px 0;     color: #516272;  }  hr {     background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAECAYAAACtBE5DAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OENDRjNBN0E2NTZBMTFFMEI3QjRBODM4NzJDMjlGNDgiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OENDRjNBN0I2NTZBMTFFMEI3QjRBODM4NzJDMjlGNDgiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4Q0NGM0E3ODY1NkExMUUwQjdCNEE4Mzg3MkMyOUY0OCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4Q0NGM0E3OTY1NkExMUUwQjdCNEE4Mzg3MkMyOUY0OCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PqqezsUAAAAfSURBVHjaYmRABcYwBiM2QSA4y4hNEKYDQxAEAAIMAHNGAzhkPOlYAAAAAElFTkSuQmCC) repeat-x 0 0;     border: 0 none;     color: #cccccc;     height: 4px;     padding: 0;  }  body > h2:first-child {     margin-top: 0;     padding-top: 0; } body > h1:first-child {     margin-top: 0;     padding-top: 0; } body > h1:first-child + h2 {     margin-top: 0;     padding-top: 0; } body > h3:first-child, body > h4:first-child, body > h5:first-child, body > h6:first-child {     margin-top: 0;     padding-top: 0; }  a:first-child h1, a:first-child h2, a:first-child h3, a:first-child h4, a:first-child h5, a:first-child h6 {     margin-top: 0;     padding-top: 0; }  h1 p, h2 p, h3 p, h4 p, h5 p, h6 p {     margin-top: 0; }  li p.first {     display: inline-block; } li {     margin: 0; } ul, ol {     padding-left: 30px; }  ul :first-child, ol :first-child {     margin-top: 0; }  dl {     padding: 0; } dl dt {     font-size: 14px;     font-weight: bold;     font-style: italic;     padding: 0;     margin: 15px 0 5px; } dl dt:first-child {     padding: 0; } dl dt > :first-child {     margin-top: 0; } dl dt > :last-child {     margin-bottom: 0; } dl dd {     margin: 0 0 15px;     padding: 0 15px; } dl dd > :first-child {     margin-top: 0; } dl dd > :last-child {     margin-bottom: 0; }  blockquote {     border-left: 4px solid #ECF0F3;     /*padding: 0 15px;*/     padding: 15px;     background-color:#F7F9FA;     color: #2B3F52; } blockquote > :first-child {     margin-top: 0; } blockquote > :last-child {     margin-bottom: 0; }  table {     padding: 0;border-collapse: collapse; } table tr {     border-top: 1px solid #cccccc;     background-color: white;     margin: 0;     padding: 0; } table tr:nth-child(2n) {     background-color: #f8f8f8; } table tr th {     font-weight: bold;     border: 1px solid #cccccc;     margin: 0;     padding: 6px 13px; } table tr td {     border: 1px solid #cccccc;     margin: 0;     padding: 6px 13px; } table tr th :first-child, table tr td :first-child {     margin-top: 0; } table tr th :last-child, table tr td :last-child {     margin-bottom: 0; }  img {     max-width: 100%; }  span.frame {     display: block;     overflow: hidden; } span.frame > span {     border: 1px solid #dddddd;     display: block;     float: left;     overflow: hidden;     margin: 13px 0 0;     padding: 7px;     width: auto; } span.frame span img {     display: block;     float: left; } span.frame span span {     clear: both;     color: #333333;     display: block;     padding: 5px 0 0; } span.align-center {     display: block;     overflow: hidden;     clear: both; } span.align-center > span {     display: block;     overflow: hidden;     margin: 13px auto 0;     text-align: center; } span.align-center span img {     margin: 0 auto;     text-align: center; } span.align-right {     display: block;     overflow: hidden;     clear: both; } span.align-right > span {     display: block;     overflow: hidden;     margin: 13px 0 0;     text-align: right; } span.align-right span img {     margin: 0;     text-align: right; } span.float-left {     display: block;     margin-right: 13px;     overflow: hidden;     float: left; } span.float-left span {     margin: 13px 0 0; } span.float-right {     display: block;     margin-left: 13px;     overflow: hidden;     float: right; } span.float-right > span {     display: block;     overflow: hidden;     margin: 13px auto 0;     text-align: right; }  code, tt {     margin: 0 2px;     padding: 0 5px;     white-space: nowrap;     border: 1px solid #eaeaea;     background-color: #f8f8f8;     border-radius: 3px; }  pre code {     margin: 0;     padding: 0;     white-space: pre;     border: none;     background: transparent; }  .highlight pre {     background-color: #f8f8f8;     border: 1px solid #cccccc;     font-size: 13px;     line-height: 19px;     overflow: auto;     padding: 6px 10px;     border-radius: 3px; }  pre {     background-color: #f8f8f8;     border: 1px solid #cccccc;     font-size: 13px;     line-height: 19px;     overflow: auto;     padding: 6px 10px;     border-radius: 3px; } pre code, pre tt {     background-color: transparent;     border: none; }  sup {     font-size: 0.83em;     vertical-align: super;     line-height: 0; }  code {     white-space: pre-wrap;     word-break: break-all;     display: block;  } * {     -webkit-print-color-adjust: exact; } @media screen and (min-width: 914px) {     body {         width: 960px;         margin:0 auto;     } } @media print {     table, pre {         page-break-inside: avoid;     }     pre {         word-wrap: break-word;     } }

推薦：《最新的五個(gè)Laravel視頻教程》