定位:

定位分为三种:

position:static(默认值)

    relation(相对定位):进行较小偏移,不会脱离文档流,原位置保留

    absolute(绝对定位):脱离文档流,不占据页面空间,变成块元素,服从最近的相对定位元素  ——margin:auto则失效

    fixed(固定定位):脱离文档流,变成快

注:相对定位和绝对定位是成对使用

偏移属性:top  -上   +下

     left  -左  +右

      right  -右  +左

  (底部)bottom   -下   -上

 

固定定位:将元素固定在可视区的某个位置,且不会随着滚动条的移动产生变化,永远是相对于body实现定位

——————————————————————分割线——————————————————————————

堆叠:改变盒子元素的顺序

  z-index:没有单位的数字,数字值越大,越靠上,可负数(负数则在最下层)。只能作用在使用三种定位的元素上,若不指定z-index,则后来者居上,

注:父子关系无法使用,子永远压咋父元素上:

  父子关系(不可用):

    <div>

      <div>

      </div>

    </div>

————————————————————————分割线————————————————————————————

将li标签自带的黑点变成图片:

  一般来说我们会用

  list-style:none    ————将小黑点去除,

但是通过list-style-image:URL     ————可以将小黑点变成图片:

效果图:

————————————————————————-分割线——————————————————————————

追加一些网页通用布局:

导航栏:<nav>

    </nav>

特殊符号:&copy

      

域文本标签:

<pre style="样式"></pre>

将你在html中的文字布局投放到网页中

文本首行缩进:

text index:xx  em;

列表:自定义
<dl>

  <dt> </dt>

  <dd></dd>

</dl>

三种定位+堆叠+li小黑点变图片的更多相关文章

  1. 【css笔记】css中的盒模型和三种定位机制(固定定位,绝对定位,浮动)

    html页面上的元素都可以看成是框组成的,框通过三种定位机制排列在一起就过程了我们看到的页面.而框就是盒模型. 盒模型 1.页面上的每个元素可以看成一个矩形框,每个框由元素的内容,内边距,边框和外边距 ...

  2. android 三种定位方式

    http://www.cnblogs.com/oudi/archive/2012/03/22/2411509.html 最近在看android关于定位的方式,查了很多资料,也做了相关实验,在手机上做了 ...

  3. css - 三种方法解决LI和内部Img的上下间距问题

    在火狐浏览器和谷歌浏览器(qq浏览器,谷歌内核)bug类似这张图: img的高度是190*127 但是放到li中,li并没有设置高度,却和内部的图片之间上下错位. 若强行给li设置高度127,他和im ...

  4. CSS三种定位机制

    标准文档流 块级元素撑满整个页面div,ul,li,dl,dt,p 行级元素可以一行显示多个span,strong,img,input大部分 一般不设置盒子的高度,另其自动调整 margin属性的au ...

  5. CSS+DIV 布局三种定位方式

    一.普通流 普通流中元素框的位置由元素在HTML中的位置决定.块级元素从上到下依次排列,框之间的垂直距离由框的垂直margin计算得到.行内元素在一行中水平布置. 二.定位 1.相对定位 被看作普通流 ...

  6. HTML中三种定位relative,absolute,fixed后,盒子的百分比宽度及位置易错点

    1 . 相对定位relative:顾名思义,相对定位是相对于自己的位置来进行偏移,如下图: 以盒子中心为基准,为每条边的正方向,例: 向右移动20px : 代码为left:20px;或者right:- ...

  7. javascript实现图片延迟加载方法汇总(三种方法)

    看到一些大型网站,页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,跟着小编一 ...

  8. Hibernate实体对象三种状态

    Hibernate实体对象生命周期: 1. 自由状态(Transient,临时状态,瞬态) 在内存中自由存在,与数据库无关,未被Hibernate的Session管理 2. 持久状态(Persiste ...

  9. 如何在Html的CSS中去除<li>标签前面小黑点,和ul、LI部分属性方法

    div是很多人做网站都会用到的,但在显示效果时前面总是会有一个小黑点,这个效果很多人不想要,但又不知到如何去除,然而我们可以用以下方法来清除. 1.在CSS中写入代码.找到相关性的CSS,在..li和 ...

随机推荐

  1. Linux-命令与文件的查询

    命令与文件的查询: 1.脚本文件名的查询: which(寻找执行文件) 命令格式: which [-a] command -a:列出查询到的所有命令的路径 2.文件名的查找: whereis.loca ...

  2. kafka-sparkstreaming---学习1

    ---恢复内容开始--- import java.util.*; import org.apache.spark.SparkConf; import org.apache.spark.TaskCont ...

  3. [ML] Bayesian Logistic Regression

    简单概率分类 Ref: 逻辑回归与朴素贝叶斯有什么区别? Ref: 机器学习笔记——逻辑回归(对数几率回归)和朴素贝叶斯分类器的对比 首先,搞清楚一个问题. naive bayes 能分类:逻辑回归也 ...

  4. python3 高级编程(三) 使用@property

    @property装饰器就是负责把一个方法变成属性调用的. @property广泛应用在类的定义中,可以让调用者写出简短的代码,同时保证对参数进行必要的检查,这样,程序运行时就减少了出错的可能性 cl ...

  5. 嵌入(embedding)层的理解

    首先,我们有一个one-hot编码的概念. 假设,我们中文,一共只有10个字...只是假设啊,那么我们用0-9就可以表示完 比如,这十个字就是“我从哪里来,要到何处去” 其分别对应“0-9”,如下: ...

  6. Qt 开源串口工具serialplot

    一.总结 serialplot,可视化很强大的串口收发工具.源代码:https://bitbucket.org/hyOzd/serialplot 1.serialplot用到了qwt插件,所以先安装好 ...

  7. TensorFlow.训练_资料(有视频)

    ZC:自己训练 的文章 貌似 能度娘出来很多,得 自己弄过才知道哪些个是坑 哪些个好用...(在CSDN文章的右侧 也有列出很多相关的文章链接)(貌似 度娘的关键字是"TensorFlow ...

  8. beego项目和go项目 打包部署到linux

    参考文章: https://www.jianshu.com/p/64363dff9721 [beego项目] 一. 打包 1. 打开Terminal 定位到工程的 main.go 文件夹目录 2. 执 ...

  9. VUE缓存:keep-alive

    VUE缓存:动态keep-alive:https://www.jianshu.com/p/11f7dbc07ad3 keep-alive include和exclude无效问题:https://blo ...

  10. 【leetcode算法-简单】13. 罗马数字转整数

    [题目描述] 罗马数字包含以下七种字符: I, V, X, L,C,D 和 M. 字符 数值I 1V 5X 10L 50C 100D 500M 1000例如, 罗马数字 2 写做 II ,即为两个并列 ...