csdn 博客页面（前端网页学习2）

朴灿烈づ我的快乐病毒、 2022-04-08 11:47 150阅读 0赞

<!DOCTYPE html> 
    <html>
        <head>
            <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
        <style type="text/css">
            
            #a{
                background: white;
            }
            img{
                 float: rigth;
            }
            #b{ 
                 position: absolute;
                 left:250px;
                 width: 50px;
                 height: 25px;
                 top: 50px;
                 cursor: pointer;/* 显示光标的形状*/
                 border: 1px solid black;/* 显示方框的形状*/
            }
            #b:hover {
                background-color: red;
                cursor: pointer;
                border: 1px solid black;
            }
            #c{
                position:absolute;
                left: 300px;
                width: 50px;
                height: 25px;
                top: 50px;
                cursor: pointer;
                border: 1px solid black;
            }
            #c:hover {
                background-color: red;
                cursor: pointer;
                border: 1px solid black;
            }
            #d{
                position: absolute;
                left: 350px;
                width: 50px;
                height: 25px;
                top: 50px;
                cursor: pointer; 
                border: 1px solid black;
            }
            #d:hover {
                background-color: red;
                cursor: pointer;
                border: 1px solid black;
            }
            #e{
                position: absolute;
                left: 400px;
                width: 50px;
                height: 25px;
                top: 50px;
                cursor: pointer;
                border: 1px solid black;
            }
            #e:hover {
                background-color: red;
                cursor: pointer;
                border: 1px solid black;
            }
            #f{
                position: absolute;
                left: 800px;
                width: 50px;
                height: 25px;
                top: 50px;
                      cursor: pointer;
            }
            #f:hover {
                background-color: red;
                cursor: pointer;
                border: 1px solid black;
            }
            </style>
        </head>
        <body id="a">
            <img src="/C:\Users\lenovo\Desktop/csdn.jpg"  width="150" height="164" />
            <div id="b">博客</div>
            <div id="c">学院</div>
            <div id="d"> 下载</div>
            <div id="e"> 更多</div>
            <div id="f"> 登录</div>
        </body>
        
    </html>

运行结果：

![20181213174147135.png][]

[20181213174147135.png]: /images/20220405/ffca24c3e368438bb7fc7d9fc245aa17.png