前端实验大汇总(这个很详细)❤️

Posted Xiu Yan

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端实验大汇总(这个很详细)❤️相关的知识,希望对你有一定的参考价值。


实验一:使用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=以上是关于前端实验大汇总(这个很详细)❤️的主要内容,如果未能解决你的问题,请参考以下文章

2021年全网最详细大数据常见端口汇总❤️建议收藏❤️

2021年全网最详细大数据常见端口汇总❤️建议收藏❤️

大数据 | 实验一:大数据系统基本实验 | 熟悉常用的HDFS操作

最全最详细publiccms常用的代码片段

前端面试高频考点,ES6知识点汇总!!!

前端HTML详细教程(下篇)