Web front-end homework - pet house (html+css+javascript)

🌩️ Wonderful column recommendation👇🏻👇🏻👇🏻
💂 Author homepage: [Enter the homepage—🚀Get more source code]
🎓 web front-end final homework: [📚HTML5 webpage final assignment (1000 sets) ]
🧡 Interesting confessions for programmers: [💌HTML Tanabata Valentine's Day Confession Web Page Production (110 Sets) ]

2. 📚 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 a stable display effect.

📓Website programming: 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 on the market, and the effect of seeing the website immediately after opening it has been achieved.

📘Website materials: We plan to collect good-looking picture materials from various platforms, and carefully select pictures that are suitable for the style of the web page, and then use PS to make pictures suitable for the size of the web page.

📒Website files: The types of website system files include: html web page structure file, css web page style file, js web page special effect file, images web page picture file;

📙Webpage editing: The code of the webpage works is simple, and any HTML editing software (such as Dreamweaver, HBuilder, Vscode, Sublime, Webstorm, Text, Notepad++, etc.) can be used to run, modify and edit.
in:
(1) The 📜html file contains: index.html is the home page, and other html are secondary pages;
(2) 📑 css files include: css all page styles, text scrolling, image enlargement, etc.;
(3) 📄 js files include: js implements dynamic carousel effects, form submission, click events, etc. (js code is used in individual web pages).

3. 🔗 website effect

▶️1. Video demonstration

U14JP-Pet website with member login form verification function (7 pages)

🧩 2. Picture demo







4. 💒 website code

🧱HTML structure code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>pet home</title>
<link href="css/public.css" rel="stylesheet" type="text/css" />
<link href="css/index.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="js/denglu.js"></script>
</head>

<body>
<!-----Header start------->
<div class="Header">
<div class="top">
<a href="index.html"><img  src="images/logo.jpg" /></a> 
</div>
<!---nav start---->
<div class="daohang">
<div id="nav">
<ul>
<li><a href="index.html">front page</a></li>
<li><a href="about.html">About pets</a></li>
<li><a href="chongwu.html">pet cat and dog</a></li>
<li><a href="news.html">pet news</a></li>
<li><a href="lianxi.html">contact us</a></li>
<li><a href="denglu.html">Member Login</a></li>
<li><a href="zhuce.html">Sign Up</a></li>
</ul>
</div>
</div>
<!---nav Finish---->
<!-----banner------->
<div class="ban"><img src="images/ban.jpg" /></div>
</div>
<!-----Header Finish------->

<!-----main start------->
<div class="main">
<div class="left">
<div class="title">
<p>Member login</p>
<p>Member Login</p>
</div>
<div class="denglu">
<div class="delk">
<div class="tit">Welcome member login</div>
<form method="post" action="">
<div class="one">
<label for="username">username:</label>
<input type="text" id="username" class="a1" />
</div>
<div class="one">
<label for="passwowd">password:</label>
<input type="password" id="password" class="a1" />
</div>

<div class="two">
<input type="submit" class="btn" id="send" value="submit" />
<input type="reset" class="btn" id="res" value="reset" />
</div>
</form>
</div>
<img src="images/huys.png" />
</div>
</div>
<div class="right">
<div class="box1">
<div class="wen">
<a href="about.html"><h1>About pets</h1></a>
<p>Pets used to refer only to animals kept by people to eliminate loneliness or for entertainment purposes. Pets are now defined as animals and plants kept for non-economic purposes. Pets are animals and plants kept for spiritual purposes. Generally, they are kept for the purpose of eliminating loneliness or for entertainment. In the past, pets were generally mammals or birds, because these animals have relatively developed brains and are easy to communicate with people. Today, in addition to the well-known living pets, there are many virtual pets.
</p>
</div>
<img src="images/ri01.jpg" />
</div>
<div class="box2">
<img src="images/ri02.jpg" />
<div class="wen">
<a href="chongwu.html"><h1>pet cat and dog</h1></a>
<p>Pets are man's most loyal friends, they will accompany you and protect you until death. Dogs are very plastic animals. Through scientific and reasonable training, it is possible to become a popular family member.

 <p>Pet cats are not very active, and don't mind pets snubbing their children, because cats often like to be alone. Many people love cats, especially little girls. The cat's body is fluffy and its meow is gentle, so it is more comfortable to keep a cat.</p>
</p>
</div>
</div>

</div>

</div>

<!-----main Finish------->
<!-----Footer start------->
<div class="Footer">
<div class=" daoh">
Copyright @ 2000-2019 pet home All Rights
</div>
<img src="images/logo.jpg" />
</div>

<!-----Footer Finish------->
</body>
</html>




🏠CSS style code

@charset "utf-8";
/* CSS Document */
.main{ width:1366px; height:590px; margin:0 auto; }
.left{ width:380px; height:570px; float:left; margin-right:15px; }
.left .title{ width:370px; padding-left:10px; height:76px; padding-top:20px; background:#f8f8f8; margin-bottom:5px; }
.left .title p{ font-size:18px; color:#3c3c3c;}
.denglu{width: 380px;
height: 474px;
background: #f8f8f8;
margin-top: 20px;}
.delk{width: 380px;
height: 210px;
padding-top:20px;
}
.tit{ height: 70px;
width: 100%;
text-align: center;
line-height: 70px;
font-size: 30px;
font-weight: bolder;
}
.one{margin:10px 0}
.one label{width:100px;float:left;text-align:right;height:20px;line-height:40px}
.one input{border:1px solid #ccc;height:20px}.two{padding-left:100px}
.reda{color:red}.a2{width:100px;margin-left:5px;padding:2px;background:#ccc}
.error{background:#ccc url(../images/error.gif) no-repeat;padding-left:25px;padding-right:3px}
.righta{background:#ccc url(../images/righta.gif) no-repeat;padding-left:25px;padding-right:3px}
.btn{background: #ffb72f;
width: 50px;
border: none;
padding: 3px;
color: #fff;}
.di span{ color:#00aaef}
.right{ width:921px; padding:25px; height:540px; float:left; background:#f8f8f8}
.right .box1{ width:921px; height:250px; }
.right .box1 img{ width:440px; height:248px; float:right; margin-left:30px;}
.box1 .wen{ width:450px; float:left;}
.box1 h1{ color: #3c3c3c;
font-size: 24px;
width: 100%;
margin-bottom:20px;}
.box1 p{ display: block;
font-size: 16px;
width: 100%;
line-height:27px;
text-indent:2em;
}

.right .box2{ width:921px; height:257px; margin-top:30px;}

.right .box2 img{ width:447px; height:253px; float:left; margin-right:30px;}
.box2 .wen{ width:440px; float:left;}
.box2 h1{ color: #3c3c3c;
font-size: 24px;
width: 100%;
margin-bottom:20px;}
.box2 p{ display: block;
font-size: 16px;
width: 100%;
line-height:27px;
text-indent:2em;}





5. 🎁More source code

1. If my blog is helpful to you, please "👍Like" "✍️Comment" "💙Favorite" one click and three links!

2. 💗[👇🏻👇🏻👇🏻🉑Follow me | Get more source code] Take you to learn various front-end plug-ins, 3D cool effects, picture display, text effects, as well as website templates, college graduate HTML templates, etc.!

📣Technical issues related to the above content💌Welcome to exchange and learn together👇🏻👇🏻👇🏻

Tags: Front-end dreamweaver

Posted by glence on Fri, 07 Oct 2022 04:28:22 +0300