Web实训

最新推荐文章于 2024-06-23 10:20:53 发布

四次元的lucly

最新推荐文章于 2024-06-23 10:20:53 发布

阅读量593

点赞数 1

本文链接：https://blog.csdn.net/weixin_44762420/article/details/88757362

版权

Javascript注释;

//:添加多行注释

/**/：添加多行注释（webstorm快捷键：ctrl+shift+？）

包含块：包含块是标准布局中一个重要概念，它是绝对定位的基础，包含块是为绝对定位元素提供坐标偏移和显示范围的参照物。在默认状态下，boby元素是一个大的包含块，所有绝对定位的元素都是根据boby来确定自己所处位置的。但是如果定义了包含元素（指元素内容包含其它元素）为包含块以后，对于被包含的绝对定位元素来说，就会根据最近的包含块来决定自己的显示位置。

如果没有自己定义的包含块，那么所有绝对定位的元素都是根据boby来确定自己的位置，如果自己定义了包含块，那么根据自己定义的包含块来确定自己的位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<style stly="text/css">
    a {
        color: #FFFF99;
        text_decoration:none;
      }
    a:hover{
        color:#FFFFFF;
        text_decoration:underline;
    }
   #top {
        padding:10px 10px 0;
        font-szie:12px;
        font-weight:bold;
        margin:1px 0 0;
        list-style:none;
        border-bottom:8px solid #DC4E1B;
        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_hight:20px;
        background: #DDDDDD;
       color:#666666;
        display:block;
        width:80px;
        text-align:center;
        height:20px;
        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="#">首页</a><span>Home</span></div>
    <div class="top_nav"><a href="#">课堂大厅</a><span>Course</span></div>
    <div class="top_nav"><a href="#">学习中心</a><span>Lenre</span></div>
    <div class="top_nav"><a href="#">关于我们</a><span>About</span></div>
</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html";  charset="gb2312" />
    <title>变幻菜单</title>
    <style type="text/css">
        a{
            color: #43ff2e;
            text_decoration:underline ;
        }
        .top_nav{
            padding:10px 10px 0;
            font-szie:12px;
            font-weight:bold;
            margin:1px 0 0;
            list-style:none;
            border-bottom:8px solid #DC4E1B;
            overflow:hidden;
            background-color:#33b5e5;
        }
        .top_nav li{
            float: left;
            margin-right:1px;
        }
        .top_nav li a{
            position:relative;
            z-inder: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-heighr:20px;
            text-decoration:none;
            background:#DDDDDD;
            color:#666666;
            dispaly:block;
            width:80px;
            text-align:center;
            padding-top:2px;
            visibility:visible;
            top:0;
            color:#FFFFFF;
            background:#DC4E1B;

        }

    </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>Lenre</span></a></li>
        <li><a href="#">关于我们<span>About</span></a></li>
    </ul>
</div>
</body>
</html>

四次元的lucly

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Web实训

Javascript注释;//:添加多行注释/**/：添加多行注释（webstorm快捷键：ctrl+shift+？）包含块：包含块是标准布局中一个重要概念，它是绝对定位的基础，包含块是为绝对定位元素提供坐标偏移和显示范围的参照物。在默认状态下，boby元素是一个大的包含块，所有绝对定位的元素都是根据boby来确定自己所处位置的。但是如果定义了包含元素（指元素内容包含其它元素）为...
复制链接

扫一扫