04
2020
09

未命名

css水平垂直居中对齐             blob.png         blob.png

1.元素居中对齐:要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;设置到元素的宽度将防止它溢出到容器的边缘,元素通过指定宽度,并将两边的空外边距平均分配(必须设置width属性,才能起到居中对齐的作用)

2.文本居中对齐:text-align: center使文本居中对齐blob.png     blob.png

3.左右对齐-使用定位方式:position: absolute; 属性来对齐元素:blob.png         blob.png

4.左右对齐-使用float方式:blob.png     blob.png

5.垂直:使用 padding:  blob.png   blob.png

6.垂直居中:line-height:blob.png     blob.png

css组合选择器;

后代选择器:(div p)后代选择器用于选取某元素的后代元素   blob.png    blob.png

子元素选择器:(div>p与后代选择器相比,子元素选择器(Child selectors)只能选择作为某元素子元素的元素,blob.png   blob.png

相邻兄弟选择器:(div+p)相邻兄弟选择器可选择紧接在另一元素后的元素,且二者有相同父元素,如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器

blob.pngblob.png

后续兄弟选择器:(div~p)后续兄弟选择器选取所有指定元素之后的相邻兄弟元素blob.pngblob.png

css导航栏;

建立链接表:<ul><li>元素<li><a href="#home">主页</a></li>用 href="#"作为测试连接。但在一个真正的 web 站点上需要真实的 url

一个导航栏并不需要列表标记:list-style-type:none - 移除列表前小标志,blob.png  blob.png

垂直导航栏:创建一个简单的垂直导航条实例,在鼠标移动到选项时,修改背景颜色:

先写基本样式:blob.png  blob.png  再写鼠标移动到选项上修改背景颜色blob.png blob.png

创建链接并添加边框:在 <li> or <a> 上添加text-align:center 样式来让链接居中,在 border <ul> 上添加 border 属性来让导航栏有边框。如果要在每个选项上添加边框,可以在每个 <li> 元素上添加border-bottom :blob.png

全屏高度固定导航栏:创建一个左边是全屏高度的固定导航条,右边是可滚动的内容                          blob.png   blob.png

水平导航栏:内联样式表,建立一个横向导航栏的方法之一是指定元素 display:inline;

浮动列表项:浮动 <li>元素,并指定为 <a>元素的宽度blob.png

float:left - 使用浮动块元素的幻灯片彼此相邻

创建一个水平导航条,在鼠标移动到选项后修改背景颜色blob.png  blob.png

链接右对齐:将导航条最右边的选项设置右对齐 (float:right;):<li style="float:right"><a class="active" href="#about">关于</a></li>blob.png

添加分割线:通过 border-right 样式来添加分割线border-right: 1px solid #bbb;blob.png

css下拉菜单:使用 CSS 创建一个鼠标移动上去后显示下拉菜单的效果;

可以借用容器元素来创建下拉菜单的内容,放在在任何你想放的位置上,使用 <div> 元素来包裹这些元素,并使用 CSS 来设置下拉内容的样式blob.png

先设置下拉按钮样式:blob.png  定位下拉内容:blob.png 在当鼠标未放置下拉按钮时处于隐藏状态:blob.png .dropdown-content 类中是实际的下拉菜单。默认是隐藏的,在鼠标移动到指定元素后会显示  min-width 的值设置为 160px可以修改  想设置下拉内容与下拉按钮的宽度一致,可设置 width 为 100%  定义下拉菜单的链接blob.png  改变鼠标移上去后下拉菜单链接的颜色.dropdown-content a:hover {background-color: red}        hover:选择器用于在用户将鼠标移动到下拉按钮上时显示下拉菜单    当在鼠标移上去后显示下拉菜单.dropdown:hover .dropdown-content { display: block;   当下拉内容显示后修改下拉按钮的背景颜色.dropdown:hover .dropbtn background-color: yellow;  最后还需要写一个button按钮做下拉菜单blob.png

css提示工具:提示工具在鼠标移动到指定元素后触发    blob.png

tooltip 类使用 position:relative, 提示文本需要设置定位值 position:absolute

tooltiptext 类用于实际的提示文本。模式是隐藏的,在鼠标移动到元素显示 。设置了一些宽度、背景色、字体色    设置Tooltip 容器blob.png  设置文本,blob.png

定位提示工具:提示工具显示在指定元素的右侧(left:105%) 显示在右侧:.tooltip .tooltiptext { top: -5px; left: 105%; }blob.png  显示在左边:.tooltip .tooltiptext { top: -5px; right: 105%; }blob.png

显示在头部:提示工具显示在头部和底部。设置width和bottom,使用 margin-left 属性,并设置为 -60px。这个数字计算来源是使用宽度的一半来居中对齐blob.png   blob.png

显示在底部:blob.pngblob.png

为提示框添加小箭头:after 及 content 属性为提示工具创建一个小箭头标志

顶部提示框/底部箭头:blob.png       blob.png       提示工具内定位箭头: top: 100% , 箭头将显示在提示工具的底部。left: 50% 用于居中对齐箭头border-width 属性指定了箭头的大小。如果你修改它,也要修改 margin-left 值。这样箭头在能居中显示,border-color 用于将内容转换为箭头。设置顶部边框为黑色,其他是透明的。如果设置了其他的也是黑色则会显示为一个黑色的四边形,border-color 中的值顺序是以提示框为准;

底部提示框/顶部箭头:blob.png   blob.png

右侧提示框/左侧箭头:blob.png   blob.png

左侧提示框/右侧箭头:blob.png   blob.png

淡入效果:使用 CSS3 transition 属性及 opacity 属性来实现提示工具的淡入效果:

.tooltip .tooltiptext { opacity: 0;transition: opacity 1s;}blob.png

css选择器:*选择所有元素,设置样式blob.png  blob.png

[attribute] 选择器      a[target]选择所有带有target属性的 <a>元素:blob.png blob.png

[attribute=value] 选择器     a[target=_blank]选择所有使用target="_blank"的a元素

:first-of-type 选择器匹配元素其父级是特定类型的第一个子元素。  p:first-of-typeblob.pngblob.png

:last-of-type选择器匹配元素其父级是特定类型的最后一个子元素      p:last-of-type

blob.pngblob.png

:only-of-type 代表了任意一个元素,这个元素没有其他相同类型的兄弟元素   p:only-of-type

blob.png   blob.png

:only-child 选择器匹配属于父元素中唯一子元素的元素    p:only-childblob.png  blob.png

:root选择器用匹配文档的根元素   :root    blob.png   blob.png

:empty选择器选择每个没有任何子级的元素(包括文本节点)p:empty  指定空的p元素的背景色

:target选择器可用于当前活动的target元素的样式blob.png    blob.png

属性多值的选择器:指定值的title属性的元素样式的例子,使用(~)分隔属性和值:blob.png  blob.png

包含指定值的lang属性的元素样式的例子,使用(|)分隔属性和值:blob.png   blob.png

« 上一篇 下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。