2019.03.19
姓名:李林治 学号:1722230119
任务:
1.导航栏(变换菜单,多级菜单)
复习JavaScript,HTML及CSS
2.JQuery基础——JS框架,简单易用,代码量少。
导航栏运用
***一.*导航栏的作用:
导航栏是指位于页面顶部或者侧边区域的,在页眉横幅图片上边或下边的一排水平导航按钮,它起着链接站点或者软件内的各个页面的作用。
**二.**知识要点归纳:
1.包含块:
包含块是标准布局中的一个重要概念,它是绝对定位的基础,包含块是为绝对定位元素提供坐标偏移和显示范围的参照物。在默认状态下,body元素是一个大的包含块,所以绝对定位的元素都时根据body来确定自己所处的位置的。但是如果定义了包含元素(指元素内容包含其他元素)为包含块以后,对于被包含的绝对定位元素来说,就是根据最近的包含块来决定自己的显示位置。
总结:如果没有自己定义的包含块,那么所有绝对定位元素都是根据body来确定自己的位置,如果自己定义了包含块,那么根据自己定义包含块来确定位置。
2.position属性:
概念:position属性共有四种不同的定位方法,分别是static、fixed、relative、absolute,sticky。最后将会介绍和position属性密切相关的z-index属性。
定位举列:
Eg:蓝色的position:relative top:5px; 则相对她的正常位置 也就是图一他本来应该在的位置 距离上方5px
如图所示:
总结:
|值: absolute
描述: 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
值:fixed
描述:生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
值:relative
描述:生成相对定位的元素,相对于其正常位置进行定位。因此,“left:20” 会向元素的 LEFT 位置添加 20 像素。static 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。inherit 规定应该从父元素继承 position 属性的值。
3.ul li列表元素
概念:无序列表是一个没有特定顺序的列表项的集合,也称为项目列表。在无序列表中,各个列表之间属于并列关系,没有先后顺序之分,它们之间以一个项目符号来标记。使用无序列表标签ul的type属性(使用CSS的list-style来代替),用户可以指定出现在列表项前的项目符号的样式,主要有:disc(实心圆点)、circle(空心圆点)、square(实心方块)、none(无项目符号)。
4.伪类的运用
伪类概念:在感觉上伪类可以是动态的,当用户和文档进行交互的时候一个元素可以获取或者失去一个伪类。例外的是":first-child"能通过文档树推断出来,":lang"在一些情况下也在从文档树中推断出来。
**知识框架:hover ,link, active,visited.
5. float 属性介绍
① left :元素向左浮动。
② right :元素向右浮动。
③ none :默认值。
④ inherit :从父元素继承float属性。
步骤:
首先要知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流。如
如果我们把div2采用右浮动,会是如下效果:
我们把div2和div3都加上左浮动,效果如图:
假如把div2、div3、div4都设置成右浮动,效果如下
清除浮动采用clear:both进行清除
6.盒子模型:
css盒子模型概念
CSS css盒子模型 又称框模型 (Box Model) ,包含了元素内容(content)、内边距(padding)、边框(border)、外边距(margin)几个要素。
导航栏运用步骤:
第一步:建立一个无序列表,加链接。
<style>
a{color:#ffff99;text-decoration: none;}
a:hover{color:red; text-decoration:underline; }
.top-nav{padding:10px 10px 0;font-size: 12px;font-weight:bold; margin:10px 0 0 0;
list-style: none;border-bottom:8px solid red; overflow: hidden;background-color: aqua;
}
.top-nav li{float:left;margin-right: 1px;}
.top-nav li a{position:relative; z-index:0;line-height: 20px;text-decoration: none;background-color: #DDDDDD;
color:#666666; display:block; width:80px;text-align: center;
}
.top-nav li a span{position:absolute;visibility:hidden;}
.top-nav li a:hover span{line-height: 20px;text-decoration: none;background:#666666;color:#666666
display:block; width:80px;text-align: center;
padding-top: 2px;visibility: visible;top:0;left:0;color:#FFFFFF;background:#dc4e1b;
}
</style>
`
这样导航栏就做出来了。
div实现导航栏:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
a{
color: #FFFF99;
text-decoration: none;
}
a:hover{
color: #FFFFFF;
text-decoration: underline;
}
#top{
padding: 10px 10px 0;
font-size: 12px;
font-weight: bold;
margin: 1px 0 0;
list-style: none;
border-bottom: 8px solid #DCE6F4;
overflow: hidden;
background-color: #33b5e5;
}
.top-nav{
float: left;
margin-right: 1px;
background-color: #333333;
position: relative;
width: 80px;
height: 20px;
text-align: center;
line-height: 20px;
}
.top-nav span{
position: absolute;
visibility: hidden;
}
.top-nav:hover span{
line-height: 20px;
background: #DDDDDD;
color: #666666;
display: block;
width: 80px;
text-align: center;
padding-top: 2px;
visibility: visible;
top:0;
left: 0;
color:#FFFFFF;
background:#DC4E1B;
}
</style>
</head>
<body>
<div id="top">
<div class="top-nav"><a href="123">首页<span class="span">Home</span></a></div>
<div class="top-nav"><a href="123">课堂大厅<span class="span">Course</span></a></div>
<div class="top-nav"><a href="123">学习中心<span class="span">Learn</span></a></div>
<div class="top-nav"><a href="123">关于我们<span class="span">About</span></a></div>
</body>
<html>
`**``ul li导航栏实现方式:**
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>变换菜单</title>
</head>
<style type="text/css">
a{
color: #FFFF99;
text-decoration: none;
}
a:hover{
color: #FFFFFF;
text-decoration: underline;
}
.top-nav{
padding: 10px 10px 0;
font-size: 12px;
font-weight: bold;
margin: 1px 0 0 0;
list-style: none;
border-bottom: 8px solid #DCE6F4;
overflow: hidden;
background-color: #33b5e5;
}
.top-nav li{
float: left;
margin-right: 1px;
}
.top-nav li a{
position: relative;
z-index: 0;
line-height: 20px;
text-decoration: none;
background: #DDDDDD;
color: #666666;
display: block;
width: 80px;
text-align: center;
}
.top-nav li a span{
position: absolute;
visibility: hidden;
}
.top-nav li a:hover span{
line-height: 20px;
text-decoration: none;
background: #DDDDDD;
color: #666666;
display: block;
width: 80px;
text-align: center;
padding-top: 2px;
visibility: visible;
top:0;
left: 0;
color:#FFFFFF;
background:#DC4E1B;
}
</style>
<body>
<div id="top">
<ul class="top-nav">
<li class="top-nav"><a href="#">首页<span>Home</span></a></li>
<li class="top-nav"><a href="#">课堂大厅<span>Course</span></a></li>
<li class="top-nav"><a href="#">学习中心<span>Learn</span></a></li>
<li class="top-nav"><a href="#">关于我们<span>About</span></a></li>
</ul>
</div>
</body>
</html>