前端實驗大匯總(這個很詳細)️

Xiu Yan 2022-01-07 09:46:10 阅读数:543

前端


實驗一:使用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.5;
}
#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]所创,转载请带上原文链接,感谢。 https://gsmany.com/2022/01/202201070946094639.html