jQuery第5章简答题4(使用css()方法添加图片边框)&5(制作林徽因简介页面)

思卿不见

已于 2022-05-25 16:15:38 修改

阅读量3.7k

点赞数 2

文章标签： jquery

于 2019-06-23 15:51:12 首次发布

本文链接：https://blog.csdn.net/weixin_44100210/article/details/93383322

版权

ps:简答题4(使用css()方法添加图片边框) 代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用css()方法添加图片边框</title>
    <style>
        div{
            width: 200px;
            margin: 0px auto;
        }
    </style>
    <script src="../../js/jquery-1.12.4.js"></script>
</head>
<body>
<div>
    <img src="../image/pic.gif" alt="">
</div>
<script type="text/javascript">
    $(document).ready(function () {
        $("div").click(function () {
            $(this).css("border","solid 1px gainsboro")
        })
    })
</script>
</body>
</html>

效果图如下:
在这里插入图片描述
ps:简答题5(制作林徽因简介页面) 代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>制作林徽因简介页面</title>
    <style>
        *{
            margin: 0px;
        }
        .two,.four{
            color: white;
            font-weight: bolder;
            font-size: 31px;
            height: 55px;
            background-color: black;
            text-align: center;
            padding-top: 12px;
            cursor: pointer;
        }
        .four{
            margin-top: 5px;
            font-size: 27px;
            height: 50px;
        }
    </style>
    <script src="../../js/jquery-1.12.4.js"></script>
</head>
<body>
<div class="one">
    <div class="two">林徽因简介</div>
    <p id="a">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;林徽因（1904年6月10日－1955年4月1日），汉族，祖籍福建闽县（福州），出生于浙江杭州。原名林徽音，其名出自“《诗·大雅·思齐》：大姒嗣徽音，则百斯男”。后因常被人误认为当时一男作家“林徽音”，故改名为“徽因”.<br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;中国近现代杰出的建筑师、诗人和作家，人民英雄纪念碑和中华人民共和国国徽深化方案的设计者之一、建筑学家梁思成的第一任妻子。二十世纪三十年代初，同梁思成一起用现代科学方法研究中国古代建筑，成为这个学术领域的开拓者，后来在这方面获得了巨大的学术成就，为中国古代建筑研究奠定了坚实的科学基础。文学上，著有散文、诗歌、小说、剧本、译文和书信等，代表作《你是人间四月天》、《莲灯》、《九十九度中》等。其中，《你是人间四月天》最为大众熟知，广为传诵。</p>
</div>
<div class="three">
    <div class="four">主要作品</div>
    <p id="aa">
        《你是人间四月天》<br>
        《宝莲灯》<br>
        《九十九度中》<br>
    </p>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        $("#a").css("display","none");
        $(".two").click(function () {
            $("#a").css("display","block")
        })
        $("#aa").css("display","none");
        $(".four").click(function () {
            $("#aa").show();
        })
    })
</script>
</body>
</html>

效果图如下:
在这里插入图片描述