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文件和迭代（二）
迭代 基本含义 迭代是重复反馈过程的活动,其目的通常是为了接近并到达所需的目标或结果.每一次对过程的重复被称为一次“迭代”,而每一次迭代得到的结果会被用来作为下一次迭代的初始值. 在计算科学中,迭代 ...
随机推荐
- codepen素材 coffeeScript -> JavaScript
将coffeeScript代码复制到下面的网址进行转换: http://js2.coffee/
- iptables增加、删除、修改、查询、保存防火墙策略教程
一.查看现有防火墙策略 iptables -L -n iptables -L -n --line-number #--line-number参数会显示策略编号,该编号在删除策略时使用 二.增加防火墙策 ...
- 基于spring的PropertySource类实现配置的动态替换
public class ConfigPropertySource extends PropertySource<Properties> implements PriorityOrdere ...
- jeasyUI DataGrid 根据屏幕宽度自适应, 改变右侧滚动条Size
PC浏览器的Datagrid可以显示多几列,但是在手机浏览器时,只能有选择性的显示前几列. $(window).resize(function () { if (document.body.clien ...
- 包--json 与 pickle 模块
一. 包 一个含有__init__.py 文件的文件夹(将py 文件中的内容划分成不同的部分放在不同的py 文件中,在将这些py 文件放在一个文件夹中) 是模块,不做执行文件,仅做调用 m1.py 和 ...
- zabbix3.4.7版本饼图显示问题
问题描述 最近使用zabbix3.4.7版本,发现监控Linux的主机关联系统自带的Template OS Linux模版之后,磁盘空间饼图显示有问题,出现空白,如图所示 查看之后,确定为自带的Lem ...
- linux系统管理 启停命令
mac下Linux的登录命名 'ssh -l root 192.168.10.109' password: xxxx 退出登录 >> logout shutdown命令 要使用这个命令 ...
- JS&Jquery中的循环/遍历
JavaScript中的遍历 for 遍历 var anArray = ['one','two']; for(var n = 0; n < anArray.length; n++) { //具体 ...
- 前端vue项目-关于下载文件pdf/excel（三）
最近在做一些需求,需要下载一些文件信息,最频繁的就是下载excel文件到本地了 看过了很多方法,做个整理吧哈哈哈哈 参考的文章链接: https://www.cnblogs.com/jiangweic ...
- 不管你是否已经准备面试, 这45道Python面试题都对你非常有帮助!（mark！）
1)什么是Python?使用Python有什么好处? Python是一种编程语言,包含对象,模块,线程,异常和自动内存管理.蟒蛇的好处在于它简单易用,可移植,可扩展,内置数据结构,并且它是一个开源的. ...