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文件和迭代（二）
迭代 基本含义 迭代是重复反馈过程的活动,其目的通常是为了接近并到达所需的目标或结果.每一次对过程的重复被称为一次“迭代”,而每一次迭代得到的结果会被用来作为下一次迭代的初始值. 在计算科学中,迭代 ...
随机推荐
- Git的各种状态
考:http://blog.csdn.net/wirelessqa/article/details/19548057 按照文件的存放位置分: 在你自建的Git本地仓库中,有三个区域:本地目录.暂存区. ...
- 常用java命令
javap 反编译 javap xxx.class 查看大概 javap -v -p xxx.class 查看详细 jps 查看有哪些java进程 jinfo 查看或设置java进程的 vm 参数,只 ...
- reload() 函数
reload() 函数 当一个模块被导入到一个脚本,模块顶层部分的代码只会被执行一次. 因此,如果你想重新执行模块里顶层部分的代码,可以用 reload() 函数.该函数会重新导入之前导入过的模块.语 ...
- hashlib 库
hashlib 库 hash 是一种算法,用来接收一系列数据,经过计算后得到一个hash值 hash值的三大特征: 1. 如果传入的数据一样,得到的hash值一样 2. 只要采用的hash算法固定,无 ...
- 部署Linux项目
部署Linux项目 1● 下载软件 ftp 安装 2● 创建连接 3● java项目 gunzip –c *.gz tar –xzf *.gz rm –rf rm -r ...
- 这本小书的目的是引导你进入 React 和 Webpack 的世界。他们两个都是非常有用的技术，如果同时使用他们，前端开发会更加有趣。
https://fakefish.github.io/react-webpack-cookbook/index.html
- Kafka.net使用编程入门(一)
最近研究分布式消息队列,分享下! 首先zookeeper 和 kafka 压缩包 解压 并配置好! 我本机zookeeper环境配置如下: D:\Worksoftware\ApacheZookeep ...
- HTML中元素的position属性详解
HTML中元素的position属性详解 转载自:https://blog.csdn.net/wangzunkuan/article/details/81540935 HTML中DOM元素有5种定 ...
- 第一篇 入门必备 (Android学习笔记)
第一篇 入门必备 第1章 初识Android 第2章 搭建你的开发环境 第3章 创建第一个程序--HelloWorld 第4章 使用Android工具 ●Android之父 Android安迪·罗 ...
- ArrayList和LinkedList有什么区别？
---恢复内容开始--- ArrayList和LinkedList都实现了List接口,但是: ArrayList是基于索引的数据接口,底层是数组,能够以O(1)时间复杂度随机访问元素.而Linked ...