Excellent column recommendationGet contact at the end of the article
About the author: A technical blogger who loves to turn logical thinking into code
Author’s homepage: [Homepage–? Get more high-quality source code]
Web front-end major homework: 【Practice cases of high-quality project projects (1000 sets) 】
Programmer’s interesting confession method: 【HTML Tanabata Valentine’s Day Confession Web Page Production (110 sets) 】
Super cool Echarts large-screen visualization source code: [ Echarts large-screen display big data platform visualization (150 sets) 】
HTML + CSS + JS example code: [?HTML + CSS + JS example code (cool special effect web page code) is being updated…]
Free and practical WEB front-end learning guide: [web front-end zero basic to advanced learning video tutorial 120G dry goods sharing]
About the author: Successively served as R&D engineer, technical team leader, and teaching director; won the top ten blog stars of CSDN twice in 2016 and 2020. Ten years of cold ice, it is difficult to cool the blood; many years have passed, and after changes, things have changed. However, the exploration and pursuit of technology never stops. Insist on originality, love to share, keep the original intention, carry on the past and open up the future!
Article directory
- 1. ?Website title
- 2. Website description
- 3. Introduction to the website
- 4. Website Demo
- 5. Website code
-
- HTML structure code
- 6. How to make learning no longer blind
- 7. More dry goods
1. ?Website title
The design and production of the company’s official website, corporate official website, hotel official website, and other websites.
2. Website description
? The web page includes: Div + CSS, mouse over effects, Table, navigation bar effects, banner, form, secondary and tertiary pages, etc., video and audio elements, and a logo (source file) is designed at the same time, the basic final assignment All required knowledge points are covered.
A high-quality web design should include (specifically, it can be determined according to individual requirements)
- The page is divided into four parts: the header, the menu navigation bar (preferably pull down), the middle content section, and the footer.
- All pages are hyperlinked to each other, leading to three-level pages, consisting of 5-10 pages.
- The unified layout of the page style is normal, not messy, using Div + Css technology.
- The menu is beautiful and eye-catching, and the secondary menu can pop up and jump normally.
- There must be JS special effects, such as timing switching and manual switching of picture carousels.
- There are multimedia elements in the page, such as gif, video, music, and the use of form technology.
- The page is clean, beautiful, generous, and not the same. .
- Not only must it be able to present the content requested by users, but it must also meet the requirements of good layout, beautiful interface, elegant color matching, and various forms of expression.
3. Website introduction
Website layout: It is planned to adopt the current mainstream floating webpage layout structure that is compatible with major mainstream browsers and has stable display effects.
Web site program: It is planned to use the latest web programming language HTML5 + CSS3 + JS programming language to complete the functional design of the website. And ensure that the website code is compatible with all mainstream browsers currently on the market, so that the website can be seen immediately after opening.
Website materials: plan to collect good-looking picture materials from various platforms, carefully select pictures suitable for the style of the webpage, and then use PS to make pictures suitable for the size of the webpage.
Website files: The types of website system files include: html web page structure files, css web page style files, js web page special effect files, images web page picture files;
Webpage editing: The code of the webpage works is simple, and any HTML editing software can be used (such as: Dreamweaver, HBuilder, Vscode, Sublime, Webstorm, Text, Notepad + + , etc. Any html editing software for operation, modification and editing).
in:
(1) The html file contains: index.html is the home page, and other html is the second-level page;
(2) The css file contains: all css page styles, text scrolling, image zooming, etc.;
(3) The js file includes: js to achieve dynamic carousel effects, form submission, click events, etc. (js code is used in individual web pages).
4. Website demo
5. Website code
HTML structure code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Fitness</title>
<link rel="logo icon" href="http://www.ylcp.shop/files/files/1653875876627/logo.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="http://www.ylcp.shop/files/files/css/style.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
//3
function hb(hbtn,cssname,offset){<!-- -->
var a,b,c,d;
d=$('.hbtn').offset().top; //The distance of the element relative to the window
console. log(d)
a=eval(d + offset);
b=$(window).scrollTop(); //Monitor the scrolled distance of the window;
c=$(window).height(); //The height of the browser window
if(b + c>d + 200){<!-- -->
$(('.hbtn')).addClass((cssname));
}
}
\t\t
$(document).ready(function(e) {<!-- -->
$(window).scroll(function(){<!-- -->
hb(".hbtn",'hbt',500);
}
)
});
\t\t\t
//4
function gdjz(box4,cssname,offset){<!-- -->
var a,b,c,d;
d=$('.box4').offset().top; //The distance of the element relative to the window
console. log(d)
a=eval(d + offset);
b=$(window).scrollTop(); //Monitor the scrolled distance of the window;
c=$(window).height(); //The height of the browser window
if(b + c>d){<!-- -->
$(('.box4')).addClass((cssname));
}
}
\t\t
$(document).ready(function(e) {<!-- -->
$(window).scroll(function(){<!-- -->
gdjz(".box4",'xz',500);
}
)
});
\t\t\t
//5
function b5tn(b5lf,cssname,offset){<!-- -->
var a,b,c,d;
d=$('.b5lf').offset().top; //The distance of the element relative to the window
console. log(d)
a=eval(d + offset);
b=$(window).scrollTop(); //Monitor the scrolled distance of the window;
c=$(window).height(); //The height of the browser window
if(b + c>d + 200){<!-- -->
$(('.b5lf')).addClass((cssname));
}
}
\t\t
$(document).ready(function(e) {<!-- -->
$(window).scroll(function(){<!-- -->
b5tn(".b5lf",'b5',500);
}
)
});
\t\t\t
//5-1
function b5tn2(b5rt,cssname,offset){<!-- -->
var a,b,c,d;
d=$('.b5rt>img').offset().top; //The distance of the element relative to the window
console. log(d)
a=eval(d + offset);
b=$(window).scrollTop(); //Monitor the scrolled distance of the window;
c=$(window).height(); //The height of the browser window
if(b + c>d + 200){<!-- -->
$(('.b5rt>img')).addClass((cssname));
}
}
\t\t
$(document).ready(function(e) {<!-- -->
$(window).scroll(function(){<!-- -->
b5tn2(".b5rt>img",'b5img',500);
}
)
});
\t\t
//6
function b6tn(hbtn6,cssname,offset){<!-- -->
var a,b,c,d;
d=$('.hbtn6').offset().top; //The distance of the element relative to the window
console. log(d)
a=eval(d + offset);
b=$(window).scrollTop(); //Monitor the scrolled distance of the window;
c=$(window).height(); //The height of the browser window
if(b + c>d + 200){<!-- -->
$(('.hbtn6')).addClass((cssname));
}
}
\t\t
$(document).ready(function(e) {<!-- -->
$(window).scroll(function(){<!-- -->
b6tn(".hbtn6",'hb6',500);
}
)
});
//7
function b7dh(box7,cssname,offset){<!-- -->
var a,b,c,d;
d=$('.box7').offset().top; //The distance of the element relative to the window
console. log(d)
a=eval(d + offset);
b=$(window).scrollTop(); //Monitor the scrolled distance of the window;
c=$(window).height(); //The height of the browser window
if(b + c>d){<!-- -->
$(('.box7')).addClass((cssname));
}
}
\t\t
$(document).ready(function(e) {<!-- -->
$(window).scroll(function(){<!-- -->
b7dh(".box7",'boxdh',500);
}
)
});
</script>
</head>
<body>
<!--Navigation bar-->
<nav class="navbar navbar-default navbar-fixed-top" style="background-color: white;box-shadow: 0px 15px 10px -15px gray;padding: 20px 0px;z-index:5;">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed " data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="picture/logo.png" style="width: 50px; height=50px; margin-top: -20px; margin-left: 80% ;"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right ">
<li><a href="">Home</a></li>
<li><a href="about-us.html">About Us</a></li>
<li class="dropdown dph">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Service Items<span class="caret" ></span></a>
<ul class="dropdown-menu dmx">
<li><a href="nutrition.html">Personalized Nutrition Plan</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Personalized Workout Plan</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Personal Routine</a></li>
\t\t </ul>
\t\t </li>
<li><a href="activity.html">Activity events</a></li>
<li><a href="fitnessTrainer.html">Fitness Trainer</a></li>
<li><a href="service.html">Service environment</a></li>
<li><a href="case.html">Slimming case</a></li>
<li><a href="#">Contact us</a></li>
\t\t </ul>
</div>
</div>
</nav>
\t\t
<!--Background image carousel-->
<div id="carousel-example-generic" class="carousel slide tu" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
</ol>
\t\t
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="picture/lunbo1.jpg" alt="...">
<div class="carousel-caption tu2">
<img src="picture/lunbo3.png">
</div>
</div>
<div class="item">
<img src="picture/lunbo2.jpg" alt="...">
<div class="carousel-caption tu3">
<img src="picture/lunbo3.png">
</div>
</div>
\t\t
</div>
\t\t
<!-- Controls -->
<a class="left carousel-control leftbt" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control rightbt" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!--The third part-->
<section>
<div class="screen1">
<div id="box3" class="box1">
<div class="hbtn">
<h1>Why people need a Health Coach</h1>
<h4>How to lose weight</h4>
<p><img src="picture/box3tu1.png"></p>
</div>
</div>
</div>
<!--Part Four-->
<div class="screen2">
<div class="box4">
<div class="row row1">
<div class="col-xs-6 col-md-3 col1 ">
<p id="boxtu" class="dtu"><img src="picture/box41.png"></p>
<h4>Exercise to lose weight</h4>
<p class="txt">Make good use of the 4 weight loss opportunities a day, and you can lose weight at any time.</p>
</div>
<div class="col-xs-6 col-md-3 col1">
<p id="boxtu" class="dtu"><img src="picture/box42.png"></p>
<h4>Diet to lose weight</h4>
<p class="txt">How many calories an adult should consume every day to be healthy.</p>
</div>
<div class="col-xs-6 col-md-3 col1">
<p id="boxtu" class="dtu"><img src="picture/box43.png"></p>
<h4>Chinese medicine for weight loss</h4>
<p class="txt">Traditional Chinese medicine weight loss massage acupoints to control appetite and slim down.</p>
</div>
<div class="col-xs-6 col-md-3 col1">
<p id="boxtu" class="dtu"><img src="picture/box44.png"></p>
<h4>Weight loss diet</h4>
<p class="txt">What fruits to eat to lose weight, 7 kinds of fruits are delicious and not fat.</p>
</div>
</div>
</div>
</div>
<!--Part Five-->
<div class="box5">
<div class="row">
<div class="col-sm-6 col-md-6 b5bt">
<div class="b5lf">
<p class="b5txt1">Visit my Shop</p>
<p class="b5txt2">With our personal fitness program already in 90 days, you will see a totally different girl in the mirror!</p>
<a href="#" class="b5txt3">
\t\t\t \t\t\tLearn more
<span class="glyphicon glyphicon-arrow-right"></span>
</a>
</div>
</div>
<div class="col-sm-6 col-md-6 b5bt">
<div class="b5rt">
<img src="picture/box52.png">
</div>
</div>
</div>
</div>
\t\t\t\t
<!--Part Six-->
<div class="screen6">
<div id="box6" class="box61">
<div class="hbtn6">
<h1>News and Articles</h1>
<h4>Event Event</h4>
<p><img src="picture/box3tu1.png"></p>
</div>
</div>
<div id="bx6" class="container">
<div class="row bxrow">
<div class="col-xs-6 col-sm-3 colborder">
<div id="ig1" class="ig">
<img src="picture/box61.jpeg">
</div>
<a href="#">
<div id="igx1" class="igx">
<p class="igtxt1">
Ginger is more than a simple food
\t\t\t\t \t\t</p>
<p class="igtxt2">
08:00 - 09:00 am
\t\t\t\t \t\t\t<br>
1190 91st Ocean Ct, Marathon, FL, 33050
\t\t\t\t \t\t</p>
</div>
</a>
</div>
<div class="col-xs-6 col-sm-3 colborder">
<div id="ig2" class="ig">
<img src="picture/box62.jpeg">
</div>
<a href="#">
<div id="igx1" class="igx">
<p class="igtxt1">
cycling healthy lifestyle
\t\t\t\t \t\t</p>
<p class="igtxt2">
08:00 - 09:00 am
\t\t\t\t \t\t\t<br>
311 N Kenton St, Reynolds, IN, 47980
\t\t\t\t \t\t</p>
</div>
</a>
</div>
\t\t\t\t
<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-xs-block"></div>
\t\t\t\t
<div class="col-xs-6 col-sm-3 colborder">
<div id="ig3" class="ig">
<img src="picture/box63.jpeg">
</div>
<a href="#">
<div id="igx1" class="igx">
<p class="igtxt1">
International Yoga Festival "Open Air Asana"
\t\t\t\t \t\t</p>
<p class="igtxt2">
08:00 - 09:00 am
\t\t\t\t \t\t\t<br>
108 Cherry Dr, Moyock, NC, 27958
\t\t\t\t \t\t</p>
</div>
</a>
\t\t\t\t \t
</div>
<div class="col-xs-6 col-sm-3 colborder">
<div id="ig4" class="ig">
<img src="picture/box64.jpeg">
</div>
<a href="#">
<div id="igx1" class="igx">
<p class="igtxt1">
WNHF-Pro-2020 Competition
\t\t\t\t \t\t</p>
<p class="igtxt2">
08:00 - 09:00 am
\t\t\t\t \t\t\t<br>
1190 91st Ocean Ct, Marathon, FL, 33050
\t\t\t\t \t\t</p>
</div>
</a>
</div>
<div class="col-xs-6 col-sm-3 colborder">
<div id="ig5" class="ig">
<img src="picture/box65.jpeg">
</div>
<a href="#">
<div id="igx1" class="igx">
<p class="igtxt1">
USBF Occupational Health Coach Competition
\t\t\t\t \t\t</p>
<p class="igtxt2">
08:00 - 09:00 am
\t\t\t\t \t\t\t<br>
311 N Kenton St, Reynolds, IN, 47980
\t\t\t\t \t\t</p>
</div>
</a>
</div>
<div class="col-xs-6 col-sm-3 colborder">
<div id="ig6" class="ig">
<img src="picture/box62.jpeg">
</div>
<a href="#">
<div id="igx1" class="igx">
<p class="igtxt1">
Natural Pro-Occupational Health Coach Competition
\t\t\t\t \t\t</p>
<p class="igtxt2">
08:00 - 09:00 am
\t\t\t\t \t\t\t<br>
3701 170th St SW, Lynnwood, WA, 98037
\t\t\t\t \t\t</p>
</div>
</a>
</div>
</div>
</div>
\t\t\t
</div>
\t\t\t
\t\t
<!--The content below the sixth part-->
\t\t
\t\t
<!--The content of the seventh part-->
<div class="screen7">
<div class="box7">
<div class="b7img"><img src="picture/box72.png"></div>
<div class="b7txt1">Healthy Eating and Nutrition</div>
<div class="b7txt2">Pilot Light is a nonprofit organization directly resulting from the donated time and</div>
<div class="b7txt3">efforts of so many amazing individuals.</div>
<div class="b7txt4"><a href="#">Learn more</a><span><img src="picture/box73.png" style="width: 20px;"></span>< /div>
</div>
</div>
\t\t
\t\t
<!--The content of the eighth part-->
<!--<div class="screen8">-->
<div class="box8">
<div class="row">
<div class="col-sm-6 col-md-4 b5bt">
<div class="b8lf">
<img src="picture/box82.png" class="img-responsive">
</div>
</div>
<div class="col-sm-6 col-md-8 b5bt">
<div class="b8rt">
<div class="do-title-body">
<div class="do-title-body">
<div class="title">
<p class="b8txt1">
<span style="font-size: 18px;">Customer Testimonials</span>
\t\t\t\t \t\t\t\t\t</p>
<p class="b8txt2">
<span style="font-size: 14px;">
The cultural fixation on thinness for women is not an obsession with female beauty, but an obsession with female obedience. Find the right fit by searching all the latest weight loss products
the right product for you. We've reviewed the top 5 weight loss products online so you can choose which one is right for you.
</span>
\t\t\t\t \t\t\t\t\t</p>
<p class="b8txt3">
<span style="color: rgb(116,192,0);font-size: 14px;">- Dameyers lost 80 lbs and 4 sizes</span>
\t\t\t\t \t\t\t\t\t</p>
<p class="b8img">
<img src="picture/box83.png">
\t\t\t\t \t\t\t\t\t</p>
</div>
</div>
</div>
</div>
</div>
</div>
\t\t\t\t
</div>
<!--</div>-->
\t\t
<!--The content of the ninth part-->
<div class="screen9">
<div class="box9">
<div class="b9txt1">
<strong>Online appointment</strong>
</div>
<div class="b9txt2">
<strong>Online booking</strong>
</div>
<div class="do-form-group form-input do-form-group do-form-item">
<input type="text" class="form-control1 " name="name" placeholder="Please fill in your name">
</div>
\t\t\t\t
<div class="sex">
<input type="radio" name="sex" value="male" class="k1">
<span class="nan">Mr.</span>
<input type="radio" name="sex" value="female" class="k2">
<span class="nv">Ms</span>
</div>
\t\t\t\t
<div class="do-form-group form-input do-form-group do-form-item">
<input type="text" class="form-control2 " name="name" placeholder="Please enter the 11-digit mobile phone number">
</div>
\t\t\t\t
<div class="sel">
<select name="address" class="prov form-control3">
<!--The one selected by default uses selected="selected"-->
<option value="1" selected="selected" class="opttxt">Beijing</option>
<option value="2" class="opttxt">Maoming</option>
<option value="3" class="opttxt">Yangjiang</option>
<option value="1" class="opttxt">Jieyang</option>
<option value="1" class="opttxt">Qingyuan</option>
<option value="2" class="opttxt">Maoming</option>
<option value="3" class="opttxt">Yangjiang</option>
<option value="1" class="opttxt">Jieyang</option>
<option value="1" class="opttxt">Qingyuan</option>
<!--<option value="1" selected="selected" class="opttxt">Beijing</option>-->
<option value="2" class="opttxt">Maoming</option>
<option value="3" class="opttxt">Yangjiang</option>
<option value="1" class="opttxt">Jieyang</option>
<option value="1" class="opttxt">Qingyuan</option>
<option value="2" class="opttxt">Maoming</option>
<option value="3" class="opttxt">Yangjiang</option>
<option value="1" class="opttxt">Jieyang</option>
<option value="1" class="opttxt">Qingyuan</option>
<!--<option value="1" selected="selected" class="opttxt">Beijing</option>-->
<option value="2" class="opttxt">Maoming</option>
<option value="3" class="opttxt">Yangjiang</option>
<option value="1" class="opttxt">Jieyang</option>
<option value="1" class="opttxt">Qingyuan</option>
<option value="2" class="opttxt">Maoming</option>
<option value="3" class="opttxt">Yangjiang</option>
<option value="1" class="opttxt">Jieyang</option>
<option value="1" class="opttxt">Qingyuan</option>
</select>
\t\t\t\t
<select name="address" class="prov2 form-control3">
<!--The one selected by default uses selected="selected"-->
<option value="1" selected="selected" class="opttxt">Dongcheng District</option>
<option value="2" class="opttxt">Xicheng District</option>
<option value="3" class="opttxt">Chongwen District</option>
<option value="1" class="opttxt">Xuanwu District</option>
<option value="1" class="opttxt">Chaoyang District</option>
<option value="2" class="opttxt">Fengtai District</option>
<option value="3" class="opttxt">Shijingshan District</option>
<option value="1" class="opttxt">Haidian District</option>
<option value="1" class="opttxt">Mentougou District</option>
</select>
</div>
\t\t\t\t
<div class="sel2">
\t\t\t\t\t
<select name="address" class="prov3">
<!--The one selected by default uses selected="selected"-->
<option value="1" selected="selected" class="opttxt">Please select an item</option>
<option value="2" class="opttxt">Nutrition recipes</option>
<option value="3" class="opttxt">Sports Yoga</option>
<option value="1" class="opttxt">Fat loss and detoxification</option>
<option value="1" class="opttxt">Obesity hazards</option>
</select>
</div>
\t\t\t\t
<div class="seldate">
<input type="date" placeholder="your appointment time" class="prov3 timepicker">
</div>
\t\t\t\t
<!--popup box-->
<div class="seldate">
<a tabindex="0" class="btn btn-lg prov3 timepicker" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?" style="border: 1px solid white;color: white;">submit</a>
</div>
\t\t\t\t
</div>
</div>
\t\t
\t\t
\t\t
<!--Bottom content-->
<div class="footer">
<p class="foottxt">Fitness Ltd.</p>
<div class="row foottxt2">
<div class="col-md-3 num">Address: No. 666, Website District, Domain Name City, Internet Province, China</div>
<div class="col-md-3 num">Tel: 010-00000000</div>
<div class="col-md-3 num">Mobile phone: 100-0000-0000</div>
<div class="col-md-3 num">Email: [email protected]</div>
</div>
\t\t\t
<p class="foottu">
<a href="#"><img src="picture/icon.png"></a>
\t\t\t</p>
\t\t\t
\t\t\t
</div>
\t\t
<!--Back to top-->
<div id="top">
<a href="#" class="toptxt">
<span class="glyphicon glyphicon-chevron-up"></span>
</a>
</div>
\t\t
</section>
</body>
</html>
6. How to make learning no longer blind
First, learn with goals, whether reading books, newspapers or various offline activities.
First of all, you must clarify what your learning goals are, what problems you want to solve, and what goals you want to achieve.
Second, learning should establish a personal knowledge system
Knowledge is endless, and books are vast. When we wander in it to our heart’s content, we must not be drowned by the sea, because we have no self. In the process of learning, we will find that every knowledge point has its boundaries and background, we must be good at summarizing knowledge
Third, use what you have learned
Sometimes, we feel that we have learned a lot of dry goods in a day, so we must connect these knowledge points with actual work and life. Knowledge and practice are closely related to each other. It is a good thing to love learning, but only those who can learn are valuable.
7. More dry goods
1. If my blog is helpful to you, if you like my blog content, Please "Like" "Comment" "Favorite" One click and three links!
2. 【?Follow me | Get more source code | High-quality articles】 Take you to learn various front-end plug-ins, 3D cool effects, Picture display, text effects, and templates for the whole site, HTML templates for college graduates, final homework templates, etc.!
3.
Questions related to the above content technology? Welcome to exchange and learn together?
