当前位置：网站首页>Completion report of communication software development and Application
Completion report of communication software development and Application
2022-07-07 12:04:00 【~There are trees on the mountain】
brief introduction
This paper is based on Bootstrap frame , Use Html and CSS Static web pages implemented by basic tools , It mainly refers to BootStrap The code framework of , Basically realized the navigation system 、 The sliding window 、 Card style 、 Picture carousel 、 List group 、 Folding frame 、 Button group , Container and grid layout system are used ; Absolute positioning and relative positioning are used ; At the same time, it also defines some things you need to use CSS style .
One 、BootStrap brief introduction
Bootstrap Is the U.S. Twitter The designer of the company Mark Otto and Jacob Thornton Cooperation is based on HTML、CSS、JavaScript Simplicity of development 、 intuitive 、 Tough front end Development framework , bring Web Faster development .Bootstrap Provides elegant HTML and CSS standard , It's dynamic CSS Language Less It's written in .Bootstrap Popular once launched , Has always been a GitHub Hot open source projects on , Include NASA Of MSNBC（ Microsoft National Broadcasting Corporation ） Of Breaking News All used the project . Framework familiar to mobile developers in China , Such as WeX5 Front end open source framework, etc , Is based on Bootstrap Source code for performance optimization .
Two 、 The development process
1. The navigation bar （NavBar）
Find in the Chinese manual NavBar Related code , Make a slight modification , The code is as follows
<section class="p-5 bg-primary text-light text-center text-sm-start">
<!--padding -->
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light ">
<div class="container-fluid w-100">
<a class="navbar-brand" href="#"> The city of the sky </a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#"> home page </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> Photography </a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Explore
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#"> read </a></li>
<li><a class="dropdown-item" href="#"> running </a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#"> music </a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled"> other </a>
</li>
</ul>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Go</button>
</form>
</div>
</div>
</nav>
</section>
2. Button （Button）
Use bution Group and list-group Achieve one button The function of the group , And click different button You can jump to different pages
The code is as follows
<section class="p-5 text-light text-center text-sm-start" style="width:max-content; height:auto;right: 0%; bottom: 30%; position: fixed;">
<div class="list-group">
<button type="button" class="list-group-item list-group-item-action active" aria-current="true">
Navigation
</button>
<button type="button" class="list-group-item list-group-item-action"> <a href="music.html" class="text-black"> Listen to whispers </a></button>
<button type="button" class="list-group-item list-group-item-action"> <a href="exercise.html" class="text-black"> Keep moving </a></button>
<button type="button" class="list-group-item list-group-item-action"> <a href="life.html" class="text-black"> Fragments of life </a></button>
<button type="button" class="list-group-item list-group-item-action"> <a href="read.html" class="text-black"> Point to the reading space </a></button>
<button type="button" class="list-group-item list-group-item-action"> <a href="code.html" class="text-black"> The journey of programming </a></button>
</div>
</section>
3. card （Card）
also , adopt Bootstrap The basic framework of the code is partially modified
The following effects can be achieved
4. Collapse menu （Accordion）
The code is as follows
<section class="p-5">
<div class="container">
<h2 class="text-center"> My hobby </h2>
<div
class="accordion accordion-flush"
id="accordionFlushExample"
>
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingOne">
<button
class="accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#flush-collapseOne"
aria-expanded="false"
aria-controls="flush-collapseOne"
>
read
</button>
</h2>
<div
id="flush-collapseOne"
class="accordion-collapse collapse show"
aria-labelledby="flush-headingOne"
data-bs-parent="#accordionFlushExample"
>
<div class="accordion-body">
“ The stomach has the poetry book gas from China ”, Through a lot of reading , The quality and depth of a person's speech will gradually increase .
secondly , Reading can purify the mind , Just like the spring rain . It reduces our psychological stress , Embodied in the reading people
The basic understanding of the world will be expanded , Let us feel calm and relaxed .
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingTwo">
<button
class="accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#flush-collapseTwo"
aria-expanded="false"
aria-controls="flush-collapseTwo"
>
running
</button>
</h2>
<div
id="flush-collapseTwo"
class="accordion-collapse collapse"
aria-labelledby="flush-headingTwo"
data-bs-parent="#accordionFlushExample"
>
<div class="accordion-body">
Compared with wasting most of your time on the Internet every day , You will prefer to be positive now ,
It's running that makes you find yourself better . Keeping running makes you more persistent , Cure procrastination ！
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingThree">
<button
class="accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#flush-collapseThree"
aria-expanded="true"
aria-controls="flush-collapseThree"
>
music
</button>
</h2>
<div
id="flush-collapseThree"
class="accordion-collapse collapse"
aria-labelledby="flush-headingThree"
data-bs-parent="#accordionFlushExample"
>
<div class="accordion-body">
Feel the music , Sometimes it feels like sunshine , Feel its brightness and warmth ;
Feel the music , Sometimes it's like feeling the sea , Feel its profound and mysterious ;
Feel the music , Sometimes it's like feeling life , Feel the strings that touch your heart !
</div>
</div>
</div>
</div>
</div>
</section>
5. Wheel planting （Carousel）
In this case , Use it directly bootstrap The provided framework cannot directly implement the rotation , After consulting the relevant information on the Internet
Failed to find the best solution , but , Used script Scripting language , The designed rotation interface is a little ugly ,3s Automatically switch pictures , Click the icon below to switch different pictures
This is the solution to the problems encountered in the beginning of design , The code is as follows
Html Language
<section class="p-5">
<div class="container" style="height: 80%;">
<div class="text-box">
<div class="BJ">
<div><img src="img/3.jpg" id="img" class="img-fluid"/></div>
<ul id="ol" >
<!-- Set the picture to one line ; Set picture interval -->
<li style="display: inline-block;margin:0 5px 0 520px;"><img src="img/1.png" id="clk1"></li>
<li style="display: inline-block;margin: 0 5px;"><img src="img/2.png" id="clk2"></li>
<li style="display: inline-block;margin: 0 5px;"><img src="img/3.png" id="clk3"></li>
<li style="display: inline-block;margin: 0 5px;"><img src="img/4.png" id="clk4"></li>
</ul>
</div>
</div>
</div>
</section>Script frame
<script>
var index=0;
var imgs=["img/3.jpg","img/4.jpg","img/5.jpg","img/6.jpg"]; /* The address of the picture */
function qiehuan(){
document.getElementById("img").src=imgs[index];
index++;
if(index > 3){
index=0; // Only four pictures , When it comes to 3 Reset to 0
}
}
setInterval("qiehuan()",3000); // Every time 3 Second, rerun the function qiehuan()
// Click the switch part of the picture ：
window.onload = function () {
// Get four pictures id
var c1 = document.getElementById("clk1");
var c2 = document.getElementById("clk2");
var c3 = document.getElementById("clk3");
var c4 = document.getElementById("clk4");
// Click the appropriate button , The corresponding picture is displayed
c1.onclick=function() {
document.getElementById("img").src=imgs[0];
}
c2.onclick=function() {
document.getElementById("img").src=imgs[1];
}
c3.onclick=function() {
document.getElementById("img").src=imgs[2];
}
c4.onclick=function() {
document.getElementById("img").src=imgs[3];
}
}
var navLinks = document.getElementById('navLinks');
function showMenu() {
navLinks.style.right = '0';
navLinks.addEventListener('click',function(){
hideMenu();
})
}
function hideMenu() {
navLinks.style.right = '-30%';
}
function showFullImage(event) {
// Set the picture to be displayed in full screen src
document.getElementById('fullImage').src = event.target.src;
// obtain Y Width of scroll bar
// innerWidth Is the internal width of the window in pixels . If the vertical scroll bar exists , Then this property will include its width
// offsetWidth Is a read-only property , Returns the layout width of an element
var scrollbarWidth = window.innerWidth - document.body.offsetWidth;
// body Can't scroll
document.body.style.overflowY = 'hidden';
// Prevent the page from flashing when the scroll bar is hidden
document.body.style.marginRight = scrollbarWidth + 'px';
var popup = document.getElementById('popup');
popup.style.display = 'flex';
popup.style.animation = 'fadein 0.5s';
popup.onclick = function () {
popup.style.animation = 'fadeout 0.6s';
// Delay will display Set as none, To allow time for animation . Note that setting more time for retirement will be smoother .
setTimeout(() => {
document.body.style.overflowY = 'auto';// body Resume scrolling
document.body.style.marginRight = 0;
popup.style.display = 'none';
}, 500);
}
}
</script>Later, in the process of code improvement , Found a blog like this , Reference blog in <head> Introduce this paragraph in
bootstrap The carousel map doesn't work 
https://blog.csdn.net/m0_37690430/article/details/110098434
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>Then I found it miraculously , Pictures that could not be rotated can now be played automatically , And the effect is good
6. Grid layout
Use grid layout , We divide the layout of each row into 12 branch , The floor width of the element is defined by the number of shares
12 Columns and 24 Columns are PC More commonly used . Mobile terminal 4 Most columns . The finer the division, the richer the changeable content . But too thin will also make the page very fragmented , The sense of difference and rhythm are reduced .12 or 24 Columns can be 2 Equal division 、3 Equal division 、4 Equal division 、6 Equal division 、12 Equal division , Can also according to the 1:2:1 、 1:3:2 、 1:2:2:1... Proportional segmentation , Provides enough variety .
This web design is based on dynamic responsive layout , When the display pixel is large , Each element occupies three grids ; When the display pixel is smaller than the large screen , Each element occupies the entire interface , The effect is as follows .
Large screen display
When the small screen displays
7. Scrolling （wow）
1、wow.js Depend on animate.css, First quote in the header animate.css perhaps animate.min.css
<link rel="stylesheet" href="css/animate.css">2、 Quote at the bottom wow.js perhaps wow.min.js, Then write another line below javascript Code .（ No need to quote jQuery）
<script src="js/wow.min.js"></script>
<script type="text/javascript">
new WOW().init();
</script>Be careful ：class Must include wow
data-wow-duration: Change the animation time
data-wow-delay: Delay before the animation starts
data-wow-offset: Distance starts animation ( Bottom of browser )
data-wow-iteration: The number of times the animation repeats
wow rollIn From left to right 、 Roll clockwise 、 Transparency comes from 100% Change to set value
wow bounceIn From the original position , From small to large beyond the set value , Then smaller than the set value , Go back to the set point 、 Transparency comes from 100% Change to set value
wow bounceInUp From bottom to top 、 When it comes up, it will go up a part and then bounce back 、 Transparency is set to constant
wow bounceInDown From the top down 、 When it falls down, it will go over a part and then bounce 、 Transparency is set to constant
wow bounceInLeft From left to right 、 When it is moved over, it will go over a part to the right and then flick to the left 、 Transparency is set to constant
wow bounceInRight From right to left 、 When it's moved over, it will go over a part to the left and then play it right 、 Transparency is set to constant
wow slideInUp From bottom to top 、 After getting up, fix it to the setting position 、 Transparency is set to constant （up It's from the bottom up ）（ If the element is at the bottom , Will open the box high ）
wow slideInDown From the top down 、 After getting up, fix it to the setting position 、 Transparency is set to constant
wow slideInLeft From left to right 、 After getting up, fix it to the setting position 、 Transparency is set to constant （left But from left to right ）
wow slideInRight From right to left 、 After getting up, fix it to the setting position 、 Transparency is set to constant
wow lightSpeedIn From right to left 、 Tilt your head to the right first , Tilt left again , Finally, it becomes the original shape 、 Transparency comes from 100% Change to set value
wow pulse Enlarge the original position a little and reduce it to the original size 、 Transparency is set to constant （ It works better with the animation execution times attribute ）
wow flipInX The original position is backward and forward 、 Transparency comes from 100% Change to set value
wow flipInY Turn left and right at the original position 、 Transparency comes from 100% Change to set value
wow bounce Shake up and down 、 Transparency is set to constant （ With the animation execution times and animation duration attributes, you can achieve violent shaking or slow shaking ）
wow shake Left right jitter 、 Transparency is set to constant （ With the animation execution times and animation duration attributes, you can achieve violent shaking or slow shaking ）
wow swing From right to left 、 Tilt your head to the right first , Tilt left again , Finally, it becomes the original shape 、 Transparency is set to constant
wow bounceInU The original position remains the same 、 Directly from never show to show （ No transition effect ）
wow wobble The original position remains the same 、 It's like standing there and shaking your head 、 Transparency is set to constant
Reference code
<!--bbs Start -->
<section id="bbs">
<div class="container">
<div class="row wow fadeInDown" data-wow-duration="1s" data-wow-offset="10">
<div class="col-md-4">
<a href="https://www.baidu.com" target="_blank">
<img src="http://pic.616pic.com/ys_img/00/31/00/PXTXSZJGE1.jpg" class="img-responsive icon" alt="">
<h3> Riding </h3>
<p> A few hours of cycling , Moderate strength , Be able to chat with each other easily </p>
</a>
</div>
<div class="col-md-4">
<a href="https://www.baidu.com" target="_blank">
<img src="http://pic.616pic.com/ys_bnew_img/00/49/50/PDR8g31QwY.jpg" class="img-responsive icon" alt="">
<h3> running </h3>
<p> Running makes you do things more planned , Cure procrastination .</p>
</a>
</div>
<div class="col-md-4">
<a href="https://www.baidu.com" target="_blank">
<img src="https://www.logosc.cn/uploads/icon/2018/04/06/15527217-700d-450c-891d-716b5cad2c4c.png" class="img-responsive icon" alt="">
<h3> yoga </h3>
<p> Yoga is a kind of practice , It is also a way to face your own imperfection 、 Learn the journey of self acceptance .</p>
</a>
</div>
</div>
</div>
</section>
<!--bbs end -->Realization effect
8. Play the video
Reference code
<div class="view" style=" height: 100%;">
<video class="video-intro img-fluid center-block" poster="https://img.zcool.cn/community/[email protected]_1l_2o_100sh.jpg" playsinline autoplay
muted loop>
<source src="img/spread.mp4" >
</video>
<!-- Mask & flexbox options-->
<div class="mask rgba-gradient d-flex ">
<!-- Content -->
<div class="container px-md-3 px-sm-0" >
<!--Grid row-->
<div class=" row wow fadeIn " >
<!--Grid column-->
<!--Grid column-->
</div>
<!--Grid row-->
</div>
<!-- Content -->
</div>
<!-- Mask & flexbox options-->
</div>The general effect
Reference resources
https://blog.csdn.net/qq_45823118/article/details/114907302https://blog.csdn.net/qq_45823118/article/details/114907302HTML_ Insert a video and play it automatically https://blog.csdn.net/weixin_44599931/article/details/106117109
9. Submit Form
On the web , Generally, there will be places for you to input information for verification or retrieval , Such as the search bar or the place where you enter your account and password to log in , When we input data , When you click OK or search , The web page will send the information we input into the input box to the back-end program corresponding to the front-end web page to process your information .
Here we will use the form label , To submit user data .
<form>
<!-- Code segment / Label group -->
</form>
html——form Form submission method submit and button
Form form
Basic code
<!-- Grid column -->
<div class="col-md-9 mb-md-0 mb-5">
<form>
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-md-6">
<div class="md-form mb-0">
<input type="text" id="contact-name" class="form-control">
<label for="contact-name" class=""> Your name </label>
</div>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-6">
<div class="md-form mb-0">
<input type="text" id="contact-email" class="form-control">
<label for="contact-email" class=""> Your email </label>
</div>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-md-12">
<div class="md-form mb-0">
<input type="text" id="contact-Subject" class="form-control">
<label for="contact-Subject" class=""> Your suggestion </label>
</div>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-md-12">
<div class="md-form">
<textarea type="text" id="contact-message" class="form-control md-textarea" rows="3"></textarea>
<label for="contact-message"> Your information </label>
</div>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</form>
<div class="text-center text-md-left">
<a class="btn btn-md" style="background-color: rgb(135, 73, 135); "><strong> Submit </strong> </a>
</div>
</div>10. Bottom design （Footer）
Bootstrap There is no implementation in footer The components of , We use it directly html Language build your own bottom page design
footer Footer at the bottom （5 Kind of ）
Perfect solution HTML in footer Keep the question at the bottom of the page
This part is relatively simple , You don't paste the code
other
Click the navigation window on the right side of the page , You can switch between different web pages ;
Click the summary box in the lower right corner , A new page will open , Skip to this article .
summary
This is based on Bootstrap The framework of static web page , Although I say ,Bootstrap It provides many encapsulated classes that can be called , You don't need to write it yourself css class , But for me, Xiaobai, who is in initial contact with front-end development, I still encounter numerous challenges , For each class The role of is half understood , Only a little bit to learn to understand , I searched a lot of information and references Bootstrap Chinese Manual , Finally put Bootstrap The basic framework of , Plus vscode Automatic completion of 、 Prompt function , Also give web Development has brought great help .
In the actual process , Even if you understand Bootstrap Overall framework , But some concrete realization still tormented me for a long time , Such as floating display or responsive display of pictures , Automatic playback of video 、 Setting of background image , Color 、 Picture layout, etc ; In these areas , I use inline style sheets more , But too much use of inline style sheets is not conducive to code development , Attention should be paid to in the later design and development .
Besides ,Bootstrap Corresponding to different versions, different components may be required to implement different functions , When implementing some newly proposed functions , Such as when folding menus , Since the corresponding components were not introduced at that time , As a result, the effect of the design is not as good as expected , later , After consulting relevant materials , Adding corresponding components can realize the ideal function design module .
Last , This web design makes me understand css and html A deeper understanding of language , To locate 、 overflow 、 Basic actions such as floating , inline 、 Block display is also more familiar ; In the design process , Debug mode is often used , Also basically mastered the basic way of web page development and debugging , Will simply use breakpoints to track errors , Find some obvious mistakes .
however , The above is only the introductory stage of web learning , In the future study , I will pay attention to the neatness of web design 、 Understandability .
The way of web development and learning , The resistance and long , But I will keep learning .
边栏推荐
- EasyUI learn to organize notes
- Unity 贴图自动匹配材质工具 贴图自动添加到材质球工具 材质球匹配贴图工具 Substance Painter制作的贴图自动匹配材质球工具
- Detailed explanation of debezium architecture of debezium synchronization
- 源代码防泄密中的技术区别再哪里
- Talk about SOC startup (VII) uboot startup process III
- 顶级域名有哪些?是如何分类的?
- 18 basic introduction to divider separator component of fleet tutorial (tutorial includes source code)
- Solve the problem that vscode can only open two tabs
- Flet教程之 17 Card卡片组件 基础入门（教程含源码）
- SwiftUI 教程之如何在 2 秒内实现自动滚动功能
猜你喜欢
Hi3516全系统类型烧录教程
【数据聚类】基于多元宇宙优化DBSCAN实现数据聚类分析附matlab代码
zero-shot, one-shot和few-shot
百度数字人度晓晓在线回应网友喊话 应战上海高考英语作文
Fleet tutorial 14 basic introduction to listtile (tutorial includes source code)
In my limited software testing experience, a full-time summary of automation testing experience
How to write test cases for test coupons?
【最短路】ACwing 1127. 香甜的黄油(堆优化的dijsktra或spfa)
HCIA复习整理
![111.网络安全渗透测试—[权限提升篇9]—[Windows 2008 R2内核溢出提权]](/img/2e/da45198bb6fb73749809ba0c4c1fc5.png)
111.网络安全渗透测试—[权限提升篇9]—[Windows 2008 R2内核溢出提权]
随机推荐
[shortest circuit] acwing 1127 Sweet butter (heap optimized dijsktra or SPFA)
百度数字人度晓晓在线回应网友喊话 应战上海高考英语作文
【紋理特征提取】基於matlab局部二值模式LBP圖像紋理特征提取【含Matlab源碼 1931期】
[filter tracking] comparison between EKF and UKF based on MATLAB extended Kalman filter [including Matlab source code 1933]
What is a LAN domain name? How to parse?
SwiftUI 教程之如何在 2 秒内实现自动滚动功能
[data clustering] realize data clustering analysis based on multiverse optimization DBSCAN with matlab code
There are so many factors that imprison you
What development models did you know during the interview? Just read this one
UP Meta—Web3.0世界创新型元宇宙金融协议
Test the foundation of development, and teach you to prepare for a fully functional web platform environment
Various uses of vim are very practical. I learned and summarized them in my work
[shortest circuit] acwing1128 Messenger: Floyd shortest circuit
Completion report of communication software development and Application
【纹理特征提取】基于matlab局部二值模式LBP图像纹理特征提取【含Matlab源码 1931期】
Flet教程之 15 GridView 基础入门（教程含源码）
MATLAB实现Huffman编码译码含GUI界面
Basic introduction to the 16 tabs tab control in the fleet tutorial (the tutorial includes source code)
【滤波跟踪】捷联惯导纯惯导解算matlab实现
相机标定(2): 单目相机标定总结