js和jQuery练习

最新推荐文章于 2022-11-20 23:42:24 发布

妖x月

最新推荐文章于 2022-11-20 23:42:24 发布

阅读量341

点赞数

本文链接：https://blog.csdn.net/qq_42349627/article/details/98209458

版权

html 中 title 属性和 alt 属性的区别?

  alt属性是在你的图片因为某种原因不能加载时在页面显示的提示信息，它会直接输出在原本加载图片的地方，
  而title属性是在你鼠标悬停在该图片上时显示一个小提示，鼠标离开就没有了，有点类似jQuery的hover

请说出几个常用的块级元素和行内元素.

 div、p等最常见的块级元素
 span、a等最常见的行内元素
 块级元素独占一行、行内元素可以多个存在一行内

介绍一下 CSS 的盒子模型?

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
在这里插入图片描述

	Margin(外边距) - 清除边框外的区域，外边距是透明的。
	 Border(边框) - 围绕在内边距和内容外的边框。
	 Padding(内边距) - 清除内容周围的区域，内边距是透明的。
	 Content(内容) - 盒子的内容，显示文本和图像。

JavaScript 里有哪些数据类型？

 JavaScript 变量能够保存多种数据类型：数值、字符串值、数组、对象

JS 怎么实现一个类。怎么实例化这个类。

 语法：
 function className(){
     // 具体操作
 }
 然后在下面html中把这个属性添加进去：onclick="classname()"

请列举五个常用的 Javascript DOM 方法

 document.getElementById(“id”); 	通过元素的ID来获取元素对象
 document.getElementsByName(“abc”); 	通过元素的name属性来获取列表对象
 document.createTextNode;    生成一个文本对象结点
 document.createElement;     创建一个元素标签对象
 NodeObj.appendChild();      把括号里面的对象加入NodeOdj对象中

特征布局:淘宝主页
在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>淘宝网</title>
    <style type="text/css">
        /**{*/
            /*margin: 0;*/
            /*padding: 0;*/
        /*}*/

    </style>
</head>
<body>
<div style="width: 480px;height: 345px;margin: auto;border: 2px solid red ">
    <div style="width:250px;height: 345px;float: left ">
<div style="height: 20px;width: 2.5px;background-color: red;margin: 30px 15px 17px 30px;float: left"></div>
<div style="height: 20px;width: 190px; font-size: 18px;font-weight:bold;margin-top: 30px;float: left">淘宝女装</div>
<div style="height: 239px;width: 212px;margin: 0px 10px 39px 30px;float: left"><img src="img/女装1.jpg" style="width: 100%;height: 100%"></div>
</div>
    <div style="padding: 67px 15px 20px 30px;height: 345px;">
        <div style="width: 80px;height: 130px;float: left">
    <div style="width: 80px;height: 110px;margin:0px 0px 0px 15px;float: left"><img src="img/包包1.jpg" style="width: 100%;height: 100%"></div>
        <div style="width: 80px;height: 15px;font-size: 15px;font-weight:bold;margin: 0px 0px 0px 25px">时尚包包</div>
    </div>

        <div style="width: 80px;height: 130px;float: left;margin: 0px 0px 0px 30px">
    <div style="width: 80px;height: 110px;margin:0px 0px 0px 15px;float: left"><img src="img/鞋1.jpg" style="width: 100%;height: 100%"></div>
        <div style="width: 80px;height: 15px;font-size: 15px;font-weight:bold;margin: 0px 0px 0px 25px">潮流美鞋</div>
    </div>
        <div style="margin: 20px 17px;width: 180px;height:90px;float: left ">
      <table style="border: 1px dashed gray;width: 100%;height: 100%;text-align: center;border-collapse: collapse">
          <tr >
              <td style="border: 1px dashed gray;width: 50%">新品上市</td>
              <td style="border: 1px dashed gray;width: 50%">女装</td>
          </tr>
          <tr>
              <td style="border: 1px dashed gray;width: 50%">欧美风</td>
              <td style="border: 1px dashed gray;width: 50%">美搭</td>
          </tr>

      </table>
            </div>
        </div>
</div>
</body>
</html>

电影排行榜
在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }


        .box {
            width: 300px;
            height: 450px;
            border: 1px solid gray;
            margin: 0 auto;
            margin-top: 50px;
        }

        .box h1 {
            color: green;
            font-size: 20px;
            line-height: 35px;
            font-weight: bold;
            border: 1px dashed gray;
            padding-left: 10px;
        }


        .box li {
            list-style: none;
            padding: 10px 15px;
            border: 1px dashed gray;

        }


        .box li span {
            background-color: gray;
            display: inline-block;
            width: 20px;
            height: 20px;
            color: white;
            text-align: center;
        }


        .box li:nth-child(-n+3) span {
            background-color: green;
            color: white;
        }

        .content {
            overflow: hidden;
            margin-top: 5px;
            display: none;
        }

        .content img {
            width: 80px;
            height: 120px;
            float: left;
        }

        .content p {
            width: 180px;
            height: 120px;
            float: right;
            font-size: 12px;

        }


        .current .content{
            display: block;
        }
    </style>
    <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>

    <script>
        $(function () {
            $('li').mouseenter(function () {
                $(this).addClass('current');

            });

            $('li').mouseleave(function () {
                $(this).removeClass('current');

            });
        })

    </script>
</head>
<body>

<div class="box">
    <h1>电影排行榜</h1>
    <ul>
        <li>
            <span>1</span> 哪吒之魔童降世
            <div class="content ">
                <img src="img/movie.jpg">
                <p>
                    天地灵气孕育出一颗能量巨大的混元珠，元始天尊将混元珠提炼成灵珠和魔丸， 灵珠投胎为人，助周伐纣时可堪大用；而魔丸则会诞出魔王，为祸人间。 元始天尊启动了天劫咒
                </p>
            </div>
        </li>

        <li>
            <span>2</span> 哪吒之魔童降世
            <div class="content ">
                <img src="img/movie.jpg">
                <p>
                    天地灵气孕育出一颗能量巨大的混元珠，元始天尊将混元珠提炼成灵珠和魔丸， 灵珠投胎为人，助周伐纣时可堪大用；而魔丸则会诞出魔王，为祸人间。 元始天尊启动了天劫咒
                </p>
            </div>
        </li>

        <li>
            <span>3</span> 哪吒之魔童降世
            <div class="content">
                <img src="img/movie.jpg">
                <p>
                    天地灵气孕育出一颗能量巨大的混元珠，元始天尊将混元珠提炼成灵珠和魔丸， 灵珠投胎为人，助周伐纣时可堪大用；而魔丸则会诞出魔王，为祸人间。 元始天尊启动了天劫咒
                </p>
            </div>
        </li>
        <li>
            <span>4</span> 哪吒之魔童降世
            <div class="content">
                <img src="img/movie.jpg">
                <p>
                    天地灵气孕育出一颗能量巨大的混元珠，元始天尊将混元珠提炼成灵珠和魔丸， 灵珠投胎为人，助周伐纣时可堪大用；而魔丸则会诞出魔王，为祸人间。 元始天尊启动了天劫咒
                </p>
            </div>
        </li>
        <li>
            <span>5</span> 哪吒之魔童降世
            <div class="content">
                <img src="img/movie.jpg">
                <p>
                    天地灵气孕育出一颗能量巨大的混元珠，元始天尊将混元珠提炼成灵珠和魔丸， 灵珠投胎为人，助周伐纣时可堪大用；而魔丸则会诞出魔王，为祸人间。 元始天尊启动了天劫咒
                </p>
            </div>
        </li>

    </ul>
</div>


</body>
</html>

妖x月

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js和jQuery练习

html 中 title 属性和 alt 属性的区别? alt属性是在你的图片因为某种原因不能加载时在页面显示的提示信息，它会直接输出在原本加载图片的地方，而title属性是在你鼠标悬停在该图片上时显示一个小提示，鼠标离开就没有了，有点类似jQuery的hover请说出几个常用的块级元素和行内元素. div、p等最常见的块级元素 span、a等最常见的行内元素块级元素...
复制链接

扫一扫