Web前端开发笔记——一级导航栏

最新推荐文章于 2023-09-06 01:04:19 发布

oqqYaZi1234

最新推荐文章于 2023-09-06 01:04:19 发布

阅读量521

点赞数 2

本文链接：https://blog.csdn.net/oqqYaZi1234/article/details/88768759

版权

一级导航栏编辑练习

1、ul li方法实现

<1> 代码如下：

<!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>
        <li><a href="#">课堂大厅<span>Course</span></a></li>
        <li><a href="#">学习中心<span>Learn</span></a></li>
        <li><a href="#">关于我们<span>About</span></a></li>
    </ul>
 
</div>
</body>
</html>

代码实现：

<2> 总结知识点：

①float属性

float属性定义DIV的浮动方式，有三种取值方式：none，left，right
当float属性值取为left时，div会向左浮动，其他的div显示方式和浏览器相关。
当float属性值取为right时，div会向右浮动。

②CSS页面布局：

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

●float（left，right，auto）

●display（block，inline，inline-block，listitem）

●overflow（auto，hidden，scroll，visible）

③CSS定位——position属性

●position属性规定元素的定位类型，定义建立元素布局所用的定位机制，任何元素都可以定位。

●position属性值：

absolute：绝对定位，相对于最近定位的祖先元素进行定位，元素的定位位置通过left、top、right和bottom属性值确定
relative：相对定位，相对于其正常位置进行定位，元素的定位位置通过left、top、right和bottom属性值确定

原位置（如图所示）：

相对定位（如图所示）：

绝对定位（如图所示）：

*注：相对定位是“相对于”元素在文档中的初始位置，而绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么最近的已定位祖先元素是body

●包含块

包含块是标准布局中的一个重要概念，它是绝对定位的基础，包含块是为绝对定位元素提供坐标偏移和显示范围的参照物。在默认状态下，body元素是一个大的包含块，所有绝对定位的元素都是根据body来确定自己所处的位置的。如果没有自己定义的包含快，那么所有绝对定位的元素都是根据body来确定自己的位置。如果自己定义了包含快，那么根据自己定义的包含块来确定位置。

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

代码实现：

② 总结知识点（同上）

oqqYaZi1234

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
Web前端开发笔记——一级导航栏

一级导航栏编辑练习1、ul li方法实现<1> 代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style > a{...
复制链接

扫一扫