笔记 19

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属性值。

猜你喜欢