CSS入门(定位之浮动定位、伪类之鼠标悬停、光标修改和透明度修改和列表样式)

【CSS入门(定位之浮动定位、伪类之鼠标悬停、光标修改和透明度修改和列表样式)】的更多相关文章

CSS入门(定位之浮动定位、伪类之鼠标悬停、光标修改和透明度修改和列表样式)

一.定位所为定位,实际上就是定义元素框相对于其正常位置,应该出现在哪儿定位就是改变元素在页面上的默认位置分类: 普通流定位(元素默认的定位方式) 浮动定位相对定位绝对定位固定定位 1.普通流定位文档流是页面元素默认的定位方式块级:从上到下排列(独占一行) 行级:从左到右排列(不独占一行) 2.浮动定位如果将元素的定位方式设置了浮动定位那么具有以下几个特点 1.浮动元素会脱离文档流,其他未浮动的元素要上前补位 2.浮动元素会停靠在父元素的左边或者右边,或者停靠在其他浮动元素的边缘…

CSS彻底研究(3) - 浮动,定位

Github pages 博文 CSS彻底研究(3)-浮动,定位一 . 浮动float I . 定义及规则 float默认为none,对应标准流的情况.当float : left;时,元素就会向其父元素的左侧靠紧,脱离标准流,同时宽度不再伸展至充满父容器,而是根据自身内容来确定. II . 演示规则准备代码 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="…

CSS魔法堂：稍稍深入伪类选择器

前言过去零零星星地了解和使用:link.::after和content等伪类.伪元素选择器,最近看书时发现这方面有所欠缺,于是决定稍微深入学习一下,以下为伪类部分的整理. 伪类伪类选择器实质上是让设计师可以根据元素特定的状态,设置不同的视觉效果.具体有:link.:visited.:hover.:active.:focus.:focus-within.:target.:root和:checked. HTMLAnchorElement的4大经典伪类 :link,用于设置链接初始状态时的样式…

理解是最好的记忆方法之 CSS中a链接的④个伪类为何有顺序

理解是最好的记忆方法之 CSS中a链接的④个伪类为何有顺序在CSS中,a标签有4种伪类,分别为: a:link, a:visited, a:hover, a:active 对其稍有了解的前端er都知道,4个伪类是有固定顺序的(LVHA),否则很容易出现预期之外的效果. 大部分人,都会用自己的方式,对这个顺序死记硬背. 熟记顺序,无疑是写样式时最快捷的方法,牛人们的记忆方法也是五花八门. 我见过有酱婶的:lv的包包hao,这倒是实话. 比较奇葩的,我在baidu上输入lvha,竟然自动关联出鹿…

css定位之浮动定位

浮动定位可以是原本垂直排列的块级元素,变成水平排列 1浮动元素 float:left 或者float:right 这些浮动会直接碰到父容器的边界为止. 2设置了浮动的元素,元素会脱离标准文档流中,但是元素内容会仍然占据文档流中的空间 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>float定位</title…

如何做一个导航栏————浮动跟伪类（hover）事件的应用

我们先说一下伪类选择器的写法: 写法:选择器名称:伪类状态{}4 常见伪类状态: 未访问:link 鼠标移上去:hover 激活选定:active 已访问:visited 获得焦点的时候触发:focus 现在我们要用的是hover事件,也就是鼠标指上发生的事情. 例:a:hover{ color:red } 还有要用到的是浮动属性, 例: <div> float:left; </div> <!--使此div块向左浮动--&g…

谈谈一些有趣的CSS题目（十）-- 结构性伪类选择器

开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉到生僻的 CSS 属性,赶紧去补习一下吧. 不断更新,不断更新,不断更新,重要的事情说三遍. 谈谈一些有趣的CSS题目(一)-- 左边竖条的实现方法谈谈一些有趣的CSS题目(二)-- 从条纹边框的实现谈盒子模型谈谈一些有趣的CSS题目(三)-- 层叠顺序与堆栈上下文知多少谈谈一些有趣…

CSS（五）：背景、列表、超链接伪类、鼠标形状控制属性

一.背景属性 1.背景属性用来设置页面元素的背景样式. 2.常见背景属性属性描述 background-color 用来设置页面的背景色,取值如red,#ff0000 background-image 用来设置页面的背景图片,图片路径可以是绝对路径或相对路径,如:background-image: url("../image/arrow-right.gif"); background-position 背景开始位置,包括水平方向(X轴)和垂直方向(Y轴)的设置. X轴取值:left…

CSS的两个小知识点伪类选择器和display:table-cell

li:first-child {color:red} li:nth-child(3n) {color: red} 在对nth-child传参的时候,已经直接用公式,3n就表示3的倍数.多用伪类和伪元素,可以使代码更精简,多看一下. display:table-cell实现垂直居中挺好用的,看别人的文章另外,CSS3有个grid 布局,挺好用的,只是目前很多浏览器没有实现.…

CSS基础知识（颜色、伪类、盒子模型）

6.设置颜色单位 L 普通英文单词 {color : 属性值red;} 此方法简单,便捷.但设置的颜色在不同浏览器中,可能显示的颜色出现差异 * 三原色 - 红.绿.蓝 L 颜色的八进制方式格式:rgb(数字,数字,数字),数字范围是0 ~ 255 r红色g绿色b蓝色 L 颜色的十六进制方式格式:#红色绿色蓝色,范围是00 ~ FF eg: #ff0000或#f00 7.伪类作用:为<a>元素添加样式 :link - 设置链接元素未访问的样式 …