Web实训——3.19

最新推荐文章于 2024-05-29 10:52:04 发布

是在为难我静香

最新推荐文章于 2024-05-29 10:52:04 发布

阅读量165

点赞数

本文链接：https://blog.csdn.net/txy114116/article/details/88766483

版权

课堂笔记

一，导航栏（课堂练习）
1，div实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div 实现</title>
</head>
<style>
 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 darkred;
        overflow: hidden;
        background-color: #014d67;
    }
.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:hover span{
        line-height: 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>
<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>Learn</span></div>
    <div class="top_nav"><a href="#">关于我们</a><span>About</span></div>
</div>
</body>
</html>

2，ul li实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ul li实现</title>
</head>
<style>
 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 #014d67;
        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><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>

二，知识点**
1，display属性
none：
none属性值表示隐藏并取消盒模型，所包含的内容不会被浏览器解析和显示。通过把display设置为none，该元素及其所有内容就不再显示，也不占用文档中的空间
block：
block显示为块状元素，块状元素的宽度为100％，而且后面隐藏附带有换行符，使块状元素始终占据一行。如常常被称为块状元素，这意味着这些元素显示为一块内容。
listitem：
listitem属性值表示列表项目，其实质上也是块状显示，不过是一种特殊的块状类型，它增加了缩进和项目符号
inline：
inline显示为行内元素，元素前后没有换行符，行内元素没有高度和宽度，因此也就没有固定的形状，显示时只占据其内容的大小可以使用display属性改变元素盒模型的显示类型。这意味着，通过将display属性设置为block，可以让行内元素表现得和块元素一样，也可以通过将display属性设置为inline，让块元素表现得像行内元素一样。

2，css定位属性
top，right，bottom，left：定义了定位元素的上，右，下，左外边距边界与其包含块上边距之间的偏移
相对定位：
如果将元素设置为相对定位，可以作为绝对定位元素的参照物，对象不可层叠
绝对定位：
相对于最近的positioned祖先元素偏移（当该元素的父元素都不是positioned，则相对于body元素偏移）。通过设置top，bottom，left，right属性设置偏移。