Web页面设计实训课堂笔记——导航栏_06DYL

本文链接：https://blog.csdn.net/weixin_44762370/article/details/88737952

导航栏（一级菜单）学习

关于导航栏的代码实现

可分别用<div>与ul il 两种方法实现

方法一总体代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style >
        a{
            color: #ffffff;
            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 darkred ;
            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: darkred;
        }
    </style>
</head>
<body>
<div id="top">
    <ul class="top_nav">
        <li><a href="#">首页<span>Home</span></a><>
        <li><a href="#">课堂大厅<span>Course</span></a><>
        <li><a href="#">学习中心<span>Learn</span></a><>
        <li><a href="#">关于我们<span>About</span></a><>
    </ul>

</div>
</body>
<html>

方法二<div>总体代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a{
            color: #ffffff;
            text-decoration: none;
        }
        a:hover{
            color: #ffffff;
            text-decoration: none;
        }
        #top {
            padding: 10px 10px 0;
            font-size: 12px;
            font-weight: bold ;
            margin: 1px 0 0;
            list-style: none ;
            border-bottom: 8px solid darkred;
            overflow: hidden ;
            /*background-color: #33b5e5 ;*/
        }
        .top_nav {
            width: 80px;
            height: 20px;
            background-color:#dddddd;
            text-align: center;
            margin-right: 1px;
            line-height: 20px;
            float: left ;
            position: relative;
        }
        .top_nav span{
            position: absolute ;
            visibility: hidden;
        }
        .top_nav a:hover span {
            line-height: 20px;
            display: block ;
            width: 80px ;
            height: 20px;
            text-align: center ;
            padding-top: 2px;
            visibility: visible ;
            top: 0;
            left: 0;
            color: #ffffff;
            background: darkred;
        }
    </style>
</head>
<body>
<div id="top">
    <div class="top_nav"><a href="#">首页<span>Home</span></a></div>
    <div class="top_nav"><a href="#">课堂大厅<span>Course</span></a></div>
    <div class="top_nav"><a href="#">学习中心<span>Learn</span></a></div>
    <div class="top_nav"><a href="#">关于我们<span>About</span></a></div>

</div>
</body>
<html>

知识点总结：

DIV全称为Division，代表网页内容中的一个逻辑区域。DIV相当于一个容器，由起始标签<div>和结束标签</div>以及其中的内容组成。在DIV内部可以嵌套各类元素。
关于div中的float属性（1.float属性定义DIV的浮动方式，有三种取值方式：none，left，right
当float属性值取为left时，div会向左浮动，其他的div显示方式和浏览器相关。
当float属性值取为right时，div会向右浮动）

CSS盒模型-css边框

值	描述
none	无边框
hidden	与none相同，不过应用于表时除外
dotted	点状。在大多数浏览器中呈现为实线
dashed	虚线，在大多数浏览器中呈现为实线
solid	实线
double	双线，双线的宽度等于border-width的值
groove	3D凹槽，其效果取决于border-color的值
ridge	3D垄状，其效果取决于border-color的值
inset	3Dinset,其效果取决于border-color的值
outset	其效果取决于border-color的值

属性	描述
border	简写属性，在一个声明中设置四个边的边框属性
border-style	设置元素所有边框的样式，或者单独的为各边设置边框样式
border-width	设置元素所有边框的宽度，或者单独的为各边边框设置宽度
border-color	设置元素所有边框中可见部分的颜色，或者单独的为各边边框设置颜色

display属性

值	描述
none	不显示
block	显示为块级元素，元素前后带有换行符
inline	显示为行内元素，元素前后没有换行
inline-block	行内块元素
list-item	作为列表显示
flex	弹性伸缩盒
inline- flex	行内弹性伸缩盒

如果从布局角度来分析，这些显示类型都可以划归为block、inline和flex三种，其他类型都是这三种类型的特殊显示。
none
- none属性值表示隐藏并取消盒模型，所包含的内容不会被浏览器解析和显示。通过把display设置为none，该元素及其所有内容就不再显示，也不占用文档中的空间。

block
- block显示为块状元素，块状元素的宽度为100％，而且后面隐藏附带有换行符，使块状元素始终占据一行。如<div>常常被称为块状元素，这意味着这些元素显示为一块内容。

inline
- inline显示为行内元素，元素前后没有换行符，行内元素没有高度和宽度，因此也就没有固定的形状，显示时只占据其内容的大小。如<a>和<span>称为行内元素。
- 可以使用display属性改变元素盒模型的显示类型。这意味着，通过将display属性设置为block，可以让行内元素表现得和块元素一样，也可以通过将display属性设置为inline，让块元素表现得像行内元素一样。
listitem
- listitem属性值表示列表项目，其实质上也是块状显示，不过是一种特殊的块状类型，它增加了缩进和项目符号。

CSS外边距

属性	描述
margin	简写属性，在一个声明中设置所有外边距属性
margin-bottom	元素的下外边距
margin-left	元素的左外边距
margin-right	元素的右外边距
margin-top	元素的上外边距

CSS页面布局详细：

属性	描述
display	设置元素显示类型
float	规定元素是否应该浮动
clear	规定元素的哪一侧不允许其他浮动元素
visibility	规定元素是否可见。与display不同，此属性为隐藏的对象保留其占据的空间
overflow	设置当元素的内容溢出时的处理方式
overflow-x	设置当元素的内容横向溢出时的处理方式
overflow-y	设置当元素的内容纵向溢出时的处理方式

2019.3.19