basic style

按钮

<button style="color:#fff;background-color:#0366d6;cursor:pointer;outline: none;padding:3px;border-radius: 3px;">#0366d6</button>

a链接

https://scottxiong.org

<a href="" style="color: #0366d6;text-decoration: none;background-color: initial;">https://scottxiong.org</a>

背景

<div style="width: 60px;height: 60px;background-color:#f5f6f7;"> #f5f6f7</div>

active

<div style="color: #1890ff;background-color: #e5f7ff;">active</div>
<div style="color: rgba(0,0,0,0.65);;background-color: #fff;">normal</div>

font color

avator

facebook standard size: 49x49px

<div style="width:49px;height:49px;background-color:#ccc;border-radius:50%;overflow: hidden;">
    <img src="https://avatars2.githubusercontent.com/u/44701197?s=460&v=4" alt="">
</div>

flex

flex-direction: row;

1:1

<div style="display: flex;flex-direction: row;background: #ccc; text-align: center;">
    <div style="flex:1;color: green;">微信</div>
    <div style="flex:1;">通讯录</div>
    <div style="flex:1;">发现</div>
    <div style="flex:1;">我</div>
</div>

1:4

<div style="display: flex;flex-direction: row;background: #ccc; text-align: center;">
    <div style="flex:1;background: red;">aa</div>
    <div style="flex:4;">bb</div>
</div>

flex-direction: column;

<div style="display: flex;flex-direction: column;background: #ccc; text-align: center;">
    <div style="flex:1;color: green; order: 4">微信</div>
    <div style="flex:1;">通讯录</div>
    <div style="flex:1;">发现</div>
    <div style="flex:1;">我</div>
</div>

<div style="display: flex;flex-direction: column;background: #ccc; text-align: center;">
    <div style="flex:1;background: red;">aa</div>
    <div style="flex:4;">bb</div>
</div

comment

cloud chaser @nickname * Sep 12

Always remember who you are, even you are nobody.

<div style="display: flex;flex-direction: row;box-sizing: border-box; border: 1px solid #e6ecf0;">
    <div style="flex:1;padding: 15px;">
       <div style="width:49px;height:49px;background-color:#ccc;border-radius:50%;overflow: hidden;">
           <img src="../imgs/3.jpg"  alt="">
       </div>    
    </div>
    <div style="flex:15;padding: 5px;">
        <div style="color: rgba(0,0,0,1.00);">cloud chaser<span style="color: #999;"> @nickname * Sep 12</span></div>
        <p>Always remember who you are, even you are nobody.</p>
        <img src="../imgs/2.jpg" style="border-radius: 8px;width: 600px;height: 330px;" alt="">
    </div>
</div>

table

更多请参考: https://www.jianshu.com/p/0712c33dd885

<table border="1" width="500" align="center" cellspacing="0" cellpadding="6">
        <caption>学生成绩表</caption>
        <thead>
            <tr align="center">
                <th>成绩</th>
                <th>语文</th>
                <th>数学</th>
                <th>英语</th>
            </tr>
        </thead>
        <tbody>
            <tr align="center">
                <td>小明</td>
                <td>89</td>
                <td>90</td>
                <td>98</td>
            </tr>
            <tr align="center">
                <td>小红</td>
                <td>96</td>
                <td>100</td>
                <td>99</td>
            </tr>
            <tr align="center">
                <td>小张</td>
                <td>54</td>
                <td>23</td>
                <td>19</td>
            </tr>
        </tbody>
</table>