🌩️ 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
U11BG Pet Dog (10 pages)
🧩 2. Picture demo
4. 💒 website code
🧱HTML structure code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>pet fan network</title>
<link rel="stylesheet" type="text/css" href="css/common.css"/>
</head>
<body>
<div class="container">
<div class="wrapper">
<div class="header">
<a href="index.html" class="logo">pet fan network</a>
<a href="login.html" class="login">Log in</a>
<a href="register.html" class="register">register</a>
</div>
<div class="nav">
<a href="index.html">Pet Home</a>
<a href="view1.html">canine origin</a>
<a href="view2.html">genetic code</a>
<a href="view3.html">Civilization influence</a>
<a href="view4.html">Morphological characteristics</a>
<a href="view5.html">living habits</a>
<a href="view6.html">main behavior</a>
<a href="view7.html">domestication</a>
</div>
<div class="focus">
<a href="view1.html"><img src="images/focus1.jpg"/></a>
</div>
<div class="list">
<h2>canine origin</h2>
<a href="view1.html"><img src="images/view1.jpg"/></a>
<p><a href="view1.html">Dogs belong to Chordate, Vertebrate, Mammalia, Eutheria, Carnivora, Schizopod, and Canidae. Also known as "dog" in Chinese, dogs are distributed all over the world. Dogs and horses, cattle, sheep, pigs, chickens are called "six animals". Some scientists believe that dogs were domesticated from gray wolves by early humans.</a></p>
</div>
<div class="text">
<h2>genetic code</h2>
<p><a href="view2.html">in the past 1.4 In ten thousand years, after continuous domestication, more than 400 kinds of dogs have been produced. Each has a unique physique, coat color, and habits. To discover genetic mutations responsible for specific traits in dogs, 2009 Akey et al analyzed the genomes of 275 domestic dogs from 10 breeds. Previous research has identified genes responsible for specific traits in places of origin, such as the short legs of dachshunds. They analyzed a range of dog breeds to determine the impact of centuries of selective breeding on the entire dog genome.
</a></p>
<p><a href="view2.html">2012 year Chen They classified and sequenced the olfactory receptor gene families of dogs and wolves, and found that due to reproductive isolation caused by domestication, the evolutionary directions of olfactory receptor genes in dogs and wolves were inconsistent, and the olfactory receptor gene sequences in Chinese rural dogs were relatively conservative. dog-generated maltase-Glucoamylase is 12-fold more due to several mutations in the gene for this enzyme.</a></p>
</div>
<div class="text">
<h2>Civilization influence</h2>
<p><a href="view3.html">In the strata of Zhoujiayoufang, Yushu County, Jilin, China, that is, the late Pleistocene of the Paleolithic, about 2 BC.6 Ten thousand～In 10,000 B.C., a large number of mammalian fossils were discovered. In addition to human fossils, a "semi-fossil" skull of a domestic dog appeared. While some believe it belongs to the fossils of Pleistocene animals, more experts believe they are the remains of Holocene or modern animals. The remains of these Paleolithic domestic dogs can indicate that the residents of Northeast China have begun to domesticate and domesticate dogs.</a></p>
<p><a href="view3.html">It can be seen that Northeast China and Mongolia were the centers of domestic dog domestication in the late Paleolithic and early and middle Neolithic periods. In addition, bone fossils of the late Holocene domestic dog have been unearthed in Anyang, Henan, Cishan, Hebei, Banpo, Xi'an, Shaanxi, Dawenkou, Shandong, Changzhou, Jiangsu. one of the centers.</a></p>
</div>
<div class="line">
<a href="view4.html"><img src="images/view4.jpg"/></a>
<h2>Morphological characteristics</h2>
<p><a href="view4.html">Dogs' olfactory sensitivity ranks first among animals, and blind dogs can use their noses to live like normal dogs. The dog's sensitive sense of smell mainly manifests in two aspects: one is the sensitivity to smell; the other is the ability to distinguish smell. Sensitivity will vary depending on the type of flavor.</a></p>
</div>
<div class="line">
<a href="view5.html"><img src="images/view5.jpg"/></a>
<h2>living habits</h2>
<p><a href="view5.html">Dogs love to chew on bones. This is also the habit left by biting the prey in the original ecology. We need to give it some bones often when feeding it. (Remember: don't use poultry bones, it may pierce the dog's stomach). Dogs generally have a habit of feeding on humans and their own feces to varying degrees.</a></p>
</div>
<div class="line">
<a href="view6.html"><img src="images/view6.jpg"/></a>
<h2>main behavior</h2>
<p><a href="view6.html">Dogs also have a "hierarchy" when they live in groups. Establishing such an order can maintain the stability of the entire group and reduce the vicious fights and wars caused by competition for food, living space and the opposite sex. Before the dog lays down, it always turns around to make sure that there is no danger, and then it will sleep peacefully.</a></p>
</div>
<div class="line">
<a href="view7.html"><img src="images/view7.jpg"/></a>
<h2>domestication</h2>
<p><a href="view7.html">The biological origin of dogs can be traced back to tens of millions of years ago, and the domestication history of dogs was about 15,000 years ago in the Mesolithic Age. Some scientists even argued from a genetic point of view that it may have been 100,000 years ago. , As early as ancient times, dogs have been domesticated by humans.</a></p>
</div>
<div class="footer">
Copyright @ 2021 chongmi.com All Rights Reserved. All rights reserved
</div>
</div>
</div>
</body>
</html>
🏠CSS style code
@charset "utf-8";
*{margin:0;padding:0;box-sizing:border-box;
}
html body{font-size:12px;font-family:"Microsoft YaHei";color:#555;background-color:#efeae4;
}
a{color:#555;text-decoration:none;
}
.container{width:1000px;margin:0 auto;overflow:hidden;
}
.wrapper{float:left;width:1000px;background-color:#fff;
}
.header{float:left;width:1000px;height:80px;background-color:#dc9158;
}
.header a{font-weight:bold;color:#fff;
}
.header a.logo{float:left;margin:15px 0 0 24px;font-size:30px;
}
.header a.login{float:right;margin:32px 24px 0 0;font-size:15px;
}
.header a.register{float:right;margin:32px 25px 0 0;font-size:15px;
}
.nav{float:left;width:1000px;height:43px;line-height:43px;font-size:14px;font-weight:bold;background-color:#ffdfb6;
}
.nav a{margin:0 43px 0 25px;color:#a9836c;
}
.nav a:nth-last-child(1){margin-right:0;
}
.focus{float:left;width:1000px;
}
.focus img{float:left;width:1000px;height:450px;
}
.list{float:left;width:300px;height:380px;margin:30px 0 0 25px;
}
.list h2{float:left;width:300px;height:30px;line-height:30px;font-size:18px;
}
.list img{float:left;width:300px;height:210px;margin-top:10px;
}
.list p{float:left;width:300px;line-height:27px;margin-top:10px;
}
.text{float:left;width:300px;height:380px;margin:30px 0 0 25px;
}
.text h2{float:left;width:300px;height:30px;line-height:30px;font-size:18px;
}
.text p{float:left;width:300px;line-height:27px;margin-top:7px;
}
.line{float:left;width:462px;margin:30px 0 10px 25px;
}
.line img{float:left;width:230px;height:160px;
}
.line h2{float:right;width:220px;height:25px;line-height:25px;font-size:16px;
}
.line p{float:right;width:220px;line-height:27px;margin-top:5px;
}
.word{float:left;width:1000px;padding-bottom:10px;
}
.word h2{float:left;width:900px;height:30px;line-height:30px;margin:30px 0 10px 50px;font-size:18px;text-align:center;
}
.word img{float:left;width:900px;margin:10px 0 10px 50px;
}
.word p{float:left;width:900px;line-height:27px;margin:5px 0 0 50px;text-indent:25px;
}
.work{float:left;width:1000px;padding-bottom:10px;
}
.work h2{float:left;width:900px;height:30px;line-height:30px;margin:30px 0 0 50px;font-size:18px;text-align:center;
}
.work article{float:left;width:425px;margin:20px 0 0 50px;
}
.work article h3{float:left;width:425px;height:30px;line-height:30px;margin-top:5px;text-align:center;
}
.work article p{float:left;width:425px;line-height:28px;margin-top:5px;
}
.into{float:left;width:1000px;min-height:500px;padding:60px 0;
}
.into p{float:left;width:1000px;height:55px;margin-top:10px;
}
.into p span{float:left;width:330px;height:60px;line-height:60px;font-size:14px;text-align:right;
}
.into p input{float:left;width:330px;height:35px;margin:15px 0 0 10px;
}
.into p b{float:left;width:130px;height:60px;line-height:60px;margin-left:20px;font-size:14px;font-weight:normal;
}
.into p input.submit{letter-spacing:3px;color:#fff;background-color:#dc9158;border:0;
}
.footer{float:left;width:1000px;height:80px;line-height:80px;margin-top:30px;text-align:center;color:#fff;background-color:#dc9158;
}
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👇🏻👇🏻👇🏻