三种定位+堆叠+li小黑点变图片
定位:
定位分为三种:
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>
特殊符号:©
域文本标签:
<pre style="样式"></pre>
将你在html中的文字布局投放到网页中
文本首行缩进:
text index:xx em;
列表:自定义
<dl>
<dt> </dt>
<dd></dd>
</dl>
三种定位+堆叠+li小黑点变图片的更多相关文章
- 【css笔记】css中的盒模型和三种定位机制(固定定位,绝对定位,浮动)
html页面上的元素都可以看成是框组成的,框通过三种定位机制排列在一起就过程了我们看到的页面.而框就是盒模型. 盒模型 1.页面上的每个元素可以看成一个矩形框,每个框由元素的内容,内边距,边框和外边距 ...
- android 三种定位方式
http://www.cnblogs.com/oudi/archive/2012/03/22/2411509.html 最近在看android关于定位的方式,查了很多资料,也做了相关实验,在手机上做了 ...
- css - 三种方法解决LI和内部Img的上下间距问题
在火狐浏览器和谷歌浏览器(qq浏览器,谷歌内核)bug类似这张图: img的高度是190*127 但是放到li中,li并没有设置高度,却和内部的图片之间上下错位. 若强行给li设置高度127,他和im ...
- CSS三种定位机制
标准文档流 块级元素撑满整个页面div,ul,li,dl,dt,p 行级元素可以一行显示多个span,strong,img,input大部分 一般不设置盒子的高度,另其自动调整 margin属性的au ...
- CSS+DIV 布局三种定位方式
一.普通流 普通流中元素框的位置由元素在HTML中的位置决定.块级元素从上到下依次排列,框之间的垂直距离由框的垂直margin计算得到.行内元素在一行中水平布置. 二.定位 1.相对定位 被看作普通流 ...
- HTML中三种定位relative,absolute,fixed后,盒子的百分比宽度及位置易错点
1 . 相对定位relative:顾名思义,相对定位是相对于自己的位置来进行偏移,如下图: 以盒子中心为基准,为每条边的正方向,例: 向右移动20px : 代码为left:20px;或者right:- ...
- javascript实现图片延迟加载方法汇总(三种方法)
看到一些大型网站,页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,跟着小编一 ...
- Hibernate实体对象三种状态
Hibernate实体对象生命周期: 1. 自由状态(Transient,临时状态,瞬态) 在内存中自由存在,与数据库无关,未被Hibernate的Session管理 2. 持久状态(Persiste ...
- 如何在Html的CSS中去除<li>标签前面小黑点,和ul、LI部分属性方法
div是很多人做网站都会用到的,但在显示效果时前面总是会有一个小黑点,这个效果很多人不想要,但又不知到如何去除,然而我们可以用以下方法来清除. 1.在CSS中写入代码.找到相关性的CSS,在..li和 ...
随机推荐
- SQL-W3School-高级:SQL AUTO INCREMENT 字段
ylbtech-SQL-W3School-高级:SQL AUTO INCREMENT 字段 1.返回顶部 1. Auto-increment 会在新记录插入表中时生成一个唯一的数字. AUTO INC ...
- 【思考】为什么说Bagging减少variance,Boosting减少bias?(转载)
具体讨论可见于此知乎问题,有很多种理解方向,甚至这一个命题可能本来就不成立!
- JMX简介及was上的使用
参考文章:https://www.ibm.com/developerworks/cn/websphere/library/techarticles/0908_sunyan_jmxdeploy/inde ...
- 阶段5 3.微服务项目【学成在线】_day02 CMS前端开发_02-vuejs研究-vuejs基础-MVVM模式
1.2.1 MVVM模式 vue.js是一个MVVM的框架,理解MVVM有利于学习vue.js. MVVM拆分解释为: Model:负责数据存储 View:负责页面展示 View Model: ...
- 【Fiori系列】浅谈SAP Fiori的设计美感与发展历程
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[Fiori系列]浅谈SAP Fiori的设计美 ...
- JAVA数据结构和算法 3-简单排序
排序中的两种基本操作是比较和交换.在插入排序中还有移动. 冒泡排序:两两比较相邻元素,如果较大数位于较小数前面,则交换: 每一趟遍历将一个最大的数移到序列末尾,共遍历N-1趟. 如果执行完一趟之后没有 ...
- Docker三
将本地镜像发布到阿里云 有时候需要共享镜像或者习惯使用自己定义的镜像,可以注册私有仓库,国内推荐使用阿里云 步骤: 1.登录阿里云容器镜像服务:https://cr.console.aliyun.co ...
- matlab imread函数全说明
imread Read image from graphics file Syntax A = imread(filename, fmt) [X, map] = imread(...) [...] ...
- 最新 汇通达java校招面经 (含整理过的面试题大全)
从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿. 汇通达等10家互联网公司的校招Offer,因为某些自身原因最终选择了 汇通达.6.7月主要是做系统复习.项目复盘.Leet ...
- 最新 58集团java校招面经 (含整理过的面试题大全)
从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.58集团等10家互联网公司的校招Offer,因为某些自身原因最终选择了58集团.6.7月主要是做系统复习.项目复盘.Leet ...