Python学习笔记第二十二周（前端知识点补充）
目录：
一、伪类
二、样式
1、字体
2、背景图片
3、margin和padding
4、列表属性
5、float
6、clear
7、position
8、text-decoration（a标签下划线去除）
9、vertical-align
内容：
一、伪类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style> a:link{
background-color:red; }
a:hover{
background-color:blue;
}
a:visited{
background-color: #dddddd;
}
a:active{
background-color:green;
}
p:after{
content: 'ppp';
}
p:before{
content: 'aaa';
}
</style>
</head>
<body>
<!--伪类-->
<a href="http://www.baidu.com">baidu</a>
<p>hello p </p>
</body>
</html>
二、样式
1、字体格式：
letter-spacing： 字母之间的间距
word-spacing： 单词之间的间距（重要）
text-transform：capitalize 首字母大写
2、背景图片
background-position：center center 表示居中
3、margin和padding
注意：在div嵌套中，如果外面的div标签没有内容，设置里面div的margin的时候，会发现左右是你想要的效果，但是上下会有问题，这个问题是div塌陷问题，通常需要在div中标注内容或者在外面div中加border解决div塌陷问题
4、列表属性
ul,ol{
list-style:decimal-leading-zero;
list-style:none;
list-style:circle;
list-style:upper-alpha;
list-style:disc;
}
ul{
/*list-style: decimal-leading-zero;*/ 显示数字
/*list-style:none;*/ 无任何样式
/*list-style:circle;*/ 显示为序列为空心圆
/*list-style:upper-alpha; 显示序列为A B C*/
list-style:disc; 普通显示
}
5、float
float设计之初是为了文本环绕图片而设计的，所以虽然div标签会悬浮，它还是会把其他div标签内的文本挤出自己所占的空间
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#i1{
background-color:red;
height:30px;
width:50px;
}
#i2{
background-color:yellow;
height:30px;
float: left;
width:50px;
}
#i3{
background-color:green;
height:70px;
width:200px;
}
</style>
</head>
<body>
<div id="i1">1111</div>
<div id="i2">222</div>
<div id="i3">333</div>
</body>
</html>
6、clear
clear：none|left|right|both
取值：
none： 默认值，允许两边都可以有浮动对象
left：不允许左边有浮动对象
right：不允许右边有浮动对象
both：不允许有浮动对象
备注：
与clear达到同样的效果，可以在父级标签加overflow：hidden属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.outer{
background-color:blue;
}
.menu1{
width:100px;
hegith:50px;
color:gold;
float:left;
}
.menu2{
width:100px;
hegith:50px;
color:gold;
float:left;
}
.bottom{
background-color: green;
text-align: center;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<div class="outer">
<div class="menu1">菜单一</div>
<div class="menu2">菜单二</div>
<div class="clear"></div>
</div>
<div class="bottom">底部</div>
</body>
</html>
7、position
取值：
static：默认值
fixed
relative：relative紧跟着设置top和left，它会相较它之前的位置移动
absolute：如果它一直找不到一个父类的position为非static，它会参照html整体的位置进行移动，如果找到会按照该父类进行移动
例子：relatvie效果，可以看到div2的位置没有被div3取代，说明relative不是一个脱离操作，它只是按照它自己的位置相对移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#i1{
background-color:red;
height:30px;
width:50px;
}
#i2{
background-color:yellow;
height:30px;
width:50px;
position: relative;
left:100px;
top:100px;
}
#i3{
background-color:green;
height:70px;
width:200px;
}
</style>
</head>
<body>
<div id="i1">1111</div>
<div id="i2">222</div>
<div id="i3">333</div>
</body>
</html>
relative效果
8、text-decoration（a标签下划线去除）
text-decoration：none 去掉a标签下面的横向，但是a标签仍然有超链接功能
underline 默认的，增加下划线
9、vertical-align 这个属性在图片对应的标签上设置
表示文本的垂直居中
top：表示文本和图片头部保持水平
bottom：表示文本和图片底部保持水平
middle：表示文本与图片中部保持水平
数字： 可以任意修改和图片的位置
Python学习笔记第二十二周（前端知识点补充）的更多相关文章
- Python学习笔记第二十五周（Django补充）
1.render_to_reponse() 不同于render,render_to_response()不用包含request,直接写template中文件 2.locals() 如果views文件中 ...
- Python学习笔记第二十六周（Django补充）
一.基于jQuery的ajax实现(最底层方法:$.jax()) $.ajax( url: type:''POST“ ) $.get(url,[data],[callback],[type]) #c ...
- Python学习笔记第十二周
目录: 数据库介绍 mysql 数据库安装使用 mysql管理 mysql 数据类型 常用mysql命令事务 索引 创建数据库 外键 增删改查表 权限 python 操作mysql ORM sqla ...
- Python学习笔记第二十周
目录: 一.ORM 1.查询补充 备注:forloop.counter介绍 二.Ajax 三.ORM多对多操作 内容: 一.ORM 1.查询补充: 1.models.USR.objects.all() ...
- Python学习笔记第十八周
目录: 一.JavaScript正则表达式 1.test 2.exec 二.BootStrap 1.响应式 2.图标.字体 3.基本使用 三.Django 1.安装 2.创建目录 3.进入 ...
- Python学习笔记第十九周
目录: 一.路由系统URL 1.Django请求生命周期 2.创建Django project 3.配置 4.编写程序 二.视图 三.模板 四.ORM操作 内容: 一.URL 1.Django请求生命 ...
- Python学习笔记第十六周
目录: 一.CSS补充 1.页面布局 二.JavaScript补充 1.条件判断 2.函数分类 3.序列化 4.转义 5.eval 6.时间 7.作用域 三.DOM 1.间接查找 文本操作 样式操作 ...
- Python学习笔记第十五周
目录: 一.CSS补充 1.position 2.overflow 3.hover 4.background 二.JavaScript 三.DOM 主要内容: 一.CSS补充 1.position 可 ...
- Python 学习笔记（十二）Python文件和迭代（二）
迭代 基本含义 迭代是重复反馈过程的活动,其目的通常是为了接近并到达所需的目标或结果.每一次对过程的重复被称为一次“迭代”,而每一次迭代得到的结果会被用来作为下一次迭代的初始值. 在计算科学中,迭代 ...
随机推荐
- 一、I/O操作（中文问题）
一.编码概念 计算机存放数据只能存放数字,所有的字符都会被转换为不同的数字. 常见的编码有:ISO-8859-1 ASCII数字和西欧字母 GBK:简体中文和繁体,以及日文 GB2312:简体中文 B ...
- 九校模拟——餐馆（restaurant）
1 餐馆(restaurant) 1.1 题目背景 铜企鹅是企鹅餐馆的老板,他正在计划如何使得自己本年度收益增加. 1.2 题目描述 共有n 种食材,一份食材i 需要花ti 小时不间断地进行播种,施肥 ...
- ifcfg-eth配置详解（CentOS6）
1.基本配置形式 1.1 动态IP基本配置 DEVICE=eth0 TYPE=Ethernet ONBOOT=yes BOOTPROTO=dhcp DEVICE--网卡名,要与ifcfg-ethx中的 ...
- Tomcat和JDK版本的对应关系
当我们在谈论Tomcat与JDK版本的对应关系的时候,我们实际上在讨论两个问题. 第一个是,我们想安装了某个版本的Tomcat(比如Tomcat7),需要安装哪个版本的JDK,才能把Tomcat运行起 ...
- python-time,datetime
1.time模块:time.time() # 返回当前时间的时间戳(1970纪元后经过的浮点秒数)time.localtime([ sec ]) # 接收时间戳(默认为当前时间),返回struct_t ...
- Win10系列：VC++ Direct3D模板介绍3
(4)Render函数 默认定义在CubeRenderer.cpp源文件中的Render函数用于绘制立体图形,此函数的实现代码如下所示: void CubeRenderer::Render() { ...
- python-递归，二分查找
# print(list("胡辣汤")) # lst = ["河南话", "四川话", "东北", "山东&q ...
- Linux运维工程师真实的工作状态到底是怎么样的？
现在的运维工程师在大家眼中是个什么样子呢? 是不是还是把服务器搬来搬去,每天不是在拿着Linux光盘开始装系统,就是在等待系统安装完成.你如果还是这么想,那就大错特错了.现在又有做一个新的物种诞生,那 ...
- 枚举，Math和Random
1.实用类: 01.枚举 enum Student stu=new Student(); 我们为了保证用户一个健康的输入! 我们使用了封装特性! 用户就不能直接访问我们的属性了!! private c ...
- JavaScript -基础- 函数与对象（三）正则、Match对象
一.正则对象 1.创建方法 1)方式一 var re_obj=new RegExp("\d+","g") 规则+模式(g 全局模式/i 不区分大小写/gi) r ...