CSS的介绍
Cascading Style Sheet 层叠样式表
主要的功能：定位对应的标签 给标签设计样式对标签进行布局
选择器Selector
定位标签的方式
样式设计与布局
-
在HTML文档中引入CSS样式设计方式
1.1 在相应的标签 与属性style的格式 给标签添加样式 [仅对设计的标签有用]
1.2 在head标签中 引入style标签 style标签之间就是CSS的代码 【只要满足选择器要求 就能定位】 -
选择器Selector
全局选择器 * 匹配所有的标签
元素选择器 根据标签名称进行定位
属性选择器
普通属性选择器
id属性选择器
类属性选择器
包含选择器
查找子标签的
查找后辈标签的结构选择器
第一个子元素
第N个子元素
倒数第1个子元素
倒数第N个子元素
CSS引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*CSS的注释*/
/* 元素选择器 根据标签名称进行定位
标签名称{
样式名: 样式值;
样式名: 样式值;
}
*/
div{
/* 边框 边框颜色 线宽 线条样式[solid单实线 double双实线 dotted 点虚线 dashed 段虚线] */
border: green 2px solid;
}
</style>
</head>
<body>
<div style="width: 1000px; height: 300px; background-color: blue"></div>
<div style="width: 1000px; height: 300px"></div>
</body>
</html>
全局选择器与元素选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 全局选择器 */
*{
border: blueviolet 2px dashed;
}
/* 元素选择器 */
div{
/*rgb 红绿蓝三原色根据颜色的亮度对颜色进行调配 亮度的取值0-255
a -- alpha 透明度 值是0-1 0是纯透明的 1纯不透明的
*/
background-color: rgba(167, 103, 231, 0.8);
}
</style>
</head>
<body>
<div>
<p>每经AI快讯，根据调研日期截止日统计，近10个交易日（8月23日至9月5日），海外机构对343家上市公司进行调研。其中，迈瑞医疗最受关注，获103家海外机构密集调研。</p>
<!-- 普通的文本标签 -->
<span>从股价表现看，获海外机构调研股近10个交易日平均上涨2.43%，整体表现优于大盘。股价上涨幅度居前的有艾力斯、华厦眼科、步科股份、弘亚数控，区间股价上涨幅度均超20%。</span>
<img src="https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AA1gigY8.img?w=768&h=832&m=6">
</div>
</body>
</html>
包含选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
包含选择器是有两种格式的
父辈选择器 > 子辈选择器{} 只能定位子标签
先辈选择器 后辈选择器{} 先辈查找后辈[包含子标签]
*/
/*#box > span{*/
/* color: red;*/
/*}*/
#box span{
color: red;
}
</style>
</head>
<body>
<!--
标签之间是可以相互嵌套的，因为这种嵌套关系，让标签之间形成了一定的联系
1. 父子关系 --- 直接包含和被包含的关系
head 和 body 就是html的子标签
html 就是 head 和 body的父标签
2. 兄弟关系 --- 被同一个标签包含的标签之间的关系
head 和 body就是兄弟关系
3. 先辈后辈关系
-- 直接和间接包含与被包含的关系
head 和 body 就是html的后辈标签
meta 和 title 也是html的后辈标签
包含选择器：先定位到父辈或者先辈 再定位子辈或者后辈的格式
-->
<div id="box">
<span>精奢商业观察 的报道 •14 小时</span>
<p>今年年初，贵州茅台在公司史上最年轻的掌门人丁雄军执掌下，交出了一份堪称完美的成绩单。公司在去年实现营业收入 1241 亿元，<span>同比增长 16.87%</span>，毛利率达到惊人的 94.19%。这一优异成绩的背后除了自身产品的强大表现，还得益于品牌愈发多元化的销售方式和营销策略，加强了品牌与消费者之间的联系。除了推出冰淇淋和咖啡，贵州茅台还计划研发酒心巧克力、含酒饮品、棒支、软冰等产品，通过拓宽产品矩阵来实现品牌的年轻化战略。</p>
</div>
<p>
而对于瑞幸咖啡来说，联名已是老生常谈。从上月与知名内衣品牌维多利亚的秘密的联名，到本月与贵州茅台的“牵手”，都赢得了相当高的讨论度，同时也在消费层面带来了积极影响。
从销量和话题度来看，<span>这次联名无疑是成功的</span>，能够有效提高合作双方的品牌传播力、曝光度和销量。不过，短暂的热度未必能为品牌转化大量忠实客户，增长的关键还是在于品牌自身产品的出品，以及持续输出新颖的营销策略。
</p>
</body>
</html>
结构选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*ol > li:first-child{*/
/* color: red;*/
/*}*/
/*ol > li:last-child{*/
/* color: red;*/
/*}*/
/*ol > li:nth-child(2){*/
/* color: red;*/
/*}*/
ol > li:nth-last-child(2){
color: red;
}
</style>
</head>
<body>
<!--
结构选择器
在包含选择器的基础上 再一步精准定位
:first-child 第一个
ol > li:first-child 拿到ol下面的第一个子标签 判断是不是li 如果是定位正确 否则就是定位失败
:last-child 最后一个
:nth-child(2) 正数第二个
:nth-last-child(2) 倒数第二个
-->
<ol>
<p>江苏泰州一小区发生燃气爆炸 城燃专委会：涉及刑案</p>
<li>存量首套房贷利率怎么调？多家银行解读十大细节</li>
<li>中国高速推进小型模块核反应堆技术</li>
<li>尹锡悦要中国对朝鲜施压，中方作出4点回应</li>
<li>国内油价调价窗口6日开启，搁浅还是小幅上涨？</li>
</ol>
<ul>
<li>江苏泰州一小区发生燃气爆炸 城燃专委会：涉及刑案</li>
<li>存量首套房贷利率怎么调？多家银行解读十大细节</li>
<li>中国高速推进小型模块核反应堆技术</li>
<li>尹锡悦要中国对朝鲜施压，中方作出4点回应</li>
<li>国内油价调价窗口6日开启，搁浅还是小幅上涨？</li>
</ul>
</body>
</html>
车票邮件描述
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box{
border: lightgrey 1px solid;
/* 设置宽度 */
width: 760px;
/* 调节与其他标签 或者边缘的间隙
margin: 上下的间隙 左右的间隙
*/
margin: 10px auto;
}
.name{
color: orange;
}
.person_info, .ticket_info{
/* margin: 上下左右的间隙 */
margin: 10px;
border-bottom: lightgrey 1px dotted;
}
.ticket_info{
/* 加粗字体 */
font-weight: bolder;
}
.footer{
/* 设置成参照物 */
position: relative;
/* 高度给写死 */
height: 100px;
}
.right{
/* 设置位置： 相对于div位于右下角
最外层的div是一个参照物 需要把最外层的div设置成参照物
如果没有设置参照物 是以body为参照物
*/
/*对这个标签进行绝对定位 会脱离文档流*/
position: absolute;
/*!* 具体定位的值 是有top/left/right/bottom决定*/
/* top 是距离参照物的顶部 向下移动多少*/
/* left 是距离参照物的左边 向右移动多少*/
/* right 是距离参照物的右边 向左移动多少*/
/* bottom 是距离参照物的底部 向上移动多少*/
/* *!*/
right: 15px;
bottom: 10px;
}
.foot_img{
position: absolute;
bottom: 0;
}
</style>
</head>
<body>
<div id="box">
<div class="header">
<img src="http://mobile.12306.cn/weixin/resources/weixin/images/mail/mail_top.jpg">
</div>
<div class="person_info">
<h3>尊敬的 <span class="name">%s%s:</span></h3>
<p>您好！</p>
<p>您于%s在中国铁路客户服务中心网站(<a href="http://www.12306.cn/">12306.cn</a>) 成功购买了1张车票，票款共计%.2f元，订单号码 %s 。 所购车票信息如下：</p>
</div>
<div class="ticket_info">
<p>1.%s，%s开，%s-%s，%s次列车，6车5A号，二等座，成人票，票价%.1f元，检票口2，电子客票。</p>
</div>
<div class="footer">
<div class="right">
<p>中国铁路客户服务中心</p>
<p>%s</p>
</div>
<img src="http://mobile.12306.cn/weixin/resources/weixin/images/mail/mail_line.jpg" alt="" class="foot_img">
</div>
</div>
</body>
</html>
群发邮件
利用数据结构进行模拟
一个人的身份信息 车票信息数据有多个的 存储一个人的信息 是需要一个容器来进行存储的
为了方便获取相应的数据 使用字典存储人的信息
{姓名： 身份证号： 车票价格： 始发地： 目的地： 车票时间： 车票价格: 车次: 订单号: 邮箱地址:}
为了存储多个人 还需要一个容器 使用列表
[{},{},{},{}]
# 时间工具库
import datetime
#
print(datetime.datetime.now()) # 当前时间 datetime类型的
# 显式时间的时候 需要对时间进行格式化 按照指定的格式显式时间
"""
时间格式化符
%Y 代表的是年
%m 月
%d 日
%H 时
%M 分
%S 秒
"""
print(datetime.datetime.now().strftime('%Y-%m-%d %H:%M'))
# 获取时间中的年月日
print(datetime.datetime.now().date())
# 随机库
import random
print(random.randint(1, 13))
# 车票时间 是 当前日期 向后偏移1-14 【随机】
# datetime.timedelta 时间偏移 +时间偏移就是向未来偏移
print(datetime.datetime.now() + datetime.timedelta(days=random.randint(1, 15)))
# 准备5个人的信息
date_list = []
for i in range(5):
dt = (datetime.datetime.now() + datetime.timedelta(days=random.randint(1, 15), minutes=random.randint(1, 61))).strftime('%Y-%m-%d %H:%M')
date_list.append(dt)
print(date_list)
# 准备数据
datas = [
{'姓名': '刘哲', '身份证号': '1234567654345676543', '邮箱': '1061507163@qq.com', '订单号': 'E3456789', '车票价格': 200, '车次': 'G5', '时间':date_list[0], '始发地': '北京', '目的地': '上海' },
{'姓名': '李行波', '身份证号': '12345098765678765456', '邮箱': '1207351163@qq.com', '订单号': 'E3456989', '车票价格': 210, '车次': 'G7', '时间':date_list[1], '始发地': '北京', '目的地': '深圳' },
{'姓名': '陈飞耀', '身份证号': '12345098756765454323456', '邮箱': '1878394203@qq.com', '订单号': 'E3455489', '车票价格': 210, '车次': 'G7', '时间':date_list[2], '始发地': '北京', '目的地': '深圳' },
{'姓名': '吴佳豪', '身份证号': '12345098765678765456', '邮箱': '1845139945@qq.com', '订单号': 'E3457889', '车票价格': 210, '车次': 'G7', '时间':date_list[3], '始发地': '北京', '目的地': '深圳' },
{'姓名': '马峰峰', '身份证号': '12345098765678765456', '邮箱': '2720836377@qq.com', '订单号': 'E3459089', '车票价格': 210, '车次': 'G7', '时间':date_list[4], '始发地': '北京', '目的地': '深圳' }
]
# content = open('./07_车票邮件描述.html', 'r', encoding='utf-8').read()
# print(type(content)) # <class 'str'>
"""
% === 占位符 %s
''.format() === 占位符 {}
"""
import smtplib
from email.mime.multipart import MIMEMultipart # 构造邮件
from email.mime.text import MIMEText # 构造正文
server = 'smtp.qq.com' # 邮箱服务器地址
port = 465
sender = '1114354656@qq.com' # 发件人
code = 'gvovtliwmnncfdhb' # 授权码
# 根据这些信息 连接到服务器 进行授权认证
connect = smtplib.SMTP_SSL(server, port)
connect.login(sender, code)
for info in datas:
# 构造邮件
email = MIMEMultipart()
# 邮件头部
email['From'] = sender
email['To'] = info['邮箱']
email['Subject'] = '订票信息'
# 创建正文
content = open('./07_车票邮件描述.html', 'r', encoding='utf-8').read()
# print(content)
card_data = info['身份证号']
if int(card_data[-2]) % 2 == 0:
call = '女士'
else:
call = '先生'
content = content % (info['姓名'][0], call, datetime.datetime.now().date(), info['车票价格'], info['订单号'], info['姓名'], info['时间'], info['始发地'], info['目的地'], info['车次'], info['车票价格'], datetime.datetime.now().date())
text = MIMEText(_text=content, _subtype='html')
email.attach(text)
# 发送邮件
connect.sendmail(from_addr=sender, to_addrs=info['邮箱'], msg=email.as_string())
# 断开连接
connect.close()
函数
函数的定义：
把常用的逻辑功能 独立的代码段 进行封装， 在需要使用的时候 直接调用即可
"""
求圆的面积
3.14 * 半径的平方
"""
# 页面1此时的需求 求半径为2的圆的面积
area = 3.1415196 * 2 ** 2
print(f'半径为2的圆的面积是{area}')
# 页面2的需求 求半径为5的圆的面积
area = 3.1415926 * 5 ** 2
print(f'半径为5的圆的面积是{area}')
"""
语法：
def 函数功能名(形式参数1, 形式参数2, ..形式参数n):
函数功能体代码块
return 功能运行结果的返回值
解读：
1. def 定义函数的关键字
2. 函数功能名 自己定义标识符名称 【遵守标识符定义规则】
3. (形式参数1, 形式参数2, ..形式参数n)
在参与功能运算的时候 有些数据值是动态 不确定的，将其设置成变量 给其设置一个标记名
等待调用函数的时候赋予运算值
这个标记名就叫做形式参数 简称形参
如果没有未知动态的数据参与功能运算 形式参数就不用定义了 但是()必须有
4. return 也是一个关键字
功能是结束函数 并将结果返回到函数调用的位置
如果一个函数没有返回值 return 是可以省略的 或者写为 return None
定义函数的时候如何分析
1. 分析是否有未知项[不确定的数据 动态的数据]参与运算， 如果有的话 有几个？ 【决定了形式参数的个数】
2. 分析函数是否需要把运行结果返回 决定了是否有return返回值
"""
# 求圆的面积
"""
半径是未知的 --- 形式参数
是否需要把结果返回 --- 需要
"""
def get_circle_area(radius):
area = 3.14154672 * radius ** 2
return area
"""
如何进行调用
函数是否有返回值
有返回值 变量名 = 函数名(实际参数) # 实际参与运算的数据 称为实际参数 简称实参
没有返回值 函数名(实际参数)
注意事项：
形式参数有几个 实际参数就得传递几个 而且是一一对应的
"""
circle_area = get_circle_area(10)
print(circle_area)
circle_area1 = get_circle_area(11)
print(circle_area1)
# 封装一个函数: 判断一个数是否是水仙花数
"""
是否有未知的数据 有1个
是否需要返回结果 逻辑结果 返回的是布尔类型的
水仙花数是一个三位数的整数
如果不是整数 ==== False
非3位数的 === False
"""
def is_water_flower(num):
if type(num) != int:
return False
elif num < 100 or num > 999:
return False
else:
unit = num % 10
decade = num // 10 % 10
hundred = num // 100
return unit ** 3 + decade ** 3 + hundred ** 3 == num
# 调用 封装函数的时候 里面的逻辑不会走 调用的时候
res = is_water_flower(178)
print(res)
"""
练习:
1. 封装一个函数 获取两个数中的最大值
2. 封装一个函数 判断一个数是不是完美数 【真因子之和等于数值本身 6=1+2+3】
3. 封装一个函数 找到一个列表中某个数据的下标
"""
# 封装一个函数 获取两个数中的最大值
def get_max(a, b):
if a > b:
return a
else:
return b
# 封装一个函数 判断一个数是不是完美数 【真因子之和等于数值本身 6=1+2+3】
def get_factor(num):
total = 0 # 记录累加和
for i in range(1, num // 2 + 1):
if num % i == 0:
total += i
return num == total
print(get_factor(6))
# 封装一个函数 找到一个列表中某个数据的下标
def get_index(src_list, key):
return [pos for pos, ele in enumerate(src_list) if ele == key]
indexes = get_index([17, 34, 56, 28, 34, 19, 34], 34)
print(indexes)
扫一扫
364
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
