前端实验大汇总（这个很详细）❤️

最新推荐文章于 2024-09-16 19:25:06 发布
最新推荐文章于 2024-09-16 19:25:06 发布
阅读量3.1k 收藏 107
点赞数 28
分类专栏： 杂七杂八 文章标签： 前端 jquery css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43819566/article/details/117968908
版权

文章目录

实验一：使用HTML5建立Web页面

实验内容：

  1. 使用表格和框架实现图1页面效果，其中包括文本与图像的格式化、链接、列表、表格、表单设计。
  2. 仿照当当网、京东或淘宝等电子商务网站制作商品列表静态网页，要求实现的静态页面包括：页面导航栏，当前日期，商品搜素，商品列表，列表操作，分页效果。
  3. 使用IE、Firefox、Chrome浏览器查看页面效果···
  4. 目标效果图如下：
    在这里插入图片描述

工程目录：
在这里插入图片描述
HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商城网站</title>

    <!-- Bootstrap -->
    <link href="static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script src="static/bootstrap/js/jquery-3.4.1.min.js"></script>
    <script src="static/bootstrap/js/bootstrap.min.js"></script>

    <!--font-awesome-->
    <link rel="stylesheet" href="static/bootstrap/font-awesome/css/font-awesome.min.css">

    <link href="static/custom-style/css/home.css" rel="stylesheet"/>
</head>
<body>

<!--导航条-->
<div class="header">
    <div id="message-head">
        <div id="nav-left">
            <ol class="breadcrumb">
                <li><a style="font-weight: bold">位置:</a></li>
                <li><a href="#">首页</a></li>
                <li><a href="#">购物后台管理</a></li>
                <li class="active">商品列表</li>
            </ol>
        </div>
        <div id="nav-right">
            <i class="fa fa-calendar fa-lg"></i>
            <div class="info">
                &nbsp;&nbsp;今天是2021年4月22日星期四12 : 00
            </div>
        </div>
    </div>
</div>

<div class="container-fluid">

    <!--功能栏-->
    <div id="fun-box" class="row">
        <div id="select-list">
            <div class="dropdown">
                <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                    商品类别
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                    <li><a href="#">类别1</a></li>
                    <li><a href="#">类别2</a></li>
                    <li><a href="#">类别3</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">类别4</a></li>
                </ul>
            </div>
        </div>
        <div id="search-item" class="col-lg-3">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="请输入商品名称">
                <span class="input-group-btn">
                    <button class="btn btn-primary" type="button">搜索</button>
                </span>
            </div>
        </div>

        <div class="fun-box col-lg-offset-4  col-lg-1">
            <a class="btn btn-success" href="#" role="button">
                <i class="fa fa-plus-circle fa-lg"></i>&nbsp;&nbsp;添加
            </a>
        </div>
        <div class="fun-box col-lg-1">
            <a class="btn btn-info" href="#" role="button">
                <i class="fa fa-pencil fa-lg"></i>&nbsp;&nbsp;修改
            </a>
        </div>
        <div class="fun-box col-lg-1">
            <a class="btn btn-danger" href="#" role="button">
                <i class="fa fa-trash fa-lg"></i>&nbsp;&nbsp;删除
            </a>
        </div>
        <div class="fun-box col-lg-1">
            <a class="btn btn-warning" href="#" role="button">
                <i class="fa fa-pie-chart fa-lg"></i>&nbsp;&nbsp;统计
            </a>
        </div>
        <div class="fun-box col-lg-1">
            <a class="btn btn-primary" href="#" role="button">
                <i class="fa fa-cog fa-lg"></i>&nbsp;&nbsp;设置
            </a>
        </div>
    </div>

    <!--表格部分-->
    <div id="table-list" class="row">
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th style="text-align: center;">
                        <input type="checkbox" class="che">
                    </th>
                    <th>缩略图</th>
                    <th>商品名称</th>
                    <th>商品类别</th>
                    <th>数量（件）</th>
                    <th>单价（元）</th>
                    <th>发布时间</th>
                    <th>是否审核</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <input type="checkbox" class="che">
                    </td>
                    <td>
                        <img src="static/images/img06.png" alt="..." class="img-rounded">
                    </td>
                    <td>老北京布鞋</td>
                    <td>休闲</td>
                    <td>334</td>
                    <td>￥899</td>
                    <td>2020-04-22</td>
                    <td>已审核</td>
                    <td>
                        <a class="btn btn-info btn-sm btn-icon icon-left btn-update">
                            <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>&nbsp;修改
                        </a>
                        <a class="btn btn-danger btn-sm btn-icon icon-left btn-del">
                            <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>&nbsp;删除
                        </a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" class="che">
                    </td>
                    <td>
                        <img src="static/images/img07.png" alt="..." class="img-rounded">
                    </td>
                    <td>牛仔裤</td>
                    <td>休闲</td>
                    <td>225</td>
                    <td>￥800</td>
                    <td>2020-04-22</td>
                    <td>已审核</td>
                    <td>
                        <a class="btn btn-info btn-sm btn-icon icon-left btn-update">
                            <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>&nbsp;修改
                        </a>
                        <a class="btn btn-danger btn-sm btn-icon icon-left btn-del">
                            <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>&nbsp;删除
                        </a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" class="che">
                    </td>
                    <td>
                        <img src="static/images/img08.png" alt="..." class="img-rounded">
                    </td>
                    <td>女装</td>
                    <td>休闲</td>
                    <td>9999</td>
                    <td>￥9999</td>
                    <td>2020-04-22</td>
                    <td>已审核</td>
                    <td>
                        <a class="btn btn-info btn-sm btn-icon icon-left btn-update">
                            <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>&nbsp;修改
                        </a>
                        <a class="btn btn-danger btn-sm btn-icon icon-left btn-del">
                            <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>&nbsp;删除
                        </a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" class="che">
                    </td>
                    <td>
                        <img src="static/images/img09.png" alt="..." class="img-rounded">
                    </td>
                    <td>运动鞋</td>
                    <td>运动</td>
                    <td>177</td>
                    <td>￥700</td>
                    <td>2020-05-22</td>
                    <td>未审核</td>
                    <td>
                        <a class="btn btn-info btn-sm btn-icon icon-left btn-update">
                            <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>&nbsp;修改
                        </a>
                        <a class="btn btn-danger btn-sm btn-icon icon-left btn-del">
                            <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>&nbsp;删除
                        </a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" class="che">
                    </td>
                    <td>
                        <img src="static/images/img10.png" alt="..." class="img-rounded">
                    </td>
                    <td>玛卡巴卡童装</td>
                    <td>休闲</td>
                    <td>334</td>
                    <td>￥3000</td>
                    <td>2020-03-22</td>
                    <td>已审核</td>
                    <td>
                        <a class="btn btn-info btn-sm btn-icon icon-left btn-update">
                            <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>&nbsp;修改
                        </a>

                        <a class="btn btn-danger btn-sm btn-icon icon-left btn-del">
                            <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>&nbsp;删除
                        </a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <!--数据记录及分页-->
    <div id="bottom-box" class="row">
        <div id="info-detail" class="col-lg-3">
            共 <span>1234</span> 条记录，当前显示第 <span>1</span> 页
        </div>

        <!--分页部分-->
        <div id="page-bean" class="col-lg-offset-4 col-lg-5">
            <nav aria-label="...">
                <ul class="pagination" style="float: right">
                    <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">＜</span></a></li>
                    <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
                    <li class=""><a href="#">2 <span class="sr-only"></span></a></li>
                    <li class=""><a href="#">3 <span class="sr-only"></span></a></li>
                    <li class=""><a href="#">4 <span class="sr-only"></span></a></li>
                    <li class=""><a href="#">5 <span class="sr-only"></span></a></li>
                    <li class=""><a href="#">6 <span class="sr-only"></span></a></li>
                    <li class=""><a href="#">... <span class="sr-only"></span></a></li>
                    <li class=""><a href="#" aria-label="Previous"><span aria-hidden="true">＞</span></a></li>
                </ul>
            </nav>
        </div>
    </div>
</div>
</body>
</html>

CSS：

.container-fluid{
    margin: 0;
}
.header{
    width: 100%;
    border-bottom: 1px solid #83C0EF;
}
#message-head{
    background-color:#EDF6FA;
    /* 弹性盒模型 */
    display: flex;
    /* 两端对其 */
    justify-content: space-between;
    /* 居中 */
    align-items: center;
    height: 100%;
    padding: 2px 15px;
    box-sizing: border-box;
}
#message-head ol{
    border-radius: 0;
}
.breadcrumb{
    margin-bottom: 0;
    background-color:#EDF6FA;
    padding-left: 4px;
}
.breadcrumb>:nth-child(0)>a{
    font-weight: bold;
}
.breadcrumb>:nth-child(0)>a, .breadcrumb>:nth-child(1)>a, .breadcrumb>:nth-child(2)>a,.breadcrumb>:nth-child(3)>a{
    color: black;
    font-size: 14px;
}

.breadcrumb>:nth-child(3){
    font-size: 14px;
}
.breadcrumb>:nth-child(1)>a:hover, .breadcrumb>:nth-child(2)>a:hover{
    color: #777777;
    text-decoration: underline;
}
#nav-right{
    display: flex;
    align-items: center;
}
#nav-right> .info{
    justify-content: center;
    align-items: center;
}

/* 功能部分 */
#fun-box{
    border-bottom: 1px solid #83C0EF;
    margin-top: 2px;
    /* 弹性盒模型 */
    display: flex;
    padding: 5px 20px;
    box-sizing: border-box;
}
.dropdown>button{
    border-radius: 0;
}
#search-item input, #search-item button{
    border-radius: 0;
}
.fun-box{
    padding: 0 8px;
}
.fun-box a{
    width: 100%;
    border-radius: 0;
}

/*表格部分*/
#table-list{
}
#table-list thead{
    background: #EDF6FA;
}
#table-list thead th{
    text-align: center;
}

input[type="checkbox"]{width:15px;height:15px;display: inline-block;text-align: center;vertical-align: middle; line-height: 15px;position: relative;}
input[type="checkbox"]::before{content: "";position: absolute;top: 0;left: 0;background: #fff;width: 100%;height: 100%;border: 1px solid #d9d9d9}
input[type="checkbox"]:checked::before{content: "\2713";background-color: #fff;position: absolute;top: 0;left: 0;width:100%;border: 1px solid #979898;color:#979898;font-size: 12px;font-weight: bold;}

#table-list tbody tr{
    height: 80px
}
#table-list tbody tr td{
    text-align: center;
    /*line-height: 80px;*/
    vertical-align: baseline;
}
.table{
    margin-bottom: 0;
}

/*底部记录与分页*/
#bottom-box>#info-detail{
    line-height: 74px;
}
#bottom-box>#info-detail span{
    color: #337AB7;
    font-weight: bold;
}

效果图如下：
在这里插入图片描述

实验二：使用HTML5和CSS3建立Web页面

实验内容：

  1. 根据给定的页面效果图2，使用HTML5+CSS3实现相似效果。要求实现Web页面的内容和样式的分离。
  2. 使用DIV+CSS实现页面整体排版。
  3. 使用IE、Firefox、Chrome浏览器查看页面效果。
  4. 目标效果图如下：
    在这里插入图片描述

工程目录：

在这里插入图片描述

HTML：

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

    <!-- Bootstrap -->
    <link href="static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script src="static/bootstrap/js/jquery-3.4.1.min.js"></script>
    <script src="static/bootstrap/js/bootstrap.min.js"></script>

    <!--font-awesome-->
    <link rel="stylesheet" href="static/bootstrap/font-awesome/css/font-awesome.min.css">

    <link href="static/custom-style/css/index.css" rel="stylesheet"/>
</head>
<body>

<div class="container-fluid">
    <!--logo图片-->
    <div class="header row">
        <div class="logo-box">
            <img src="static/images/logo.jpg" alt="">
        </div>
        <div class="logo-box">
            <img src="static/images/banner.jpg" alt="">
        </div>
    </div>

    <!--导航栏-->
    <div class="row" id="buyNav">
        <a href="#">
            <div class="col-sm-offset-3 col-sm-1 nav-box">
                首 页
            </div>
        </a>
        <a href="#">
            <div class="col-sm-1 nav-box">
                最新上架
            </div>
        </a>
        <a href="#">
            <div class="col-sm-1 nav-box">
                品牌活动
            </div>
        </a>
        <a href="#">
            <div class="col-sm-1 nav-box">
                原厂直供
            </div>
        </a>
        <a href="#">
            <div class="col-sm-1 nav-box">
                团 购
            </div>
        </a>
        <a href="#">
            <div class="col-sm-1 nav-box">
                限时抢购
            </div>
        </a>
        <a href="#">
            <div class="col-sm-1 nav-box">
                促销打折
            </div>
        </a>
    </div>

    <!--侧边栏 和 商品-->
    <div class="row" id="sidebarItems">
        <div class="col-sm-offset-1 col-sm-2 box">
            <div class="list-group" id="side-list">
                <a href="#" class="list-group-item item-head">&nbsp;女装</a>
                <a href="#" class="list-group-item">
                    <div class="txt-left">
                        <span class="span-flag"> * &nbsp;</span>上衣
                    </div>
                    <div class="txt-right">
                        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    </div>
                </a>
                <a href="#" class="list-group-item">
                    <div class="txt-left">
                        <span class="span-flag"> * &nbsp;</span>下装
                    </div>
                    <div class="txt-right">
                        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    </div>
                </a>
                <a href="#" class="list-group-item">
                    <div class="txt-left">
                        <span class="span-flag"> * &nbsp;</span>连衣裙
                    </div>
                    <div class="txt-right">
                        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    </div>
                </a>
                <a href="#" class="list-group-item">
                    <div class="txt-left">
                        <span class="span-flag"> * &nbsp;</span>内衣
                    </div>
                    <div class="txt-right">
                        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    </div>
                </a>
                <a href="#" class="list-group-item item-head">&nbsp;男装</a>
                <a href="#" class="list-group-item">
                    <div class="txt-left">
                        <span class="span-flag"> * &nbsp;</span>T恤
                    </div>
                    <div class="txt-right">
                        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    </div>
                </a>
                <a href="#" class="list-group-item">
                    <div class="txt-left">
                        <span class="span-flag"> * &nbsp;</span>短裤
                    </div>
                    <div class="txt-right">
                        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    </div>
                </a>
                <a href="#" class="list-group-item">
                    <div class="txt-left">
                        <span class="span-flag"> * &nbsp;</span>衬衫
                    </div>
                    <div class="txt-right">
                        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    </div>
                </a>
                <a href="#" class="list-group-item item-head">&nbsp;童装</a>
                <a href="#" class="list-group-item">
                    <div class="txt-left">
                        <span class="span-flag"> * &nbsp;</span>上衣
                    </div>
                    <div class="txt-right">
                        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    </div>
                </a>
                <a href="#" class="list-group-item">
                    <div class="txt-left">
                        <span class="span-flag"> * &nbsp;</span>上衣
                    </div>
                    <div class="txt-right">
                        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    </div>
                </a>
                <a href="#" class="list-group-item item-head">&nbsp;运动</a>
                <a href="#" class="list-group-item">
                    <div class="txt-left">
                        <span class="span-flag"> * &nbsp;</span>运动裤
                    </div>
                    <div class="txt-right">
                        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    </div>
                </a>
                <a href="#" class="list-group-item">
                    <div class="txt-left">
                        <span class="span-flag"> * &nbsp;</span>跑步裤
                    </div>
                    <div class="txt-right">
                        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    </div>
                </a>
            </div>
        </div>

        <div class="col-sm-8 box">
            <div class="row goods-head">
                最新上架
            </div>

            <div class="row goods">
                <div class="col-xs-6 col-md-3">
                    <div class="thumbnail goods-div">
                        <img src="static/images/shopshow/yifu1.jpg" class="img-responsive img-thumbnail" alt="...">
                        <div class="caption goods-info">
                            <p class="money">￥198.00元</p>
                            <p class="purchase">324人购买</p>
                        </div>
                        <div class="caption">
                            v领香纺背心女夏外穿双层吊带打底衫百搭显度无袖上衣
                        </div>
                    </div>
                </div>

                <div class="col-xs-6 col-md-3">
                    <div class="thumbnail goods-div">
                        <img src="static/images/shopshow/yifu2.jpg" class="img-responsive img-thumbnail" alt="...">
                        <div class="caption goods-info">
                            <p class="money">￥877.00元</p>
                            <p class="purchase">102人购买</p>
                        </div>
                        <div class="caption">
                            大码女装胖mm2015豆装新教板显连盂自楼空连衣裙
                        </div>
                    </div>
                </div>

                <div class="col-xs-6 col-md-3">
                    <div class="thumbnail goods-div">
                        <img src="static/images/shopshow/yifu3.jpg" class="img-responsive img-thumbnail" alt="...">
                        <div class="caption goods-info">
                            <p class="money">￥476.00元</p>
                            <p class="purchase">47人购买</p>
                        </div>
                        <div class="caption">
                            韩版印花无袖短裙背心裙女高活连衣裙A字裙秋季
                        </div>
                    </div>
                </div>

                <div class="col-xs-6 col-md-3">
                    <div class="thumbnail goods-div">
                        <img src="static/images/shopshow/yifu4.jpg" class="img-responsive img-thumbnail" alt="...">
                        <div class="caption goods-info">
                            <p class="money">￥198.00元</p>
                            <p class="purchase">324人购买</p>
                        </div>
                        <div class="caption">
                            2015秋新款甜关学院立领中袖套头格子衬衫娃娃衫
                        </div>
                    </div>
                </div>

                <div class="col-xs-6 col-md-3">
                    <div class="thumbnail goods-div">
                        <img src="static/images/shopshow/yifu5.jpg" class="img-responsive img-thumbnail" alt="...">
                        <div class="caption goods-info">
                            <p class="money">￥148.00元</p>
                            <p class="purchase">324人购买</p>
                        </div>
                        <div class="caption">
                            2015秋新款甜关学院立领中袖套头格子衬衫娃娃衫
                        </div>
                    </div>
                </div>

                <div class="col-xs-6 col-md-3">
                    <div class="thumbnail goods-div">
                        <img src="static/images/shopshow/yifu6.jpg" class="img-responsive img-thumbnail" alt="...">
                        <div class="caption goods-info">
                            <p class="money">￥176.00元</p>
                            <p class="purchase">348人购买</p>
                        </div>
                        <div class="caption">
                            韩版甜关气质亮片热气球亨母中长款园领短袖T怕
                        </div>
                    </div>
                </div>

                <div class="col-xs-6 col-md-3">
                    <div class="thumbnail goods-div">
                        <img src="static/images/shopshow/yifu7.jpg" class="img-responsive img-thumbnail" alt="...">
                        <div class="caption goods-info">
                            <p class="money">￥342.00元</p>
                            <p class="purchase">521人购买</p>
                        </div>
                        <div class="caption">
                            2015款秋新款甜关学院立领中袖套头格子衬衫娃娃衫
                        </div>
                    </div>
                </div>

                <div class="col-xs-6 col-md-3">
                    <div class="thumbnail goods-div">
                        <img src="static/images/shopshow/yifu8.jpg" class="img-responsive img-thumbnail" alt="...">
                        <div class="caption goods-info">
                            <p class="money">￥208.00元</p>
                            <p class="purchase">301人购买</p>
                        </div>
                        <div class="caption">
                            韩版甜关气质亮片热气球亨母中长款园领短袖T怕
                        </div>
                    </div>
                </div>
            </div>

            <div class="row goods-head">
                品牌活动
            </div>

            <div class="row goods">

                <div class="col-xs-6 col-md-3">
                    <div class="thumbnail goods-div">
                        <img src="static/images/shopshow/dress1.jpg" class="img-responsive img-thumbnail" alt="...">
                        <div class="caption goods-info">
                            <p class="money">￥148.00元</p>
                            <p class="purchase">324人购买</p>
                        </div>
                        <div class="caption">
                            2015秋新款甜关学院立领中袖套头格子衬衫娃娃衫
                        </div>
                    </div>
                </div>

                <div class="col-xs-6 col-md-3">
                    <div class="thumbnail goods-div">
                        <img src="static/images/shopshow/dress2.jpg" class="img-responsive img-thumbnail" alt="...">
                        <div class="caption goods-info">
                            <p class="money">￥176.00元</p>
                            <p class="purchase">348人购买</p>
                        </div>
                        <div class="caption">
                            韩版甜关气质亮片热气球亨母中长款园领短袖T怕
                        </div>
                    </div>
                </div>

                <div class="col-xs-6 col-md-3">
                    <div class="thumbnail goods-div">
                        <img src="static/images/shopshow/dress3.jpg" class="img-responsive img-thumbnail" alt="...">
                        <div class="caption goods-info">
                            <p class="money">￥342.00元</p>
                            <p class="purchase">521人购买</p>
                        </div>
                        <div class="caption">
                            2015款秋新款甜关学院立领中袖套头格子衬衫娃娃衫
                        </div>
                    </div>
                </div>

                <div class="col-xs-6 col-md-3">
                    <div class="thumbnail goods-div">
                        <img src="static/images/shopshow/dress4.jpg" class="img-responsive img-thumbnail" alt="...">
                        <div class="caption goods-info">
                            <p class="money">￥208.00元</p>
                            <p class="purchase">301人购买</p>
                        </div>
                        <div class="caption">
                            韩版甜关气质亮片热气球亨母中长款园领短袖T怕
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--底边导航栏1-->
    <div class="row" id="bottom-nav-1">
        <div class="col-sm-offset-1 col-sm-2">
            <img src="static/images/gray1.jpg" />
        </div>
        <div class="col-sm-2">
            <img src="static/images/gray2.jpg" />
        </div>
        <div class="col-sm-2">
            <img src="static/images/gray3.jpg" />
        </div>
        <div class="col-sm-2">
            <img src="static/images/gray4.jpg" />
        </div>
        <div class="col-sm-2">
            <img src="static/images/gray5.jpg" />
        </div>
    </div>

    <!--导航栏-->
    <div class="row" id="bottom-nav-2">
        <div class="col-sm-2">
            <img src="static/images/red1.jpg" />&nbsp;新手指导
        </div>
        <div class="col-sm-2">
            <img src="static/images/red2.jpg" />&nbsp;支付方式
        </div>
        <div class="col-sm-2">
            <img src="static/images/red3.jpg" />&nbsp;配送方式
        </div>
        <div class="col-sm-2">
            <img src="static/images/red4.jpg" />&nbsp;售后服务
        </div>
        <div class="col-sm-2">
            <img src="static/images/red5.jpg" />&nbsp;关于账号
        </div>
        <div class="col-sm-2">
            <img src="static/images/red6.jpg" />&nbsp;优惠服务
        </div>
    </div>

</div>

</body>
</html>

<script>
    $(function (){
        $('.nav-box').mouseover(function (){
            $(this).css('background-color', '#B12121');
        })
        $('.nav-box').mouseleave(function (){
            $(this).css('background-color', '#CE2626');
        })
        $('.list-group-item').css('border-radius', '0');
    })
</script>

CSS：

body{
    padding: 0;
    margin: 0;
}

.header {
    display: flex;
    /* 两端对其 */
    justify-content: space-between;
    /* 居中 */
    align-items: center;
    margin-bottom: 3px;
}
.logo-box{
    margin: 0 20px;
}

#buyNav{
    background-color: #CE2626;
    height: 40px;
    position: relative;
}
.nav-box{
    height: 100%;
    text-align: center;
    line-height: 40px;
    font-size: 16px;
    color: white;
    font-weight: bold;
}
.nav-box:after{
    display: block;
    width: 2px;
    height: 32px;
    background: #B12121;
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -15px;
}

/*侧边栏 和 商品*/
#sidebarItems{
    margin-top: 10px;
}
/*#sidebarItems>.box{
    padding-right: 5px;
    padding-left: 5px;
}*/
#side-list{
    width: 100%;
}

.list-group-item .span-flag{
    color: red;
}
.item-head{
    background-color: #E5E4E1;
    font-size: 15px;
}
.list-group-item{
    display: flex;
    /* 两端对其 */
    justify-content: space-between;
    /* 居中 */
    align-items: center;
}
.list-group-item>.txt-right{
    color: #CDCDCD;
}
.goods-head{
    background-color: #FF9C01;
    color: white;
    padding: 5px 15px;
    box-sizing: border-box;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
}
.goods img{
    object-fit: cover;
    width: 240px;
    height: 320px;
    overflow: hidden;
}
.goods-div{
    border: 0;
    margin-bottom: 2px;
}
.goods-info{
    display: flex;
    /* 两端对其 */
    justify-content: space-between;
    /* 居中 */
    align-items: center;
}
.goods-info>.money{
    color: red;
    font-size: 17px;
    font-weight: bold;
}
.goods-info>.purchase{
    font-size: 13px;
    color: #959295;
}
.thumbnail>.caption{
    padding: 4px 0 3px 3px;
}
.goods-info>p{
    margin:0;
}

#bottom-nav-1{
    background-color: #6A6665;
    height: 40px;
    position: relative;
    margin-top: 10px;
}

#bottom-nav-1>div{
    height: 100%;
    text-align: center;
    line-height: 40px;
    font-size: 16px;
    color: white;
    font-weight: bold;
}
.bottom-nav>img{
    height: 70%;
}
#bottom-nav-2{
    background-color: #EFEFEF;
    height: 40px;
    font-size: 10px;
    font-weight: bold;
    padding-top: 10px;
    box-sizing: border-box;
    text-align: center;
}

效果图如下（部分）：
在这里插入图片描述

实验三：使用HTML5、CSS3和JavaScript建立Web页面

实验内容：

  1. 根据给定的页面效果图3，使用HTML5+CSS3+JavaScript实现相似效果。
  2. 使用数组存放单位地址类别及子类别
  3. 在窗口加载过程中，使用数组中的数据对单位地址类别进行初始化
  4. 在页面中选择单位地址身份类别时，子类别相应发生改变
  5. 用javaScript实现用户名称不为空，长度不超过50个字符
  6. 单位地址列表至少要选择大类，子类可选可不选
  7. 手机号只能为数值类型
  8. 使用IE、Firefox、Chrome浏览器查看页面效果
    在这里插入图片描述

工程目录：

在这里插入图片描述
HTML:

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

    <!-- Bootstrap -->
    <link href="static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script src="static/bootstrap/js/jquery-3.4.1.min.js"></script>
    <script src="static/bootstrap/js/bootstrap.min.js"></script>

    <!--font-awesome-->
    <link rel="stylesheet" href="static/bootstrap/font-awesome/css/font-awesome.min.css">

    <link href="static/custom-style/css/index.css" rel="stylesheet"/>
</head>
<body>

<div class="container main-con">
    <div class="row header">
        <div class="txt col-sm-12">
            用户注册
        </div>
    </div>
    <hr style="border-top:2px solid black;">
    <div class="row">
        <form class="form-horizontal">
            <div class="form-group">
                <label for="inputUsername" class="col-sm-offset-2 col-sm-2 control-label">&nbsp;用&nbsp;户&nbsp;名：</label>
                <div class="col-sm-4">
                    <input type="text" class="form-control" id="inputUsername" placeholder="请输入用户名">
                </div>
            </div>
            <div class="form-group">
                <label for="inputEmail" class="col-sm-offset-2 col-sm-2 control-label">邮箱地址：</label>
                <div class="col-sm-4">
                    <input type="email" class="form-control" id="inputEmail" placeholder="请输入邮箱地址">
                </div>
            </div>
            <div class="form-group">
                <label for="inputPassword" class="col-sm-offset-2 col-sm-2 control-label">设置密码：</label>
                <div class="col-sm-4">
                    <input type="password" class="form-control" id="inputPassword">
                </div>
                <div class="col-sm-offset-4 col-sm-4 help-block">6-20个字符，由字母、数字和符号的两种以上组合。</div>
            </div>
            <div class="form-group">
                <label for="confirmPassword" class="col-sm-offset-2 col-sm-2 control-label">确认密码：</label>
                <div class="col-sm-4">
                    <input type="password" class="form-control" id="confirmPassword">
                </div>
            </div>
            <div class="form-group">
                <label for="inputRealName" class="col-sm-offset-2 col-sm-2 control-label">真实姓名：</label>
                <div class="col-sm-4">
                    <input type="text" class="form-control" id="inputRealName" placeholder="请输入真实姓名">
                </div>
            </div>
            <div class="form-group">
                <label for="inputRealName" class="col-sm-offset-2 col-sm-2 control-label">您的性别：</label>
                <div class="col-sm-4">
                    <label class="radio-inline col-sm-1 ">
                        <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 男
                    </label>
                    <label class="radio-inline col-sm-1">
                        <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 女
                    </label>
                </div>
            </div>
            <div class="form-group">
                <label for="InputFile" class="col-sm-offset-2 col-sm-2 control-label">上传头像：</label>
                <div class="col-sm-4">
                    <input type="file" id="InputFile">
                </div>
            </div>
            <div class="form-group">
                <label for="inputPhone" class="col-sm-offset-2 col-sm-2 control-label">您的手机：</label>
                <div class="col-sm-4">
                    <input type="number" class="form-control" id="inputPhone" placeholder="请输入您的手机号">
                </div>
            </div>
            <div class="form-group">
                <label for="inputWork" class="col-sm-offset-2 col-sm-2 control-label">单位名称：</label>
                <div class="col-sm-4">
                    <input type="text" class="form-control" id="inputWork" placeholder="请输入单位名称">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-offset-2 col-sm-2 control-label">单位地址：</label>
                <div class="col-sm-6" id="work-detail-info">
                    <div class="work-location">
                        <select class="form-control" id="province">
                            <option>- 请选择省份 -</option>
                        </select>
                    </div>
                    <div class="work-location">
                        <select class="form-control" id="city">
                            <option>- 请选择城市 -</option>
                        </select>
                    </div>
                </div>
                <script>
                    //定义省市的信息
                    var provList = ['山东','福建','黑龙江'];
                    var cityList = [];
                    cityList[0] = ['威海', '烟台', '青岛', '济南', '济宁', '密山', '临沂'];
                    cityList[1] = ['福州', '厦门', '泉州', '漳州'];
                    cityList[2] = ['哈尔滨', '大庆', '齐齐哈尔', '佳木斯', '哈尔滨_2'];

                    //获取select元素
                    var provSelect = document.querySelector('#province');
                    var citySelect = document.querySelector('#city');

                    //把省的信息 添加到第一个select元素中
                    provList.forEach(function(val, index){
                        //DOM操作  了解
                        provSelect.add(new Option(val, index))
                    });

                    //给第一个select绑定change事件
                    provSelect.onchange = function(){
                        //获取 当前的选项
                        var index = this.value;
                        //清空第二个select原先内容
                        citySelect.length = 0;
                        //选择对应的城市列表，添加到第二个select
                        cityList[index].forEach(function(val, index){
                            citySelect.add(new Option(val, index));
                        })
                    }
                    //手工触发一次 change事件
                    provSelect.onchange();
                </script>
                <div class="col-sm-offset-4 col-sm-2">
                    <input type="text" class="form-control" id="street" placeholder="请输入街道">
                </div>
            </div>

            <div class="form-group">
                <label for="inputRealName" class="col-sm-offset-2 col-sm-2 control-label">您的爱好：</label>
                <div class="col-sm-4">
                    <label class="checkbox-inline">
                        <input type="checkbox" id="inlineCheckbox1" value="option1"> 购物
                    </label>
                    <label class="checkbox-inline">
                        <input type="checkbox" id="inlineCheckbox2" value="option2"> 饮食
                    </label>
                    <label class="checkbox-inline">
                        <input type="checkbox" id="inlineCheckbox3" value="option3"> 餐饮
                    </label>
                </div>
            </div>
            <div class="form-group">
                <label for="inputRealName" class="col-sm-offset-2 col-sm-2 control-label">协议内容：</label>
                <div class="col-sm-4">
                    <textarea class="form-control" rows="3"></textarea>
                </div>
            </div>

            <div class="form-group">
                <div class="col-sm-offset-4 col-sm-4">
                    <button type="submit" class="btn btn-default">提交</button>
                </div>
            </div>
        </form>
    </div>
</div>
</body>
</html>

CSS：

body{
    padding: 0;
    margin: 0;
}
.main-con{
    margin-top: 25px;
}
.main-con .header{
    text-align: center;
    font-size: 30px;
    font-weight: bold;
}
.help-block{
    margin-bottom: 0;
}
.work-location {
    width: 140px;
    margin-right: 10px;
}
#work-detail-info{
    display: flex;
    margin-bottom: 15px;
}

效果图如下：
在这里插入图片描述

实验四：使用HTML5中的Canvas绘图完成页面动态效果

实验内容：

  1. 单击商品缩略图时，在展示区显示对应的商品大图
  2. 鼠标在展示区滑动时，在展示区右侧展示该区域的放大效果
  3. 单击商品缩略图下方的Tab标签，切换商品对应的商品详情、购买须知、本单详情和商家介绍等信息
  4. 使用IE、Firefox、Chrome浏览器查看页面效果，如下图所示。
    在这里插入图片描述

工程目录：
在这里插入图片描述

HTML：

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

    <link href="static/custom-style/css/index.css" rel="stylesheet"/>
</head>
<body>

<div id="container">
    <div id="left-box">
        <div id="pictureAndMagnifier">
            <img src="static/images/dd1.jpg" id="demoPic" alt="">
            <div id="magnifier"></div>
        </div>
        <div id="pictureUl">
            <ul>
                <li class="imgLi"><a href="#"><img src="static/images/dd1.jpg" alt=""></a></li>
                <li class="imgLi"><a href="#"><img src="static/images/dd2.jpg" alt=""></a></li>
                <li class="imgLi"><a href="#"><img src="static/images/dd3.jpg" alt=""></a></li>
                <li class="imgLi"><a href="#"><img src="static/images/dd4.jpg" alt=""></a></li>
                <li class="imgLi"><a href="#"><img src="static/images/dd5.jpg" alt=""></a></li>
            </ul>
        </div>
        <div id="articleInfo">
            <div id="infoNav">
                <ul>
                    <li class="funNav show" style="background-color:#F2F2F2;"><a href="#">商品详情</a></li>
                    <li class="funNav"><a href="#">商品评价</a></li>
                    <li class="funNav"><a href="#">成交记录</a></li>
                </ul>
            </div>
            <div id="itemDetail">
                <div class="detail" style="display: block">
                    商品详情
                </div>
                <div class="detail">
                    商品评价
                </div>
                <div class="detail">
                    成交记录
                </div>
            </div>
        </div>
    </div>
    <div id="right-box">
        <div id="zoomResult">
            <img src="static/images/dd1.jpg" id="zoomPic" alt="">
        </div>
    </div>
</div>

</body>
</html>
<script src="static/bootstrap/js/jquery-3.4.1.min.js"></script>
<script>
    $(function (){
        //鼠标移入移出显示隐藏放大镜和右侧效果图
        $('#pictureAndMagnifier').hover(function (){
            $('#magnifier').show();
            $('#zoomResult').show();
        }, function (){
            $('#magnifier').hide();
            $('#zoomResult').hide();
        })

        //放大镜效果
        $("#pictureAndMagnifier").mousemove(function (e){
            var e = e|| event;
            //这里x=鼠标位置减去左边大盒子距离网页边框的距离，这一步获得了鼠标相对于盒子内部的位置，之后再减去小盒子的宽/2，就获得了盒子正中间的位置
            let x = e.clientX - $("#pictureAndMagnifier").offset().left-$("#magnifier").width()/2;
            //这个是鼠标的纵轴，原理同上
            let y = e.clientY - $("#pictureAndMagnifier").offset().top-$("#magnifier").height()/2;
            //这里声明了一个最大宽度，用于限制小盒子的右边移动范围，利用大盒子的总宽度减去小盒子的总宽度，剩下的就是小盒子的移动范围
            let maxX = $("#pictureAndMagnifier").width()-$("#magnifier").width();
            //小盒子纵轴移动范围
            let maxY = $("#pictureAndMagnifier").height()-$("#magnifier").height();
            //限制盒子的左上下右的最大移动范围，不能让小盒子超出大盒子
            if(x<0){
                x=0
            }
            if(y<0){
                y=0
            }
            if(x>maxX){
                x=maxX
            }
            if(y>maxY){
                y=maxY
            }
            //这里要注意，不能用attr({top:y,left:x}),因为attr写入的属性是写到元素行内的，尽管css里提前写好了position样式，但行内的top和left还是无法和css里的定位属性进行关联。
            $("#magnifier").css({top:y,left:x})
            $("#zoomResult>img").css({top:-y*2,left:-x*2})    //这里是右边图片的移动属性，xy轴分别向反方向移动，做出跟随镜头的效果，乘二是因为右边大图比左边小图大一倍。
        })
        
        //鼠标移入切换
        $('.imgLi').hover(function (){
            let index = Number($(this).index())+1;
            $('#demoPic').attr('src', "static/images/dd"+index+".jpg")
            $('#zoomPic').attr('src', "static/images/dd"+index+".jpg")
        })

        //商品详情切换
        $('.funNav').mousemove(function (){
            var index =  $(this).index()
            $(".funNav:eq("+index+")").css("background-color", "#F2F2F2").siblings().css("background-color", "white")
            $(".detail:eq("+index+")").css("display", "block").siblings().css("display", "none")
        })
    })
</script>

注意：这里的布局有点问题，不应该把商品详情和图片放到一个盒子里面，但是放大镜效果不变。

CSS：

body{
    padding: 0;
    margin: 0;
}
#container{
    width: 1000px;
    margin: 50px auto;
    display: flex;
}
a{
    text-decoration: none;
    color: black;
}
#left-box{
    width: 400px;
    height: 600px;
}
#pictureAndMagnifier{
    width: 100%;
    height: 400px;
    position: relative;
}
#pictureAndMagnifier>img{
    width: 100%;
    height: 100%;
}
#pictureAndMagnifier>#magnifier{
    display: none;
    width: 200px;
    height: 200px;
    position: absolute;
    background-color: pink;
    opacity: 0.５;
}
#pictureUl{
    width: 100%;
    height: 70px;
    margin-top: 5px;
}
#pictureUl ul{
    width: 100%;
    list-style: none;
    display: flex;
    padding-left: 0 ;
    justify-content: space-around;
    flex-wrap: nowrap;
}
#pictureUl li{
    width: 73px;
}
#pictureUl img{
    width: 100%;
}

/*商品详细信息*/
#articleInfo ul{
    display: flex;
    list-style: none;
    padding-left: 0;
}
#articleInfo li {
    border-top: 3px solid orange;
    border-left: 1px solid gray;
    border-right: 1px solid gray;
    box-sizing: border-box;
    font-size: 12px;
    padding: 6px 15px 3px 15px;
    font-weight: bold;
}
.detail{
    display: none;
    width: 100%;
    height: 100px;
    border: 1px solid orange;
}

/*右侧盒子*/
#right-box{
    width: 400px;
    height: 400px;
    border: 1px solid gray;
    position: relative;
    overflow: hidden;
    margin-left: 20px;
}
#zoomResult{
    width: 100%;
    height: 400px;
    display: none;
}
#zoomResult>img{
    width: 900px;
    height: 900px;
    position: absolute;
}

效果图如下：

在这里插入图片描述

参考博客：https://blog.csdn.net/var_Xu/article/details/89530672

Xiu Yan
关注
专栏目录
网页前端技术实验报告1.doc
03-03
网页前端技术实验报告1.doc
web前端开发实验——1
qq_46476515的博客
10-15 1325
web前端开发应用作业 1
[前端学习之HTML5]（02）：编写一个简单的HTML网站
最新发布
m0_75100421的博客
09-16 1592
1，如何使用WebStorm等可视化软件提高开发效率。 2，创建和运行你的第一个HTML文件。 3，掌握标题、文字和段落的各种标签及其属性。 4，如何通过水平线等元素增强页面布局。
web前端开发实验——2
qq_46476515的博客
10-16 2164
web前端开发实验——2
web前端实验一
Alfafar的博客
04-26 1973
1.应用html和css完成如图所示界面效果。内容相对于浏览器居中，图标见附件disc.jpg。 说明： ~内容相对于浏览器居中，图标见附件disc.jpg ~盒子边框1px solid #ccc，内边距20px ~文本字体颜色#122e67，文本高度30px <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Com
黑龙江大学web前端开发技术实验合集
二琳爱吃肉的博客
11-13 988
目录 实验一：简易计算器 实验二：实现选项卡 实验三：验证用户名的合法性 实验四：实现建议todos 实验五：实现购物车 实验六：图书管理系统 代码 实验一：简易计算器 实验二：实现选项卡 实验三：验证用户名的合法性 实验四：实现建议todos 实验五：实现购物车 实验六：图书管理系统 代码 代码都在我的vue专栏里 vue专栏 ...
web前端实验系列juster
qq_52837311的博客
05-30 248
web实验||王者荣耀的游戏英雄的介绍页面，要求点击英雄链接后，跳转到该英雄的介绍
并行异构体系结构中ADAS应用程序的编程方法
电话：02061977HAL ID：电话：02061977https://theses.hal.science/tel-02061977提交日期：2019年HAL是一个多学科的开放存取档案馆，用于存放和传播科学研究论文，无论它们是否被公开。论文可以来自法国或国外的教学...
2023 阿里云笔试题 研发岗 阿里笔试 0917
Buoluochuixue的博客
10-21 691
秋招结束华子的池子也不想泡了，字节也等不到了，一些中小厂的offer也都拒了签金山办公了，虽然金山办公sp也就北上一线大厂的白菜价，但是在武汉也是十分滋润了。计算机女，家江苏镇江。希望大家给个建议，美团平台好一点，但薪资还不如兴子给的高，（但是已经是ssp了，根据往年），兴子在南京，离家路程两小时。JVM JUC 框架 真的不配开发，现在连个实习都难找啊，小公司要啥都会，大公司要92，1.联州成都，年包28w左右，网评加班严重，卡转正学不到东西，好处离家近，生活成本低2.天津联想，年包14w左右，
大数据工程师：从牛客整理的 BAT Flink 面试题
Buoluochuixue的博客
11-02 180
是没有特定的部门，统一面试。上一个业务算是完结了吧，下午没活干，被迫摸了会鱼，但也不敢太摸，上次业务完成时大摸特摸，没注意到新的风暴已经出现。举例一些我很不好的体验：1.面试的时候是直接打电话，当场面试，事先也不约时间面试，就很突然，问。最近2012开始打保温电话，我昨天收到了，面评很好希望很大不要签其他公司，一分钟讲完挂了，有一种赶时间的感觉。今天刚参加完群面，有一个男的一个女的像两口子似的就他俩一直叭叭也不给别人说话的机会，然后老反驳这个反驳那个的，群面真下头，这俩人也是非常无语，我一个男生能这么烦。
【2024校招总结帖】数据分析、面试经验、心得体会分享
华鑫的专栏
04-30 719
工作节奏比较快，公司对员工的加班要求也比较严格，而且没有加班费，缺乏福利待遇。只有一个面试官，人挺好的，见我答不上来就赶紧换题[赞]。最后7个月想极限改命一波，有英语基础，数学忘得差不多了，所以408挑战不了，有没有22自命题推荐的，#华兴源创# 这家公司真不行，芯片测试岗位，乱刷人，人事之前打电话也没说会刷人，去培训之后，60个估。面试体验：有难度，体验不算好面试结果：被告知要等一到两周，感觉希望不大面试流程：4.17 投了简历，末九本，二战失败出来找工作，投了几十家只面了个电信，而且终面还挂了。
web程序设计实验报告
04-21
关于web网页的制作过程，还有css代码，大家可以参考下哈！！！
『USB3.0Cypress』FX3应用(1)采集OV5640显示
余生芳华，灵魂共舞
07-29 2408
采集OV5640摄像头数据，进入DDR3做乒乓缓存，随后经过USB3.0发送到上位机，并在上位机实时显示。提供工程源码和设计思路。
《web前端开发技术进阶》实验报告
Zhy_JiangLi的博客
06-25 950
此外，我也感受到了Vue Router的灵活性和扩展性。通过学习Vue路由及其在足球篮球子组件中的应用，我深入了解了Vue Router的工作机制以及如何在Vue应用中实现组件化的路由管理。在web应用中，原生js是十分重要的内容，js事件是在操作dom元素及书写js函数时比补考少的知识，本实验主要涉及js的点击事件、获取焦点及失去焦点事件、String对象、DOM对象、form表单元素的综合知识。总的来说，JavaScript事件案例的学习让我对前端开发有了更深入的了解，并激发了我对编程的兴趣和热情。
2021-04-27 Web前端编程实验（一）
APPDREAMER的博客
04-27 1326
Web前端编程实验（一） 前言 本次实验所用编程语言为html，所用编辑文本工具为记事本。 注意事项 （1）。 （2）由于实验结果需要上传视频，因此没有将相关实验结果图片放置于博客中。 （3）具体所有实验请参考博客 Web前端编程（一）~（八）。 实验一 1、实验题目。（注：题目如下） 2、本实验所需掌握知识。 （所需掌握知识一：文本处理） 代码格式 代码例子 实现效果 <u> 文本 </u> <u> 苹果 </u> 下划线 <..
Web前端技术基础实验报告一之Web前端开发环境配置与HTML基础
Lucky的博客
04-16 8900
Web前端技术基础实验报告一之Web前端开发环境配置与HTML基础
html前端实验报告南昌大学,南昌大学实验报告.doc
weixin_35973657的博客
06-07 331
南昌大学实验报告.doc南昌大学实验报告学生姓名： 张伟 学号： 8000105436 专业班级： 05网通1班实验类型：□ 验证 □ 综合 ( 设计 □ 创新 实验日期：2008-3-12 实验成绩：一、实验项目名称类的继承与多态性的应用二、实验目的在实际的项目中运用类的继承、覆盖及重载。三、实验任务本实验在实训1的基础上完成，要求重用...
前端-实验4
weixin_43700475的博客
04-27 547
1.使用jquery实现如下界面效果： 提示：  奇数行背景色：#FFF38F；偶数行背景色：#FFFFEE;选中行：#FF6500  选中行时，设置单选框选中状态 代码: <html> <head> <meta charset="utf-8"> <title>实验4-1</title> <script type="text/javascript" src="jquery-3.6.0.min.js"> </script&
web前端开发实验——4
qq_46476515的博客
10-17 791
web前端开发实验——4
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Xiu Yan

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值