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

最新推荐文章于 2023-03-08 23:51:46 发布

2021乐乐

最新推荐文章于 2023-03-08 23:51:46 发布

阅读量201

点赞数

分类专栏： html+css+js 文章标签： div 方框光标

本文链接：https://blog.csdn.net/weixin_42528089/article/details/84992335

版权

html+css+js 专栏收录该内容

24 篇文章 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>
    <!--<script type="text/javascript">
        $( "#d" ).click( function () {
            $( "#d" ).css( {
                "background-color" : "blue"
            } )
        } )
    </script>-->
</html>

运行结果：

2021乐乐

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
csdn 博客页面（前端网页学习2）

&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;script type="text/javascript" src="jquery-3.2.1.min.js"&gt;&lt;/script&gt; &lt;style type="text/css"&gt;
复制链接

扫一扫