博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
三种定位+堆叠+li小黑点变图片
阅读量:4625 次
发布时间:2019-06-09

本文共 959 字,大约阅读时间需要 3 分钟。

定位:

定位分为三种:

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>

 

转载于:https://www.cnblogs.com/hzqzwl/p/11180809.html

你可能感兴趣的文章
【转】gcc编译优化---likely()与unlikely()函数的意义
查看>>
完成评论功能
查看>>
HDOJ2567 ( 寻梦 ) 【切水题,很欢乐~】
查看>>
Struts2方法调用的三种方式
查看>>
Navicat工具多表查询
查看>>
第四章 读书笔记
查看>>
我不为人人,人人不为我
查看>>
iOS网络编程(三) 异步加载及缓存图片---->SDWebImage
查看>>
Qt qml 模拟iphone slide to unlock 的聚光动画文字效果
查看>>
c++11 std::move() 的使用
查看>>
HDU 4607 Park Visit (DP最长链)
查看>>
实例学架构设计之源起复杂度
查看>>
leetcode- Rotate Array 旋转数组
查看>>
vue vuex
查看>>
.NET WebAPI 实现图片上传(包括附带参数上传图片)
查看>>
POJ 2234 Matches Game 博弈论水题 Nim模型
查看>>
BBC-unit6 session4
查看>>
JS获取节点的兄弟,父级,子级元素的方法(js获取子级获取到换行与空格元素-FF)...
查看>>
ini文件操作
查看>>
Win7 本地打印后台处理程序服务没有运 怎么办
查看>>