当前位置：网站首页>Completion report of communication software development and Application
Completion report of communication software development and Application
2022-07-08 02:13:00 【Hao 923】
One 、 What they did
1.1 Mission requirements ：
Task a ： Build a static or dynamic website . Choose from the following requirements A or B, Requirements are as follows ：
A. Static website
Adopt pure CSS Or whatever you like CSS The frame is like Bootstrap、MDB、Tailwind Wait to build a theme of your choice and no less than 5 A page （Web Page） Website
B. Dynamic website
Use any front-end framework such as Angular Wait for an application （ Like a heroic journey 、 Agency matters 、 Library management, etc ） Development of , Need to have CRUD That is, the function of adding, deleting, modifying and checking has a certain style .
Whether you choose static or dynamic websites , The website needs to be deployed to your favorite website hosting server, such as Gitpage etc. （Angular Items can be found in https://angular.cn/guide/deployment）.
The website needs to place your graduation report （ See task 2 for requirements ）.
Task 2 ： Write a completion report , Requirements are as follows ：
（1） titled 《 Development and application of communication software 》 Course completion report ;
（2） The report needs to explain ： What they did 、 The development process 、 Problems encountered 、 How to solve 、 What are not resolved 、 summary ;
（3） The report is based on Web Page presentation , From the website you developed above, you can visit .
1.2 Design theme
The theme of this design is Introduce the land of abundance —— sichuan
Two 、 Effect display
home page ：
Attractions page ：
Food page ：
Accommodation page ：
Learn more about the page ：
3、 ... and 、 Implementation process
3.1 Homepage design
Navigation bar
By designing a topnav Classes and li Medium item Class to attach hyperlinks to the navigation bar , So as to realize the function of positioning the main page and other sub pages ;
Specific code ：
<div class="topict">
<img src="images/images/tao.png" alt="">
<!-- The image design at the top of the main page -->
</div>
<div class="topnav">
<ul>
<li><a href="# mathematics 181GaoLei"><img src="images/ school badge .png" alt="school badge" width="40px"></a></li>
<!-- Navigation bar of the page logo Use our school logo instead -->
<li><a href="webpage.html" > home page </a></li>
<li><a href="index.html"> Scenic spot </a></li>
<li><a href="food/index.html"> food </a></li>
<li><a href="accommodation.html"> accommodation </a></li>
<li><a href="vedio.html"> Learn more about </a></li>
</ul>
</div>
The design of page pictures in rotation
Through one navright Classes and .js File for implementation
lunbo.js In the document of animate Functions manually rotate and showButton The function shows the bottom of the rotation picture .
js Specific code ：
window.onload = function () {
var container = document.getElementById('container');
var list = document.getElementById('list');
var buttons = document.getElementById('buttons').getElementsByTagName('span');
var prev = document.getElementById('prev');
var next = document.getElementById('next');
var index = 1;
var len = 3;
var animated = false;
var interval = 3000;
var timer;
var size = 1350;
function animate(offset) {
if (offset == 0) {
return;
}
animated = true;
var time = 300;
var inteval = 10;
var speed = offset / (time / inteval);
console.log("speed:" + speed);
var left = parseInt(list.style.left) + offset;
var go = function () {
if ((speed > 0 && parseInt(list.style.left) < left) || (speed < 0 && parseInt(list.style.left) > left)) {
list.style.left = parseInt(list.style.left) + speed + 'px';
console.log(list.style.left);
setTimeout(go, inteval);
} else {
list.style.left = left + 'px';
if (left > -200) {
list.style.left = -size * len + 'px';
}
if (left < ( -size * len)) {
list.style.left = '-' + size + 'px';
}
animated = false;
console.log("left:" + list.style.left);
}
}
go();
}
function showButton() {
for (var i = 0; i < buttons.length; i++) {
if (buttons[i].className == 'on') {
buttons[i].className = '';
break;
}
}
buttons[index - 1].className = 'on';
}
function play() {
timer = setTimeout(function () {
next.onclick();
play();
},
interval);
}
function stop() {
clearTimeout(timer);
}
next.onclick = function () {
if (animated) {
return;
}
if (index == len) {
index = 1;
} else {
index += 1;
}
animate(-size);
showButton();
}
prev.onclick = function () {
if (animated) {
return;
}
if (index == 1) {
index = len;
} else {
index -= 1;
}
animate(size);
showButton();
}
for (var i = 0; i < buttons.length; i++) {
buttons[i].onclick = function () {
if (animated) {
return;
}
if (this.className == 'on') {
return;
}
var myIndex = parseInt(this.getAttribute('index'));
var offset = -size * (myIndex - index);
animate(offset);
index = myIndex;
showButton();
}
}
container.onmouseover = stop;
container.onmouseout = play;
play();
};
HTML Document design ：
</div>
<div class="navright">
<div id="container">
<div id="list" style="left: -1350px;">
<img src="images/picture5.jpg"/>
<img src="images/picture2.jpg"/>
<img src="images/picture4.jpg"/>
<img src="images/picture5.jpg">
<img src="images/picture2.jpg"/></div>
<div id="buttons">
<span index="1"></span>
<span index="2"></span>
<span index="3"></span>
</div>
<a href="javascript:;" id="prev" class="arrow" style="font-size:60px; text-align:center;"><</a>
<a href="javascript:;" id="next" class="arrow" style="font-size:60px; text-align:center;">></a></div>
</div>
</div>
The introduction of Sichuan on the left
By calling navboth、navleft、ft Class will locate
Specific code ：
<div class="navleft">
<h3 font="white 20px arial"> brief introduction </h3>
<p class="ft">
sichuan , abbreviation “ sichuan ” or “ Shu ”, The provincial capital, —— Chengdu , Located in the southwest hinterland of Chinese Mainland , There has been... Since ancient times “ the land of abundance ” The reputation of , It is the gateway to Western China , Hometown of giant panda . Yi people live in Sichuan 、 The Zang or Tibetan people 、 Hui people 、 The han nationality 、 Qiang and other nationalities , It is the second largest Tibetan area in China 、 The only Qiang inhabited area 、 The largest Yi settlement . Tourism resources are very rich , There has always been a saying that the landscape of the world lies in Shu , And there are “ Emei is the best in the world , Jiuzhai is a strange place in the world , Jian men world risk , Green city is secluded ” The reputation of .
</p>
<p class="ft">
Known as the “ National treasure ” The rare animal giant panda ,85% Inhabit in the mountains in Northwest Sichuan , Sichuan is therefore known as “ The hometown of giant pandas ”. Cuddly giant panda , It is one of people's favorite rare animals , It is the symbol of the World Wildlife Conservation Fund . At present, there are giant panda nature reserves in China 18 individual , Sichuan accounts for 16 individual , Northeast Chengdu has “ Giant panda breeding research base ”; From Chengdu 136 Wolong Giant Panda Nature Reserve is one of the three nature reserves in China , The World Wildlife Conservation Foundation has “ Giant Panda Research Center ”.
</p>
</div>
Realization effect ：
3.2 Scenic spot page design
The overall design of this page is to list a scenic spot and then make a text introduction , A total of 4 A scenic spot .
By calling section parallax bg1、section static、divstyle Class to layout and design the overall page .
Specific code ：
<main class="wrapper">
<section class="section parallax bg1">
</section>
<section class="section static">
<div class="divstyle">
<h1> jiuzhaigou </h1>
<p>
Jiuzhaigou is located in Jiuzhaigou County, Aba Tibetan and Qiang Autonomous Prefecture, Sichuan Province . It is located on the Qinghai Tibet Plateau 、 Western Sichuan Plateau 、 The transition zone from mountainous area to Sichuan Basin , South of Chengdu 300 Many kilometers , It's a depth 50 More than a thousand meters of valley , Total area 64297 ha , The forest coverage rate exceeds 80%. Because there is Shuzheng village in the ditch 、 Heye Village 、 Nine Tibetan villages, such as zechawa village, are located in this group of alpine lakes .
</p>
<p>
“ Jiuzhai return without looking at the water ”, It's a real interpretation of Jiuzhaigou scenery . Spring, 、 Waterfall 、 The river 、 beach 108 A Haizi , Each jade basin is made up of colorful jade basins . Changhai 、 Jianyan 、 NuoRiLang 、 Shuzheng 、 Zharu 、 Six landscapes of the Black Sea , a “Y” Glyph distribution . Cui Hai 、 Cascade waterfall 、 Cailin 、 xuefeng 、 Tibetan emotion 、 Blue ice , go by the name of “ Six Jue ”. Magic Jiuzhai , Known as “ Fairy tale world ”, It's called “ King of waterscape ”.
</p>
</div>
</section>
<section class="section parallax bg2">
</section>
<section class="section static">
<div class="divstyle">
<h1> Mount Emei Leshan Giant Buddha </h1>
<p> Mount Emei （Mount
Emei） Located in the southwest of Sichuan Province , Southwest edge of Sichuan Basin , It's China “ Four famous Buddhist mountains ” One of , The terrain is steep , The beautiful scenery , Known as the “ Emei is the best in the world ” Known as the , The top of Ten Thousand Buddhas on the mountain is the highest , At an altitude of 3099 rice , Higher than Emei plain 2700 meters .《 Emei county annals 》 cloud ：“ The clouds are green , Dai Yao makeup , It's like a moth's eyebrow , Thin and long , Beautiful and gorgeous , Hence the name Emei Mountain .”
</p>
<p> Mount Emei is located at the intersection of various natural elements , The floristic composition is complex , There are abundant biological species , There are many endemic species , A complete subtropical vegetation system is preserved , There are plants 3200 Varied , It accounts for about of the total number of plant species in China 1/10. Mount Emei is also home to many rare animals , Animal species up to 2300 Varied .
</p>
<p> Leshan Giant Buddha , Also known as Lingyun Buddha , It is located at Lingyun temple on the East Bank of Nanmin River in Leshan City, Sichuan Province , Near the Dadu River 、 The confluence of Qingyi River and Minjiang River . Buddha sits for Maitreya , Passing height 71 rice , It is the largest cliff stone sculpture in China .</p>
</div>
</section>
<section class="section parallax bg3"></section>
<section class="section static">
<div class="divstyle">
<h1> Langzhong ancient city </h1>
<p> Langzhong ancient city is located in the northeast margin of Sichuan Basin 、 The middle reaches of Jialing River , It is one of the four ancient cities . Langzhong ancient city “5A” The total area of the scenic spot is 4.59 Square kilometers , The core area of the ancient city 2 Square kilometers . By 2015 year , The ancient city has 2300 Years of city building history , It is an important military town of ancient Ba and Shu .</p>
<p>
There is zhangfei temple in Langzhong ancient city 、 Yongan temple 、 Wulong temple 、 Pavilion of Prince Teng 、 Guanyin temple 、 Baba temple 、 jinzhou.would 、 Northern Sichuan Road Gongyuan, etc 8 To be placed in key national cultural relics protection units ; There are shaojiawan tombs 、 Writing tower 、 Stone chamber view cliff statues 、 Cliff statue of Thor Cave 、 Cliff statue of niuwangdong 、 The former site of the General Political Department of the Fourth Front Army of the Red Army 、 Huaguang building 、 Langzhong Confucian temple, etc 22 At provincial level cultural relics protection units
</p>
</div>
</section>
<section class="section parallax bg4"></section>
<section class="section static">
<div class="divstyle">
<h1> Giant panda habitat </h1>
<p> Sichuan Giant Panda Habitat consists of Baoxing County, where the world's first giant panda was found, and Wolong Nature Reserve in Sichuan Province, China 7 A nature reserve , Including Wolong 、 Four girl mountain 、 Jiajin mountains , And Qingcheng Mountain — Dujiangyan scenic spot, etc 9 It consists of scenic spots </p>
<p>
The wild giant pandas preserved in Sichuan Giant Panda Habitat account for the world 30% above , It is the largest and most complete giant panda habitat in the world ; It is all temperate regions in the world （ Except tropical rain forest ） The area with the most abundant plants in , Protected International （CI） Selected as global 25 One of the biodiversity hotspots , By WWF （WWF） Identified as global 200 One of the ecological zones .
</p>
</div>
</section>
</main>
Design a button to return to the home page in the lower right corner of the page , adopt <a> </a> Introduce hyperlinks to the home page
Specific code ：
<div class="shouye"><a href="webpage.html"> home page </a></div>
<a href="webpage.html" class="shouye"> home page </a>
Effect display ：
The style design of the whole page ：
.wrapper {
/* The height needs to be set to a fixed value for the effect to work. * 100vh is the full height of the viewport. */
height: 100vh;
/* width: 1400px; */
margin: 0px auto;
/* The scaling of the images would add a horizontal scrollbar, so disable x overflow. */
overflow-x: hidden;
/* Enable scrolling on the page. */
overflow-y: auto;
/* Set the perspective to 2px. This is essentailly the simulated distance from the viewport to transformed objects.*/
perspective: 2px;
}
.section {
/* Needed for children to be absolutely positioned relative to the parent. */
position: relative;
/* The height of the container. Must be set, but it doesn't really matter what the value is. */
height: 90vh;
/* For text formatting. */
display: flex;
align-items: center;
justify-content: center;
color: white;
text-shadow: 0 0 0px #000;
}
.parallax::after {
/* Display and position the pseudo-element */
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
/* Move the pseudo-element back away from the camera, * then scale it back up to fill the viewport. * Because the pseudo-element is further away, it appears to move more slowly, like in real life. */
transform: translateZ(-1px) scale(1.5);
/* Force the background image to fill the whole element. */
background-size: 100%;
/* Keep the image from overlapping sibling elements. */
z-index: -1;
}
/* The styling for the static div. */
.static {
background: rgba(170, 209, 235, 0.9);
background-image: url(pc_bg.jpg);
}
/* Sets the actual background images to adorable kitties. This part is crucial. */
.bg1::after {
background-image: url(jiuzhaigou.jpg);
}
.bg2::after {
background-image: url(emei-leshan.jpg);
}
.bg3::after{
background-image: url(langzhong.jpg);
}
.bg4::after{
background-image: url(xiongmao.jpg);
}
3.3 Food page design
A total of 12 Picture and introduction of Sichuan cuisine , I wrote a .js File implementation shows the introduction when the mouse is placed on the picture , According to the moving direction of the mouse , The introduction box moves , adopt var Establish a coordinate axis to determine the position of the mouse , recycling var and math Calculate the distance between the mouse and the next picture .
Specific code ：
Import of pictures and introductions ：
<div class="box">
<ul>
<li>
<img src=" food / Dongpo Pig Knuckle .jpg">
<div class="txt">
<h2> Dongpo Pig Knuckle </h2>
<p>
Milky white soup , Pig elbow rotten soft , The meat is tender 、 The meat tastes mellow 、 There's chewing , Fat but not greasy .
</p>
<a href="javaScript:" ></a>
<a herf="#" class="btn"> Check the details </a>
</div>
</li>
<li>
<img src=" food / A vegetable .jpg">
<div class="txt">
<h2> A vegetable </h2>
<p>
With meat 、 Soy products 、 Green vegetables 、 Seafood 、 Dishes made of mushrooms as the main ingredient , It tastes delicious and spicy , Very delicious .
</p>
<a href="javaScript:" class="btn"> Check the details </a>
</div>
</li>
<li>
<img src=" food / Cold eating rabbit .jpg">
<div class="txt">
<h2> Cold eating rabbit </h2>
<p>
Eating rabbit is also called spicy rabbit 、 Spicy diced rabbit , It is a traditional Han cuisine originated from Zigong, Sichuan , It belongs to xiaohebang cuisine in Sichuan cuisine classification , So far, it has a history of more than 100 years .
</p>
<a href="javaScript:" class="btn"> Check the details </a>
</div>
</li>
<li>
<img src=" food / Pot chicken .jpg">
<div class="txt">
<h2> Pot chicken </h2>
<p>
Baobo chicken is a traditional famous snack in Sichuan , Originated in Leshan .“ Bowl ” It's a kind of earthen pot , Put the chicken string into the carefully prepared sauce and cook it , Then put it in a bowl and rinse it .
</p>
<a href="javaScript:" class="btn"> Check the details </a>
</div>
</li>
<li>
<img src=" food / Pork Lungs in Chili Sauce .jpeg">
<div class="txt">
<h2> Pork Lungs in Chili Sauce </h2>
<p>
Fine production , Beautiful color , Tender and delicious , Spicy and fragrant , Very palatable .
</p>
<a href="javaScript:" class="btn"> Check the details </a>
</div>
</li>
<li>
<img src=" food / Yibin burning noodles .jpg">
<div class="txt">
<h2> Yibin burning noodles </h2>
<p>
Yibin shredded rice sprouts 、 Small ground sesame oil 、 Fresh board oil 、 Octagon 、 Shannai 、 sesame 、 peanut 、 walnut 、 Gold bars, peppers and other accessories ...
</p>
<a href="javaScript:" class="btn"> Check the details </a>
</div>
</li>
<li>
<img src=" food / Luzhou yellow cake .jpg">
<div class="txt">
<h2> Luzhou yellow cake </h2>
<p>
Use glutinous rice 、 Brown sugar, ginger leaves and other ingredients are made through traditional techniques , It tastes soft, waxy and sweet 、 A mouthful of fragrance .
</p>
<a href="javaScript:" class="btn"> Check the details </a>
</div>
</li>
<li>
<img src=" food / Fushun Douhua .jpg">
<div class="txt">
<h2> Fushun Douhua </h2>
<p>
A local specialty snack in Zigong, Sichuan , The main ingredient is high-quality soybeans . Its taste is moist 、 Loose crisp 、 Strong fragrance .
</p>
<a href="javaScript:" class="btn"> Check the details </a>
</div>
</li>
<li>
<img src=" food / Tossed Clear Noodles in Chili Sauce .jpg">
<div class="txt">
<h2> Tossed Clear Noodles in Chili Sauce </h2>
<p>
Langzhong North Sichuan jelly is one of the traditional specialties in Langzhong, Sichuan . The jelly adopts high-quality peas to shell , After soaking in water , Grind into fine pulp ...
</p>
<a href="javaScript:" class="btn"> Check the details </a>
</div>
</li>
<li>
<img src=" food / Braised Pork with Preserved Vegetable in Soya Sauce .jpg">
<div class="txt">
<h2> Braised Pork with Preserved Vegetable in Soya Sauce </h2>
<p>
The meat tastes rotten , It tastes salty and slightly sweet , Fat but not greasy .
</p>
<a href="javaScript:" class="btn"> Check the details </a>
</div>
</li>
<li>
<img src=" food / Braised beef .jpg">
<div class="txt">
<h2> Braised beef </h2>
<p>
Zigong, an ancient salt capital, is a traditional famous dish in Sichuan , The main raw materials are beef 、 Salt, etc . With high quality and delicious 、 The piece is as thin as paper 、 The crisp fragrance is long and famous .
</p>
<a href="javaScript:" class="btn"> Check the details </a>
</div>
</li>
<li>
<img src=" food / Meat and bean curd .jpg">
<div class="txt">
<h2> Meat and bean curd </h2>
<p>
On the basis of Douhua , Add lean meat to form a different style from the original Douhua , Because it has meat , Therefore, it is different from the original Douhua and is called hundouhua .
</p>
<a href="javaScript:" class="btn"> Check the details </a>
</div>
</li>
</ul>
</div>
Introduction floating ：
<script type="text/javascript" src="js/jquery.js" ></script>
<script> $(".box ul li").hover(function(e){
var left = $(this).offset().left, top = $(this).offset().top, right = $(this).offset().left + $(this).width(), bottom = top +$(this).height();//offset Offset value // Get the mouse coordinates of the retaining wall var x = e.pageX, y = e.pageY; // Calculate the distance from the mouse to the edge var sT = Math.abs(top - y), sL = Math.abs(left - x), sB = Math.abs(bottom - y), sR = Math.abs(right - x); var min = Math.min(sT,sL,sB,sR); if(min == sT){
// Enter from above $(this).find(".txt").css({
left:0,top:"-220px"}).stop().animate({
left:0,top:0},500); }else if(min == sB){
// Next entry $(this).find(".txt").css({
left:0,top:"220px"}).stop().animate({
left:0,top:0},500); }else if(min == sR){
// Enter on the right $(this).find(".txt").css({
left:"164px",top:0}).stop().animate({
left:0,top:0},500); }else if(min == sL){
// Enter on the left $(this).find(".txt").css({
left:"-164px",top:0}).stop().animate({
left:0,top:0},500); } },function(e){
var left = $(this).offset().left, top = $(this).offset().top, right = $(this).offset().left + $(this).width(), bottom = top +$(this).height();//offset Offset value // Get the mouse coordinates of the retaining wall var x = e.pageX, y = e.pageY; // Calculate the distance from the mouse to the edge var sT = Math.abs(top - y), sL = Math.abs(left - x), sB = Math.abs(bottom - y), sR = Math.abs(right - x); var min = Math.min(sT,sL,sB,sR); if(min == sT){
// Go out above $(this).find(".txt").stop().animate({
left:0,top:"-220px"},500); }else if(min == sB){
// Go out below $(this).find(".txt").stop().animate({
left:0,top:"220px"},500); }else if(min == sR){
// Go out on the right $(this).find(".txt").stop().animate({
left:"164px",top:0},500); }else if(min == sL){
// Go out on the left $(this).find(".txt").stop().animate({
left:"-164px",top:0},500); } }); </script>
Page effects ：
3.4 Accommodation page
The design of this page is relatively simple , Through the stacking of text and simple style boxes .
This page requires the user to input, including the place of check-in 、 Check in time and so on , Among them, the time of check-in directly allows users to choose , utilize select Realize the selection function ,option Implementation enumerates all options ： Listed in 2022 To 2023 year , Month list 12 An option , Day lists 31 Options .
Specific code ：
<body>
<div>
<!-- <h2> This is a registration form </h2> -->
<div class="divtopic">
<h2> Let's take a walk </h2>
</div>
<table class="regist">
<tr>
<!-- <td colspan="3" class="btn"><h3></h3></td> -->
</tr>
<tr>
<td> region ：</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td class="rgtd"> Gender :</td>
<td>
<input type="radio" name="sex"> male
<input type="radio" name="sex"> Woman
</td>
</tr>
<tr>
<td class="rgtd"> full name ：</td>
<td>
<input type="text">
</td>
</tr>
<tr></tr>
<tr>
<td> Check in date ：</td>
<td width="40px"> year ：<select name="" id="">
<option value="">2022</option>
<option value="">2023</option>
</select></td>
<td> month ：<select name="" id="">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
<option value="">6</option>
<option value="">7</option>
<option value="">8</option>
<option value="">9</option>
<option value="">10</option>
<option value="">11</option>
<option value="">12</option>
</select></td>
<td> Japan :
<select name="" id="">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
<option value="">6</option>
<option value="">7</option>
<option value="">8</option>
<option value="">9</option>
<option value="">10</option>
<option value="">11</option>
<option value="">12</option>
<option value="">13</option>
<option value="">14</option>
<option value="">15</option>
<option value="">16</option>
<option value="">17</option>
<option value="">18</option>
<option value="">19</option>
<option value="">20</option>
<option value="">21</option>
<option value="">22</option>
<option value="">23</option>
<option value="">24</option>
<option value="">25</option>
<option value="">26</option>
<option value="">27</option>
<option value="">28</option>
<option value="">29</option>
<option value="">30</option>
<option value="">31</option>
</select>
</td>
</tr>
<tr></tr>
<td height="20px"></td>
<tr>
<td> Check out date ：</td>
<td width="40px"> year ：<select name="" id="">
<option value="">2022</option>
<option value="">2023</option>
</select></td>
<td> month ：<select name="" id="">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
<option value="">6</option>
<option value="">7</option>
<option value="">8</option>
<option value="">9</option>
<option value="">10</option>
<option value="">11</option>
<option value="">12</option>
</select></td>
<td> Japan :
<select name="" id="">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
<option value="">6</option>
<option value="">7</option>
<option value="">8</option>
<option value="">9</option>
<option value="">10</option>
<option value="">11</option>
<option value="">12</option>
<option value="">13</option>
<option value="">14</option>
<option value="">15</option>
<option value="">16</option>
<option value="">17</option>
<option value="">18</option>
<option value="">19</option>
<option value="">20</option>
<option value="">21</option>
<option value="">22</option>
<option value="">23</option>
<option value="">24</option>
<option value="">25</option>
<option value="">26</option>
<option value="">27</option>
<option value="">28</option>
<option value="">29</option>
<option value="">30</option>
<option value="">31</option>
</select>
</td>
</tr>
<tr></tr>
<td height="20px"></td>
<tr>
<td> The number of bedrooms ：</td>
<td colspan="2"><input type="checkbox" name="num"> A room <input type="checkbox" name="num"> Second room <input type="checkbox" name="num"> Three rooms <input type="checkbox" name="num"> There is no limit </td>
</tr>
<tr></tr>
<td height="20px"></td>
<tr>
<td></td>
<td rowspan="2" colspan="2" fontsize="40px"><input type="submit" value=" Search for " class="btn"></td>
</tr>
</table>
</div>
<div class="shouye"><a href="webpage.html"> home page </a></div>
</body>
Effect display ：
3.5 Learn more pages
This page shows relevant Sichuan cuisine through video 、 Culture 、 Scenic spots, etc .
adopt mainbox Class is placed in the format MP4 In the video , utilize video Tag to play video .
Specific code ：
<body>
<div class="mainbox">
<div>
<video controls="controls" height="100%">
<source src="vedio/ Sichuan cuisine .mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<source src="movie.webm" type="video/webm">
<object data="movie.mp4"controls="controls" height="100%">
<embed src="vedio/ Sichuan cuisine .mp4" controls="controls" height="100%">
</object>
</video>
<!-- <embed src="vedio/ Sichuan cuisine .mp4" type="vedio/webm" controls="controls" height="100%"> -->
</div>
<a href="webpage.html" class="shouye"> home page </a>
</div>
</body>
style ：
<style> .mainbox {
position: relative; height: 979px; width: 1300px; margin: 0px auto; /* line-height: 40px; background-color: #47915d; background-color: black; */ background-image: url(images/images/tv_02.png); overflow: hidden; } .mainbox div{
position: absolute; width: 720px; height: 590px; top: 150px; left: 145px; border-radius: 50px; background-color: rgba(209, 41, 41, 0.3); overflow: hidden; /* z-index: -1; */ } </style>
Effect display ：
Four 、 Problems encountered and how to solve
Question 1 、 Unresolved
The back to home button in the video page is not at the bottom right but at the top left , But the button on the other four pages is at the bottom right , Same code , The result is different .
resolvent ： By looking at the code carefully , I didn't find anything wrong , Finally, the problem was not solved ; But this problem does not affect the realization of the function , It's just the wrong position .
Question two 、 resolved
The video format is MP4
At first, I only used video label , But after importing the video, the web page does not have the imported video .
By searching for information , Used embed label , But the display has no relevant plug-ins ; Until I finally found the label video Used incorrectly ,
<video controls="controls" height="100%">
<source src="vedio/ Sichuan cuisine .mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<source src="movie.webm" type="video/webm">
<object data="movie.mp4"controls="controls" height="100%">
<embed src="vedio/ Sichuan cuisine .mp4" controls="controls" height="100%">
</object>
</video>
Question 3 、 resolved
Upload the prepared file to gitee When an error occurs, it shows that a file has more than 126.74MB It's bigger than git The size that can be uploaded , But the file name of this error prompt cannot be found in my folder .
By comparing the size, I found that my video file is too large .
5、 ... and 、 summary
After a semester of study , Under the teacher's explanation, I have a certain understanding of the design of web pages . In addition, there is a practical operation for the tutorial , Basically familiar with html、css、JavaScript、bootstrap And other functions of various parts in web page production . The only thing that makes me feel a little regretful is , Failed to learn how to make dynamic web pages , namely Angular. Encountered too many problems in the configuration environment , Failed to persist in learning due to their own reasons . But there is no end to learning , I will continue to learn the design of web pages in the next time, including the knowledge I haven't learned yet , Through this way to strengthen their front-end design ability .
边栏推荐
- QT -- create QT program
- 电路如图，R1=2kΩ，R2=2kΩ，R3=4kΩ,Rf=4kΩ。求输出与输入关系表达式。
- "Hands on learning in depth" Chapter 2 - preparatory knowledge_ 2.1 data operation_ Learning thinking and exercise answers
- Introduction à l'outil nmap et aux commandes communes
- Key points of data link layer and network layer protocol
- 【错误】加载h5权重出错AttributeError: ‘str‘ object has no attribute ‘decode‘
- ArrayList源码深度剖析，从最基本的扩容原理，到魔幻的迭代器和fast-fail机制，你想要的这都有！！！
- Redisson distributed lock unlocking exception
- Why did MySQL query not go to the index? This article will give you a comprehensive analysis
- [knowledge map paper] attnpath: integrate the graph attention mechanism into knowledge graph reasoning based on deep reinforcement
猜你喜欢
线程死锁——死锁产生的条件
静态路由配置全面详解，静态路由快速入门指南
保姆级教程：Azkaban执行jar包（带测试样例及结果）
leetcode 866. Prime Palindrome | 866. prime palindromes
Semantic segmentation ｜ learning record (3) FCN
谈谈 SAP 系统的权限管控和事务记录功能的实现
JVM memory and garbage collection-3-runtime data area / heap area
Semantic segmentation ｜ learning record (5) FCN network structure officially implemented by pytoch
![[knowledge map] interpretable recommendation based on knowledge map through deep reinforcement learning](/img/62/70741e5f289fcbd9a71d1aab189be1.jpg)
[knowledge map] interpretable recommendation based on knowledge map through deep reinforcement learning
Master go game through deep neural network and tree search
随机推荐
Installing and using mpi4py
LeetCode精选200道--链表篇
How mysql/mariadb generates core files
CV2 read video - and save image or video
leetcode 873. Length of Longest Fibonacci Subsequence | 873. 最长的斐波那契子序列的长度
文盘Rust -- 给程序加个日志
QT -- create QT program
Height of life
WPF 自定义 写实风 雷达图控件
Nanny level tutorial: Azkaban executes jar package (with test samples and results)
Matlab r2021b installing libsvm
分布式定时任务之XXL-JOB
鱼和虾走的路
XXL job of distributed timed tasks
牛熊周期与加密的未来如何演变？看看红杉资本怎么说
Exit of processes and threads
Redisson distributed lock unlocking exception
电路如图，R1=2kΩ，R2=2kΩ，R3=4kΩ,Rf=4kΩ。求输出与输入关系表达式。
Introduction to ADB tools
Redisson分布式锁解锁异常