第五章初识jQuery —课后作业：

1.使用css()方法添加图片边框，单机图片显示边框。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片添加边框</title>
    <style>
        .div1{margin: 0px 630px;}

    </style>
</head>
<body>
   <div class="div1" id="a"><img src="images/pic.gif"> </div>
   <script src="https://code.jquery.com/jquery-3.3.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
       $(document).ready(function () {
           $("div").click(function () {
               $("img").css("border","1px solid")
           })
               .mouseout(function () {
               $("img").css("border","none")
           })
       })
    </script>
</body>
</html>

2.制作林薇因简介页面，单击“林薇因简介“链接显示简介内容，单击后对应显示作品。

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

第五章 初识jQuery —课后作业：

猜你喜欢

第五章初识jQuery —课后作业：