HTML+CSS+JS web design final course homework web front-end development technology web course design web page planning and design

HTML example web page code, this example is suitable for students who are beginners in HTML. In this example, there are css style settings and div style patterns. This example is more comprehensive and helpful for students to learn. This article will introduce how to practice design by designing a personal website from scratch and converting it into code .

1. Web page introduction

1 Web page introduction : This work is the theme of student personal homepage web design, HTML+CSS layout production, web front-end final assignment, college student web design homework source code, this is a good web page production, the picture is smart, the code is simple student level, very Suitable for beginners to learn to use.

2. 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++ and other arbitrary HTML editing software to run, modify and edit, etc.).

3. Knowledge application : In terms of technology, it mainly applies web page knowledge: Div+CSS, mouse over effects, Table, navigation bar effects, Banner, forms, secondary and tertiary pages, etc., video, audio elements, Flash, and design at the same time Knowledge points required for the Logo (source file).


1. Web page effect

insert image description here
insert image description here
insert image description here
insert image description here

2. Code display

1.HTML code

The code is as follows (example): The following only shows part of the code for reference~

<nav class="navbar navbar-expand-lg navbar-light fill px-lg-0 py-0 px-3">
		<div class="container">
			<h1><a class="navbar-brand" href="index.html"><span class="fa fa-play icon-log" aria-hidden="true"></span>
				专业展会 </a></h1>
			<!-- if logo is image enable this   
					<a class="navbar-brand" href="#index.html">
						<img src="image-path" alt="Your logo" title="Your logo" style="height:35px;" />
					</a> -->
			<button class="navbar-toggler collapsed" type="button" data-toggle="collapse"
				data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
				aria-label="Toggle navigation">
				<!-- <span class="navbar-toggler-icon"></span> -->
				<span class="fa icon-expand fa-bars"></span>
				<span class="fa icon-close fa-times"></span>
			</button>

			<div class="collapse navbar-collapse" id="navbarSupportedContent">
				<ul class="navbar-nav ml-auto">
					<li class="nav-item">
						<a class="nav-link" href="index.html"></a>
					</li>
					<li class="nav-item active">
						<a class="nav-link" href="about.html">关于</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="genre.html">类型</a>
					</li>
					
					<li class="nav-item">
						<a class="nav-link" href="contact.html">接触</a>
					</li>
				</ul>

				<!--/search-right-->
				<!--/search-right-->
				<div class="search-right">
					<a href="#search" class="btn search-hny mr-lg-3 mt-lg-0 mt-4" title="search">搜索 <span
							class="fa fa-search ml-3" aria-hidden="true"></span></a>
					<!-- search popup -->
					<div id="search" class="pop-overlay">
						<div class="popup">
							<form  method="post" class="search-box">
								<input type="search" placeholder="请输入关键字" name="search"
									required="required" autofocus="">
								<button type="submit" class="btn"><span class="fa fa-search"
										aria-hidden="true"></span></button>
							</form>
							<div class="browse-items">
								<h3 class="hny-title two mt-md-5 mt-4">浏览全部:</h3>
								<ul class="search-items">
									<li><a href="genre.html">行动</a></li>
									<li><a href="genre.html">戏剧</a></li>
									<li><a href="genre.html">家庭</a></li>
									<li><a href="genre.html">惊悚</a></li>
									<li><a href="genre.html">喜剧</a></li>
									<li><a href="genre.html">浪漫的</a></li>
									<li><a href="genre.html">电视剧</a></li>
									<li><a href="genre.html">恐怖</a></li>
									<li><a href="genre.html">行动</a></li>
									<li><a href="genre.html">戏剧</a></li>
									<li><a href="genre.html">家庭</a></li>
									<li><a href="genre.html">惊悚</a></li>
									<li><a href="genre.html">喜剧</a></li>
									<li><a href="genre.html">浪漫的</a></li>
									<li><a href="genre.html">电视剧</a></li>
									<li><a href="genre.html">恐怖</a></li>
								</ul>
							</div>
						</div>
						<a class="close" href="#close">×</a>
					</div>
					<!-- /search popup -->
					<!--/search-right-->
				</div>


			</div>
			<!-- toggle switch for light and dark theme -->
			<div class="mobile-position">
				<nav class="navigation">
					<div class="theme-switch-wrapper">
						<label class="theme-switch" for="checkbox">
							<input type="checkbox" id="checkbox">
							<div class="mode-container">
								<i class="gg-sun"></i>
								<i class="gg-moon"></i>
							</div>
						</label>
					</div>
				</nav>
			</div>
			<!-- //toggle switch for light and dark theme -->
		</div>
	</nav>



2. CSS code


body {
    
    
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: left;
  background-color: #fff;
}

[tabindex="-1"]:focus:not(:focus-visible) {
    
    
  outline: 0 !important;
}

hr {
    
    
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    
    
  margin-top: 0;
  margin-bottom: 0.5rem;
}

p {
    
    
  margin-top: 0;
  margin-bottom: 1rem;
}

abbr[title],
abbr[data-original-title] {
    
    
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
  cursor: help;
  border-bottom: 0;
  -webkit-text-decoration-skip-ink: none;
  text-decoration-skip-ink: none;
}

address {
    
    
  margin-bottom: 1rem;
  font-style: normal;
  line-height: inherit;
}

ol,
ul,
dl {
    
    
  margin-top: 0;
  margin-bottom: 1rem;
}

ol ol,
ul ul,
ol ul,
ul ol {
    
    
  margin-bottom: 0;
}

dt {
    
    
  font-weight: 700;
}

dd {
    
    
  margin-bottom: .5rem;
  margin-left: 0;
}

blockquote {
    
    
  margin: 0 0 1rem;
}

b,
strong {
    
    
  font-weight: bolder;
}

small {
    
    
  font-size: 80%;
}

sub,
sup {
    
    
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

sub {
    
    
  bottom: -.25em;
}

sup {
    
    
  top: -.5em;
}

a {
    
    
  color: #df0e62;
  text-decoration: none;
  background-color: transparent;
}

a:hover {
    
    
  color: #df0e62;
  text-decoration: underline;
}

a:not([href]) {
    
    
  color: inherit;
  text-decoration: none;
}

a:not([href]):hover {
    
    
  color: inherit;
  text-decoration: none;
}

pre,
code,
kbd,
samp {
    
    
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 1em;
}

pre {
    
    
  margin-top: 0;
  margin-bottom: 1rem;
  overflow: auto;
}

figure {
    
    
  margin: 0 0 1rem;
}

img {
    
    
  vertical-align: middle;
  border-style: none;
}


3. Personal summary

A set of qualified web pages should include (specifically, it can be determined according to individual requirements)

  1. The page is divided into four parts: the header, the menu navigation bar (preferably pull down), the middle content section, and the footer;
  2. All pages are hyperlinked to each other, and you can go to the third-level page, which consists of 5-10 pages;
  3. The unified layout of the page style is normal, not messy, using Div+Css technology;
  4. The menu is beautiful and eye-catching, and the secondary menu can pop up and jump normally;
  5. There must be JS special effects, such as timing switching and manual switching of picture news;
  6. There are multimedia elements in the page, such as gif, video, music, and the use of form technology;
  7. The page is clean, beautiful, generous, and not the same.
  8. The front-end program of the website must not only be able to present the content required by the user, but also meet the requirements of good layout, beautiful interface, elegant color matching, and various forms of expression.

Four, wonderful recommendation

1. If you see this, please support me 【点赞收藏博文】three times. Your support is the driving force for my creation 【观注作者 |获取更多源码| 优质文章】 .

2. Follow me and take you to learn various front-end plug-ins, 3D cool effects, picture display, text effects, and whole site templates, college graduate graduation HTML templates, final assignment templates, etc.! "There are many front-end developers here, let's join together Discuss front-end Node knowledge and learn from each other!"

3. The above content and technology-related issues can learn and communicate with each other

insert image description here

Guess you like

Origin blog.csdn.net/qq_38513433/article/details/128658124