Near the end of the term, you are still designing your final homework for HTML web pages. Do you feel the teacher's homework requirements are great? The total number of pages required is too much? Can't you start HTML web page homework? No suitable template? And so on. The problems you want to solve are: personal, food, company, sports, cosmetics, logistics, environmental protection, books, wedding dress, military, games, festivals, smoking cessation, movies, photography schools, tourism, e-commerce, pets, electrical appliances, tea, home, hotel, dance, animation, stars, clothing Culture, hometown, flowers, gifts, cars, other web design topics, A + level homework can meet the needs of College Students' web design. Original HTML+CSS+JS page design, web college students' web design homework source code, this is A good cool and responsive web technology company model web design and production, with smart screen, which is very suitable for beginners to learn and use.
Video presentation:
https://www.bilibili.com/video/BV18Q4y1S7Mj?spm_id_from=333.999.0.0Screenshot of web page implementation: get the source code at the end of the article
Website home page
About us
The craftsman concept of automobile manufacturing companies based on humanization also needs to consider the user experience in details
In things and Every contact point of people pursues the perfection of form, but there are strict standards for nuances.
Automobile manufacturing companies are well aware of the user experience, take the five senses of consumers as the five senses of craftsmen, think what you think and observe what you don't.
In the process of strict quality control, the five senses of cultivation are keen.
News information:
What is pseudo static? What is the role of pseudo statics? Which is good? Pseudo static is relative to real static. Real static will generate an html or htm suffix file. Visitors can access the real static page, while pseudo static does not generate entity static page file, but only static pages such as. html
Product display:
Customer case:
contact us:
Project organization structure:
> ## main source code display:
index.html
<head>
scalable=0, minimal-ui">
<meta name="generator" content="dede58 5.3.9" data-variable="" />
<title>HTML5 Website template of high-end atmospheric responsive network technology company - </title>
<link rel="stylesheet" href="css/3af1bf1fa0061831.css">
</head>
<body>
<nav class="navbar navbar-default met-nav " role="navigation">
<div class="container">
<div class="row">
<div class="navbar-header">
<button type="button" class="navbar-toggle hamburger collapsed" data-target="#example-navbar-default-collapse" data-toggle="collapse">
<span class="sr-only">
Toggle navigation
</span>
<span class="hamburger-bar">
</span>
</button>
</div>
</a>
</div>
<div class="collapse navbar-collapse navbar-collapse-toolbar" id="example-navbar-default-collapse">
<ul class="nav navbar-nav navbar-right navlist">
<li>
<a href="index.html" title="Website home page" class="link">
Website home page
</a>
</li>
<li class="dropdown margin-left-20">
<a class="dropdown-toggle link " data-toggle="dropdown" data-hover="dropdown" href="about.html" aria-expanded="false" role="button" title="About us">
About us
<i class="fa fa-angle-down small">
</i>
</a>
<ul class="dropdown-menu dropdown-menu-right bullet" role="menu">
<li>
<a href="gaikuang.html" title="Company profile">
Company profile
</a>
</li>
<li>
<a href="wenhua.html" title="corporate culture">
corporate culture
</a>
</li>
<li>
<a href="fankui.html" title="Online feedback">
Online feedback
</a>
</li>
</ul>
</li>
<li class="dropdown margin-left-20">
<a class="dropdown-toggle link " data-toggle="dropdown" data-hover="dropdown" href="news.html" aria-expanded="false" role="button" title="News information">
News information
<i class="fa fa-angle-down small">
</i>
</a>
<ul class="dropdown-menu dropdown-menu-right bullet" role="menu">
<li>
<a href="#"title =" optimization promotion ">
Optimization promotion
</a>
</li>
<li>
<a href="#"title =" company dynamics ">
Company dynamics
</a>
</li>
<li>
<a href="#"title =" site building experience ">
Station building experience
</a>
</li>
</ul>
</li>
<li class="dropdown margin-left-20">
<a class="dropdown-toggle link " data-toggle="dropdown" data-hover="dropdown" href="product.html" aria-expanded="false" role="button" title="Product display">
Product display
<i class="fa fa-angle-down small">
</i>
</a>
<ul class="dropdown-menu dropdown-menu-right bullet" role="menu">
<li>
<a href="#"title =" marketing website ">
Marketing website
</a>
</li>
<li>
<a href="#"title =" responsive website ">
Responsive website
</a>
</li>
<li>
<a href="#"title =" e-commerce website ">
E-commerce website
</a>
</li>
<li>
<a href="#"title =" foreign trade website ">
Foreign trade website
</a>
</li>
<li>
<a href="#"title =" enterprise website ">
Enterprise website
</a>
</li>
</ul>
</li>
<li class="margin-left-20">
<a href="case.html" title="Customer case" class="link ">
Customer case
</a>
</li>
<li class="margin-left-20">
<a href="contact.html" title="contact us" class="link ">
contact us
</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
<div class="met-banner">
<div class="carousel slide" id="met-banner-slide" data-ride="carousel">
<ol class="carousel-indicators carousel-indicators-fall">
<li class="active" data-slide-to="0" data-target="#met-banner-slide">
</li>
<li class="" data-slide-to="1" data-target="#met-banner-slide">
</li>
</ol>
<div class="carousel-inner carousel-height" role="listbox">
<div class="item active">
<picture>
<source srcset="images/1470992331.jpg" media="(min-width: 768px)" />
<img class="cover-image overlay-scale" srcset="images/1470992331.jpg" alt="7 Focus on website construction in" />
</picture>
<div class="carousel-caption p-5">
<h3 class="animation-slide-top animation-delay-300" style="color:#ffffff;background:#1e8bc3;">
7 Focus on website construction in
</h3>
<p class="animation-slide-bottom animation-delay-500" style="color:#ffffff">
Focus on design experience and professional solutions
</p>
<div class='btn animation-slide-bottom animation-delay-700'>
<a style="border:2px solid #ffffff;color:#ffffff" href="#"title="7 years of focus, website construction "target = '_self' >
MORE>>
</a>
</div>
</div>
</div>
<div class="item ">
<picture>
<source srcset="images/1470991881.jpg" media="(min-width: 768px)" />
<img class="cover-image overlay-scale" srcset="images/1470991881.jpg" alt="Preconceived ideas, layout the future" />
</picture>
<div class="carousel-caption p-1">
<h3 class="animation-slide-top animation-delay-300" style="color:#ffffff;background:#1e8bc3;">
Preconceived ideas, layout the future
</h3>
<p class="animation-slide-bottom animation-delay-500" style="color:#ffffff">
Responsive layout, intelligent identification of a variety of terminal devices
</p>
<div class='btn animation-slide-bottom animation-delay-700'>
<a style="border:2px solid #ffffff;color:#ffffff" href="#"title =" preconceived ideas, layout the future "target = '_ self'>
MORE>>
</a>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#met-banner-slide" role="button" data-slide="prev">
<span class="icon wb-chevron-left" aria-hidden="true">
</span>
<span class="sr-only">
Previous
</span>
</a>
<a class="right carousel-control" href="#met-banner-slide" role="button" data-slide="next">
<span class="icon wb-chevron-right" aria-hidden="true">
</span>
<span class="sr-only">
Next
</span>
</a>
</div>
</div>
<div class="met-index-service met-index-body">
<div class="container">
<h3 class="invisible" data-plugin="appear" data-animate="slide-top" data-repeat="false">
Focus on website construction for seven years
</h3>
<p class="desc invisible" data-plugin="appear" data-animate="fade" data-repeat="false">
What do we do?
</p>
<ul class="blocks blocks-2">
<li class="invisible" data-plugin="appear" data-animate="slide-bottom" data-repeat="false">
<i class="icon fa-laptop" aria-hidden="true">
</i>
<h4>
High end website customization
</h4>
<p>
Customized design of enterprise high-end website
<br /> Highlight brand image
</p>
</li>
<li class="invisible" data-plugin="appear" data-animate="slide-bottom" data-repeat="false">
<i class="icon fa-code" aria-hidden="true">
</i>
<h4>
System software development
</h4>
<p>
"Refuse mediocrity and only produce fine products"
<br/> Capture requirements, analyze and design
</p>
</li>
<li class="invisible" data-plugin="appear" data-animate="slide-bottom" data-repeat="false">
<i class="icon fa-group" aria-hidden="true">
</i>
<h4>
Marketing planning and promotion
</h4>
<p>
"Professional team thinking ahead" Promote your brand and products in an all-round way
</p>
</li>
<li class="invisible" data-plugin="appear" data-animate="slide-bottom" data-repeat="false">
<i class="icon fa-refresh" aria-hidden="true">
</i>
<h4>
Cloud server operation and maintenance
</h4>
<p>
"Quick response and considerate service" Take care of the healthy growth of your enterprise website
</p>
</li>
</ul>
</div>
</div>
<div class="met-index-product met-index-body">
<div class="container">
<h3 class="invisible" data-plugin="appear" data-animate="slide-top" data-repeat="false">
Successful cases
</h3>
<p class="desc invisible" data-plugin="appear" data-animate="fade" data-repeat="false">
The best e-commerce platform and related system service provider in China
</p>
<ul class="nav nav-tabs invisible" role="tablist" data-plugin="appear" data-animate="fade" data-repeat="false">
<li class="active" role="presentation" data-allnum='8'>
<a href="#Productlist "title =" all "aria controls =" productlist "aria expanded =" true "role =" tab "data filter =" * ">
whole
</a>
</li>
<li role="presentation">
<a href="#Productlist "title =" marketing website "aria controls =" productlist "aria expanded =" true "role =" tab "data filter =" list_7 ">
Marketing website
</a>
</li>
<li role="presentation">
<a href="#Productlist "title =" responsive website "aria controls =" productlist "aria expanded =" true "role =" tab "data filter =" list_ 8">
Responsive website
</a>
</li>
<li role="presentation">
<a href="#Productlist "title =" e-commerce website "aria controls =" productlist "aria expanded =" true "role =" tab "data filter =" list_107 ">
E-commerce website
</a>
</li>
<li role="presentation">
<a href="#Productlist "title =" foreign trade websites "aria controls =" productlist "aria expanded =" true "role =" tab "data filter =" list_ 9">
Foreign trade website
</a>
</li>
<li role="presentation">
<a href="#Productlist "title =" enterprise website "aria controls =" productlist "aria expanded =" true "role =" tab "data filter =" list_12 ">
Enterprise website
</a>
</li>
</ul>
<ul class="blocks no-space blocks-md-4 blocks-sm-3 blocks-xs-2" id="productlist" data-filterable="true">
<li data-type="list_7">
<div class="widget widget-shadow">
<div class="img-holder">
<img data-original="picture/1-1609231g6403r.jpg" alt="Tour company" src="picture/1-1609231g6403r.jpg">
<a href="caseshow.html" title="Tour company" target='_self'>
<div class="overlay">
<div class="inner">
<ul class="social">
The overall effect highlights the sense of fashion with the visual tension of the large background picture...
</ul>
</div>
</div>
</a>
</div>
<div class="content-holder hvr-sweep-to-bottom">
<h4>
Tour company
</h4>
</div>
</div>
</li>
</html>
style.css
html {
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%
}
body {
margin: 0
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
display: block
}
audio,
canvas,
progress,
video {
display: inline-block;
vertical-align: baseline
}
audio:not([controls]) {
display: none;
height: 0
}
[hidden],
template {
display: none
}
dfn {
font-style: italic
}
h1 {
margin: .67em 0;
font-size: 2em
}
sub,
sup {
position: relative;
font-size: 75%;
line-height: 0;
vertical-align: baseline
}
Note: some works come from network collection, infringement and deletion
Get the complete source code:
Everyone likes, collects, pays attention to, comments and views 👇🏻👇🏻👇🏻 WeChat official account gets contact 👇🏻👇🏻👇🏻
