Mengesyorkan dua gaya css format penurunan nilai yang digunakan dalam laravel

Lajur tutorial Laravel yang berikut mengesyorkan dua gaya css format penurunan harga yang sangat cantik, saya harap ia akan membantu semua orang!

Dua gaya css format markdown yang sangat cantik disyorkan semasa menghantar e-mel format markdown:

                                                                                                               

Nota

Jika anda menggunakan rangka kerja laravel, anda perlu mengisytiharkannya dalam resources/views/vendor/mail/html/themes文件.css contohnya pembayaran balik.css

Format serlahan kelabu pertama yang sangat cantik

table {
width: 100%; /*表格宽度*/
max-width: 65em; /*表格最大宽度，避免表格过宽*/
border: 1px solid #dedede; /*表格外边框设置*/
margin: 15px auto; /*外边距*/
border-collapse: collapse; /*使用单一线条的边框*/
empty-cells: show; /*单元格无内容依旧绘制边框*/
}
table th,
table td {
height: 35px; /*统一每一行的默认高度*/
border: 1px solid #dedede; /*内部边框样式*/
padding: 0 10px; /*内边距*/
}
table th {
font-weight: bold; /*加粗*/
text-align: center !important; /*内容居中，加上 !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; /*表头内容强制在一行显示*/
}
table td {
white-space: nowrap;
}

Tidak . Dua format perniagaan biru

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

Disyorkan: "Lima tutorial video Laravel terbaharu"

Atas ialah kandungan terperinci Mengesyorkan dua gaya css format penurunan nilai yang digunakan dalam laravel. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!