咕噜猫小站

do it, do it right, do it right now

0%

python 发送邮件示例

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
#!/usr/bin/python
#-*- coding: utf-8 -*-

import smtplib
from email.mime.text import MIMEText
from email.header import Header
from email.utils import formataddr, formatdate

def sendEmail():
    smtpHost = "smtp.mxhichina.com"
    #smtpPort = 25
    sslPort = 465
    username = "abc@example.com"
    password = "123456"
    fromTuple = (u"发送用户", "abc@example.com")
    toTuples = [(u"接收用户1", "111@example.com"), (u"接收用户2","222@example.com")]

    encoding = 'utf-8'

    fromAddr = fromTuple[1]
    fromHeader = formataddr((Header(fromTuple[0], encoding).encode(), fromTuple[1].encode(encoding)))

    toAddr = []
    toHeader = []
    for addrPair in toTuples:
        toAddr.append(addrPair[1])
        h = formataddr((Header(addrPair[0], encoding).encode(), addrPair[1].encode(encoding)))
        toHeader.append(h)

    msg = MIMEText(u"这里是正文。", "plain", encoding)
    msg['Subject'] = Header(u'这是主题', encoding).encode()
    msg['From'] = fromHeader
    msg['To'] = ','.join(toHeader)
    msg['Date'] = formatdate()
    #print (toAddr)
    #print (toHeader)
    #print (msg.as_string())

    #三种方式: 明文/TLS/SSL
    #1.普通方式,通信过程不加密 (不推荐)
    #smtp = smtplib.SMTP(smtpHost, smtpPort)
    #smtp.ehlo()
    #smtp.login(username, password)

    #2.TLS加密方式,正常smtp端口,通信过程加密
    #smtp = smtplib.SMTP(smtpHost, smtpPort)
    #smtp.ehlo()
    #smtp.starttls()
    #smtp.ehlo()
    #smtp.login(username, password)

    #3.SSL加密方式,使用ssl端口,通信过程加密 (推荐)
    smtp = smtplib.SMTP_SSL(smtpHost, sslPort, "example.com")
    smtp.set_debuglevel(True)
    smtp.login(username, password)

    try:
        smtp.sendmail(fromAddr, toAddr, msg.as_string())
    finally:
        smtp.quit()
    

if __name__ == '__main__':
    sendEmail()

2020/02/07 增加 python3 格式:

Css 制作方形相框,并让图片居中

css

container css 方案一:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
.square-container {
    position: relative;
    width: 100%;
    padding-bottom: 100%;
    overflow: hidden;
    background-color: #e9eef1;
    border: 1px solid #aaa;
    border-radius: 4px;
    box-shadow: 3px 3px 3px #ccc;
}

container css 方案二: (更优,可以解决 min-height 无效的问题)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
.square-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: #e9eef1;
    border: 1px solid #aaa;
    border-radius: 4px;
    box-shadow: 3px 3px 3px #ccc;
}
.square-container:after {
    content: '';
    display: block;
    margin-top: 100%;
}

原理: padding 和 margin 的百分比是以容器的宽度为基数的,因此 padding-bottom 和 margin-top 的 100% 大小和宽度一致。

Css 元素居中

relative 元素水平居中

居中的首要条件就是指定宽度。使用以下 css:

1
margin: 0, auto;

relative 元素绝对居中

待补充。

absolute 元素绝对居中

  • 方案一:

absolutea 元素一般都会指定了宽高,使用以下 css 可以绝对居中:

纯 Css 制作 switch button

css 代码

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
/* The switch - the box around the slider */
.switch-button {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 24px;
}

/* Hide default HTML checkbox */
.switch-button input {
  display:none;
}

/* The slider */
.switch-button .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #aaa;
  -webkit-transition: .4s;
  transition: .4s;
}

.switch-button .slider:before {
  position: absolute;
  content: "";
  height: 80%;
  width: 40%;
  left: 10%;
  bottom: 10%;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

.switch-button input:checked + .slider {
  background-color: #2196F3;
}

.switch-button input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

.switch-button input:checked + .slider:before {
  -webkit-transform: translateX(100%);
  -ms-transform: translateX(100%);
  transform: translateX(100%);
}

.switch-button input:checked[disabled] + .slider {
  background-color: #96cbf5;
  cursor: not-allowed;
}

.switch-button input[disabled] + .slider {
  background-color: #ccc;
  cursor: not-allowed;
}

/* Rounded sliders */
.switch-button .slider.round {
  border-radius: 30px;
}

.switch-button .slider.round:before {
  border-radius: 50%;
}

使用方式

使用如下 html 代码结构,可以得到一个直角的 switch button