第五章初识jQuery

最新推荐文章于 2020-07-09 13:42:51 发布

JiangMye

最新推荐文章于 2020-07-09 13:42:51 发布

阅读量1.0k

点赞数 1

本文链接：https://blog.csdn.net/JiangMye/article/details/81097079

版权

1，单击图片，显示边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单击图片添加边框</title>
    <style>
    </style>
</head>
<body>
<img src="images/pic.gif">
</body>
<script src="js/jquery-1.12.4.js"></script>
<script>
    $(function () {
        $("img").click(function () {
            $(this).css("border","1px solid red")
        })
    })
</script>
</html>

2，林薇音简介

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>制作林薇音简介页面</title>
    <style>
        div{
            width: 500px;
            background: linear-gradient(to top,gainsboro,white);
            margin:0 auto;

        }
        #div-1{
            text-align: center;
            height: 50px;
            font-size: 30px;
            color: #FFFFFF;
            background: black;
            font-weight: bolder;
            padding-top: 5px;
        }
        #div-2{
            margin-top: 5px;
            text-align: center;
            height: 40px;
            font-size: 20px;
            color: #FFFFFF;
            background: black;
            font-weight: bolder;
            padding-top: 8px;
        }
        .p-1{
            text-indent: 2em;
            line-height: 30px;
            display: none;
        }
        .p-2{
            line-height: 30px;
            display: none;
        }
    </style>
</head>
<body>
<div id="div">
<div id="div-1">林薇音简介</div>
<p class="p-1">林徽因，女，汉族，原名林徽音，出生于浙江杭州，祖籍福建福州。中国著名建筑家、诗人、作家。
    人民英雄纪念碑和中华人民共和国国徽深化方案的设计者</p>
<p class="p-1">林徽因是建筑师梁思成的第一任妻子。三十年代初，与夫婿梁思成用现代科学方法研究方法研究中国古代建筑，
    成为这个学术领域的开拓者。
</p>
<div id="div-2">主要作品</div>
<p class="p-2">
    《你是人间四月天》<br>
    《宝莲灯》<br>
    《九十九度中》
</p>
</div>
<script src="js/jquery-1.12.4.js"></script>
<script>
    $(function () {
        $("#div-1").click(function () {
            $(".p-1").show();
        });
        $("#div-2").click(function () {
            $(".p-2").show();
        })
    })
</script>
</body>
</html>