前端练习

最新推荐文章于 2024-09-10 15:12:15 发布

Sunshine

最新推荐文章于 2024-09-10 15:12:15 发布

阅读量173

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/cainiaoayue/article/details/98199019

版权

Web前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

html 中 title 属性和 alt 属性的区别?
alt属性是在图片不能正常加载时候显示的提示；title属性是鼠标划上去显示的内容。
请说出几个常用的块级元素和行内元素。
块级元素： li,p,div,h1,table
行内元素：a,span,sub,sup,i,b
介绍一下 CSS 的盒子模型?
盒子模型：内容(content)、填充(padding)、边界(margin)、边框(border)
JavaScript 里有哪些数据类型
字符串值，数值，布尔值，数组，对象。
JS 怎么实现一个类。怎么实例化这个类。
在JS中使用函数实现类，语法如下：

function className(){
}

使用new关键字实例化类。
6. 请列举五个常用的 Javascript DOM 方法

document.getElementsByName  --- 返回的是一个列表对象
document.getElementById       ---  返回的是一个元素对象
document.createTextNode
document.createElement
NodeObj.appendChild

项目实例：

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: #55a8ea;
        }
        .header li{
            display: inline-block;
            color: #fff;
            width:100px;
            height: 25px;
            text-align: center;
            padding-top: 14px;
        }
        .header li:hover{
            background: #00619f;
        }

    </style>
</head>
<body>
<div class="header">
    <ul>
        <li>首页</li>
        <li>网站建设</li>
        <li>程序开发</li>
        <li>网络营销</li>
        <li>企业VI</li>
        <li>案例展示</li>
        <li>联系我们</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;
        }
        .right_text{
            margin-left:70px ;
            margin-top: 30px;
            font-size: 20px;
            font-weight: bold;
        }
        .pi1{
            margin-left: 60px;
            margin-top: 17px;
            float: left;

        }
        .left_content{
            height: 239px;
            width: 211px;
            float: left;
        }
        .pi3, .pi2{
            float: left;
            margin-top: 20px;
        }
        .pi2{
            margin-left: 20px;
            margin-right: 20px;
        }
        .text li{
            text-decoration: none;
            display: inline-block;
            width:90px;
            height: 25px;
        }


    </style>
</head>
<body>
<div style="width: 500px; height: 345px; border: 3px solid red; margin: 0 auto">
    <div class="right_text">
        淘宝女装
    </div>
    <div class="pi1">
        <img src="./img/p1.png" style="width: 212px; height: 239px" >
    </div>
    <div class="left_content">
        <div class="pi2">
            <img src="./img/p2.jpg" style="width: 80px; height: 100px">
        </div>
        <div class="pi3">
            <img src="./img/p3.png" style="width: 80px; height: 100px;">
        </div>
        <div class="text" style="text-align: center">
            <ul>
                <li>时尚女装</li>
                <li>精品女鞋</li>
            </ul>
        </div>
        <div style="margin-top: 20px; margin-left: 20px">
            <table style="border: 1px dashed gray; width: 200px; height: 80px; border-collapse: collapse; text-align: center">
                <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>