前端实际应用案例

最新推荐文章于 2024-07-09 15:32:54 发布

Mr_fengzi

最新推荐文章于 2024-07-09 15:32:54 发布

阅读量672

点赞数

分类专栏： Web前端文章标签：前端案例

本文链接：https://blog.csdn.net/Mr_fengzi/article/details/98210692

版权

Web前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

简答

1.html 中 title 属性和 alt 属性的区别?
答：alt属性是在图片无法加载的时候才会显示的内容；
title是在图片正常加载鼠标划上去显示的内容。

2.请说出几个常用的块级元素和行内元素。
答：块级元素占一行，不论内容多少，常用的块级元素有：

div -最常用的块级元素
dl - 和dt dd搭配使用的块级元素
form - 交互表单
h1 - 大标题
hr - 水平分隔线
ol排序表单
p - 段落
ul - 非排序列表

行内元素内容少时不会换行，常见的行内元素有：

span - 常用内联容器，定义文本内区块
a - 超链接
br - 换行
em - 强调
img - 图片
input - 输入框
tabel - 表格标签

3.介绍一下 CSS 的盒子模型?
答：在一个文档中，每个元素都被表示为一个矩形的盒子。确定这些盒子的尺寸，属性 — 像它的颜色，背景，边框方面 — 和位置是渲染引擎的目标。
在CSS中，使用标准盒模型描述这些矩形盒子中的每一个。这个模型描述了元素所占空间的内容。每个盒子有四个边：外边距边, 边框边, 内填充边与内容边。

4.JavaScript 里有哪些数据类型
答： JavaScript数据类型有字符串值，数值，布尔值，数组，对象。

5.JS 怎么实现一个类。怎么实例化这个类。
答：JavaScript使用函数来定义类，创建对象的过程也是类实例化的过程。在JavaScript中，创建对象（即类的实例化）使用 new 关键字。

6.请列举五个常用的 Javascript DOM 方法
答：

getElementsByName()
getElementById()
createTextNode()
createElement()
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: 100%;
            height: 40px;
            background-color: #55a8ea;
            /*内容会被修剪，并且其余内容是不可见的。*/
            overflow: hidden;
        }

        .header li {
            /*设置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;
        }

        .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="#">案例展示</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;
            height: 310px;
            border: 1px solid gray;
        }
        .title{
            width: 960px;
            height: 50px;
            font-size: 18px;
            margin-top: 20px;
            color: #000;
        }
        img{
            float: left;
            width: 160px;
            height: 68px;
            margin: 20px 10px 10px 15px;
        }
        .clear{
            clear: both;
        }
    </style>
</head>
<body>
<div class="box">
    <h2 class="title">图片展示</h2>
    <hr>
    <img src="img/img1.jpg">
    <img src="img/img1.jpg">
    <img src="img/img1.jpg">
    <img src="img/img1.jpg">
    <img src="img/img1.jpg">
    <img class="clear" src="img/img1.jpg">
    <img  src="img/img1.jpg">
    <img src="img/img1.jpg">
    <img src="img/img1.jpg">
    <img  src="img/img1.jpg">
</div>
</body>
</html>

最终实现效果如下：
在这里插入图片描述

3.特征布局:淘宝主页
设计一个淘宝的页面，使页面更加美观，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            margin: 30px auto;
            width: 500px;
            height: 360px;
            border: 2px solid red;
        }
        .header{
            width: 440px;
            height: 20px;
            border-left: 4px solid red;
            margin: 30px;
            padding-left: 15px;
            font-weight: bold;
        }
        .img1{
            width: 212px;
            height: 239px;
            margin-left: 30px;
            float: left;
        }
        .img2{
            width: 90px;
            height: 100px;
            margin: 10px;
            margin-left: 20px;
            float: left;
        }
        .img3{
            width: 90px;
            height: 100px;
            margin: 10px;
            float: left;
        }
        .content div{
            width: 100px;
            height: 20px;
            float: left;
            margin: 5px;
            text-align: center;
        }
        table{
            width: 211px;
            height: 97px;
            text-align: center;
            border-right: 2px dashed gray;
            border-bottom: 2px dashed gray;
            float: left;
            margin: 5px 20px;
        }
        table td{
            border-left: 2px dashed gray;
            border-top: 2px dashed gray;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="contents">
        <div class="header">
            淘宝女装
        </div>
        <div class="content">
            <img class="img1" src="img/taobao_img.jpg">
            <img class="img2" src="img/bag.jpg">
            <img class="img3" src="img/shooes.jpg">
            <div>时尚包包</div>
            <div>潮流美鞋</div>
            <table>
                <tr>
                    <td>新品上市</td>
                    <td>女装</td>
                </tr>
                <tr>
                    <td style="width: 100px;height: 42px">欧美风</td>
                    <td style="width: 100px;">美搭</td>
                </tr>
            </table>
        </div>
    </div>

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

最终实现效果如下：
在这里插入图片描述

4.电影排行榜
设计一个电影排行榜的页面，当鼠标放到电影名称上时，会下拉对应的电影介绍，鼠标移开时，电影介绍又会隐藏起来。
具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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: red;
            color: black;
        }
        .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/nezha.jpg">
                <p>
                    天地灵气孕育出一颗能量巨大的混元珠，元始天尊将混元珠提炼成灵珠和魔丸，灵珠投胎为人，助周伐纣时可堪大用；而魔丸则会诞出魔王，为祸人间。
                </p>
            </div>
        </li>
        <li>
            <span>2</span> 烈火英雄
            <div class="content">
                <img src="img/2liehuo.jpg">
                <p>
                    滨港市海港码头发生管道爆炸，整个罐区的原油都顺着A01油罐往外流，化成火海和阵阵爆炸，威胁全市、全省，甚至邻国的安全。慌乱的市民们四处奔逃，一辆辆消防车却逆向冲进火海……
                </p>
            </div>
        </li>
        <li>
            <span>3</span> 绝杀慕尼黑
            <div class="content">
                <img src="img/3juesha.jpg">
                <p>
                    电影根据体育历史中著名的传奇真实事件改编，讲述了1972年慕尼黑奥运会篮球决赛中，前苏联篮球队打败了保持了36年全胜纪录的美国队的传奇故事。在决赛结束前三秒钟，美国队以一分优势领先。美国队已经开始提前庆祝比赛的胜利了，因为他们相信比赛结果已成定局。然而，一位来自苏联的不知名篮球教练，率领着艰难、困苦、贫穷中的苏联国家队，比赛结果发生逆转，整个篮球历史也发生了改变。
                </p>
            </div>
        </li>
        <li>
            <span>4</span> 银河补习班
            <div class="content">
                <img src="img/4yinhe.jpg">
                <p>
                    浩瀚太空，航天员意外失联，生命最大的绝境中，他回忆起自己那个最了不起的爸爸。一对父子跨越漫长的时光，守护爱和亲情，故事充满了欢乐、温暖、泪水与奇观。
                </p>
            </div>
        </li>
        <li>
            <span>5</span> 游戏人生 零
            <div class="content">
                <img src="img/5youxi.jpg">
                <p>
                    距今超过六千年的远古世界，天地割裂的凄惨战争持续不断，毫无还手之力的人类被拥有强大力量的各个种族逼入绝境，濒临灭亡。此时率领人类的年轻领袖里克（松冈祯丞 配音），与机凯种少女休比（茅野爱衣 配音）偶然相遇。被同伴抛弃的休比，为了修复故障，拜托里克把“人类的心”告诉自己。机凯种少女的单纯与真诚，使得里克对休比逐渐放下戒备、敞开心扉，二人感情亦日渐升温。
                </p>
            </div>
        </li>
    </ul>
</div>
</body>
</html>

实现效果如下：
在这里插入图片描述
当鼠标移动到相应的电影名称上时，会下拉电影介绍：

5.模拟QQ邮箱登录界面
仿照QQ邮箱登录页面设计一个类似的页面，QQ邮箱登录页面如下图：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模拟QQ邮箱登录界面</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        .login_card {
            border: 1px solid gray;
            height: 389px;
            width: 336px;
            margin: 50px auto;
        }
        .login_card_tab {
            width: 336px;
            border: 1px solid gray;
            height: 51px;
            background-color: lavender;
            display: inline-block;
        }
        .left_tab {
            font-size: 16px;
            color: gray;
            float: left;
            margin: 10px 48px;
            padding: 5px;
        }
        .right_tab {
            font-size: 16px;
            color: black;
            float: left;
            margin: 10px 48px;
            padding: 5px;
        }
        .contents {
            margin: 40px;
        }
        #username{
            margin-bottom: 8px;
        }
        #passwd{
            margin-bottom: 15px;
        }
        #checkbox{
            margin-bottom: 15px;
        }
        #submit{
            font-size: large;
            margin-bottom: 15px;
        }
        #forgot{
            text-decoration: none;
            float: right;
        }
    </style>
</head>
<body>
<div class="login_card">
    <div class="login_card_tab">
        <div class="left_tab">微信登录</div>
        <div class="right_tab">QQ登录</div>
    </div>
    <div class="contents">
        <form action="#" method="post">
            <input id="username" type="text" name="user" style="height: 40px; width: 250px;" placeholder="支持QQ号/邮箱/手机号登录"><br>
            <input id="passwd" type="password" name="passwd" style="height: 40px; width: 250px;" placeholder="QQ密码"><br>
            <input id="checkbox" type="checkbox" name="auto_login">下次自动登录<br>
            <input id="submit" type="submit" value="登录" style="background-color: #55a8ea; height: 40px; width: 250px;"><br>
            <div style="text-align: center; margin: 15px;">
                <a href="#" style="text-decoration: none; font-size: small">扫码快捷登录</a>
            </div>
            <!--<iframe  src="#" frameborder="0" scrolling="no" name="chageframe"></iframe><br>-->
            <a id="forgot" href="#" style="text-align: right; font-size: small">忘了密码？</a><br>
        </form>
    </div>
</div>
</body>
</html>

最终实现效果如下：
在这里插入图片描述

Mr_fengzi

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
前端实际应用案例

简答1.html 中 title 属性和 alt 属性的区别?答：alt属性是在图片无法加载的时候才会显示的内容；title是在图片正常加载鼠标划上去显示的内容。2.请说出几个常用的块级元素和行内元素。答：块级元素占一行，不论内容多少，常用的块级元素有：div -最常用的块级元素dl - 和dt dd搭配使用的块级元素form - 交互表单h1 - 大标题hr - 水平分隔线...
复制链接

扫一扫

专栏目录