8月2日练习题--前端简答题和项目实例--html--CSS--JS

本文链接：https://blog.csdn.net/Successful_clown/article/details/98179576

一、简答题

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

alt是在图片不能正常加载时候显示的提示语
title属性是鼠标划上去显示的内容

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

块级元素：div、p、li、dt以及所有容器级标签
行内元素：b、em、a、i以及除了p以外的文本标签

3、介绍一下 CSS 的盒子模型?
盒模型的组成包括:content, padding, border, margin组成。
其中

content：盒子的内容显示文本和图像
padding：内边距
border：边框
margin：外边距

4、JavaScript 里有哪些数据类型？
字符串、数字、数组、布尔、对空、未定义
5、JS 怎么实现一个类。怎么实例化这个类。

创建类：var Class = function(){ this.name = ‘javascript’;}
实例化：var clazz = new Clazz; clazz.name;
6、请列举五个常用的 Javascript DOM 方法

getElementById(id) 根据ID，将返回一个与那个有着同样id属性的元素节点对应的对象。
getElementsByClassName(class)根据类名，将返回一个对象数组，对应着文档里一组特定的元素节点。
getElementsByTagName(Tag) 根据标签名，将返回一个对象数组，对应着文档里一组特定的元素节点。
getAttribute(attribute) 只用一个参数，打算查询，获取的属性的名字。
setAttribute(attribute，value)，可以对属性节点的值做出修改。

二、项目实例

1、1. 导航栏:
网站使用导航栏是为了让访问者更清晰明朗的找到所需要的资源区域,寻找资源。
设置导航栏如下:
效果图：
在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .header{
            width: 960px;
            height: 40px;
            background-color: #55a8ea;
            overflow: hidden;
        }
        .header li{
            display: inline-block;
            width: 100px;
            height: 40px;
            padding-top: 12px;
            text-align: center;
        }
        .header li:hover{
            background-color: #00619f;
        }
        .header li a{
            text-decoration: none;
            color: #fff;
            font-size: 14px;
            font-weight: bold;
            font-family: '微软雅黑';
        }
        .active{
            background-color: #00619f;
        }
    </style>
</head>
<body>
<div class="header">
    <ul>
        <li class="active"><a href="#">首页</a> </li>
        <li><a href="#">网站建设</a></li>
        <li><a href="#">程序开发</a> </li>
        <li><a href="#">网络营销</a> </li>
        <li><a href="#">企业VI</a> </li>
        <li><a href="#">案例展示</a> </li>
        <li><a href="#">联系我们</a> </li>
    </ul>
</div>
</body>
</html>

2、特征布局:图片列表

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 960px;
            border: 1px solid #ccc;
        }
        .show1{
            width: 960px;
            height: 50px;
            margin-left: 20px;
            border-bottom: 1px solid #ccc;
        }
        .show1 span{
            font-size: 18px;
            font-family: '微软雅黑';
            font-weight: 700;
            line-height: 50px;
        }
        .show23{
            border: 1px solid #ccc;
            width: 960px;
            height: 219px;
        }
        .show2 img{
            width: 160px;
            height: 68px;
            float: left;
            margin-left: 29px;
            margin-top: 20px;
        }
        .show3 img{
            width: 160px;
            height: 68px;
            float: left;
            margin-top: 25px;
            margin-left: 29px;
            margin-bottom: 38px;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="show1">
        <span>图片展示</span>
    </div>
    <div class="show23">
        <div class="show2">
                <img src="./img/timg.jpg" class="img">
                <img src="./img/timg.jpg" class="img">
                <img src="./img/timg.jpg" class="img">
                <img src="./img/timg.jpg" class="img">
                <img src="./img/timg.jpg" class="img">
        </div>
        <div class="show3">
                <img src="./img/timg.jpg" class="img">
                <img src="./img/timg.jpg" class="img">
                <img src="./img/timg.jpg" class="img">
                <img src="./img/timg.jpg" class="img">
                <img src="./img/timg.jpg" class="img">
        </div>
    </div>
</div>
</body>
</html>

3.特征布局:淘宝主页

在这里插入图片描述

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

        .outside{
            width: 498px;
            height: 343px;
            border: 1px solid #f00;
            margin: 50px auto;
        }

        .outside .title{
            width: 440px;
            height: 20px;
            /*background-color: gold;*/
            margin-top: 30px;
            margin-left: 30px;
            margin-bottom: 17px;
            border-left: 2px solid #f00;
            text-indent: 20px;
            font-size: 14px;
            font-family: "微软雅黑";
            font-weight: 700;
            line-height: 20px;
        }

        .outside .banner{
            margin-left: 30px;
            width: 239px;
            height: 212px;
            display: inline-block;
            /*background-color: gold;*/
            position: relative;
            top: 3px;
            padding-right: 10px;
        }

        .outside .banner img{
            width: 239px;
            height: 212px;
        }

        .outside .right{
            width: 211px;
            height: 239px;
            display: inline-block;
            position: relative;
            top: -42px;
        }

        .outside .right{
            width: 200px;
        }

        .outside .right ul{
            list-style: none;
        }

        .outside .right li{
            display: inline-block;
        }


        .outside .right .up li span{
            position: relative;
            top: 22px;
            left: -75px;
        }

        .outside .right .up .shishang{
            position: relative;
            top: -4px;
            left: 4px;
            padding: 10px;
        }
        .outside .right .up .shishang img{
            width: 70px;
            height: 70px;
        }

        .outside .right .up .chaoliu{
            position: relative;
            top: -90px;
            right: -112px;
        }
        .outside .right .up .chaoliu img{
            width: 70px;
            height: 70px;
        }

        .outside .right .down{
            float: left;
            width: 211px;
            height: 97px;
            padding-left: 10px;
            position: relative;
            top: -55px;
            text-align: center;
        }

        .outside .right .down .second{
            position: relative;
            left: -5px;
        }

        .outside .right .down li{
            height: 45px;
            width: 98px;
            border: 1px dotted #ccc;
            line-height: 45px;
        }



    </style>
</head>
<body>
    <div class="outside">
        <div class="title">淘宝女装</div>
        <div>
            <div class="banner">
                <img src="./img/人物.jpg" >
            </div>
            <div class="right">
                <ul class="up">
                    <li class="shishang">
                        <img src="./img/1.jpg">
                        <span>时尚包包</span>
                    </li>
                    <li class="chaoliu">
                        <img src="./img/2.jpg">
                        <span>潮流美鞋</span>
                    </li>
                </ul>
                <ul class="down">
                    <li class="first">新品上市</li>
                    <li class="second">女装</li>
                    <li class="first">欧美风</li>
                    <li class="second">美搭</li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>

4.电影排行榜

在这里插入图片描述

<!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: blue;
            font-size: 20px;
            line-height: 35px;
            font-weight: bold;
            border: 1px dashed black;
            padding-left: 10px;
        }


        .box li {
            width: 300px;
            height: 205px;
            list-style: none;
            /*padding: 80px 15px;*/
            border: 1px dashed gray;

        }


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


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

        .box .content {
            margin-top: 5px;
        }

        .box .content img {
            margin-left: 20px;
            width: 80px;
            height: 120px;
            float: left;
        }

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

        }


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

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