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文件和迭代（二）
迭代 基本含义 迭代是重复反馈过程的活动,其目的通常是为了接近并到达所需的目标或结果.每一次对过程的重复被称为一次“迭代”,而每一次迭代得到的结果会被用来作为下一次迭代的初始值. 在计算科学中,迭代 ...
随机推荐
- 2017-5-19&5-23/系统性能指标
1. 系统性能指标包括哪些? 业务指标.资源指标.中间件指标.数据库指标.前端指标.稳定性指标.批量处理指标.可扩展性指标.可靠性指标. 1)业务指标:主要包括并发用户数.响应时间.处理能力. 指标 ...
- maven配置多仓库镜像（转）
原文地址:maven配置多仓库镜像 问题场景: 1.国内访问maven默认远程中央镜像特别慢 2.用阿里的镜像替代远程中央镜像 3.大部分jar包都可以在阿里镜像中找到,部分jar包在阿里镜像中没有, ...
- noip2013转圈游戏
题目描述 n个小伙伴(编号从 0到 n−1)围坐一圈玩游戏.按照顺时针方向给 n个位置编号,从0 到 n−1.最初,第 0号小伙伴在第 0号位置,第 1号小伙伴在第 1 号位置,……,依此类推. 游戏 ...
- Segment set（线段并查集）
Segment set Time Limit : 3000/1000ms (Java/Other) Memory Limit : 32768/32768K (Java/Other) Total S ...
- python 多进程练习 调用 os.system命令
import sys import getopt import os import multiprocessing def list_all_file(path): """ ...
- Java类型中ParameterizedType，GenericArrayType，TypeVariabl，WildcardType详解
(1). 和反射+泛型有关的接口类型 java.lang.reflect.Type:java语言中所有类型的公共父接口 java.lang.reflect.ParameterizedType java ...
- 【Jmeter基础知识】Jmeter响应断言和断言结果
一.Jmeter创建一个响应断言 1.步骤:添加--断言--响应断,进入响应断言页面 2.断言内容:可以采用直接去搜索某些文本信息,或者可以去断言某个变量,如图 二.Jmeter创建一个断言结果 1. ...
- Android 应用基础知识和应用组件
应用基础知识 安装到设备后,每个 Android 应用都运行在自己的安全沙箱内: Android 操作系统是一种多用户 Linux 系统,其中的每个应用都是一个不同的用户: 默认情况下,系统会为每个应 ...
- windows下《Go Web编程》之Go工作空间
上篇已配置GOPATH工作空间为D:\mygo,之后练习就会在此目录进行... GOPATH目录下有3个子目录: src:存放源代码(.go .c .h .s等 ) pkg:编译后生成的文件(如.a) ...
- http协商缓存VS强缓存
之前一直对浏览器缓存只能描述一个大概,深层次的原理不能描述上来:终于在前端的两次面试过程中被问倒下,为了泄恨,查阅一些资料最终对其有了一个更深入的理解,废话不多说,赶紧来看看浏览器缓存的那些事吧,有不 ...