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

导航栏（一级菜单）学习

关于导航栏的代码实现

可分别用

与ul il 两种方法实现

方法一总体代码：

 

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



    
        

首页Home<>
        

课堂大厅Course<>
        

学习中心Learn<>
        

关于我们About<>
    

方法二

总体代码

 

    
    
    



    首页Home

    课堂大厅Course

    学习中心Learn

    关于我们About

知识点总结：

1. DIV全称为Division，代表网页内容中的一个逻辑区域。DIV相当于一个容器，由起始标签
   和结束标签
   以及其中的内容组成。在DIV内部可以嵌套各类元素。
2. 关于div中的float属性（1.float属性定义DIV的浮动方式，有三种取值方式：none，left，right    
3. 当float属性值取为left时，div会向左浮动，其他的div显示方式和浏览器相关。
4. 当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％，而且后面隐藏附带有换行符，使块状元素始终占据一行。如
    常常被称为块状元素，这意味着这些元素显示为一块内容。

 

 

• inline
  • inline显示为行内元素，元素前后没有换行符，行内元素没有高度和宽度，因此也就没有固定的形状，显示时只占据其内容的大小。如和称为行内元素。
  • 可以使用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