目录:

  一、伪类

  二、样式

   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 &nbsp;</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学习笔记第二十二周(前端知识点补充)的更多相关文章

  1. Python学习笔记第二十五周(Django补充)

    1.render_to_reponse() 不同于render,render_to_response()不用包含request,直接写template中文件 2.locals() 如果views文件中 ...

  2. Python学习笔记第二十六周(Django补充)

    一.基于jQuery的ajax实现(最底层方法:$.jax()) $.ajax( url: type:''POST“ ) $.get(url,[data],[callback],[type])  #c ...

  3. Python学习笔记第十二周

    目录: 数据库介绍 mysql 数据库安装使用 mysql管理 mysql 数据类型 常用mysql命令事务 索引 创建数据库 外键 增删改查表 权限 python 操作mysql  ORM sqla ...

  4. Python学习笔记第二十周

    目录: 一.ORM 1.查询补充 备注:forloop.counter介绍 二.Ajax 三.ORM多对多操作 内容: 一.ORM 1.查询补充: 1.models.USR.objects.all() ...

  5. Python学习笔记第十八周

    目录: 一.JavaScript正则表达式 1.test  2.exec 二.BootStrap  1.响应式  2.图标.字体  3.基本使用 三.Django 1.安装  2.创建目录  3.进入 ...

  6. Python学习笔记第十九周

    目录: 一.路由系统URL 1.Django请求生命周期 2.创建Django project 3.配置 4.编写程序 二.视图 三.模板 四.ORM操作 内容: 一.URL 1.Django请求生命 ...

  7. Python学习笔记第十六周

    目录: 一.CSS补充 1.页面布局 二.JavaScript补充 1.条件判断 2.函数分类 3.序列化 4.转义 5.eval 6.时间 7.作用域 三.DOM 1.间接查找 文本操作 样式操作 ...

  8. Python学习笔记第十五周

    目录: 一.CSS补充 1.position 2.overflow 3.hover 4.background 二.JavaScript 三.DOM 主要内容: 一.CSS补充 1.position 可 ...

  9. Python 学习笔记(十二)Python文件和迭代(二)

    迭代 基本含义 迭代是重复反馈过程的活动,其目的通常是为了接近并到达所需的目标或结果.每一次对过程的重复被称为一次“迭代”,而每一次迭代得到的结果会被用来作为下一次迭代的初始值.  在计算科学中,迭代 ...

随机推荐

  1. 数据结构与算法之PHP实现二叉树的遍历

    一.二叉树的遍历 以某种特定顺序访问树中所有的节点称为树的遍历,遍历二叉树可分深度优先遍历和广度优先遍历. 深度优先遍历:对每一个可能的分支路径深入到不能再深入为止,而且每个节点只能访问一次.可以细分 ...

  2. Web Services的学习二

    1.SOAP简单对象访问协议 基于XML的简单协议,可让应用程序在HTTP上进行信息交换,或者说SOAP就是用于访问网络服务的协议.它独立于平台,独立于语言,很简单并可扩展,而且允许绕过防火墙. 2. ...

  3. JDK安装教程(Windows7 x64)

    1.下载JDK http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 选择自己系统相对 ...

  4. “SecureCRT遇到一个致命的错误且必须关闭”处理办法

    打开SecureCRT时报错:SecureCRT遇到一个致命的错误且发须关闭.一个崩溃转储文件已创建于... 解决办法是,如下在cmd中输入regedit回车打开注册表编缉器 展开HKEY_LOCAL ...

  5. 一篇文章有若干行,以空行作为输入结束的条件。统计一篇文章中单词the(不管大小写,单词the是由空格隔开的)的个数。

    #include <iostream>using namespace std; int k = 0;int n = 0;int main() { char c; char a[1000]; ...

  6. Java Web(一) 前言及体系结构

    Web应用程序 Web程序是什么 Web应用程序就是一般所说的网站,由服务器,客户端浏览器以及网络组成.但Web程序又不是一般意义的网站,一般的网站是提供信息服务,重在内容,程序往往比较简单,但商用的 ...

  7. LY.JAVA面向对象编程.封装、this、构造方法

    2018-07-07 this关键字 构造方法 /* 我们一直在使用构造方法,但是,我们确没有定义构造方法,用的是哪里来的呢? 构造方法的注意事项: A:如果我们没有给出构造方法,系统将自动提供一个无 ...

  8. datatime 模块

    import datetime # 这个是一个包 里面包含 对时间的处理 对日期的处理datetime.date # 日期相关datetime.time # 时间相关 # 获取当前详细时间print( ...

  9. Java日期时间,以及相互转换

    Java日期时间,以及相互转化 package com.study.string; import java.text.ParseException; import java.text.SimpleDa ...

  10. TNetHTTPClient 使用

    unit Unit1; interface uses Winapi.Windows, Winapi.Messages, System.SysUtils, System.Variants, System ...