感觉小咸儿最近懒散了很多啊!已经很久没有更新自己的博客内容了,最近小咸儿在学习JavaScript,所以接下来,小咸儿来给大家分享一下在JavaScript中简单的CSS样式。
CSS:层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
CSS特点:1、丰富的样式;2、易于使用和修改;3、多页面应用;4、层叠;5、页面压缩;
简单的介绍了一下CSS是什么,接下来就是主要学习的内容:
- position属性:
static(默认)
Relative
Fixed(脱离文档流)
absolute(脱离文档流)
除此之外,还有一些其他的属性:位置中的上下左右
- 与top、left、bottom和right的连用:
top元素顶端与距离浏览器上边缘的距离
left元素顶端与距离浏览器左边缘的距离
bottom元素顶端与距离浏览器下边缘的距离
right元素顶端与距离浏览器右边缘的距离
接下来的内容就是relative是干什么用的?
- 在绝对定位默认是以浏览器作为参考的情况下:
在relative定位的元素中,位置的层次主要为Z-Index属性
而对于样式的显示和隐藏Display的运用呢?则具体如下:
- none(无)、block(块)、inline(行级)
- 标签:div、span
小咸儿举一个具体的示例:有层次的显示位置
首先添加一个HTML页,在HTML中写入代码,
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css" >
#dv1, #dv2 {
width:300px;
height :200px;
position :absolute ;
border :1px solid red;
}
#dv1 {
top:50px;
left:100px;
background-color :blue ;
z-index:0;
}
#dv2 {
background-color :green ;
z-index:0;
}
</style>
<script type ="text/javascript">
var dv = null;
onload = function () {
var dvs = document.getElementsByTagName("div");
for (var i = 0; i < dvs.length; i++) {
dvs[i].onclick = function () {
if (dv != null) dv.setAttribute("style", "z-index:0");
this.setAttribute("style", "z-index:1");
dv = this;
};
}
};
</script>
</head>
<body>
<div id="dv1"></div>
<div id="dv2"></div>
</body>
</html>
页面的显示效果为:当鼠标点击任意一层时,这一层都会显示在最顶层
今天小咸儿总结的都是最简单的样式应用,这些基础都需要自己一步一个脚印的走过来,不断的积累,夯实自己的基础;