JavaScript作业4

最新推荐文章于 2023-12-28 16:16:28 发布

RainstarQAQ

最新推荐文章于 2023-12-28 16:16:28 发布

阅读量177

点赞数

分类专栏：笔记文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/qq_51552328/article/details/125794009

版权

笔记专栏收录该内容

54 篇文章 0 订阅

订阅专栏

1、页面中有多张图片，点击图片，自身添加一个像素灰色的实线边框，内边距10像素，圆角矩形(可以采用多种方式实现 1> .css().css() 2> .css({“border”:“1px solid gray”,“padding”:“10px”}); 3> addClass 的方式);

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<script src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function (){
    $("img").click(a);
    function a(){
        //$(this).css("border","1px solid gray").css("padding","10px").css("border-radius","10px");
        //$(this).css({"border":"1px solid gray","padding":"10px","border-radius":"10px"});
        $(this).addClass("one");
    }
})

</script>
<style>
    .one{
        border: 1px solid gray;
        padding: 10px;
        border-radius: 10px;
    }
</style>
<body>
<img src="./img/1.jpg" alt="">
<img src="./img/2.jpg" alt="">

</body>
</html>

在这里插入图片描述

2、完成作业二，英雄联盟

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<script src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function (){
    $("a").click(fun);
    function fun() {
        $("p").not($("#content")).css("background","skyblue").css("color","purple");
        $(".current").css("background","skyblue").css("color","purple");
        $("span").css({"background":"purple","color":"blue"});
        $("span:eq(1)").css("background","skyblue")
    }
})

</script>

<style>

</style>
<body>
<h1>英雄联盟</h1>
<p>
    《英雄联盟》，简称LOL。
</p>
<p id="content">
    由<strong>Riot Games </strong>开发，为3D竞技场战游戏，其
    <span>主创团队由实力强劲的
        <strong>魔兽争霸</strong>
        系列游戏多人<span>即时对战</span>自定义地图开发团队
    </span>...
    <a href="#">更多详情</a>
</p>
<h2>目录
</h2>
<ul class="txt_box">
    <li class="current"><a href="#">开发团队</a></li>
    <li><a href="#">游戏周边</a></li>
    <li><a href="#">游戏介绍</a></li>
    <li><a href="#">配置需求</a></li>
    <li><a href="#">游戏背景</a></li>
</ul>

</body>
</html>

在这里插入图片描述

3、table,实现隔行变色 tr:灰色的背景剩下的实现隔行变色一行粉色一行绿色

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<script src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function (){
    $("tr:even").css("background","pink");
    $("tr:odd").css("background","green");
})

</script>

<style>
table{
    border: black 1px solid;
    background: grey;
}
td{
    border-bottom:black 1px solid;
}

</style>
<body>
<table>
    <tr>
        <td>第一段</td>

    </tr>
    <tr>
        <td>第二段</td>
    </tr>
    <tr>
        <td>第三段</td>
    </tr>
    <tr>
        <td>第四段</td>
    </tr>
    <tr>
        <td>第五段</td>
    </tr>
    <tr>
        <td>第六段</td>
    </tr>
</table>
</body>
</html>