Python全栈 Web(文本属性、表格属性、布局)

简介:


文本相关属性
字体属性:
1.设置字体大小
属性:font-size
取值:px
2.指定字体名称
属性:font-family
取值:字体名称,如果出现多个名称,使用,隔开
如果字体名称出现中文或出现中文空格要用引号引起来
3.设置字体的加粗
属性:font-weight
取值:
单词表示
normal  默认值  正常显示
bold    加粗显示
lighter 极细文本
数字显示
100~900之间 整百数值 值越大越粗
400 等于 normal
700 等于 bold
4.设置字体样式:
属性:font-style
取值:
normal  正常显示
italic  使用斜体显示
oblique 使文本倾斜达到斜体效果
5.字体属性简写:
属性:font
取值:style  weight size  family
family属性值必须写 不写所有设置无效
文本属性:
1.文本颜色
属性:color
取值:颜色值
2.文本水平对齐方式:
属性:text-align
取值:left(默认值) center right
      justify(两端对齐)
3.设置行高
属性:line-height
取值:像素 或无单位数值表示当前文本大小的倍数
行高常用于设置文本的垂直居中
将元素的高度与行度保持一致
一行文本 在当前行中一定是垂直居中的 上下的空隙由浏览器自动分配
4.文本装饰线
属性:text-decoration
取值:
underline 下划线
overline 上划线
line-through删除线
none:针对超链接取消下划线

表格属性:
基础样式属性是通用的
width height background color margin padding
独有CSS属性:
边框合并:
border-collapse
取值:
separate(默认分离)
collapse(边框合并)
td不支持外边距 边框合并只能写在table标签里
边框的边距:
设置单元格之间的距离
属性:
border-spacing
取值:
h-Value 水平方向的距离
v-Value 垂直方向的距离
两个值用空格隔开
只能在表格边框分离的状态下使用
过渡效果:
过度效果指的是元素CSS属性值在发生变化时的一种平滑效果
语法:
过度属性:
属性:transition-property
作用:用来指定哪些CSS属性需要添加过度效果
取值:
指定单个的属性名称增加一个过度效果 例如:width
指定多个属性用,隔开
all:
将所有能添加过渡效果的都进行添加
能够添加过渡效果的属性:
所有颜色相关的属性
所有数值取值为数字的属性
过渡时长:
属性:transition-duration
作用:表示多长时间内完成过渡效果
取值:
单位为s(秒)或者是ms(h毫秒)的数值
速度时间曲率:
属性:transition-timing-function
作用:设置过渡效果的变化速率
取值:
ease(默认) 慢速开始 中间变快 慢速结束
linear      匀速变化
ease-in 慢速开始  加速结束
ease-out 快速开始  减速结束
ease-in-out 慢速开始和结束 中间先加速后减速
过渡延迟:
属性:transition-delay
作用:延迟指定时长后再发生过渡效果
取值:
单位为s(秒)或者是ms(h毫秒)的数值
使用注意:
过渡时长必须设置,其他可以省略 否则没有过渡效果
使用过渡相关的属性,要定义在元素默认样式中 
不能写在伪类选择器中,会影响效果
属性简写:
属性:transition
取值:
property、duration
timing-function 、delay
duration必须写
布局:
设置元素在网页中的排列方式和位置
分类:
普通流布局/标准流布局/文档流布局
网页中默认布局方式
特点:
将元素按照书写顺序和类型从左向右 从上到下排列
浮动布局:
属性:float
left、right、none(默认)
left:
元素向左浮动 停靠在其他元素的边缘
right:
元素向右浮动 停靠在其他元素的边缘
特点:
1.元素在设置浮动元素后会脱离文档流
  元素在文档中不占位 呈现一种浮动元素飘浮在文档上方的效果
2.浮动元素后面的正常元素会上移占据原本浮动元素所在的位置
3.多个元素左浮或右浮动,浮动元素会依次停靠在前一个元素的边缘位置
  第一个浮动元素会贴着负元素的边框显示
4.如果父元素中无法并排显示浮动元素会自动换行
5.浮动元素在文档中不占位
6.所有类型的元素只要设置浮动就可以设置宽高
  行内或行内快元素浮动后 水平方向之间没有空隙
浮动元素的特殊效果:
文字环绕效果
浮动元素会遮挡后面正常元素 但是不会遮挡正常元素的内容的显示
内容会自动围绕在浮动元素的周围显示
浮动元素对父元素高度影响:
由于浮动元素在文档中不占位 一旦子元素全部浮动 父元素的高度会成0
影响背景的显示,和后面其他元素的布局
解决方式:
1.指定父元素的高度
但是不能准确确认父元素的高度
2.父元素中设置:overflow:hidden
如果父元素要显示溢出的内容,设置overflow:hidden之后
溢出的内容就不显示了
3.清除浮动:
由于浮动元素会对其后的正常元素带来一些影响 所以在网页布局中要清除这种影响
属性:clear
取值:
none (默认)不做处理
left 清除当前元素前面左浮元素带来的影响
right 正常元素右边不允许出现浮动元素
both 正常元素两边都不能出现浮动元素
在父元素的末尾添加空的块级元素
设置空块级元素 clear:both;
相关文章
|
8月前
|
Java 数据处理 索引
(Pandas)Python做数据处理必选框架之一!(二):附带案例分析;刨析DataFrame结构和其属性;学会访问具体元素;判断元素是否存在;元素求和、求标准值、方差、去重、删除、排序...
DataFrame结构 每一列都属于Series类型,不同列之间数据类型可以不一样,但同一列的值类型必须一致。 DataFrame拥有一个总的 idx记录列,该列记录了每一行的索引 在DataFrame中,若列之间的元素个数不匹配,且使用Series填充时,在DataFrame里空值会显示为NaN;当列之间元素个数不匹配,并且不使用Series填充,会报错。在指定了index 属性显示情况下,会按照index的位置进行排序,默认是 [0,1,2,3,...] 从0索引开始正序排序行。
613 0
|
数据采集 自然语言处理 Java
Playwright 多语言一体化——Python/Java/.NET 全栈采集实战
本文以反面教材形式,剖析了在使用 Playwright 爬取懂车帝车友圈问答数据时常见的配置错误(如未设置代理、Cookie 和 User-Agent),并提供了 Python、Java 和 .NET 三种语言的修复代码示例。通过错误示例 → 问题剖析 → 修复过程 → 总结教训的完整流程,帮助读者掌握如何正确配置爬虫代理及其它必要参数,避免 IP 封禁和反爬检测,实现高效数据采集与分析。
787 3
Playwright 多语言一体化——Python/Java/.NET 全栈采集实战
|
10月前
|
Python
解决Python中AttributeError:'image'对象缺少属性'read_file'的问题策略。
通过上述策略综合考虑,您将能够定位问题并确定如何解决它。记住,Python社区很庞大,也很乐于帮助解决问题,因此不要害怕在求助时提供尽可能多的上下文和您已经尝试过的解决方案。
265 0
|
12月前
|
IDE 开发工具 Python
魔搭notebook在web IDE下,使用jupyter notebook,python扩展包无法更新升级
魔搭notebook在web IDE下,使用jupyter notebook,python扩展包无法更新升级,不升级无法使用,安装python扩展包的时候一直停留在installing
325 4
|
12月前
|
Linux 数据库 数据安全/隐私保护
Python web Django快速入门手册全栈版,共2590字,短小精悍
本教程涵盖Django从安装到数据库模型创建的全流程。第一章介绍Windows、Linux及macOS下虚拟环境搭建与Django安装验证;第二章讲解项目创建、迁移与运行;第三章演示应用APP创建及项目汉化;第四章说明超级用户创建与后台登录;第五章深入数据库模型设计,包括类与表的对应关系及模型创建步骤。内容精炼实用,适合快速入门Django全栈开发。
624 1
|
存储 机器学习/深度学习 人工智能
多模态RAG实战指南:完整Python代码实现AI同时理解图片、表格和文本
本文探讨了多模态RAG系统的最优实现方案,通过模态特定处理与后期融合技术,在性能、准确性和复杂度间达成平衡。系统包含文档分割、内容提取、HTML转换、语义分块及向量化存储五大模块,有效保留结构和关系信息。相比传统方法,该方案显著提升了复杂查询的检索精度(+23%),并支持灵活升级。文章还介绍了查询处理机制与优势对比,为构建高效多模态RAG系统提供了实践指导。
2828 0
多模态RAG实战指南:完整Python代码实现AI同时理解图片、表格和文本
|
人工智能
WEB CAD 利用AI编程实现多行文本的二次开发
本文介绍了在MxCAD插件中实现自定义编辑器实体类的功能,重点展示如何通过MxCADMText类在CAD中渲染和管理富文本。文章详细说明了注册同心圆实体文本的步骤,包括实现自定义文本类、注册自定义文本以及交互式修改参数的方法。此外,还扩展实践了粗糙度实体文本的注册与应用,涵盖构造粗糙度自定义实体文本类、注册及初始化过程,并通过示例图展示了运行效果。这些功能可帮助用户将复杂图形以文本形式插入多行文本中,提升项目设计效率。
|
前端开发 JavaScript API
给Web开发者的HarmonyOS指南01-文本样式
本系列教程适合 HarmonyOS 初学者,为那些熟悉用 HTML 与 CSS 语法的 Web 前端开发者准备的。
447 5
给Web开发者的HarmonyOS指南01-文本样式
|
Python
解决Python报错:DataFrame对象没有concat属性的多种方法(解决方案汇总)
总的来说,解决“DataFrame对象没有concat属性”的错误的关键是理解concat函数应该如何正确使用,以及Pandas库提供了哪些其他的数据连接方法。希望这些方法能帮助你解决问题。记住,编程就像是解谜游戏,每一个错误都是一个谜题,解决它们需要耐心和细心。
630 15

推荐镜像

更多