欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

笔记 19

程序员文章站 2022-05-08 13:36:29
...

ui 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>

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>

CSS定位
①页面布局相关属性:

float(left,right,auto),
display(block,inline,inline-block,listitem),
overflow(auto,hidden,scroll,visible)
②position属性

position属性规定元素的定位类型,定义建立元素布局所用的定位机制,任何元素都可以定位。 position属性值。
包含块
包含块是标准布局中的一个重要概念,他是绝对定位的基础,包含块是为绝对定位元素提供坐标偏移和显示范围的参照物。在默认状态下,body元素是一个大的包含块,所有绝对定位的元素都是根据body来确定自己所处的位置。但是如果定义了包含元素(指元素内容包含其他元素)为包含块以后,对于被包含的绝对定位元素来说,就会根据最近的包含块来决定自己的显示位置。