CSS视频教程|CSS 高级

弹指间学会CSS admin 516浏览

第6章 CSS 高级

  1. CSS定位
  2. CSS浮动
  3. CSS尺寸
  4. CSS导航栏
  5. CSS图片

CSS定位

允许定义元素相对其正常位置该出现的位置/或相对父元素,另一个元素甚至浏览器窗口本身的位置发生偏移。

css三种定位基本机制:

①普通流:元素按照html元素中的位置顺序排序

②浮动(float):浮动的框可以向左或者向右,直到它的外边距碰到包含框或另外一个浮动框的边框为止

③绝对定位(absolute):使元素的位置脱离文档流,不占据空间;这一点与相对定位(relative)不同,相对定位实际上被看作普通流定位模型的一部分,因此元素的位置相对它在普通流的位置。

定位属性:position将元素放在一个静态的,相对的,绝对的,固定的位置,通过属性赋值,让元素向对应的方向发生偏移。

overflow设置元素溢出的区域发生的事情,clip设置元素显示状态多用于图片,vertical-align设置元素的垂直对齐方式,z-index设置元素的层叠顺序

CSS浮动

属性float属性赋值,left、right、none;inherit从父级继承浮动属性,还有一个clear属性主要是用来去掉浮动引起的属性包括继承属性

CSS尺寸

尺寸属性允许你控制元素的高度和宽度,同样它允许你增加行间距,涉及属性为: height/line-height/max-height/max-width/width/min-height/min-width

CSS导航栏

<ul id="web">
	<li><a href="dhnblog.com">HTML</a></li>
	<li><a href="dhnblog.com">CSS</a></li>
	<li><a href="dhnblog.com">JavaScript</a></li>
	<li><a href="dhnblog.com">jQuery</a></li>
</ul>
#web li{
    list-style: none;
    display: inline;
    margin-right: 24px;
}
#web li a:link,#web li a:visited{
    color: #fff;
    /* display: block; */
    text-decoration: none;
    background-color: #FF9900
}
#web li a:hover,#web li a:active{
    background-color: deepskyblue
}

CSS图片

<!-- 引用一张图片,加上一句描述,使用div进行承载 -->
<div class="picture">
	<a href="#">
		<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1003320719,3235932866&fm=26&gp=0.jpg" width="300" height="200">
	</a>
</div>
<style type="text/css">
	.picture a:link img,.picture a:visited img{
		opacity: 0.6;
	}
	.picture a:hover img,.picture a:active img{
		opacity: 0.8;
	}
	/*opacity设置属性透明度,属性值为0-1,其中透明度为0完全透明;透明度为1完全不透明*/
</style>

转载请注明:大灰牛博客 » CSS视频教程|CSS 高级