2019.3.19web实训知识总结_有关web实验的相关知识-CSDN博客

本文链接：https://blog.csdn.net/qiangang_666666/article/details/88707451

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）几个要素。

导航栏运用步骤：
第一步：建立一个无序列表，加链接。

第二步：**css定义导航栏样式**

 <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>

`
zhen在这里插入图片描述
这样导航栏就做出来了。
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>