目录：

　　一、伪类

　　二、样式

　　　1、字体

　　　2、背景图片

　　　3、margin和padding

　　　4、列表属性

　　　5、float

　　　6、clear

　　　7、position

　　　8、text-decoration（a标签下划线去除）

　　　9、vertical-align

内容：

　　一、伪类

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.  
  8.         a:link{
  9.             background-color:red;
  10.  
  11.         }
  12.         a:hover{
  13.             background-color:blue;
  14.         }
  15.         a:visited{
  16.             background-color: #dddddd;
  17.         }
  18.         a:active{
  19.             background-color:green;
  20.         }
  21.         p:after{
  22.             content: 'ppp';
  23.         }
  24.         p:before{
  25.             content: 'aaa';
  26.         }
  27.     </style>
  28. </head>
  29. <body>
  30.     <!--伪类-->
  31.     <a href="http://www.baidu.com">baidu</a>
  32.     <p>hello p &nbsp;</p>
  33. </body>
  34. </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;

　　}

  1. ul{
  2.             /*list-style: decimal-leading-zero;*/ 显示数字
  3.             /*list-style:none;*/    无任何样式
  4.             /*list-style:circle;*/  显示为序列为空心圆
  5.             /*list-style:upper-alpha;   显示序列为A  B   C*/
  6.             list-style:disc; 普通显示
  7.  
  8.         }

　

　　5、float

　　float设计之初是为了文本环绕图片而设计的，所以虽然div标签会悬浮，它还是会把其他div标签内的文本挤出自己所占的空间

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         #i1{
  8.             background-color:red;
  9.             height:30px;
  10.             width:50px;
  11.         }
  12.         #i2{
  13.             background-color:yellow;
  14.             height:30px;
  15.             float: left;
  16.             width:50px;
  17.         }
  18.         #i3{
  19.             background-color:green;
  20.             height:70px;
  21.             width:200px;
  22.         }
  23.     </style>
  24. </head>
  25. <body>
  26.     <div id="i1">1111</div>
  27.     <div id="i2">222</div>
  28.     <div id="i3">333</div>
  29. </body>
  30. </html>

　　

　　6、clear

　　clear：none|left|right|both

　　取值：

　　none：　默认值，允许两边都可以有浮动对象

　　left：不允许左边有浮动对象

　　right：不允许右边有浮动对象

　　both：不允许有浮动对象

　　备注：

　　与clear达到同样的效果，可以在父级标签加overflow：hidden属性

　　

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         .outer{
  8.             background-color:blue;
  9.         }
  10.          .menu1{
  11.              width:100px;
  12.              hegith:50px;
  13.              color:gold;
  14.              float:left;
  15.          }
  16.         .menu2{
  17.              width:100px;
  18.              hegith:50px;
  19.              color:gold;
  20.              float:left;
  21.          }
  22.         .bottom{
  23.             background-color: green;
  24.             text-align: center;
  25.         }
  26.         .clear{
  27.             clear:both;
  28.         }
  29.     </style>
  30. </head>
  31. <body>
  32.     <div class="outer">
  33.         <div class="menu1">菜单一</div>
  34.         <div class="menu2">菜单二</div>
  35.         <div class="clear"></div>
  36.     </div>
  37.     <div class="bottom">底部</div>
  38. </body>
  39. </html>

　　7、position

　　取值：

　　static：默认值

　　fixed

　　relative：relative紧跟着设置top和left，它会相较它之前的位置移动

　　absolute：如果它一直找不到一个父类的position为非static，它会参照html整体的位置进行移动，如果找到会按照该父类进行移动

　　例子：relatvie效果，可以看到div2的位置没有被div3取代，说明relative不是一个脱离操作，它只是按照它自己的位置相对移动

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         #i1{
  8.             background-color:red;
  9.             height:30px;
  10.             width:50px;
  11.         }
  12.         #i2{
  13.             background-color:yellow;
  14.             height:30px;
  15.             width:50px;
  16.             position: relative;
  17.             left:100px;
  18.             top:100px;
  19.         }
  20.         #i3{
  21.             background-color:green;
  22.             height:70px;
  23.             width:200px;
  24.         }
  25.     </style>
  26. </head>
  27. <body>
  28.     <div id="i1">1111</div>
  29.     <div id="i2">222</div>
  30.     <div id="i3">333</div>
  31. </body>
  32. </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. 1.两数之和(Two Sum) C++

    暴力法可解决,速度很慢. 解决办法:哈希表 知识点: map的构造 遍历map使用迭代器,判断条件 插入 pair<int,int> 寻找key是否存在 class Solution { ...

  2. spring ，springmvc的常用标签注解

    一:spring常用的注解: @Configuration把一个类作为一个IoC容器,它的某个方法头上如果注册了@Bean,就会作为这个Spring容器中的Bean.@Scope注解 作用域@Lazy ...

  3. 创建含有多module的springboot工程（八）

    创建根工程 创建一个maven 工程,其pom文件为: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <?xml version="1.0" enc ...

  4. php 异常捕获的坑

    thinkphp 框架需要注意 书写为(Exception $e)将无效   需要写成 (\Exception $e) try { throw new \Exception("Error P ...

  5. python小数据池，代码块知识

    一.什么是代码块? 根据官网提示我们可以获知: A Python program is constructed from code blocks. A block is a piece of Pyth ...

  6. css3 居中（推荐弹性盒模型方式）

    参考  http://www.zhihu.com/question/20774514 http://caibaojian.com/demo/flexbox/align-items.html 例子:ht ...

  7. Android 音视频深入 六 使用FFmpeg播放视频（附源码下载）

    本篇项目地址,求starhttps://github.com/979451341/Audio-and-video-learning-materials/tree/master/FFmpeg%E6%92 ...

  8. 【资料收集】OpenCV入门指南 系列文章

    <OpenCV入门指南>系列文章地址:http://blog.csdn.net/morewindows/article/category/1291764 目录: 第一篇  安装OpenCV ...

  9. 1.3 CPU简介

    目录 CPU的功能模块 cpu总线 CPU寄存器 16位cpu的寄存器组 32位cpu的寄存器组 64位cpu的寄存器组 CPU的功能模块 CPU从逻辑上可以划分成3个模块,分别是控制单元.运算单元和 ...

  10. MySQL - exists与in的用法

    [1]exists 对外表用loop逐条查询,每次查询都会查看exists的条件语句. 当 exists里的条件语句能够返回记录行时(无论记录行是多少,只要能返回),条件就为真 , 返回当前loop到 ...